Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE html><html lang=en-US-x-hixie><title>HTML5 (including next generation additions still in development)</title><script>
      2    var loadTimer = new Date();
      3    var current_revision = "r" + "$Revision: 5097 $".substr(11);
      4    current_revision = current_revision.substr(0, current_revision.length - 2);
      5    var last_known_revision = current_revision;
      6    function getCookie(name) {
      7      var params = location.search.substr(1).split("&");
      8      for (var index = 0; index < params.length; index++) {
      9        if (params[index] == name)
     10          return "1";
     11        var data = params[index].split("=");
     12        if (data[0] == name)
     13          return unescape(data[1]);
     14      }
     15      var cookies = document.cookie.split("; ");
     16      for (var index = 0; index < cookies.length; index++) {
     17        var data = cookies[index].split("=");
     18        if (data[0] == name)
     19          return unescape(data[1]);
     20      }
     21      return null;
     22    }
     23    var currentAlert;
     24    var currentAlertTimeout;
     25    function showAlert(s, href) {
     26      if (!currentAlert) {
     27        currentAlert = document.createElement('div');
     28        currentAlert.id = 'alert';
     29        var x = document.createElement('button');
     30        x.textContent = '\u2573';
     31        x.onclick = closeAlert2;
     32        currentAlert.appendChild(x);
     33        currentAlert.appendChild(document.createElement('span'));
     34        currentAlert.onmousemove = function () {
     35          clearTimeout(currentAlertTimeout);
     36          currentAlert.className = '';
     37          currentAlertTimeout = setTimeout(closeAlert, 10000);
     38        }
     39        document.body.appendChild(currentAlert);
     40      } else {
     41        clearTimeout(currentAlertTimeout);
     42        currentAlert.className = '';
     43      }
     44      currentAlert.lastChild.textContent = s + ' ';
     45      if (href) {
     46        var link = document.createElement('a');
     47        link.href = href;
     48        link.textContent = href;
     49        currentAlert.lastChild.appendChild(link);
     50      }
     51      currentAlertTimeout = setTimeout(closeAlert, 10000);
     52    }
     53    function closeAlert() {
     54      clearTimeout(currentAlertTimeout);
     55      if (currentAlert) {
     56        currentAlert.className = 'closed';
     57        currentAlertTimeout = setTimeout(closeAlert2, 3000);
     58      }
     59    }
     60    function closeAlert2() {
     61      clearTimeout(currentAlertTimeout);
     62      if (currentAlert) {
     63        currentAlert.parentNode.removeChild(currentAlert);
     64        currentAlert = null;
     65      }
     66    }
     67    window.addEventListener('keydown', function (event) {
     68      if (event.keyCode == 27) {
     69        if (currentAlert)
     70          closeAlert2();
     71      } else {
     72        closeAlert();
     73      }
     74    }, false);
     75    window.addEventListener('scroll', function (event) {
     76      closeAlert();
     77    }, false);
     78    function load(script) {
     79      var e = document.createElement('script');
     80      e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
     81      document.body.appendChild(e);
     82    }
     83   </script><link href=/style/specification rel=stylesheet><link href=/images/icon rel=icon><style>
     84    .proposal { border: blue solid; padding: 1em; }
     85    .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
     86    #updatesStatus { display: none; }
     87    #updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }
     88    div.head .logo { width: 11em; margin-bottom: 20em; }
     89    #configUI { position: absolute; z-index: 20; top: 10em; right: 0; width: 11em; padding: 0 0.5em 0 0.5em; font-size: small; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em 0 0 1em; -moz-border-radius: 1em 0 0 1em; }
     90    #configUI p { margin: 0.75em 0; padding: 0.3em; }
     91    #configUI p label { display: block; }
     92    #configUI #updateUI, #configUI .loginUI { text-align: center; }
     93    #configUI input[type=button] { display: block; margin: auto; }
     94    #configUI :link, #configUI :visited { color: white; }
     95    #configUI :link:hover, #configUI :visited:hover { background: transparent; }
     96    #reviewer { position: fixed; bottom: 0; right: 0; padding: 0.15em 0.25em 0em 0.5em; white-space: nowrap; overflow: hidden; z-index: 30; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em 0 0 0; -moz-border-radius: 1em 0 0 0; max-width: 90%; }
     97    #reviewer input { max-width: 50%; }
     98    #reviewer * { font-size: small; }
     99    #reviewer.off > :not(:first-child) { display: none; }
    100    #alert { position: fixed; top: 20%; left: 20%; right: 20%; font-size: 2em; padding: 0.5em; z-index: 40; background: gray; background: rgba(32,32,32,0.9); color: white; border-radius: 1em; -moz-border-radius: 1em; -webkit-transition: opacity 1s linear; }
    101    #alert.closed { opacity: 0; }
    102    #alert button { position: absolute; top: -1em; right: 2em; border-radius: 1em 1em 0 0; border: none; line-height: 0.9; color: white; background: rgb(64,64,64); font-size: 0.6em; font-weight: 900; cursor: pointer; }
    103    #alert :link, #alert :visited { color: white; }
    104    #alert :link:hover, #alert :visited:hover { background: transparent; }
    105    @media print { #configUI { display: none; } }
    106    .rfc2119 { font-variant: small-caps; text-shadow: 0 0 0.5em yellow; position: static; }
    107    .rfc2119::after { position: absolute; left: 0; width: 25px; text-align: center; color: yellow; text-shadow: 0.075em 0.075em 0.2em black; }
    108    .rfc2119.m\ust::after { content: '\2605'; }
    109    .rfc2119.s\hould::after { content: '\2606'; }
    110    [hidden] { display: none; }
    111   </style><style type=text/css>
    112 
    113    .applies thead th > * { display: block; }
    114    .applies thead code { display: block; }
    115    .applies tbody th { whitespace: nowrap; }
    116    .applies td { text-align: center; }
    117    .applies .yes { background: yellow; }
    118 
    119    .matrix, .matrix td { border: none; text-align: right; }
    120    .matrix { margin-left: 2em; }
    121 
    122    .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
    123    .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
    124    .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
    125 
    126    #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
    127    #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
    128    #table-example-1 caption { padding-bottom: 0.5em; }
    129    #table-example-1 thead, #table-example-1 tbody { border: none; }
    130    #table-example-1 th, #table-example-1 td { border: solid thin; }
    131    #table-example-1 th { font-weight: normal; }
    132    #table-example-1 td { border-style: none solid; vertical-align: top; }
    133    #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
    134    #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
    135    #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
    136    #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
    137    #table-example-1 tbody td:first-child::after { content: leader(". "); }
    138    #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
    139    #table-example-1 tbody td:first-child + td { width: 10em; }
    140    #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
    141    #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
    142 
    143    .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
    144    .apple-table-examples * { font-family: "Times", serif; }
    145    .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
    146    .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
    147    .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
    148    .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
    149    .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
    150    .apple-table-examples td { text-align: right; vertical-align: top; }
    151    .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
    152    .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
    153    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    154    .apple-table-examples sup { line-height: 0; }
    155 
    156    .details-example img { vertical-align: top; }
    157 
    158    #named-character-references-table {
    159      font-size: 0.6em;
    160      column-width: 28em;
    161      column-gap: 1em;
    162      -moz-column-width: 28em;
    163      -moz-column-gap: 1em;
    164      -webkit-column-width: 28em;
    165      -webkit-column-gap: 1em;
    166    }
    167    #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
    168    #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; }
    169 
    170   </style><style>
    171    .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; }
    172   </style><link href=data:text/css, id=complete rel=stylesheet title="Complete specification"><link href=data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20} id=author rel="alternate stylesheet" title="Author documentation only"><link href=data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20} id=highlight rel="alternate stylesheet" title="Highlight implementation requirements"><link href=status.css rel=stylesheet><script>
    173    function init() {
    174      if (location.search == '?slow-browser')
    175        return;
    176      var configUI = document.createElement('div');
    177      configUI.id = 'configUI';
    178      document.body.appendChild(configUI);
    179      load('reviewer.js');
    180      if (document.documentElement.className == "" || document.documentElement.className == "split index")
    181        load('toc.js');
    182      load('styler.js');
    183      load('updater.js');
    184      load('dfn.js');
    185      load('status.js');
    186      if (getCookie('profile') == '1')
    187        document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
    188    }
    189   </script><body class=draft onload=init()>
    190 
    191   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    192    <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
    193     <h2 class="no-num no-toc">Draft Standard &mdash; 18 May 2010</h2>
    194    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    195    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    196    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
    197    <dl><dt>Multiple-page version:</dt>
    198     <dd><strong><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>http://whatwg.org/html5</a></strong></dd>
    199     <dt>One-page version:</dt>
    200     <dd><a href=http://www.whatwg.org/specs/web-apps/current-work/>http://www.whatwg.org/specs/web-apps/current-work/</a></dd>
    201     <dt>PDF print versions:</dt>
    202     <dd>A4: <a href=http://www.whatwg.org/specs/web-apps/current-work/html5-a4.pdf>http://www.whatwg.org/specs/web-apps/current-work/html5-a4.pdf</a></dd>
    203     <dd>Letter: <a href=http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf>http://www.whatwg.org/specs/web-apps/current-work/html5-letter.pdf</a></dd>
    204     <dt>Version history:</dt>
    205     <dd>Twitter messages (non-editorial changes only): <a href=http://twitter.com/WHATWG>http://twitter.com/WHATWG</a></dd>
    206     <dd>Commit-Watchers mailing list: <a href=http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org>http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a></dd>
    207     <dd>Interactive Web interface: <a href=http://html5.org/tools/web-apps-tracker>http://html5.org/tools/web-apps-tracker</a></dd>
    208     <dd>Subversion interface: <a href=http://svn.whatwg.org/>http://svn.whatwg.org/</a></dd>
    209     <dt>Issues:</dt>
    210     <dd>To view the open bugs: <a href="http://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&product=HTML+WG&long_desc_type=allwordssubstr&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&status_whiteboard_type=allwordssubstr&status_whiteboard=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=exact&email1=ian%40hixie.ch&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0=">HTML5 bug list</a></dd>
    211     <dd>To file bugs, use the "submit review comments" feature at the bottom of the window</dd>
    212     <dd>To send feedback by e-mail: <a href=http://www.whatwg.org/mailing-list>whatwg (a] whatwg.org</a></dd>
    213     <dd>To view and vote on e-mail feedback: <a href=http://www.whatwg.org/issues/>http://www.whatwg.org/issues/</a></dd>
    214     <dt>Editor:</dt>
    215     <dd>Ian Hickson, Google, ian (a] hixie.ch</dd>
    216    </dl><p class=copyright>&copy; Copyright 2004-2010 Apple Computer, Inc.,
    217    Mozilla Foundation, and Opera Software ASA.</p>
    218    <p class=copyright>You are granted a license to use, reproduce
    219    and create derivative works of this document.</p>
    220   </header><hr><h2 class="no-num no-toc" id=abstract>Abstract</h2>
    221 
    222   <p>This specification evolves HTML and its related APIs to ease the
    223   authoring of Web-based applications. The most recent additions
    224   include a <code><a href=#devices>device</a></code> element to enable video conferencing,
    225   as well as all the features added as part of the earlier HTML5
    226   effort.</p>
    227 
    228 
    229   <h2 class="no-num no-toc" id=status>Status of this document</h2>
    230 
    231   <p><strong>This is a work in progress!</strong> This document is
    232   changing on a daily if not hourly basis in response to comments and
    233   as a general part of its development process. Comments are very
    234   welcome, please send them to <a href=mailto:whatwg (a] whatwg.org>whatwg (a] whatwg.org</a>. Thank
    235   you.</p>
    236 
    237   <p><a href=http://www.whatwg.org/issues/>Outstanding feedback</a>
    238   is tracked; all e-mails sent to the list above receive a reply. The
    239   level of outstanding feedback is <a href=http://www.whatwg.org/issues/data.html>charted</a> to allow
    240   progress to be evaluated.</p>
    241 
    242   <p>Implementors should be aware that this specification is not
    243   stable. <strong>Implementors who are not taking part in the
    244   discussions are likely to find the specification changing out from
    245   under them in incompatible ways.</strong> Vendors interested in
    246   implementing this specification before it eventually reaches the
    247   call for implementations should join the <a href=/mailing-list>WHATWG mailing list</a> and take part in the
    248   discussions.</p>
    249 
    250   <p>This specification is intended to replace (be the new version of)
    251   what was previously the HTML5, HTML4, XHTML1, and DOM2 HTML
    252   specifications.</p>
    253 
    254 
    255 
    256   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    257   
    258 <!--begin-toc-->
    259 <ol class=toc>
    260  <li><a href=#introduction><span class=secno>1 </span>Introduction</a>
    261   <ol>
    262    <li><a href=#is-this-html5?><span class=secno>1.1 </span>Is this HTML5?</a></li>
    263    <li><a href=#background><span class=secno>1.2 </span>Background</a></li>
    264    <li><a href=#audience><span class=secno>1.3 </span>Audience</a></li>
    265    <li><a href=#scope><span class=secno>1.4 </span>Scope</a></li>
    266    <li><a href=#history-1><span class=secno>1.5 </span>History</a></li>
    267    <li><a href=#design-notes><span class=secno>1.6 </span>Design notes</a>
    268     <ol>
    269      <li><a href=#serializability-of-script-execution><span class=secno>1.6.1 </span>Serializability of script execution</a></li>
    270      <li><a href=#compliance-with-other-specifications><span class=secno>1.6.2 </span>Compliance with other specifications</a></ol></li>
    271    <li><a href=#html-vs-xhtml><span class=secno>1.7 </span>HTML vs XHTML</a></li>
    272    <li><a href=#structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</a>
    273     <ol>
    274      <li><a href=#how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</a></li>
    275      <li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></li>
    276    <li><a href=#a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</a></li>
    277    <li><a href=#conformance-requirements-for-authors><span class=secno>1.10 </span>Conformance requirements for authors</a>
    278     <ol>
    279      <li><a href=#presentational-markup><span class=secno>1.10.1 </span>Presentational markup</a></li>
    280      <li><a href=#syntax-errors><span class=secno>1.10.2 </span>Syntax errors</a></li>
    281      <li><a href=#restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3 </span>Restrictions on content models and on attribute values</a></ol></li>
    282    <li><a href=#recommended-reading><span class=secno>1.11 </span>Recommended reading</a></ol></li>
    283  <li><a href=#infrastructure><span class=secno>2 </span>Common infrastructure</a>
    284   <ol>
    285    <li><a href=#terminology><span class=secno>2.1 </span>Terminology</a>
    286     <ol>
    287      <li><a href=#resources><span class=secno>2.1.1 </span>Resources</a></li>
    288      <li><a href=#xml><span class=secno>2.1.2 </span>XML</a></li>
    289      <li><a href=#dom-trees><span class=secno>2.1.3 </span>DOM trees</a></li>
    290      <li><a href=#scripting-0><span class=secno>2.1.4 </span>Scripting</a></li>
    291      <li><a href=#plugins><span class=secno>2.1.5 </span>Plugins</a></li>
    292      <li><a href=#character-encodings><span class=secno>2.1.6 </span>Character encodings</a></ol></li>
    293    <li><a href=#conformance-requirements><span class=secno>2.2 </span>Conformance requirements</a>
    294     <ol>
    295      <li><a href=#dependencies><span class=secno>2.2.1 </span>Dependencies</a></li>
    296      <li><a href=#extensibility><span class=secno>2.2.2 </span>Extensibility</a></ol></li>
    297    <li><a href=#case-sensitivity-and-string-comparison><span class=secno>2.3 </span>Case-sensitivity and string comparison</a></li>
    298    <li><a href=#common-microsyntaxes><span class=secno>2.4 </span>Common microsyntaxes</a>
    299     <ol>
    300      <li><a href=#common-parser-idioms><span class=secno>2.4.1 </span>Common parser idioms</a></li>
    301      <li><a href=#boolean-attributes><span class=secno>2.4.2 </span>Boolean attributes</a></li>
    302      <li><a href=#keywords-and-enumerated-attributes><span class=secno>2.4.3 </span>Keywords and enumerated attributes</a></li>
    303      <li><a href=#numbers><span class=secno>2.4.4 </span>Numbers</a>
    304       <ol>
    305        <li><a href=#non-negative-integers><span class=secno>2.4.4.1 </span>Non-negative integers</a></li>
    306        <li><a href=#signed-integers><span class=secno>2.4.4.2 </span>Signed integers</a></li>
    307        <li><a href=#real-numbers><span class=secno>2.4.4.3 </span>Real numbers</a></li>
    308        <li><a href=#percentages-and-dimensions><span class=secno>2.4.4.4 </span>Percentages and lengths</a></li>
    309        <li><a href=#lists-of-integers><span class=secno>2.4.4.5 </span>Lists of integers</a></li>
    310        <li><a href=#lists-of-dimensions><span class=secno>2.4.4.6 </span>Lists of dimensions</a></ol></li>
    311      <li><a href=#dates-and-times><span class=secno>2.4.5 </span>Dates and times</a>
    312       <ol>
    313        <li><a href=#months><span class=secno>2.4.5.1 </span>Months</a></li>
    314        <li><a href=#dates><span class=secno>2.4.5.2 </span>Dates</a></li>
    315        <li><a href=#times><span class=secno>2.4.5.3 </span>Times</a></li>
    316        <li><a href=#local-dates-and-times><span class=secno>2.4.5.4 </span>Local dates and times</a></li>
    317        <li><a href=#global-dates-and-times><span class=secno>2.4.5.5 </span>Global dates and times</a></li>
    318        <li><a href=#weeks><span class=secno>2.4.5.6 </span>Weeks</a></li>
    319        <li><a href=#vaguer-moments-in-time><span class=secno>2.4.5.7 </span>Vaguer moments in time</a></ol></li>
    320      <li><a href=#colors><span class=secno>2.4.6 </span>Colors</a></li>
    321      <li><a href=#space-separated-tokens><span class=secno>2.4.7 </span>Space-separated tokens</a></li>
    322      <li><a href=#comma-separated-tokens><span class=secno>2.4.8 </span>Comma-separated tokens</a></li>
    323      <li><a href=#syntax-references><span class=secno>2.4.9 </span>References</a></li>
    324      <li><a href=#mq><span class=secno>2.4.10 </span>Media queries</a></ol></li>
    325    <li><a href=#urls><span class=secno>2.5 </span>URLs</a>
    326     <ol>
    327      <li><a href=#terminology-0><span class=secno>2.5.1 </span>Terminology</a></li>
    328      <li><a href=#dynamic-changes-to-base-urls><span class=secno>2.5.2 </span>Dynamic changes to base URLs</a></li>
    329      <li><a href=#interfaces-for-url-manipulation><span class=secno>2.5.3 </span>Interfaces for URL manipulation</a></ol></li>
    330    <li><a href=#fetching-resources><span class=secno>2.6 </span>Fetching resources</a>
    331     <ol>
    332      <li><a href=#concept-http-equivalent><span class=secno>2.6.1 </span>Protocol concepts</a></li>
    333      <li><a href=#encrypted-http-and-related-security-concerns><span class=secno>2.6.2 </span>Encrypted HTTP and related security concerns</a></li>
    334      <li><a href=#content-type-sniffing><span class=secno>2.6.3 </span>Determining the type of a resource</a></ol></li>
    335    <li><a href=#common-dom-interfaces><span class=secno>2.7 </span>Common DOM interfaces</a>
    336     <ol>
    337      <li><a href=#reflecting-content-attributes-in-idl-attributes><span class=secno>2.7.1 </span>Reflecting content attributes in IDL attributes</a></li>
    338      <li><a href=#collections-0><span class=secno>2.7.2 </span>Collections</a>
    339       <ol>
    340        <li><a href=#htmlcollection-0><span class=secno>2.7.2.1 </span>HTMLCollection</a></li>
    341        <li><a href=#htmlallcollection-0><span class=secno>2.7.2.2 </span>HTMLAllCollection</a></li>
    342        <li><a href=#htmlformcontrolscollection-0><span class=secno>2.7.2.3 </span>HTMLFormControlsCollection</a></li>
    343        <li><a href=#htmloptionscollection-0><span class=secno>2.7.2.4 </span>HTMLOptionsCollection</a></li>
    344        <li><a href=#htmlpropertiescollection-0><span class=secno>2.7.2.5 </span>HTMLPropertiesCollection</a></ol></li>
    345      <li><a href=#domtokenlist-0><span class=secno>2.7.3 </span>DOMTokenList</a></li>
    346      <li><a href=#domsettabletokenlist-0><span class=secno>2.7.4 </span>DOMSettableTokenList</a></li>
    347      <li><a href=#safe-passing-of-structured-data><span class=secno>2.7.5 </span>Safe passing of structured data</a></li>
    348      <li><a href=#domstringmap-0><span class=secno>2.7.6 </span>DOMStringMap</a></li>
    349      <li><a href=#dom-feature-strings><span class=secno>2.7.7 </span>DOM feature strings</a></li>
    350      <li><a href=#exceptions><span class=secno>2.7.8 </span>Exceptions</a></li>
    351      <li><a href=#garbage-collection><span class=secno>2.7.9 </span>Garbage collection</a></ol></li>
    352    <li><a href=#namespaces><span class=secno>2.8 </span>Namespaces</a></ol></li>
    353  <li><a href=#dom><span class=secno>3 </span>Semantics, structure, and APIs of HTML documents</a>
    354   <ol>
    355    <li><a href=#documents><span class=secno>3.1 </span>Documents</a>
    356     <ol>
    357      <li><a href=#documents-in-the-dom><span class=secno>3.1.1 </span>Documents in the DOM</a></li>
    358      <li><a href=#security-document><span class=secno>3.1.2 </span>Security</a></li>
    359      <li><a href=#resource-metadata-management><span class=secno>3.1.3 </span>Resource metadata management</a></li>
    360      <li><a href=#dom-tree-accessors><span class=secno>3.1.4 </span>DOM tree accessors</a></li>
    361      <li><a href=#creating-documents><span class=secno>3.1.5 </span>Creating documents</a></ol></li>
    362    <li><a href=#elements><span class=secno>3.2 </span>Elements</a>
    363     <ol>
    364      <li><a href=#semantics-0><span class=secno>3.2.1 </span>Semantics</a></li>
    365      <li><a href=#elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</a></li>
    366      <li><a href=#global-attributes><span class=secno>3.2.3 </span>Global attributes</a>
    367       <ol>
    368        <li><a href=#the-id-attribute><span class=secno>3.2.3.1 </span>The <code>id</code> attribute</a></li>
    369        <li><a href=#the-title-attribute><span class=secno>3.2.3.2 </span>The <code>title</code> attribute</a></li>
    370        <li><a href=#the-lang-and-xml:lang-attributes><span class=secno>3.2.3.3 </span>The <code title=attr-lang>lang</code> and <code title=attr-xml-lang>xml:lang</code> attributes</a></li>
    371        <li><a href=#the-xml:base-attribute-(xml-only)><span class=secno>3.2.3.4 </span>The <code>xml:base</code>
    372   attribute (XML only)</a></li>
    373        <li><a href=#the-dir-attribute><span class=secno>3.2.3.5 </span>The <code>dir</code> attribute</a></li>
    374        <li><a href=#classes><span class=secno>3.2.3.6 </span>The <code>class</code> attribute</a></li>
    375        <li><a href=#the-style-attribute><span class=secno>3.2.3.7 </span>The <code>style</code> attribute</a></li>
    376        <li><a href=#embedding-custom-non-visible-data><span class=secno>3.2.3.8 </span>Embedding custom non-visible data</a></ol></li>
    377      <li><a href=#element-definitions><span class=secno>3.2.4 </span>Element definitions</a>
    378       <ol>
    379        <li><a href=#attributes><span class=secno>3.2.4.1 </span>Attributes</a></ol></li>
    380      <li><a href=#content-models><span class=secno>3.2.5 </span>Content models</a>
    381       <ol>
    382        <li><a href=#kinds-of-content><span class=secno>3.2.5.1 </span>Kinds of content</a>
    383         <ol>
    384          <li><a href=#metadata-content-0><span class=secno>3.2.5.1.1 </span>Metadata content</a></li>
    385          <li><a href=#flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</a></li>
    386          <li><a href=#sectioning-content-0><span class=secno>3.2.5.1.3 </span>Sectioning content</a></li>
    387          <li><a href=#heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</a></li>
    388          <li><a href=#phrasing-content-0><span class=secno>3.2.5.1.5 </span>Phrasing content</a></li>
    389          <li><a href=#embedded-content-0><span class=secno>3.2.5.1.6 </span>Embedded content</a></li>
    390          <li><a href=#interactive-content-0><span class=secno>3.2.5.1.7 </span>Interactive content</a></ol></li>
    391        <li><a href=#transparent-content-models><span class=secno>3.2.5.2 </span>Transparent content models</a></li>
    392        <li><a href=#paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</a></ol></li>
    393      <li><a href=#annotations-for-assistive-technology-products-(aria)><span class=secno>3.2.6 </span>Annotations for assistive technology products (ARIA)</a></ol></li>
    394    <li><a href=#apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</a></li>
    395    <li><a href=#interactions-with-xpath-and-xslt><span class=secno>3.4 </span>Interactions with XPath and XSLT</a></li>
    396    <li><a href=#dynamic-markup-insertion><span class=secno>3.5 </span>Dynamic markup insertion</a>
    397     <ol>
    398      <li><a href=#opening-the-input-stream><span class=secno>3.5.1 </span>Opening the input stream</a></li>
    399      <li><a href=#closing-the-input-stream><span class=secno>3.5.2 </span>Closing the input stream</a></li>
    400      <li><a href=#document.write()><span class=secno>3.5.3 </span><code title=dom-document-write>document.write()</code></a></li>
    401      <li><a href=#document.writeln()><span class=secno>3.5.4 </span><code title=dom-document-writeln>document.writeln()</code></a></li>
    402      <li><a href=#innerhtml><span class=secno>3.5.5 </span><code title=dom-innerHTML>innerHTML</code></a></li>
    403      <li><a href=#outerhtml><span class=secno>3.5.6 </span><code title=dom-outerHTML>outerHTML</code></a></li>
    404      <li><a href=#insertadjacenthtml()><span class=secno>3.5.7 </span><code title=dom-insertAdjacentHTML>insertAdjacentHTML()</code></a></ol></ol></li>
    405  <li><a href=#semantics><span class=secno>4 </span>The elements of HTML</a>
    406   <ol>
    407    <li><a href=#the-root-element><span class=secno>4.1 </span>The root element</a>
    408     <ol>
    409      <li><a href=#the-html-element-0><span class=secno>4.1.1 </span>The <code>html</code> element</a></ol></li>
    410    <li><a href=#document-metadata><span class=secno>4.2 </span>Document metadata</a>
    411     <ol>
    412      <li><a href=#the-head-element-0><span class=secno>4.2.1 </span>The <code>head</code> element</a></li>
    413      <li><a href=#the-title-element-0><span class=secno>4.2.2 </span>The <code>title</code> element</a></li>
    414      <li><a href=#the-base-element><span class=secno>4.2.3 </span>The <code>base</code> element</a></li>
    415      <li><a href=#the-link-element><span class=secno>4.2.4 </span>The <code>link</code> element</a></li>
    416      <li><a href=#meta><span class=secno>4.2.5 </span>The <code>meta</code> element</a>
    417       <ol>
    418        <li><a href=#standard-metadata-names><span class=secno>4.2.5.1 </span>Standard metadata names</a></li>
    419        <li><a href=#other-metadata-names><span class=secno>4.2.5.2 </span>Other metadata names</a></li>
    420        <li><a href=#pragma-directives><span class=secno>4.2.5.3 </span>Pragma directives</a></li>
    421        <li><a href=#other-pragma-directives><span class=secno>4.2.5.4 </span>Other pragma directives</a></li>
    422        <li><a href=#charset><span class=secno>4.2.5.5 </span>Specifying the document's character encoding</a></ol></li>
    423      <li><a href=#the-style-element><span class=secno>4.2.6 </span>The <code>style</code> element</a></li>
    424      <li><a href=#styling><span class=secno>4.2.7 </span>Styling</a></ol></li>
    425    <li><a href=#scripting-1><span class=secno>4.3 </span>Scripting</a>
    426     <ol>
    427      <li><a href=#script><span class=secno>4.3.1 </span>The <code>script</code> element</a>
    428       <ol>
    429        <li><a href=#scriptingLanguages><span class=secno>4.3.1.1 </span>Scripting languages</a></li>
    430        <li><a href=#restrictions-for-contents-of-script-elements><span class=secno>4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li>
    431        <li><a href=#inline-documentation-for-external-scripts><span class=secno>4.3.1.3 </span>Inline documentation for external scripts</a></ol></li>
    432      <li><a href=#the-noscript-element><span class=secno>4.3.2 </span>The <code>noscript</code> element</a></ol></li>
    433    <li><a href=#sections><span class=secno>4.4 </span>Sections</a>
    434     <ol>
    435      <li><a href=#the-body-element-0><span class=secno>4.4.1 </span>The <code>body</code> element</a></li>
    436      <li><a href=#the-section-element><span class=secno>4.4.2 </span>The <code>section</code> element</a></li>
    437      <li><a href=#the-nav-element><span class=secno>4.4.3 </span>The <code>nav</code> element</a></li>
    438      <li><a href=#the-article-element><span class=secno>4.4.4 </span>The <code>article</code> element</a></li>
    439      <li><a href=#the-aside-element><span class=secno>4.4.5 </span>The <code>aside</code> element</a></li>
    440      <li><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <code>h1</code>, <code>h2</code>,
    441   <code>h3</code>, <code>h4</code>,
    442   <code>h5</code>, and <code>h6</code>
    443   elements</a></li>
    444      <li><a href=#the-hgroup-element><span class=secno>4.4.7 </span>The <code>hgroup</code> element</a></li>
    445      <li><a href=#the-header-element><span class=secno>4.4.8 </span>The <code>header</code> element</a></li>
    446      <li><a href=#the-footer-element><span class=secno>4.4.9 </span>The <code>footer</code> element</a></li>
    447      <li><a href=#the-address-element><span class=secno>4.4.10 </span>The <code>address</code> element</a></li>
    448      <li><a href=#headings-and-sections><span class=secno>4.4.11 </span>Headings and sections</a>
    449       <ol>
    450        <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></ol></li>
    451    <li><a href=#grouping-content><span class=secno>4.5 </span>Grouping content</a>
    452     <ol>
    453      <li><a href=#the-p-element><span class=secno>4.5.1 </span>The <code>p</code> element</a></li>
    454      <li><a href=#the-hr-element><span class=secno>4.5.2 </span>The <code>hr</code> element</a></li>
    455      <li><a href=#the-pre-element><span class=secno>4.5.3 </span>The <code>pre</code> element</a></li>
    456      <li><a href=#the-blockquote-element><span class=secno>4.5.4 </span>The <code>blockquote</code> element</a></li>
    457      <li><a href=#the-ol-element><span class=secno>4.5.5 </span>The <code>ol</code> element</a></li>
    458      <li><a href=#the-ul-element><span class=secno>4.5.6 </span>The <code>ul</code> element</a></li>
    459      <li><a href=#the-li-element><span class=secno>4.5.7 </span>The <code>li</code> element</a></li>
    460      <li><a href=#the-dl-element><span class=secno>4.5.8 </span>The <code>dl</code> element</a></li>
    461      <li><a href=#the-dt-element><span class=secno>4.5.9 </span>The <code>dt</code> element</a></li>
    462      <li><a href=#the-dd-element><span class=secno>4.5.10 </span>The <code>dd</code> element</a></li>
    463      <li><a href=#the-figure-element><span class=secno>4.5.11 </span>The <code>figure</code> element</a></li>
    464      <li><a href=#the-figcaption-element><span class=secno>4.5.12 </span>The <code>figcaption</code> element</a></li>
    465      <li><a href=#the-div-element><span class=secno>4.5.13 </span>The <code>div</code> element</a></ol></li>
    466    <li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
    467     <ol>
    468      <li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
    469      <li><a href=#the-em-element><span class=secno>4.6.2 </span>The <code>em</code> element</a></li>
    470      <li><a href=#the-strong-element><span class=secno>4.6.3 </span>The <code>strong</code> element</a></li>
    471      <li><a href=#the-small-element><span class=secno>4.6.4 </span>The <code>small</code> element</a></li>
    472      <li><a href=#the-cite-element><span class=secno>4.6.5 </span>The <code>cite</code> element</a></li>
    473      <li><a href=#the-q-element><span class=secno>4.6.6 </span>The <code>q</code> element</a></li>
    474      <li><a href=#the-dfn-element><span class=secno>4.6.7 </span>The <code>dfn</code> element</a></li>
    475      <li><a href=#the-abbr-element><span class=secno>4.6.8 </span>The <code>abbr</code> element</a></li>
    476      <li><a href=#the-time-element><span class=secno>4.6.9 </span>The <code>time</code> element</a></li>
    477      <li><a href=#the-code-element><span class=secno>4.6.10 </span>The <code>code</code> element</a></li>
    478      <li><a href=#the-var-element><span class=secno>4.6.11 </span>The <code>var</code> element</a></li>
    479      <li><a href=#the-samp-element><span class=secno>4.6.12 </span>The <code>samp</code> element</a></li>
    480      <li><a href=#the-kbd-element><span class=secno>4.6.13 </span>The <code>kbd</code> element</a></li>
    481      <li><a href=#the-sub-and-sup-elements><span class=secno>4.6.14 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
    482      <li><a href=#the-i-element><span class=secno>4.6.15 </span>The <code>i</code> element</a></li>
    483      <li><a href=#the-b-element><span class=secno>4.6.16 </span>The <code>b</code> element</a></li>
    484      <li><a href=#the-mark-element><span class=secno>4.6.17 </span>The <code>mark</code> element</a></li>
    485      <li><a href=#the-ruby-element><span class=secno>4.6.18 </span>The <code>ruby</code> element</a></li>
    486      <li><a href=#the-rt-element><span class=secno>4.6.19 </span>The <code>rt</code> element</a></li>
    487      <li><a href=#the-rp-element><span class=secno>4.6.20 </span>The <code>rp</code> element</a></li>
    488      <li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
    489      <li><a href=#the-span-element><span class=secno>4.6.22 </span>The <code>span</code> element</a></li>
    490      <li><a href=#the-br-element><span class=secno>4.6.23 </span>The <code>br</code> element</a></li>
    491      <li><a href=#the-wbr-element><span class=secno>4.6.24 </span>The <code>wbr</code> element</a></li>
    492      <li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
    493    <li><a href=#edits><span class=secno>4.7 </span>Edits</a>
    494     <ol>
    495      <li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
    496      <li><a href=#the-del-element><span class=secno>4.7.2 </span>The <code>del</code> element</a></li>
    497      <li><a href=#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>
    498      <li><a href=#edits-and-paragraphs><span class=secno>4.7.4 </span>Edits and paragraphs</a></li>
    499      <li><a href=#edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</a></ol></li>
    500    <li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
    501     <ol>
    502      <li><a href=#the-img-element><span class=secno>4.8.1 </span>The <code>img</code> element</a>
    503       <ol>
    504        <li><a href=#alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</a>
    505         <ol>
    506          <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</a></li>
    507          <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
    508          <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
    509          <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
    510          <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</a></li>
    511          <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</a></li>
    512          <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</a></li>
    513          <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</a></li>
    514          <li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</a></li>
    515          <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</a></li>
    516          <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
    517          <li><a href=#general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</a></li>
    518          <li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
    519          <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
    520      <li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
    521      <li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
    522      <li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
    523      <li><a href=#the-param-element><span class=secno>4.8.5 </span>The <code>param</code> element</a></li>
    524      <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
    525      <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
    526      <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
    527      <li><a href=#the-track-element><span class=secno>4.8.9 </span>The <code>track</code> element</a></li>
    528      <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
    529       <ol>
    530        <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
    531        <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
    532        <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
    533        <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
    534        <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
    535        <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
    536        <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
    537        <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
    538        <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
    539        <li><a href=#timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</a>
    540         <ol>
    541          <li><a href=#timed-track-model><span class=secno>4.8.10.10.1 </span>Timed track model</a></li>
    542          <li><a href=#sourcing-in-band-timed-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band timed tracks</a></li>
    543          <li><a href=#sourcing-out-of-band-timed-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band timed tracks</a></li>
    544          <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues><span class=secno>4.8.10.10.4 </span>Guidelines for exposing cues in various formats as
    545   timed track cues</a></li>
    546          <li><a href=#timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</a></li>
    547          <li><a href=#cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</a></ol></li>
    548        <li><a href=#websrt><span class=secno>4.8.10.11 </span>WebSRT</a>
    549         <ol>
    550          <li><a href=#syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</a></li>
    551          <li><a href=#parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</a></ol></li>
    552        <li><a href=#user-interface><span class=secno>4.8.10.12 </span>User interface</a></li>
    553        <li><a href=#time-ranges><span class=secno>4.8.10.13 </span>Time ranges</a></li>
    554        <li><a href=#mediaevents><span class=secno>4.8.10.14 </span>Event summary</a></li>
    555        <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</a></ol></li>
    556      <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
    557       <ol>
    558        <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
    559         <ol>
    560          <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
    561          <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
    562          <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
    563          <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
    564          <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
    565          <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
    566          <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
    567          <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
    568          <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
    569          <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
    570          <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
    571          <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
    572          <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
    573          <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
    574        <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
    575        <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
    576      <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
    577      <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
    578      <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
    579       <ol>
    580        <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
    581        <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
    582      <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
    583      <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
    584      <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
    585    <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
    586     <ol>
    587      <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
    588      <li><a href=#the-caption-element><span class=secno>4.9.2 </span>The <code>caption</code> element</a></li>
    589      <li><a href=#the-colgroup-element><span class=secno>4.9.3 </span>The <code>colgroup</code> element</a></li>
    590      <li><a href=#the-col-element><span class=secno>4.9.4 </span>The <code>col</code> element</a></li>
    591      <li><a href=#the-tbody-element><span class=secno>4.9.5 </span>The <code>tbody</code> element</a></li>
    592      <li><a href=#the-thead-element><span class=secno>4.9.6 </span>The <code>thead</code> element</a></li>
    593      <li><a href=#the-tfoot-element><span class=secno>4.9.7 </span>The <code>tfoot</code> element</a></li>
    594      <li><a href=#the-tr-element><span class=secno>4.9.8 </span>The <code>tr</code> element</a></li>
    595      <li><a href=#the-td-element><span class=secno>4.9.9 </span>The <code>td</code> element</a></li>
    596      <li><a href=#the-th-element><span class=secno>4.9.10 </span>The <code>th</code> element</a></li>
    597      <li><a href=#attributes-common-to-td-and-th-elements><span class=secno>4.9.11 </span>Attributes common to <code>td</code> and <code>th</code> elements</a></li>
    598      <li><a href=#processing-model-0><span class=secno>4.9.12 </span>Processing model</a>
    599       <ol>
    600        <li><a href=#forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</a></li>
    601        <li><a href=#header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></li>
    602      <li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
    603    <li><a href=#forms><span class=secno>4.10 </span>Forms</a>
    604     <ol>
    605      <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
    606       <ol>
    607        <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
    608        <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
    609        <li><a href=#configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</a></li>
    610        <li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></ol></li>
    611      <li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
    612      <li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
    613      <li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
    614      <li><a href=#the-legend-element><span class=secno>4.10.5 </span>The <code>legend</code> element</a></li>
    615      <li><a href=#the-label-element><span class=secno>4.10.6 </span>The <code>label</code> element</a></li>
    616      <li><a href=#the-input-element><span class=secno>4.10.7 </span>The <code>input</code> element</a>
    617       <ol>
    618        <li><a href=#states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
    619         <ol>
    620          <li><a href=#hidden-state><span class=secno>4.10.7.1.1 </span>Hidden state</a></li>
    621          <li><a href=#text-state-and-search-state><span class=secno>4.10.7.1.2 </span>Text state and Search state</a></li>
    622          <li><a href=#telephone-state><span class=secno>4.10.7.1.3 </span>Telephone state</a></li>
    623          <li><a href=#url-state><span class=secno>4.10.7.1.4 </span>URL state</a></li>
    624          <li><a href=#e-mail-state><span class=secno>4.10.7.1.5 </span>E-mail state</a></li>
    625          <li><a href=#password-state><span class=secno>4.10.7.1.6 </span>Password state</a></li>
    626          <li><a href=#date-and-time-state><span class=secno>4.10.7.1.7 </span>Date and Time state</a></li>
    627          <li><a href=#date-state><span class=secno>4.10.7.1.8 </span>Date state</a></li>
    628          <li><a href=#month-state><span class=secno>4.10.7.1.9 </span>Month state</a></li>
    629          <li><a href=#week-state><span class=secno>4.10.7.1.10 </span>Week state</a></li>
    630          <li><a href=#time-state><span class=secno>4.10.7.1.11 </span>Time state</a></li>
    631          <li><a href=#local-date-and-time-state><span class=secno>4.10.7.1.12 </span>Local Date and Time state</a></li>
    632          <li><a href=#number-state><span class=secno>4.10.7.1.13 </span>Number state</a></li>
    633          <li><a href=#range-state><span class=secno>4.10.7.1.14 </span>Range state</a></li>
    634          <li><a href=#color-state><span class=secno>4.10.7.1.15 </span>Color state</a></li>
    635          <li><a href=#checkbox-state><span class=secno>4.10.7.1.16 </span>Checkbox state</a></li>
    636          <li><a href=#radio-button-state><span class=secno>4.10.7.1.17 </span>Radio Button state</a></li>
    637          <li><a href=#file-upload-state><span class=secno>4.10.7.1.18 </span>File Upload state</a></li>
    638          <li><a href=#submit-button-state><span class=secno>4.10.7.1.19 </span>Submit Button state</a></li>
    639          <li><a href=#image-button-state><span class=secno>4.10.7.1.20 </span>Image Button state</a></li>
    640          <li><a href=#reset-button-state><span class=secno>4.10.7.1.21 </span>Reset Button state</a></li>
    641          <li><a href=#button-state><span class=secno>4.10.7.1.22 </span>Button state</a></ol></li>
    642        <li><a href=#common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code>input</code> element attributes</a>
    643         <ol>
    644          <li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
    645          <li><a href=#the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
    646          <li><a href=#the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
    647          <li><a href=#the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
    648          <li><a href=#the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
    649          <li><a href=#the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
    650          <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
    651          <li><a href=#the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
    652          <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
    653          <li><a href=#the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
    654          <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
    655        <li><a href=#common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code>input</code> element APIs</a></li>
    656        <li><a href=#common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</a></ol></li>
    657      <li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
    658      <li><a href=#the-select-element><span class=secno>4.10.9 </span>The <code>select</code> element</a></li>
    659      <li><a href=#the-datalist-element><span class=secno>4.10.10 </span>The <code>datalist</code> element</a></li>
    660      <li><a href=#the-optgroup-element><span class=secno>4.10.11 </span>The <code>optgroup</code> element</a></li>
    661      <li><a href=#the-option-element><span class=secno>4.10.12 </span>The <code>option</code> element</a></li>
    662      <li><a href=#the-textarea-element><span class=secno>4.10.13 </span>The <code>textarea</code> element</a></li>
    663      <li><a href=#the-keygen-element><span class=secno>4.10.14 </span>The <code>keygen</code> element</a></li>
    664      <li><a href=#the-output-element><span class=secno>4.10.15 </span>The <code>output</code> element</a></li>
    665      <li><a href=#the-progress-element><span class=secno>4.10.16 </span>The <code>progress</code> element</a></li>
    666      <li><a href=#the-meter-element><span class=secno>4.10.17 </span>The <code>meter</code> element</a></li>
    667      <li><a href=#association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</a></li>
    668      <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.19 </span>Attributes common to form controls</a>
    669       <ol>
    670        <li><a href=#naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</a></li>
    671        <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</a></li>
    672        <li><a href="#a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</a></li>
    673        <li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
    674        <li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
    675        <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></ol></li>
    676      <li><a href=#constraints><span class=secno>4.10.20 </span>Constraints</a>
    677       <ol>
    678        <li><a href=#definitions><span class=secno>4.10.20.1 </span>Definitions</a></li>
    679        <li><a href=#constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</a></li>
    680        <li><a href=#the-constraint-validation-api><span class=secno>4.10.20.3 </span>The constraint validation API</a></li>
    681        <li><a href=#security-forms><span class=secno>4.10.20.4 </span>Security</a></ol></li>
    682      <li><a href=#form-submission><span class=secno>4.10.21 </span>Form submission</a>
    683       <ol>
    684        <li><a href=#introduction-1><span class=secno>4.10.21.1 </span>Introduction</a></li>
    685        <li><a href=#implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</a></li>
    686        <li><a href=#form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</a></li>
    687        <li><a href=#url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</a></li>
    688        <li><a href=#multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</a></li>
    689        <li><a href=#plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</a></ol></li>
    690      <li><a href=#resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</a></li>
    691      <li><a href=#event-dispatch><span class=secno>4.10.23 </span>Event dispatch</a></ol></li>
    692    <li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
    693     <ol>
    694      <li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
    695      <li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
    696      <li><a href=#the-command><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
    697      <li><a href=#menus><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
    698       <ol>
    699        <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
    700        <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
    701        <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
    702        <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
    703      <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
    704       <ol>
    705        <li><a href=#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>
    706        <li><a href=#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>
    707        <li><a href=#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>
    708        <li><a href=#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>
    709        <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
    710   a command</a></li>
    711        <li><a href=#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>
    712        <li><a href=#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>
    713        <li><a href=#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></ol></li>
    714      <li><a href=#devices><span class=secno>4.11.6 </span>The <code>device</code> element</a>
    715       <ol>
    716        <li><a href=#stream-api><span class=secno>4.11.6.1 </span>Stream API</a></li>
    717        <li><a href=#peer-to-peer-connections><span class=secno>4.11.6.2 </span>Peer-to-peer connections</a></ol></ol></li>
    718    <li><a href=#links><span class=secno>4.12 </span>Links</a>
    719     <ol>
    720      <li><a href=#hyperlink-elements><span class=secno>4.12.1 </span>Hyperlink elements</a></li>
    721      <li><a href=#following-hyperlinks><span class=secno>4.12.2 </span>Following hyperlinks</a>
    722       <ol>
    723        <li><a href=#hyperlink-auditing><span class=secno>4.12.2.1 </span>Hyperlink auditing</a></ol></li>
    724      <li><a href=#linkTypes><span class=secno>4.12.3 </span>Link types</a>
    725       <ol>
    726        <li><a href=#link-type-alternate><span class=secno>4.12.3.1 </span>Link type "<code>alternate</code>"</a></li>
    727        <li><a href=#link-type-archives><span class=secno>4.12.3.2 </span>Link type "<code>archives</code>"</a></li>
    728        <li><a href=#link-type-author><span class=secno>4.12.3.3 </span>Link type "<code>author</code>"</a></li>
    729        <li><a href=#link-type-bookmark><span class=secno>4.12.3.4 </span>Link type "<code>bookmark</code>"</a></li>
    730        <li><a href=#link-type-external><span class=secno>4.12.3.5 </span>Link type "<code>external</code>"</a></li>
    731        <li><a href=#link-type-help><span class=secno>4.12.3.6 </span>Link type "<code>help</code>"</a></li>
    732        <li><a href=#rel-icon><span class=secno>4.12.3.7 </span>Link type "<code>icon</code>"</a></li>
    733        <li><a href=#link-type-license><span class=secno>4.12.3.8 </span>Link type "<code>license</code>"</a></li>
    734        <li><a href=#link-type-nofollow><span class=secno>4.12.3.9 </span>Link type "<code>nofollow</code>"</a></li>
    735        <li><a href=#link-type-noreferrer><span class=secno>4.12.3.10 </span>Link type "<code>noreferrer</code>"</a></li>
    736        <li><a href=#link-type-pingback><span class=secno>4.12.3.11 </span>Link type "<code>pingback</code>"</a></li>
    737        <li><a href=#link-type-prefetch><span class=secno>4.12.3.12 </span>Link type "<code>prefetch</code>"</a></li>
    738        <li><a href=#link-type-search><span class=secno>4.12.3.13 </span>Link type "<code>search</code>"</a></li>
    739        <li><a href=#link-type-stylesheet><span class=secno>4.12.3.14 </span>Link type "<code>stylesheet</code>"</a></li>
    740        <li><a href=#link-type-sidebar><span class=secno>4.12.3.15 </span>Link type "<code>sidebar</code>"</a></li>
    741        <li><a href=#link-type-tag><span class=secno>4.12.3.16 </span>Link type "<code>tag</code>"</a></li>
    742        <li><a href=#hierarchical-link-types><span class=secno>4.12.3.17 </span>Hierarchical link types</a>
    743         <ol>
    744          <li><a href=#link-type-index><span class=secno>4.12.3.17.1 </span>Link type "<code>index</code>"</a></li>
    745          <li><a href=#link-type-up><span class=secno>4.12.3.17.2 </span>Link type "<code>up</code>"</a></ol></li>
    746        <li><a href=#sequential-link-types><span class=secno>4.12.3.18 </span>Sequential link types</a>
    747         <ol>
    748          <li><a href=#link-type-first><span class=secno>4.12.3.18.1 </span>Link type "<code>first</code>"</a></li>
    749          <li><a href=#link-type-last><span class=secno>4.12.3.18.2 </span>Link type "<code>last</code>"</a></li>
    750          <li><a href=#link-type-next><span class=secno>4.12.3.18.3 </span>Link type "<code>next</code>"</a></li>
    751          <li><a href=#link-type-prev><span class=secno>4.12.3.18.4 </span>Link type "<code>prev</code>"</a></ol></li>
    752        <li><a href=#other-link-types><span class=secno>4.12.3.19 </span>Other link types</a></ol></ol></li>
    753    <li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
    754     <ol>
    755      <li><a href=#tag-clouds><span class=secno>4.13.1 </span>Tag clouds</a></li>
    756      <li><a href=#conversations><span class=secno>4.13.2 </span>Conversations</a></li>
    757      <li><a href=#footnotes><span class=secno>4.13.3 </span>Footnotes</a></ol></li>
    758    <li><a href=#matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
    759     <ol>
    760      <li><a href=#selectors><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
    761      <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
    762  <li><a href=#microdata><span class=secno>5 </span>Microdata</a>
    763   <ol>
    764    <li><a href=#introduction-2><span class=secno>5.1 </span>Introduction</a>
    765     <ol>
    766      <li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
    767      <li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
    768      <li><a href=#typed-items><span class=secno>5.1.3 </span>Typed items</a></li>
    769      <li><a href=#global-identifiers-for-items><span class=secno>5.1.4 </span>Global identifiers for items</a></li>
    770      <li><a href=#selecting-names-when-defining-vocabularies><span class=secno>5.1.5 </span>Selecting names when defining vocabularies</a></li>
    771      <li><a href=#using-the-microdata-dom-api><span class=secno>5.1.6 </span>Using the microdata DOM API</a></ol></li>
    772    <li><a href=#encoding-microdata><span class=secno>5.2 </span>Encoding microdata</a>
    773     <ol>
    774      <li><a href=#the-microdata-model><span class=secno>5.2.1 </span>The microdata model</a></li>
    775      <li><a href=#items><span class=secno>5.2.2 </span>Items</a></li>
    776      <li><a href=#names:-the-itemprop-attribute><span class=secno>5.2.3 </span>Names: the <code>itemprop</code> attribute</a></li>
    777      <li><a href=#values><span class=secno>5.2.4 </span>Values</a></li>
    778      <li><a href=#associating-names-with-items><span class=secno>5.2.5 </span>Associating names with items</a></ol></li>
    779    <li><a href=#microdata-dom-api><span class=secno>5.3 </span>Microdata DOM API</a></li>
    780    <li><a href=#mdvocabs><span class=secno>5.4 </span>Microdata vocabularies</a>
    781     <ol>
    782      <li><a href=#vcard><span class=secno>5.4.1 </span>vCard</a>
    783       <ol>
    784        <li><a href=#conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</a></li>
    785        <li><a href=#examples-1><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
    786      <li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a>
    787       <ol>
    788        <li><a href=#conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</a></li>
    789        <li><a href=#examples-2><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
    790      <li><a href=#licensing-works><span class=secno>5.4.3 </span>Licensing works</a>
    791       <ol>
    792        <li><a href=#conversion-to-rdf><span class=secno>5.4.3.1 </span>Conversion to RDF</a></li>
    793        <li><a href=#examples-3><span class=secno>5.4.3.2 </span>Examples</a></ol></ol></li>
    794    <li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
    795     <ol>
    796      <li><a href=#json><span class=secno>5.5.1 </span>JSON</a></li>
    797      <li><a href=#rdf><span class=secno>5.5.2 </span>RDF</a>
    798       <ol>
    799        <li><a href=#examples-4><span class=secno>5.5.2.1 </span>Examples</a></ol></li>
    800      <li><a href=#atom><span class=secno>5.5.3 </span>Atom</a></ol></ol></li>
    801  <li><a href=#browsers><span class=secno>6 </span>Loading Web pages</a>
    802   <ol>
    803    <li><a href=#windows><span class=secno>6.1 </span>Browsing contexts</a>
    804     <ol>
    805      <li><a href=#nested-browsing-contexts><span class=secno>6.1.1 </span>Nested browsing contexts</a>
    806       <ol>
    807        <li><a href=#navigating-nested-browsing-contexts-in-the-dom><span class=secno>6.1.1.1 </span>Navigating nested browsing contexts in the DOM</a></ol></li>
    808      <li><a href=#auxiliary-browsing-contexts><span class=secno>6.1.2 </span>Auxiliary browsing contexts</a>
    809       <ol>
    810        <li><a href=#navigating-auxiliary-browsing-contexts-in-the-dom><span class=secno>6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</a></ol></li>
    811      <li><a href=#secondary-browsing-contexts><span class=secno>6.1.3 </span>Secondary browsing contexts</a></li>
    812      <li><a href=#security-nav><span class=secno>6.1.4 </span>Security</a></li>
    813      <li><a href=#groupings-of-browsing-contexts><span class=secno>6.1.5 </span>Groupings of browsing contexts</a></li>
    814      <li><a href=#browsing-context-names><span class=secno>6.1.6 </span>Browsing context names</a></ol></li>
    815    <li><a href=#the-window-object><span class=secno>6.2 </span>The <code>Window</code> object</a>
    816     <ol>
    817      <li><a href=#security-window><span class=secno>6.2.1 </span>Security</a></li>
    818      <li><a href=#apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>6.2.2 </span>APIs for creating and navigating browsing contexts by name</a></li>
    819      <li><a href=#accessing-other-browsing-contexts><span class=secno>6.2.3 </span>Accessing other browsing contexts</a></li>
    820      <li><a href=#named-access-on-the-window-object><span class=secno>6.2.4 </span>Named access on the <code>Window</code> object</a></li>
    821      <li><a href=#garbage-collection-and-browsing-contexts><span class=secno>6.2.5 </span>Garbage collection and browsing contexts</a></li>
    822      <li><a href=#browser-interface-elements><span class=secno>6.2.6 </span>Browser interface elements</a></li>
    823      <li><a href=#the-windowproxy-object><span class=secno>6.2.7 </span>The <code>WindowProxy</code> object</a></ol></li>
    824    <li><a href=#origin-0><span class=secno>6.3 </span>Origin</a>
    825     <ol>
    826      <li><a href=#relaxing-the-same-origin-restriction><span class=secno>6.3.1 </span>Relaxing the same-origin restriction</a></ol></li>
    827    <li><a href=#history><span class=secno>6.4 </span>Session history and navigation</a>
    828     <ol>
    829      <li><a href=#the-session-history-of-browsing-contexts><span class=secno>6.4.1 </span>The session history of browsing contexts</a></li>
    830      <li><a href=#the-history-interface><span class=secno>6.4.2 </span>The <code>History</code> interface</a></li>
    831      <li><a href=#the-location-interface><span class=secno>6.4.3 </span>The <code>Location</code> interface</a>
    832       <ol>
    833        <li><a href=#security-location><span class=secno>6.4.3.1 </span>Security</a></ol></li>
    834      <li><a href=#history-notes><span class=secno>6.4.4 </span>Implementation notes for session history</a></ol></li>
    835    <li><a href=#browsing-the-web><span class=secno>6.5 </span>Browsing the Web</a>
    836     <ol>
    837      <li><a href=#navigating-across-documents><span class=secno>6.5.1 </span>Navigating across documents</a></li>
    838      <li><a href=#read-html><span class=secno>6.5.2 </span>Page load processing model for HTML files</a></li>
    839      <li><a href=#read-xml><span class=secno>6.5.3 </span>Page load processing model for XML files</a></li>
    840      <li><a href=#read-text><span class=secno>6.5.4 </span>Page load processing model for text files</a></li>
    841      <li><a href=#read-image><span class=secno>6.5.5 </span>Page load processing model for images</a></li>
    842      <li><a href=#read-plugin><span class=secno>6.5.6 </span>Page load processing model for content that uses plugins</a></li>
    843      <li><a href=#read-ua-inline><span class=secno>6.5.7 </span>Page load processing model for inline content that doesn't have a DOM</a></li>
    844      <li><a href=#scroll-to-fragid><span class=secno>6.5.8 </span>Navigating to a fragment identifier</a></li>
    845      <li><a href=#history-traversal><span class=secno>6.5.9 </span>History traversal</a>
    846       <ol>
    847        <li><a href=#event-definitions><span class=secno>6.5.9.1 </span>Event definitions</a></ol></li>
    848      <li><a href=#unloading-documents><span class=secno>6.5.10 </span>Unloading documents</a>
    849       <ol>
    850        <li><a href=#event-definition><span class=secno>6.5.10.1 </span>Event definition</a></ol></li>
    851      <li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
    852    <li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
    853     <ol>
    854      <li><a href=#introduction-3><span class=secno>6.6.1 </span>Introduction</a>
    855       <ol>
    856        <li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
    857      <li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
    858      <li><a href=#manifests><span class=secno>6.6.3 </span>The cache manifest syntax</a>
    859       <ol>
    860        <li><a href=#a-sample-manifest><span class=secno>6.6.3.1 </span>A sample manifest</a></li>
    861        <li><a href=#writing-cache-manifests><span class=secno>6.6.3.2 </span>Writing cache manifests</a></li>
    862        <li><a href=#parsing-cache-manifests><span class=secno>6.6.3.3 </span>Parsing cache manifests</a></ol></li>
    863      <li><a href=#downloading-or-updating-an-application-cache><span class=secno>6.6.4 </span>Downloading or updating an application cache</a></li>
    864      <li><a href=#the-application-cache-selection-algorithm><span class=secno>6.6.5 </span>The application cache selection algorithm</a></li>
    865      <li><a href=#changesToNetworkingModel><span class=secno>6.6.6 </span>Changes to the networking model</a></li>
    866      <li><a href=#expiring-application-caches><span class=secno>6.6.7 </span>Expiring application caches</a></li>
    867      <li><a href=#application-cache-api><span class=secno>6.6.8 </span>Application cache API</a></li>
    868      <li><a href=#browser-state><span class=secno>6.6.9 </span>Browser state</a></ol></ol></li>
    869  <li><a href=#webappapis><span class=secno>7 </span>Web application APIs</a>
    870   <ol>
    871    <li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
    872     <ol>
    873      <li><a href=#introduction-4><span class=secno>7.1.1 </span>Introduction</a></li>
    874      <li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
    875      <li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
    876       <ol>
    877        <li><a href=#definitions-0><span class=secno>7.1.3.1 </span>Definitions</a></li>
    878        <li><a href=#calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</a></li>
    879        <li><a href=#creating-scripts><span class=secno>7.1.3.3 </span>Creating scripts</a></li>
    880        <li><a href=#killing-scripts><span class=secno>7.1.3.4 </span>Killing scripts</a></ol></li>
    881      <li><a href=#event-loops><span class=secno>7.1.4 </span>Event loops</a>
    882       <ol>
    883        <li><a href=#definitions-1><span class=secno>7.1.4.1 </span>Definitions</a></li>
    884        <li><a href=#processing-model-2><span class=secno>7.1.4.2 </span>Processing model</a></li>
    885        <li><a href=#generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</a></ol></li>
    886      <li><a href=#javascript-protocol><span class=secno>7.1.5 </span>The <code title="">javascript:</code> protocol</a></li>
    887      <li><a href=#events><span class=secno>7.1.6 </span>Events</a>
    888       <ol>
    889        <li><a href=#event-handler-attributes><span class=secno>7.1.6.1 </span>Event handlers</a></li>
    890        <li><a href=#event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>7.1.6.2 </span>Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects</a></li>
    891        <li><a href=#event-firing><span class=secno>7.1.6.3 </span>Event firing</a></li>
    892        <li><a href=#events-and-the-window-object><span class=secno>7.1.6.4 </span>Events and the <code>Window</code> object</a></li>
    893        <li><a href=#runtime-script-errors><span class=secno>7.1.6.5 </span>Runtime script errors</a></ol></ol></li>
    894    <li><a href=#timers><span class=secno>7.2 </span>Timers</a></li>
    895    <li><a href=#user-prompts><span class=secno>7.3 </span>User prompts</a>
    896     <ol>
    897      <li><a href=#simple-dialogs><span class=secno>7.3.1 </span>Simple dialogs</a></li>
    898      <li><a href=#printing><span class=secno>7.3.2 </span>Printing</a></li>
    899      <li><a href=#dialogs-implemented-using-separate-documents><span class=secno>7.3.3 </span>Dialogs implemented using separate documents</a></ol></li>
    900    <li><a href=#system-state-and-capabilities><span class=secno>7.4 </span>System state and capabilities</a>
    901     <ol>
    902      <li><a href=#client-identification><span class=secno>7.4.1 </span>Client identification</a></li>
    903      <li><a href=#custom-handlers><span class=secno>7.4.2 </span>Custom scheme and content handlers</a>
    904       <ol>
    905        <li><a href=#security-and-privacy><span class=secno>7.4.2.1 </span>Security and privacy</a></li>
    906        <li><a href=#sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interface</a></ol></li>
    907      <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.4.3 </span>Manually releasing the storage mutex</a></ol></ol></li>
    908  <li><a href=#editing><span class=secno>8 </span>User interaction</a>
    909   <ol>
    910    <li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
    911    <li><a href=#activation><span class=secno>8.2 </span>Activation</a></li>
    912    <li><a href=#scrolling-elements-into-view><span class=secno>8.3 </span>Scrolling elements into view</a></li>
    913    <li><a href=#focus><span class=secno>8.4 </span>Focus</a>
    914     <ol>
    915      <li><a href=#sequential-focus-navigation><span class=secno>8.4.1 </span>Sequential focus navigation</a></li>
    916      <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
    917      <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
    918      <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
    919    <li><a href=#the-accesskey-attribute><span class=secno>8.5 </span>The <code>accesskey</code> attribute</a></li>
    920    <li><a href=#selection><span class=secno>8.6 </span>The text selection APIs</a>
    921     <ol>
    922      <li><a href=#documentSelection><span class=secno>8.6.1 </span>APIs for the browsing context selection</a></li>
    923      <li><a href=#textFieldSelection><span class=secno>8.6.2 </span>APIs for the text field selections</a></ol></li>
    924    <li><a href=#contenteditable><span class=secno>8.7 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
    925     <ol>
    926      <li><a href=#user-editing-actions><span class=secno>8.7.1 </span>User editing actions</a></li>
    927      <li><a href=#making-entire-documents-editable><span class=secno>8.7.2 </span>Making entire documents editable</a></ol></li>
    928    <li><a href=#spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</a></li>
    929    <li><a href=#dnd><span class=secno>8.9 </span>Drag and drop</a>
    930     <ol>
    931      <li><a href=#introduction-5><span class=secno>8.9.1 </span>Introduction</a></li>
    932      <li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
    933      <li><a href=#dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</a></li>
    934      <li><a href=#drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</a>
    935       <ol>
    936        <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.9.4.1 </span>When the drag-and-drop operation starts or ends in another
    937   document</a></li>
    938        <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.9.4.2 </span>When the drag-and-drop operation starts or ends in another
    939   application</a></ol></li>
    940      <li><a href=#the-draggable-attribute><span class=secno>8.9.5 </span>The <code>draggable</code> attribute</a></li>
    941      <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.9.6 </span>Security risks in the drag-and-drop model</a></ol></li>
    942    <li><a href=#undo><span class=secno>8.10 </span>Undo history</a>
    943     <ol>
    944      <li><a href=#definitions-2><span class=secno>8.10.1 </span>Definitions</a></li>
    945      <li><a href=#the-undomanager-interface><span class=secno>8.10.2 </span>The <code>UndoManager</code> interface</a></li>
    946      <li><a href=#undo:-moving-back-in-the-undo-transaction-history><span class=secno>8.10.3 </span>Undo: moving back in the undo transaction history</a></li>
    947      <li><a href=#redo:-moving-forward-in-the-undo-transaction-history><span class=secno>8.10.4 </span>Redo: moving forward in the undo transaction history</a></li>
    948      <li><a href=#the-undomanagerevent-interface-and-the-undo-and-redo-events><span class=secno>8.10.5 </span>The <code>UndoManagerEvent</code> interface and the <code title=event-undo>undo</code> and <code title=event-redo>redo</code> events</a></li>
    949      <li><a href=#implementation-notes><span class=secno>8.10.6 </span>Implementation notes</a></ol></li>
    950    <li><a href=#editing-apis><span class=secno>8.11 </span>Editing APIs</a></ol></li>
    951  <li><a href=#comms><span class=secno>9 </span>Communication</a>
    952   <ol>
    953    <li><a href=#event-definitions-0><span class=secno>9.1 </span>Event definitions</a></li>
    954    <li><a href=#web-messaging><span class=secno>9.2 </span>Cross-document messaging</a>
    955     <ol>
    956      <li><a href=#introduction-6><span class=secno>9.2.1 </span>Introduction</a></li>
    957      <li><a href=#security-postmsg><span class=secno>9.2.2 </span>Security</a>
    958       <ol>
    959        <li><a href=#authors><span class=secno>9.2.2.1 </span>Authors</a></li>
    960        <li><a href=#user-agents><span class=secno>9.2.2.2 </span>User agents</a></ol></li>
    961      <li><a href=#posting-messages><span class=secno>9.2.3 </span>Posting messages</a></ol></li>
    962    <li><a href=#channel-messaging><span class=secno>9.3 </span>Channel messaging</a>
    963     <ol>
    964      <li><a href=#introduction-7><span class=secno>9.3.1 </span>Introduction</a></li>
    965      <li><a href=#message-channels><span class=secno>9.3.2 </span>Message channels</a></li>
    966      <li><a href=#message-ports><span class=secno>9.3.3 </span>Message ports</a>
    967       <ol>
    968        <li><a href=#ports-and-garbage-collection><span class=secno>9.3.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
    969  <li><a href=#syntax><span class=secno>10 </span>The HTML syntax</a>
    970   <ol>
    971    <li><a href=#writing><span class=secno>10.1 </span>Writing HTML documents</a>
    972     <ol>
    973      <li><a href=#the-doctype><span class=secno>10.1.1 </span>The DOCTYPE</a></li>
    974      <li><a href=#elements-0><span class=secno>10.1.2 </span>Elements</a>
    975       <ol>
    976        <li><a href=#start-tags><span class=secno>10.1.2.1 </span>Start tags</a></li>
    977        <li><a href=#end-tags><span class=secno>10.1.2.2 </span>End tags</a></li>
    978        <li><a href=#attributes-0><span class=secno>10.1.2.3 </span>Attributes</a></li>
    979        <li><a href=#optional-tags><span class=secno>10.1.2.4 </span>Optional tags</a></li>
    980        <li><a href=#element-restrictions><span class=secno>10.1.2.5 </span>Restrictions on content models</a></li>
    981        <li><a href=#cdata-rcdata-restrictions><span class=secno>10.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></ol></li>
    982      <li><a href=#text-1><span class=secno>10.1.3 </span>Text</a>
    983       <ol>
    984        <li><a href=#newlines><span class=secno>10.1.3.1 </span>Newlines</a></ol></li>
    985      <li><a href=#character-references><span class=secno>10.1.4 </span>Character references</a></li>
    986      <li><a href=#cdata-sections><span class=secno>10.1.5 </span>CDATA sections</a></li>
    987      <li><a href=#comments><span class=secno>10.1.6 </span>Comments</a></ol></li>
    988    <li><a href=#parsing><span class=secno>10.2 </span>Parsing HTML documents</a>
    989     <ol>
    990      <li><a href=#overview-of-the-parsing-model><span class=secno>10.2.1 </span>Overview of the parsing model</a></li>
    991      <li><a href=#the-input-stream><span class=secno>10.2.2 </span>The input stream</a>
    992       <ol>
    993        <li><a href=#determining-the-character-encoding><span class=secno>10.2.2.1 </span>Determining the character encoding</a></li>
    994        <li><a href=#character-encodings-0><span class=secno>10.2.2.2 </span>Character encodings</a></li>
    995        <li><a href=#preprocessing-the-input-stream><span class=secno>10.2.2.3 </span>Preprocessing the input stream</a></li>
    996        <li><a href=#changing-the-encoding-while-parsing><span class=secno>10.2.2.4 </span>Changing the encoding while parsing</a></ol></li>
    997      <li><a href=#parse-state><span class=secno>10.2.3 </span>Parse state</a>
    998       <ol>
    999        <li><a href=#the-insertion-mode><span class=secno>10.2.3.1 </span>The insertion mode</a></li>
   1000        <li><a href=#the-stack-of-open-elements><span class=secno>10.2.3.2 </span>The stack of open elements</a></li>
   1001        <li><a href=#the-list-of-active-formatting-elements><span class=secno>10.2.3.3 </span>The list of active formatting elements</a></li>
   1002        <li><a href=#the-element-pointers><span class=secno>10.2.3.4 </span>The element pointers</a></li>
   1003        <li><a href=#other-parsing-state-flags><span class=secno>10.2.3.5 </span>Other parsing state flags</a></ol></li>
   1004      <li><a href=#tokenization><span class=secno>10.2.4 </span>Tokenization</a>
   1005       <ol>
   1006        <li><a href=#data-state><span class=secno>10.2.4.1 </span>Data state</a></li>
   1007        <li><a href=#character-reference-in-data-state><span class=secno>10.2.4.2 </span>Character reference in data state</a></li>
   1008        <li><a href=#rcdata-state><span class=secno>10.2.4.3 </span>RCDATA state</a></li>
   1009        <li><a href=#character-reference-in-rcdata-state><span class=secno>10.2.4.4 </span>Character reference in RCDATA state</a></li>
   1010        <li><a href=#rawtext-state><span class=secno>10.2.4.5 </span>RAWTEXT state</a></li>
   1011        <li><a href=#script-data-state><span class=secno>10.2.4.6 </span>Script data state</a></li>
   1012        <li><a href=#plaintext-state><span class=secno>10.2.4.7 </span>PLAINTEXT state</a></li>
   1013        <li><a href=#tag-open-state><span class=secno>10.2.4.8 </span>Tag open state</a></li>
   1014        <li><a href=#end-tag-open-state><span class=secno>10.2.4.9 </span>End tag open state</a></li>
   1015        <li><a href=#tag-name-state><span class=secno>10.2.4.10 </span>Tag name state</a></li>
   1016        <li><a href=#rcdata-less-than-sign-state><span class=secno>10.2.4.11 </span>RCDATA less-than sign state</a></li>
   1017        <li><a href=#rcdata-end-tag-open-state><span class=secno>10.2.4.12 </span>RCDATA end tag open state</a></li>
   1018        <li><a href=#rcdata-end-tag-name-state><span class=secno>10.2.4.13 </span>RCDATA end tag name state</a></li>
   1019        <li><a href=#rawtext-less-than-sign-state><span class=secno>10.2.4.14 </span>RAWTEXT less-than sign state</a></li>
   1020        <li><a href=#rawtext-end-tag-open-state><span class=secno>10.2.4.15 </span>RAWTEXT end tag open state</a></li>
   1021        <li><a href=#rawtext-end-tag-name-state><span class=secno>10.2.4.16 </span>RAWTEXT end tag name state</a></li>
   1022        <li><a href=#script-data-less-than-sign-state><span class=secno>10.2.4.17 </span>Script data less-than sign state</a></li>
   1023        <li><a href=#script-data-end-tag-open-state><span class=secno>10.2.4.18 </span>Script data end tag open state</a></li>
   1024        <li><a href=#script-data-end-tag-name-state><span class=secno>10.2.4.19 </span>Script data end tag name state</a></li>
   1025        <li><a href=#script-data-escape-start-state><span class=secno>10.2.4.20 </span>Script data escape start state</a></li>
   1026        <li><a href=#script-data-escape-start-dash-state><span class=secno>10.2.4.21 </span>Script data escape start dash state</a></li>
   1027        <li><a href=#script-data-escaped-state><span class=secno>10.2.4.22 </span>Script data escaped state</a></li>
   1028        <li><a href=#script-data-escaped-dash-state><span class=secno>10.2.4.23 </span>Script data escaped dash state</a></li>
   1029        <li><a href=#script-data-escaped-dash-dash-state><span class=secno>10.2.4.24 </span>Script data escaped dash dash state</a></li>
   1030        <li><a href=#script-data-escaped-less-than-sign-state><span class=secno>10.2.4.25 </span>Script data escaped less-than sign state</a></li>
   1031        <li><a href=#script-data-escaped-end-tag-open-state><span class=secno>10.2.4.26 </span>Script data escaped end tag open state</a></li>
   1032        <li><a href=#script-data-escaped-end-tag-name-state><span class=secno>10.2.4.27 </span>Script data escaped end tag name state</a></li>
   1033        <li><a href=#script-data-double-escape-start-state><span class=secno>10.2.4.28 </span>Script data double escape start state</a></li>
   1034        <li><a href=#script-data-double-escaped-state><span class=secno>10.2.4.29 </span>Script data double escaped state</a></li>
   1035        <li><a href=#script-data-double-escaped-dash-state><span class=secno>10.2.4.30 </span>Script data double escaped dash state</a></li>
   1036        <li><a href=#script-data-double-escaped-dash-dash-state><span class=secno>10.2.4.31 </span>Script data double escaped dash dash state</a></li>
   1037        <li><a href=#script-data-double-escaped-less-than-sign-state><span class=secno>10.2.4.32 </span>Script data double escaped less-than sign state</a></li>
   1038        <li><a href=#script-data-double-escape-end-state><span class=secno>10.2.4.33 </span>Script data double escape end state</a></li>
   1039        <li><a href=#before-attribute-name-state><span class=secno>10.2.4.34 </span>Before attribute name state</a></li>
   1040        <li><a href=#attribute-name-state><span class=secno>10.2.4.35 </span>Attribute name state</a></li>
   1041        <li><a href=#after-attribute-name-state><span class=secno>10.2.4.36 </span>After attribute name state</a></li>
   1042        <li><a href=#before-attribute-value-state><span class=secno>10.2.4.37 </span>Before attribute value state</a></li>
   1043        <li><a href=#attribute-value-(double-quoted)-state><span class=secno>10.2.4.38 </span>Attribute value (double-quoted) state</a></li>
   1044        <li><a href=#attribute-value-(single-quoted)-state><span class=secno>10.2.4.39 </span>Attribute value (single-quoted) state</a></li>
   1045        <li><a href=#attribute-value-(unquoted)-state><span class=secno>10.2.4.40 </span>Attribute value (unquoted) state</a></li>
   1046        <li><a href=#character-reference-in-attribute-value-state><span class=secno>10.2.4.41 </span>Character reference in attribute value state</a></li>
   1047        <li><a href=#after-attribute-value-(quoted)-state><span class=secno>10.2.4.42 </span>After attribute value (quoted) state</a></li>
   1048        <li><a href=#self-closing-start-tag-state><span class=secno>10.2.4.43 </span>Self-closing start tag state</a></li>
   1049        <li><a href=#bogus-comment-state><span class=secno>10.2.4.44 </span>Bogus comment state</a></li>
   1050        <li><a href=#markup-declaration-open-state><span class=secno>10.2.4.45 </span>Markup declaration open state</a></li>
   1051        <li><a href=#comment-start-state><span class=secno>10.2.4.46 </span>Comment start state</a></li>
   1052        <li><a href=#comment-start-dash-state><span class=secno>10.2.4.47 </span>Comment start dash state</a></li>
   1053        <li><a href=#comment-state><span class=secno>10.2.4.48 </span>Comment state</a></li>
   1054        <li><a href=#comment-end-dash-state><span class=secno>10.2.4.49 </span>Comment end dash state</a></li>
   1055        <li><a href=#comment-end-state><span class=secno>10.2.4.50 </span>Comment end state</a></li>
   1056        <li><a href=#comment-end-bang-state><span class=secno>10.2.4.51 </span>Comment end bang state</a></li>
   1057        <li><a href=#comment-end-space-state><span class=secno>10.2.4.52 </span>Comment end space state</a></li>
   1058        <li><a href=#doctype-state><span class=secno>10.2.4.53 </span>DOCTYPE state</a></li>
   1059        <li><a href=#before-doctype-name-state><span class=secno>10.2.4.54 </span>Before DOCTYPE name state</a></li>
   1060        <li><a href=#doctype-name-state><span class=secno>10.2.4.55 </span>DOCTYPE name state</a></li>
   1061        <li><a href=#after-doctype-name-state><span class=secno>10.2.4.56 </span>After DOCTYPE name state</a></li>
   1062        <li><a href=#after-doctype-public-keyword-state><span class=secno>10.2.4.57 </span>After DOCTYPE public keyword state</a></li>
   1063        <li><a href=#before-doctype-public-identifier-state><span class=secno>10.2.4.58 </span>Before DOCTYPE public identifier state</a></li>
   1064        <li><a href=#doctype-public-identifier-(double-quoted)-state><span class=secno>10.2.4.59 </span>DOCTYPE public identifier (double-quoted) state</a></li>
   1065        <li><a href=#doctype-public-identifier-(single-quoted)-state><span class=secno>10.2.4.60 </span>DOCTYPE public identifier (single-quoted) state</a></li>
   1066        <li><a href=#after-doctype-public-identifier-state><span class=secno>10.2.4.61 </span>After DOCTYPE public identifier state</a></li>
   1067        <li><a href=#between-doctype-public-and-system-identifiers-state><span class=secno>10.2.4.62 </span>Between DOCTYPE public and system identifiers state</a></li>
   1068        <li><a href=#after-doctype-system-keyword-state><span class=secno>10.2.4.63 </span>After DOCTYPE system keyword state</a></li>
   1069        <li><a href=#before-doctype-system-identifier-state><span class=secno>10.2.4.64 </span>Before DOCTYPE system identifier state</a></li>
   1070        <li><a href=#doctype-system-identifier-(double-quoted)-state><span class=secno>10.2.4.65 </span>DOCTYPE system identifier (double-quoted) state</a></li>
   1071        <li><a href=#doctype-system-identifier-(single-quoted)-state><span class=secno>10.2.4.66 </span>DOCTYPE system identifier (single-quoted) state</a></li>
   1072        <li><a href=#after-doctype-system-identifier-state><span class=secno>10.2.4.67 </span>After DOCTYPE system identifier state</a></li>
   1073        <li><a href=#bogus-doctype-state><span class=secno>10.2.4.68 </span>Bogus DOCTYPE state</a></li>
   1074        <li><a href=#cdata-section-state><span class=secno>10.2.4.69 </span>CDATA section state</a></li>
   1075        <li><a href=#tokenizing-character-references><span class=secno>10.2.4.70 </span>Tokenizing character references</a></ol></li>
   1076      <li><a href=#tree-construction><span class=secno>10.2.5 </span>Tree construction</a>
   1077       <ol>
   1078        <li><a href=#creating-and-inserting-elements><span class=secno>10.2.5.1 </span>Creating and inserting elements</a></li>
   1079        <li><a href=#closing-elements-that-have-implied-end-tags><span class=secno>10.2.5.2 </span>Closing elements that have implied end tags</a></li>
   1080        <li><a href=#foster-parenting><span class=secno>10.2.5.3 </span>Foster parenting</a></li>
   1081        <li><a href=#the-initial-insertion-mode><span class=secno>10.2.5.4 </span>The "initial" insertion mode</a></li>
   1082        <li><a href=#the-before-html-insertion-mode><span class=secno>10.2.5.5 </span>The "before html" insertion mode</a></li>
   1083        <li><a href=#the-before-head-insertion-mode><span class=secno>10.2.5.6 </span>The "before head" insertion mode</a></li>
   1084        <li><a href=#parsing-main-inhead><span class=secno>10.2.5.7 </span>The "in head" insertion mode</a></li>
   1085        <li><a href=#parsing-main-inheadnoscript><span class=secno>10.2.5.8 </span>The "in head noscript" insertion mode</a></li>
   1086        <li><a href=#the-after-head-insertion-mode><span class=secno>10.2.5.9 </span>The "after head" insertion mode</a></li>
   1087        <li><a href=#parsing-main-inbody><span class=secno>10.2.5.10 </span>The "in body" insertion mode</a></li>
   1088        <li><a href=#parsing-main-incdata><span class=secno>10.2.5.11 </span>The "text" insertion mode</a></li>
   1089        <li><a href=#parsing-main-intable><span class=secno>10.2.5.12 </span>The "in table" insertion mode</a></li>
   1090        <li><a href=#parsing-main-intabletext><span class=secno>10.2.5.13 </span>The "in table text" insertion mode</a></li>
   1091        <li><a href=#parsing-main-incaption><span class=secno>10.2.5.14 </span>The "in caption" insertion mode</a></li>
   1092        <li><a href=#parsing-main-incolgroup><span class=secno>10.2.5.15 </span>The "in column group" insertion mode</a></li>
   1093        <li><a href=#parsing-main-intbody><span class=secno>10.2.5.16 </span>The "in table body" insertion mode</a></li>
   1094        <li><a href=#parsing-main-intr><span class=secno>10.2.5.17 </span>The "in row" insertion mode</a></li>
   1095        <li><a href=#parsing-main-intd><span class=secno>10.2.5.18 </span>The "in cell" insertion mode</a></li>
   1096        <li><a href=#parsing-main-inselect><span class=secno>10.2.5.19 </span>The "in select" insertion mode</a></li>
   1097        <li><a href=#parsing-main-inselectintable><span class=secno>10.2.5.20 </span>The "in select in table" insertion mode</a></li>
   1098        <li><a href=#parsing-main-inforeign><span class=secno>10.2.5.21 </span>The "in foreign content" insertion mode</a></li>
   1099        <li><a href=#parsing-main-afterbody><span class=secno>10.2.5.22 </span>The "after body" insertion mode</a></li>
   1100        <li><a href=#parsing-main-inframeset><span class=secno>10.2.5.23 </span>The "in frameset" insertion mode</a></li>
   1101        <li><a href=#parsing-main-afterframeset><span class=secno>10.2.5.24 </span>The "after frameset" insertion mode</a></li>
   1102        <li><a href=#the-after-after-body-insertion-mode><span class=secno>10.2.5.25 </span>The "after after body" insertion mode</a></li>
   1103        <li><a href=#the-after-after-frameset-insertion-mode><span class=secno>10.2.5.26 </span>The "after after frameset" insertion mode</a></ol></li>
   1104      <li><a href=#the-end><span class=secno>10.2.6 </span>The end</a></li>
   1105      <li><a href=#coercing-an-html-dom-into-an-infoset><span class=secno>10.2.7 </span>Coercing an HTML DOM into an infoset</a></li>
   1106      <li><a href=#an-introduction-to-error-handling-and-strange-cases-in-the-parser><span class=secno>10.2.8 </span>An introduction to error handling and strange cases in the parser</a>
   1107       <ol>
   1108        <li><a href=#misnested-tags:-b-i-/b-/i><span class=secno>10.2.8.1 </span>Misnested tags: &lt;b&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt;</a></li>
   1109        <li><a href=#misnested-tags:-b-p-/b-/p><span class=secno>10.2.8.2 </span>Misnested tags: &lt;b&gt;&lt;p&gt;&lt;/b&gt;&lt;/p&gt;</a></li>
   1110        <li><a href=#unexpected-markup-in-tables><span class=secno>10.2.8.3 </span>Unexpected markup in tables</a></li>
   1111        <li><a href=#scripts-that-modify-the-page-as-it-is-being-parsed><span class=secno>10.2.8.4 </span>Scripts that modify the page as it is being parsed</a></ol></ol></li>
   1112    <li><a href=#serializing-html-fragments><span class=secno>10.3 </span>Serializing HTML fragments</a></li>
   1113    <li><a href=#parsing-html-fragments><span class=secno>10.4 </span>Parsing HTML fragments</a></li>
   1114    <li><a href=#named-character-references><span class=secno>10.5 </span>Named character references</a></ol></li>
   1115  <li><a href=#the-xhtml-syntax><span class=secno>11 </span>The XHTML syntax</a>
   1116   <ol>
   1117    <li><a href=#writing-xhtml-documents><span class=secno>11.1 </span>Writing XHTML documents</a></li>
   1118    <li><a href=#parsing-xhtml-documents><span class=secno>11.2 </span>Parsing XHTML documents</a></li>
   1119    <li><a href=#serializing-xhtml-fragments><span class=secno>11.3 </span>Serializing XHTML fragments</a></li>
   1120    <li><a href=#parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</a></ol></li>
   1121  <li><a href=#rendering><span class=secno>12 </span>Rendering</a>
   1122   <ol>
   1123    <li><a href=#introduction-8><span class=secno>12.1 </span>Introduction</a></li>
   1124    <li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</a>
   1125     <ol>
   1126      <li><a href=#introduction-9><span class=secno>12.2.1 </span>Introduction</a></li>
   1127      <li><a href=#display-types><span class=secno>12.2.2 </span>Display types</a></li>
   1128      <li><a href=#margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</a></li>
   1129      <li><a href=#alignment><span class=secno>12.2.4 </span>Alignment</a></li>
   1130      <li><a href=#fonts-and-colors><span class=secno>12.2.5 </span>Fonts and colors</a></li>
   1131      <li><a href=#punctuation-and-decorations><span class=secno>12.2.6 </span>Punctuation and decorations</a></li>
   1132      <li><a href=#resetting-rules-for-inherited-properties><span class=secno>12.2.7 </span>Resetting rules for inherited properties</a></li>
   1133      <li><a href=#the-hr-element-0><span class=secno>12.2.8 </span>The <code>hr</code> element</a></li>
   1134      <li><a href=#the-fieldset-element-0><span class=secno>12.2.9 </span>The <code>fieldset</code> element</a></ol></li>
   1135    <li><a href=#replaced-elements><span class=secno>12.3 </span>Replaced elements</a>
   1136     <ol>
   1137      <li><a href=#embedded-content-2><span class=secno>12.3.1 </span>Embedded content</a></li>
   1138      <li><a href=#timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</a></li>
   1139      <li><a href=#images-0><span class=secno>12.3.3 </span>Images</a></li>
   1140      <li><a href=#attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</a></li>
   1141      <li><a href=#image-maps-0><span class=secno>12.3.5 </span>Image maps</a></li>
   1142      <li><a href=#toolbars-0><span class=secno>12.3.6 </span>Toolbars</a></ol></li>
   1143    <li><a href=#bindings><span class=secno>12.4 </span>Bindings</a>
   1144     <ol>
   1145      <li><a href=#introduction-10><span class=secno>12.4.1 </span>Introduction</a></li>
   1146      <li><a href=#the-button-element-0><span class=secno>12.4.2 </span>The <code>button</code> element</a></li>
   1147      <li><a href=#the-details-element-0><span class=secno>12.4.3 </span>The <code>details</code> element</a></li>
   1148      <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
   1149      <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>12.4.5 </span>The <code>input</code> element as domain-specific widgets</a></li>
   1150      <li><a href=#the-input-element-as-a-range-control><span class=secno>12.4.6 </span>The <code>input</code> element as a range control</a></li>
   1151      <li><a href=#the-input-element-as-a-color-well><span class=secno>12.4.7 </span>The <code>input</code> element as a color well</a></li>
   1152      <li><a href=#the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>12.4.8 </span>The <code>input</code> element as a check box and radio button widgets</a></li>
   1153      <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>12.4.9 </span>The <code>input</code> element as a file upload control</a></li>
   1154      <li><a href=#the-input-element-as-a-button><span class=secno>12.4.10 </span>The <code>input</code> element as a button</a></li>
   1155      <li><a href=#the-marquee-element-0><span class=secno>12.4.11 </span>The <code>marquee</code> element</a></li>
   1156      <li><a href=#the-meter-element-0><span class=secno>12.4.12 </span>The <code>meter</code> element</a></li>
   1157      <li><a href=#the-progress-element-0><span class=secno>12.4.13 </span>The <code>progress</code> element</a></li>
   1158      <li><a href=#the-select-element-0><span class=secno>12.4.14 </span>The <code>select</code> element</a></li>
   1159      <li><a href=#the-textarea-element-0><span class=secno>12.4.15 </span>The <code>textarea</code> element</a></li>
   1160      <li><a href=#the-keygen-element-0><span class=secno>12.4.16 </span>The <code>keygen</code> element</a></li>
   1161      <li><a href=#the-time-element-0><span class=secno>12.4.17 </span>The <code>time</code> element</a></ol></li>
   1162    <li><a href=#frames-and-framesets><span class=secno>12.5 </span>Frames and framesets</a></li>
   1163    <li><a href=#interactive-media><span class=secno>12.6 </span>Interactive media</a>
   1164     <ol>
   1165      <li><a href=#links,-forms,-and-navigation><span class=secno>12.6.1 </span>Links, forms, and navigation</a></li>
   1166      <li><a href=#the-title-attribute-0><span class=secno>12.6.2 </span>The <code title=attr-title>title</code> attribute</a></li>
   1167      <li><a href=#editing-hosts><span class=secno>12.6.3 </span>Editing hosts</a></ol></li>
   1168    <li><a href=#print-media><span class=secno>12.7 </span>Print media</a></ol></li>
   1169  <li><a href=#obsolete><span class=secno>13 </span>Obsolete features</a>
   1170   <ol>
   1171    <li><a href=#obsolete-but-conforming-features><span class=secno>13.1 </span>Obsolete but conforming features</a>
   1172     <ol>
   1173      <li><a href=#warnings-for-obsolete-but-conforming-features><span class=secno>13.1.1 </span>Warnings for obsolete but conforming features</a></ol></li>
   1174    <li><a href=#non-conforming-features><span class=secno>13.2 </span>Non-conforming features</a></li>
   1175    <li><a href=#requirements-for-implementations><span class=secno>13.3 </span>Requirements for implementations</a>
   1176     <ol>
   1177      <li><a href=#the-applet-element><span class=secno>13.3.1 </span>The <code>applet</code> element</a></li>
   1178      <li><a href=#the-marquee-element><span class=secno>13.3.2 </span>The <code>marquee</code> element</a></li>
   1179      <li><a href=#frames><span class=secno>13.3.3 </span>Frames</a></li>
   1180      <li><a href=#other-elements,-attributes-and-apis><span class=secno>13.3.4 </span>Other elements, attributes and APIs</a></ol></ol></li>
   1181  <li><a href=#iana><span class=secno>14 </span>IANA considerations</a>
   1182   <ol>
   1183    <li><a href=#text/html><span class=secno>14.1 </span><code>text/html</code></a></li>
   1184    <li><a href=#text/html-sandboxed><span class=secno>14.2 </span><code>text/html-sandboxed</code></a></li>
   1185    <li><a href=#application/xhtml+xml><span class=secno>14.3 </span><code>application/xhtml+xml</code></a></li>
   1186    <li><a href=#text/cache-manifest><span class=secno>14.4 </span><code>text/cache-manifest</code></a></li>
   1187    <li><a href=#text/ping><span class=secno>14.5 </span><code>text/ping</code></a></li>
   1188    <li><a href=#text/srt><span class=secno>14.6 </span><code>text/srt</code></a></li>
   1189    <li><a href=#application/microdata+json><span class=secno>14.7 </span><code>application/microdata+json</code></a></li>
   1190    <li><a href=#ping-from><span class=secno>14.8 </span><code>Ping-From</code></a></li>
   1191    <li><a href=#ping-to><span class=secno>14.9 </span><code>Ping-To</code></a></ol></li>
   1192  <li><a class=no-num href=#index>Index</a>
   1193   <ol>
   1194    <li><a class=no-num href=#elements-1>Elements</a></li>
   1195    <li><a class=no-num href=#element-content-categories>Element content categories</a></li>
   1196    <li><a class=no-num href=#attributes-1>Attributes</a></li>
   1197    <li><a class=no-num href=#interfaces>Interfaces</a></li>
   1198    <li><a class=no-num href=#events-0>Events</a></ol></li>
   1199  <li><a class=no-num href=#references>References</a></li>
   1200  <li><a class=no-num href=#acknowledgements>Acknowledgements</a></ol>
   1201 <!--end-toc-->
   1202   <hr><h2 id=introduction><span class=secno>1 </span>Introduction</h2>
   1203 
   1204 
   1205 
   1206   <h3 id=is-this-html5?><span class=secno>1.1 </span>Is this HTML5?</h3>
   1207 
   1208   <p><i>This section is non-normative.</i></p>
   1209 
   1210 
   1211 
   1212   <p>In short: Yes.</p>
   1213 
   1214   <p>In more length: "HTML5" has at various times been used to refer
   1215   to a wide variety of technologies, some of which originated in this
   1216   document, and some of which have only ever been tangentially
   1217   related.</p>
   1218 
   1219   <p>This specification actually now defines the next generation of
   1220   HTML after HTML5. HTML5 reached Last Call at the WHATWG in October
   1221   2009, and shortly after we started working on some experimental new
   1222   features that are not as stable as the rest of the
   1223   specification. The stability of sections is annotated in the
   1224   margin.</p>
   1225 
   1226   <p>The W3C has also been working on HTML in conjunction with the
   1227   WHATWG; at the W3C, this document has been split into several parts,
   1228   and the occasional informative paragraph or example has been removed
   1229   for technical reasons. For all intents and purposes, however, the
   1230   W3C HTML specifications and this specification are equivalent (and
   1231   they are in fact all generated from the same source document).</p>
   1232 
   1233   <p>Features that are considered part of the next generation of HTML
   1234   beyond HTML5 currently consist of only:</p>
   1235 
   1236   <ul class=brief><li>The <code><a href=#devices>device</a></code> element.</li>
   1237    <li>The <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute and related <a href=#hyperlink-auditing>hyperlink auditing</a> features.</li>
   1238   </ul><p>Features that are part of HTML5 (and this specification) but that
   1239   are either currently, or have been in the past, published as
   1240   separate specifications:</p>
   1241 
   1242   <ul class=brief><li><a href=#2dcontext>Canvas 2D Graphics Context</a>
   1243    <li><a href=#microdata>Microdata</a>
   1244    <li><a href=#mdvocabs>Microdata vocabularies</a>
   1245    <li><a href=#crossDocumentMessages>Cross-document messaging</a> (also known as Communications)
   1246    <li><a href=#channel-messaging>Channel messaging</a> (also known as Communications)
   1247    <li><a href=#forms>Forms</a> (previously known as Web Forms 2)
   1248   </ul><p>Features that are not currently in this document that were in the
   1249   past considered part of HTML5, or that were never part of HTML5 but
   1250   have been referred to as part of HTML5 in the media, include:</p>
   1251 
   1252   <ul class=brief><li><a href=http://www.whatwg.org/specs/web-workers/current-work/>Web Workers</a>
   1253    <li><a href=http://dev.w3.org/html5/webstorage/>Web Storage</a>
   1254    <li><a href=http://dev.w3.org/html5/websockets/>WebSocket API</a>
   1255    <li><a href=http://www.whatwg.org/specs/web-socket-protocol/>WebSocket protocol</a>
   1256 <!--
   1257    <li><a href="http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol">WebSocket protocol</a>
   1258 -->
   1259    <li><a href=http://dev.w3.org/html5/eventsource/>Server-sent Events</a>
   1260    <li><a href=http://dev.w3.org/html5/webdatabase/>Web SQL Database</a>
   1261    <li><a href=http://dev.w3.org/geo/api/spec-source.html>Geolocation API</a>
   1262    <li><a href=http://www.w3.org/TR/SVG/>SVG</a>
   1263    <li><a href=http://www.w3.org/TR/MathML/>MathML</a>
   1264    <li><a href=http://dev.w3.org/2006/webapi/XMLHttpRequest-2/>XMLHttpRequest</a>
   1265   </ul><h3 id=background><span class=secno>1.2 </span>Background</h3>
   1266 
   1267   <p><i>This section is non-normative.</i></p>
   1268 
   1269   <p>The World Wide Web's markup language has always been HTML. HTML
   1270   was primarily designed as a language for semantically describing
   1271   scientific documents, although its general design and adaptations
   1272   over the years have enabled it to be used to describe a number of
   1273   other types of documents.</p>
   1274 
   1275   <p>The main area that has not been adequately addressed by HTML is a
   1276   vague subject referred to as Web Applications. This specification
   1277   attempts to rectify this, while at the same time updating the HTML
   1278   specifications to address issues raised in the past few years.</p>
   1279 
   1280 
   1281   <h3 id=audience><span class=secno>1.3 </span>Audience</h3>
   1282 
   1283   <p><i>This section is non-normative.</i></p>
   1284 
   1285   <p>This specification is intended for authors of documents and
   1286   scripts that use the features defined in this specification<span class=impl>, implementors of tools that operate on pages that use
   1287   the features defined in this specification, and individuals wishing
   1288   to establish the correctness of documents or implementations with
   1289   respect to the requirements of this specification</span>.</p>
   1290 
   1291   <p>This document is probably not suited to readers who do not
   1292   already have at least a passing familiarity with Web technologies,
   1293   as in places it sacrifices clarity for precision, and brevity for
   1294   completeness. More approachable tutorials and authoring guides can
   1295   provide a gentler introduction to the topic.</p>
   1296 
   1297   <p>In particular, familiarity with the basics of DOM Core and DOM
   1298   Events is necessary for a complete understanding of some of the more
   1299   technical parts of this specification. An understanding of Web IDL,
   1300   HTTP, XML, Unicode, character encodings, JavaScript, and CSS will
   1301   also be helpful in places but is not essential.</p>
   1302 
   1303 
   1304   <h3 id=scope><span class=secno>1.4 </span>Scope</h3>
   1305 
   1306   <p><i>This section is non-normative.</i></p>
   1307 
   1308   <p>This specification is limited to providing a semantic-level
   1309   markup language and associated semantic-level scripting APIs for
   1310   authoring accessible pages on the Web ranging from static documents
   1311   to dynamic applications.</p>
   1312 
   1313   <p>The scope of this specification does not include providing
   1314   mechanisms for media-specific customization of presentation
   1315   (although default rendering rules for Web browsers are included at
   1316   the end of this specification, and several mechanisms for hooking
   1317   into CSS are provided as part of the language).</p>
   1318 
   1319   <p>The scope of this specification is not to describe an entire
   1320   operating system. In particular, hardware configuration software,
   1321   image manipulation tools, and applications that users would be
   1322   expected to use with high-end workstations on a daily basis are out
   1323   of scope. In terms of applications, this specification is targeted
   1324   specifically at applications that would be expected to be used by
   1325   users on an occasional basis, or regularly but from disparate
   1326   locations, with low CPU requirements. For instance online purchasing
   1327   systems, searching systems, games (especially multiplayer online
   1328   games), public telephone books or address books, communications
   1329   software (e-mail clients, instant messaging clients, discussion
   1330   software), document editing software, etc.</p>
   1331 
   1332 
   1333   <h3 id=history-1><span class=secno>1.5 </span>History</h3>
   1334 
   1335   <p><i>This section is non-normative.</i></p>
   1336 
   1337   <p>For its first five years (1990-1995), HTML went through a number
   1338   of revisions and experienced a number of extensions, primarily
   1339   hosted first at CERN, and then at the IETF.</p>
   1340 
   1341   <p>With the creation of the W3C, HTML's development changed venue
   1342   again. A first abortive attempt at extending HTML in 1995 known as
   1343   HTML 3.0 then made way to a more pragmatic approach known as HTML
   1344   3.2, which was completed in 1997. HTML4 followed, reaching
   1345   completion in 1998.</p>
   1346 
   1347   <p>At this time, the W3C membership decided to stop evolving HTML
   1348   and instead begin work on an XML-based equivalent, called
   1349   XHTML. This effort started with a reformulation of HTML4 in XML,
   1350   known as XHTML 1.0, which added no new features except the new
   1351   serialization, and which was completed in 2000. After XHTML 1.0, the
   1352   W3C's focus turned to making it easier for other working groups to
   1353   extend XHTML, under the banner of XHTML Modularization. In parallel
   1354   with this, the W3C also worked on a new language that was not
   1355   compatible with the earlier HTML and XHTML languages, calling it
   1356   XHTML2.</p>
   1357 
   1358   <p>Around the time that HTML's evolution was stopped in 1998, parts
   1359   of the API for HTML developed by browser vendors were specified and
   1360   published under the name DOM Level 1 (in 1998) and DOM Level 2 Core
   1361   and DOM Level 2 HTML (starting in 2000 and culminating in
   1362   2003). These efforts then petered out, with some DOM Level 3
   1363   specifications published in 2004 but the working group being closed
   1364   before all the Level 3 drafts were completed.</p>
   1365 
   1366   <p>In 2003, the publication of XForms, a technology which was
   1367   positioned as the next generation of Web forms, sparked a renewed
   1368   interest in evolving HTML itself, rather than finding replacements
   1369   for it. This interest was borne from the realization that XML's
   1370   deployment as a Web technology was limited to entirely new
   1371   technologies (like RSS and later Atom), rather than as a replacement
   1372   for existing deployed technologies (like HTML).</p>
   1373 
   1374   <p>A proof of concept to show that it was possible to extend HTML4's
   1375   forms to provide many of the features that XForms 1.0 introduced,
   1376   without requiring browsers to implement rendering engines that were
   1377   incompatible with existing HTML Web pages, was the first result of
   1378   this renewed interest. At this early stage, while the draft was
   1379   already publicly available, and input was already being solicited
   1380   from all sources, the specification was only under Opera Software's
   1381   copyright.</p>
   1382 
   1383   <p>The idea that HTML's evolution should be reopened was tested at a
   1384   W3C workshop in 2004, where some of the principles that underlie the
   1385   HTML5 work (described below), as well as the aforementioned early
   1386   draft proposal covering just forms-related features, were presented
   1387   to the W3C jointly by Mozilla and Opera. The proposal was rejected
   1388   on the grounds that the proposal conflicted with the previously
   1389   chosen direction for the Web's evolution; the W3C staff and
   1390   membership voted to continue developing XML-based replacements
   1391   instead.</p>
   1392 
   1393   <p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced
   1394   their intent to continue working on the effort under the umbrella of
   1395   a new venue called the WHATWG. A public mailing list was created,
   1396   and the draft was moved to the WHATWG site. The copyright was
   1397   subsequently amended to be jointly owned by all three vendors, and
   1398   to allow reuse of the specification.</p>
   1399 
   1400   <p>The WHATWG was based on several core principles, in particular
   1401   that technologies need to be backwards compatible, that
   1402   specifications and implementations need to match even if this means
   1403   changing the specification rather than the implementations, and that
   1404   specifications need to be detailed enough that implementations can
   1405   achieve complete interoperability without reverse-engineering each
   1406   other.</p>
   1407 
   1408   <p>The latter requirement in particular required that the scope of
   1409   the HTML5 specification include what had previously been specified
   1410   in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also
   1411   meant including significantly more detail than had previously been
   1412   considered the norm.</p>
   1413 
   1414   <p>In 2006, the W3C indicated an interest to participate in the
   1415   development of HTML5 after all, and in 2007 formed a working group
   1416   chartered to work with the WHATWG on the development of the HTML5
   1417   specification. Apple, Mozilla, and Opera allowed the W3C to publish
   1418   the specification under the W3C copyright, while keeping a version
   1419   with the less restrictive license on the WHATWG site.</p>
   1420 
   1421   <p>Since then, both groups have been working together.</p>
   1422 
   1423   <p>A separate document has been published by the W3C HTML working
   1424   group to document the differences between this specification and the
   1425   language described in the HTML4 specification. <a href=#refsHTMLDIFF>[HTMLDIFF]</a></p>
   1426 
   1427 
   1428 
   1429 
   1430   <h3 id=design-notes><span class=secno>1.6 </span>Design notes</h3>
   1431 
   1432   <p><i>This section is non-normative.</i></p>
   1433 
   1434   <p>It must be admitted that many aspects of HTML appear at first
   1435   glance to be nonsensical and inconsistent.</p>
   1436 
   1437   <p>HTML, its supporting DOM APIs, as well as many of its supporting
   1438   technologies, have been developed over a period of several decades
   1439   by a wide array of people with different priorities who, in many
   1440   cases, did not know of each other's existence.</p>
   1441 
   1442   <p>Features have thus arisen from many sources, and have not always
   1443   been designed in especially consistent ways. Furthermore, because of
   1444   the unique characteristics of the Web, implementation bugs have
   1445   often become de-facto, and now de-jure, standards, as content is
   1446   often unintentionally written in ways that rely on them before they
   1447   can be fixed.</p>
   1448 
   1449   <p>Despite all this, efforts have been made to adhere to certain
   1450   design goals. These are described in the next few subsections.</p>
   1451 
   1452 
   1453   <h4 id=serializability-of-script-execution><span class=secno>1.6.1 </span>Serializability of script execution</h4>
   1454 
   1455   <p><i>This section is non-normative.</i></p>
   1456 
   1457   <p>To avoid exposing Web authors to the complexities of
   1458   multithreading, the HTML and DOM APIs are designed such that no
   1459   script can ever detect the simultaneous execution of other
   1460   scripts. Even with <span title=Worker>workers</span>, the intent
   1461   is that the behavior of implementations can be thought of as
   1462   completely serializing the execution of all scripts in all <a href=#browsing-context title="browsing context">browsing contexts</a>.</p>
   1463 
   1464   <p class=note>The <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   1465   method, in this model, is equivalent to allowing other scripts to
   1466   run while the calling script is blocked.</p>
   1467 
   1468 
   1469   <h4 id=compliance-with-other-specifications><span class=secno>1.6.2 </span>Compliance with other specifications</h4>
   1470 
   1471   <p><i>This section is non-normative.</i></p>
   1472 
   1473   <p>This specification interacts with and relies on a wide variety of
   1474   other specifications. In certain circumstances, unfortunately,
   1475   conflicting needs have led to this specification violating the
   1476   requirements of these other specifications. Whenever this has
   1477   occurred, the transgressions have each been noted as a "<dfn id=willful-violation>willful
   1478   violation</dfn>", and the reason for the violation has been
   1479   noted.</p>
   1480 
   1481 
   1482 
   1483 
   1484   <h3 id=html-vs-xhtml><span class=secno>1.7 </span>HTML vs XHTML</h3>
   1485 
   1486   <p><i>This section is non-normative.</i></p>
   1487 
   1488   <p>This specification defines an abstract language for describing
   1489   documents and applications, and some APIs for interacting with
   1490   in-memory representations of resources that use this language.</p>
   1491 
   1492   <p>The in-memory representation is known as "DOM HTML", or "the DOM"
   1493   for short. This specification defines version 5 of DOM HTML, known
   1494   as "DOM5 HTML".</p>
   1495 
   1496   <p>There are various concrete syntaxes that can be used to transmit
   1497   resources that use this abstract language, two of which are defined
   1498   in this specification.</p>
   1499 
   1500   <p>The first such concrete syntax is the HTML syntax. This is the
   1501   format suggested for most authors. It is compatible with most legacy
   1502   Web browsers. If a document is transmitted with an <a href=#html-mime-type>HTML MIME
   1503   type</a>, such as <code><a href=#text/html>text/html</a></code>, then it will be
   1504   processed as an HTML document by Web browsers.
   1505 
   1506   This specification defines the latest HTML syntax, known simply as
   1507   "HTML".
   1508   
   1509 
   1510   </p>
   1511 
   1512   <p>The second concrete syntax is the XHTML syntax, which is an
   1513   application of XML. When a document is transmitted with an <a href=#xml-mime-type>XML
   1514   MIME type</a>, such as <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>, then
   1515   it is treated as an XML document by Web browsers, to be parsed by an
   1516   XML processor. Authors are reminded that the processing for XML and
   1517   HTML differs; in particular, even minor syntax errors will prevent a
   1518   document labeled as XML from being rendered fully, whereas they
   1519   would be ignored in the HTML syntax.
   1520 
   1521   This specification defines the latest XHTML syntax, known simply as
   1522   "XHTML".
   1523   
   1524 
   1525   </p>
   1526 
   1527   <p>The DOM, the HTML syntax, and XML cannot all represent the same
   1528   content. For example, namespaces cannot be represented using the
   1529   HTML syntax, but they are supported in the DOM and in XML.
   1530   Similarly, documents that use the <code><a href=#the-noscript-element>noscript</a></code> feature can
   1531   be represented using the HTML syntax, but cannot be represented with
   1532   the DOM or in XML. Comments that contain the string "<code title="">--&gt;</code>" can be represented in the DOM but not in the
   1533   HTML syntax or in XML.</p>
   1534 
   1535 
   1536   <h3 id=structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</h3>
   1537 
   1538   <p><i>This section is non-normative.</i></p>
   1539 
   1540   <p>This specification is divided into the following major
   1541   sections:</p>
   1542 
   1543   <dl><dt><a href=#infrastructure>Common infrastructure</a></dt>
   1544 
   1545    <dd>The conformance classes, algorithms, definitions, and the
   1546    common underpinnings of the rest of the specification.</dd>
   1547 
   1548 
   1549    <dt><a href=#dom>Semantics, structure, and APIs of HTML documents</a></dt>
   1550 
   1551    <dd>Documents are built from elements. These elements form a tree
   1552    using the DOM. This section defines the features of this DOM, as
   1553    well as introducing the features common to all elements, and the
   1554    concepts used in defining elements.</dd>
   1555 
   1556 
   1557    <dt><a href=#semantics>The elements of HTML</a></dt>
   1558 
   1559    <dd>Each element has a predefined meaning, which is explained in
   1560    this section. Rules for authors on how to use the element<span class=impl>, along with user agent requirements for how to handle
   1561    each element,</span> are also given.</dd>
   1562 
   1563 
   1564    <dt><a href=#microdata>Microdata</a></dt>
   1565 
   1566    <dd>This specification introduces a mechanism for adding
   1567    machine-readable annotations to documents, so that tools can
   1568    extract trees of name/value pairs from the document. This section
   1569    describes this mechanism<span class=impl> and some algorithms
   1570    that can be used to convert HTML documents into other
   1571    formats</span>.
   1572 
   1573    This section also defines some Microdata vocabularies for contact
   1574    information, calendar events, and licensing works.
   1575 
   1576    </dd>
   1577 
   1578 
   1579    <dt><a href=#browsers>Loading Web pages</a></dt>
   1580 
   1581    <dd>HTML documents do not exist in a vacuum &mdash; this section
   1582    defines many of the features that affect environments that deal
   1583    with multiple pages.</dd>
   1584 
   1585    <dt><a href=#webappapis>Web application APIs</a></dt>
   1586 
   1587    <dd>This section introduces basic features for scripting of
   1588    applications in HTML.</dd>
   1589 
   1590    <dt><a href=#editing>User interaction</a></dt>
   1591 
   1592    <dd>HTML documents can provide a number of mechanisms for users to
   1593    interact with and modify content, which are described in this
   1594    section.</dd>
   1595 
   1596 
   1597 
   1598 
   1599    <dt><a href=#comms>The communication APIs</a></dt>
   1600 
   1601    <dd>This section describes some mechanisms that applications
   1602    written in HTML can use to communicate with other applications from
   1603    different domains running on the same client.
   1604    </dd>
   1605 
   1606 
   1607 
   1608    <dt><a href=#syntax>The HTML syntax</a></dt>
   1609    <dt><a href=#xhtml>The XHTML syntax</a></dt>
   1610 
   1611    <dd>All of these features would be for naught if they couldn't be
   1612    represented in a serialized form and sent to other people, and so
   1613    these sections define the syntaxes of HTML, along with rules for
   1614    how to parse content using those syntaxes.</dd>
   1615 
   1616 
   1617   </dl><p>There are also some appendices, defining <a href=#rendering>rendering rules</a> for Web browsers and listing
   1618   <a href=#obsolete>obsolete features</a> and <a href=#iana>IANA
   1619   considerations</a>.</p>
   1620 
   1621 
   1622 
   1623   <h4 id=how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</h4>
   1624 
   1625   <p>This specification should be read like all other specifications.
   1626   First, it should be read cover-to-cover, multiple times. Then, it
   1627   should be read backwards at least once. Then it should be read by
   1628   picking random sections from the contents list and following all the
   1629   cross-references.</p>
   1630 
   1631 
   1632 
   1633   <h4 id=typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</h4>
   1634 
   1635   <p>This is a definition, requirement, or explanation.</p>
   1636 
   1637   <p class=note>This is a note.</p>
   1638 
   1639   <p class=example>This is an example.</p>
   1640 
   1641   <p class=XXX>This is an open issue.</p>
   1642 
   1643   <p class=warning>This is a warning.</p>
   1644 
   1645   <pre class="idl extract">interface <dfn title="">Example</dfn> {
   1646   // this is an IDL definition
   1647 };</pre>
   1648 
   1649   <dl class=domintro><dt><var title="">variable</var> = <var title="">object</var> . <code title="">method</code>( [ <var title="">optionalArgument</var> ] )</dt>
   1650 
   1651    <dd>
   1652 
   1653     <p>This is a note to authors describing the usage of an interface.</p>
   1654 
   1655    </dd>
   1656 
   1657   </dl><pre class=css>/* this is a CSS fragment */</pre>
   1658 
   1659   <p>The defining instance of a term is marked up like <dfn id=x-this title=x-this>this</dfn>. Uses of that term are marked up like
   1660   <a href=#x-this title=x-this>this</a> or like <i title=x-this><a href=#x-this>this</a></i>.</p>
   1661 
   1662   <p>The defining instance of an element, attribute, or API is marked
   1663   up like <dfn id=x-that title=x-that><code>this</code></dfn>. References to
   1664   that element, attribute, or API are marked up like <code title=x-that><a href=#x-that>this</a></code>.</p>
   1665 
   1666   <p>Other code fragments are marked up <code title="">like
   1667   this</code>.</p>
   1668 
   1669   <p>Variables are marked up like <var title="">this</var>.</p>
   1670 
   1671   <p class=impl>This is an implementation requirement.</p>
   1672 
   1673 
   1674 
   1675   <h3 id=a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</h3>
   1676 
   1677   <p><i>This section is non-normative.</i></p>
   1678 
   1679   <p>A basic HTML document looks like this:</p>
   1680 
   1681   <pre id=intro-early-example>&lt;!DOCTYPE html&gt;
   1682 &lt;html&gt;
   1683  &lt;head&gt;
   1684   &lt;title&gt;Sample page&lt;/title&gt;
   1685  &lt;/head&gt;
   1686  &lt;body&gt;
   1687   &lt;h1&gt;Sample page&lt;/h1&gt;
   1688   &lt;p&gt;This is a &lt;a href="demo.html"&gt;simple&lt;/a&gt; sample.&lt;/p&gt;
   1689   &lt;!-- this is a comment --&gt;
   1690  &lt;/body&gt;
   1691 &lt;/html&gt;</pre>
   1692 
   1693   <p>HTML documents consist of a tree of elements and text. Each
   1694   element is denoted in the source by a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a>, such as "<code title="">&lt;body&gt;</code>", and an <a href=#syntax-end-tag title=syntax-end-tag>end
   1695   tag</a>, such as "<code title="">&lt;/body&gt;</code>". (Certain
   1696   start tags and end tags can in certain cases be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a> and are implied by other
   1697   tags.)</p>
   1698 
   1699   <p>Tags have to be nested such that elements are all completely
   1700   within each other, without overlapping:</p>
   1701 
   1702   <pre class=bad>&lt;p&gt;This is &lt;em&gt;very &lt;strong&gt;wrong&lt;/em&gt;!&lt;/strong&gt;&lt;/p&gt;</pre>
   1703   <pre>&lt;p&gt;This &lt;em&gt;is &lt;strong&gt;correct&lt;/strong&gt;.&lt;/em&gt;&lt;/p&gt;</pre>
   1704 
   1705   <p>This specification defines a set of elements that can be used in
   1706   HTML, along with rules about the ways in which the elements can be
   1707   nested.</p>
   1708 
   1709   <p>Elements can have attributes, which control how the elements
   1710   work. In the example below, there is a <a href=#hyperlink>hyperlink</a>,
   1711   formed using the <code><a href=#the-a-element>a</a></code> element and its <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute:</p>
   1712 
   1713   <pre>&lt;a href="demo.html"&gt;simple&lt;/a&gt;</pre>
   1714 
   1715   <p><a href=#syntax-attributes title=syntax-attributes>Attributes</a> are placed
   1716   inside the start tag, and consist of a <a href=#syntax-attribute-name title=syntax-attribute-name>name</a> and a <a href=#syntax-attribute-value title=syntax-attribute-value>value</a>, separated by an "<code title="">=</code>" character. The attribute value can remain <a href=#unquoted>unquoted</a> if it doesn't contain spaces or any of
   1717   <code title="">"</code> <code title="">'</code> <code title="">`</code> <code title="">=</code> <code title="">&lt;</code>
   1718   or <code title="">&gt;</code>. Otherwise, it has to be quoted using
   1719   either single or double quotes. The value, along with the "<code title="">=</code>" character, can be omitted altogether if the value
   1720   is the empty string.</p>
   1721 
   1722   <pre>&lt;!-- empty attributes --&gt;
   1723 &lt;input name=address disabled&gt;
   1724 &lt;input name=address disabled=""&gt;
   1725 
   1726 &lt;!-- attributes with a value --&gt;
   1727 &lt;input name=address maxlength=200&gt;
   1728 &lt;input name=address maxlength='200'&gt;
   1729 &lt;input name=address maxlength="200"&gt;</pre>
   1730 
   1731   <p>HTML user agents (e.g. Web browsers) then <i>parse</i> this
   1732   markup, turning it into a DOM (Document Object Model) tree. A DOM
   1733   tree is an in-memory representation of a document.</p>
   1734 
   1735   <p>DOM trees contain several kinds of nodes, in particular a DOCTYPE
   1736   node, elements, text nodes, and comment nodes.</p>
   1737 
   1738   <p>The <a href=#intro-early-example>markup snippet at the top of
   1739   this section</a> would be turned into the following DOM tree:</p>
   1740 
   1741   <ul class=domTree><li class=t10>DOCTYPE: <code><a href=#the-html-element-0>html</a></code><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-title-element-0>title</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;</span><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">This is a </span><li class=t1><code><a href=#the-a-element>a</a></code> <span class=t2 title=""><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class=t3><code>#text</code>: <span title="">simple</span></ul><li class=t3><code>#text</code>: <span title=""> sample.</span></ul><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</span><li class=t8><code>#comment</code>: <span title=""> this is a comment </span><li class=t3><code>#text</code>: <span title="">&#9166;&#9251;&#9166;</span></ul></ul></ul><p>The <a href=#root-element>root element</a> of this tree is the
   1742   <code><a href=#the-html-element-0>html</a></code> element, which is the element always found at the
   1743   root of HTML documents. It contains two elements, <code><a href=#the-head-element-0>head</a></code>
   1744   and <code><a href=#the-body-element-0>body</a></code>, as well as a text node between them.</p>
   1745 
   1746   <p>There are many more text nodes in the DOM tree than one would
   1747   initially expect, because the source contains a number of spaces
   1748   (represented here by "&#9251;") and line breaks ("&#9166;") that
   1749   all end up as text nodes in the DOM.</p>
   1750 
   1751   <p>The <code><a href=#the-head-element-0>head</a></code> element contains a <code><a href=#the-title-element-0>title</a></code>
   1752   element, which itself contains a text node with the text "Sample
   1753   page". Similarly, the <code><a href=#the-body-element-0>body</a></code> element contains an
   1754   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, a <code><a href=#the-p-element>p</a></code> element, and a
   1755   comment.</p>
   1756 
   1757   <hr><p>This DOM tree can be manipulated from scripts in the
   1758   page. Scripts (typically in JavaScript) are small programs that can
   1759   be embedded using the <code><a href=#script>script</a></code> element or using
   1760   <a href=#event-handler-content-attributes>event handler content attributes</a>. For example, here is
   1761   a form with a script that sets the value of the form's
   1762   <code><a href=#the-output-element>output</a></code> element to say "Hello World":</p>
   1763 
   1764   <pre>&lt;<a href=#the-form-element>form</a> <a href=#attr-form-name title=attr-form-name>name</a>="main"&gt;
   1765  Result: &lt;<a href=#the-output-element>output</a> <a href=#attr-fe-name title=attr-fe-name>name</a>="result"&gt;&lt;/output&gt;
   1766  &lt;<a href=#script>script</a>&gt;
   1767   <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-forms title=dom-document-forms>forms</a>.main.<a href=#dom-form-elements title=dom-form-elements>elements</a>.result.<a href=#dom-output-value title=dom-output-value>value</a> = 'Hello World';
   1768  &lt;/script&gt;
   1769 &lt;/form&gt;</pre>
   1770 
   1771   <p>Each element in the DOM tree is represented by an object, and
   1772   these objects have APIs so that they can be manipulated. For
   1773   instance, a link (e.g. the <code><a href=#the-a-element>a</a></code> element in the tree above)
   1774   can have its "<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>"
   1775   attribute changed in several ways:</p>
   1776 
   1777   <pre>var a = <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-links title=dom-document-links>links</a>[0]; // obtain the first link in the document
   1778 a.<a href=#dom-a-href title=dom-a-href>href</a> = 'sample.html'; // change the destination URL of the link
   1779 a.<a href=#dom-uda-protocol title=dom-uda-protocol>protocol</a> = 'https'; // change just the scheme part of the URL
   1780 a.setAttribute('href', 'http://example.com/'); // change the content attribute directly</pre>
   1781 
   1782   <p>Since DOM trees are used as the way to represent HTML documents
   1783   when they are processed and presented by implementations (especially
   1784   interactive implementations like Web browsers), this specification
   1785   is mostly phrased in terms of DOM trees, instead of the markup
   1786   described above.</p>
   1787 
   1788   <hr><p>HTML documents represent a media-independent description of
   1789   interactive content. HTML documents might be rendered to a screen,
   1790   or through a speech synthesizer, or on a braille display. To
   1791   influence exactly how such rendering takes place, authors can use a
   1792   styling language such as CSS.</p>
   1793 
   1794   <p>In the following example, the page has been made yellow-on-blue
   1795   using CSS.</p>
   1796 
   1797   <pre>&lt;!DOCTYPE html&gt;
   1798 &lt;html&gt;
   1799  &lt;head&gt;
   1800   &lt;title&gt;Sample styled page&lt;/title&gt;
   1801   &lt;style&gt;
   1802    body { background: navy; color: yellow; }
   1803   &lt;/style&gt;
   1804  &lt;/head&gt;
   1805  &lt;body&gt;
   1806   &lt;h1&gt;Sample styled page&lt;/h1&gt;
   1807   &lt;p&gt;This page is just a demo.&lt;/p&gt;
   1808  &lt;/body&gt;
   1809 &lt;/html&gt;</pre>
   1810 
   1811   <p>For more details on how to use HTML, authors are encouraged to
   1812   consult tutorials and guides. Some of the examples included in this
   1813   specification might also be of use, but the novice author is
   1814   cautioned that this specification, by necessity, defines the
   1815   language with a level of detail that might be difficult to
   1816   understand at first.</p>
   1817 
   1818 
   1819   <h3 id=conformance-requirements-for-authors><span class=secno>1.10 </span>Conformance requirements for authors</h3>
   1820 
   1821   <p><i>This section is non-normative.</i></p>
   1822 
   1823   <p>Unlike previous versions of the HTML specification, this
   1824   specification defines in some detail the required processing for
   1825   invalid documents as well as valid documents.</p> <!-- This has led
   1826   to some questioning the purpose of conformance criteria: if there is
   1827   no ambiguity in how something will be processed, why disallow it? -->
   1828 
   1829   <p>However, even though the processing of invalid content is in most
   1830   cases well-defined, conformance requirements for documents are still
   1831   important: in practice, interoperability (the situation in which all
   1832   implementations process particular content in a reliable and
   1833   identical or equivalent way) is not the only goal of document
   1834   conformance requirements. This section details some of the more
   1835   common reasons for still distinguishing between a conforming
   1836   document and one with errors.</p>
   1837 
   1838 
   1839   <h4 id=presentational-markup><span class=secno>1.10.1 </span>Presentational markup</h4>
   1840 
   1841   <p><i>This section is non-normative.</i></p>
   1842 
   1843   <p>The majority of presentational features from previous versions of
   1844   HTML are no longer allowed. Presentational markup in general has
   1845   been found to have a number of problems:</p>
   1846 
   1847   <dl><dt>The use of presentational elements leads to poorer accessibility</dt>
   1848 
   1849    <dd>
   1850 
   1851     <p>While it is possible to use presentational markup in a way that
   1852     provides users of assistive technologies (ATs) with an acceptable
   1853     experience (e.g. using ARIA), doing so is significantly more
   1854     difficult than doing so when using semantically-appropriate
   1855     markup. Furthermore, even using such techniques doesn't help make
   1856     pages accessible for non-AT non-graphical users, such as users of
   1857     text-mode browsers.</p>
   1858 
   1859     <p>Using media-independent markup, on the other hand, provides an
   1860     easy way for documents to be authored in such a way that they work
   1861     for more users (e.g. text browsers).</p>
   1862 
   1863    </dd>
   1864 
   1865 
   1866    <dt>Higher cost of maintenance</dt>
   1867 
   1868    <dd>
   1869 
   1870     <p>It is significantly easier to maintain a site written in such a
   1871     way that the markup is style-independent. For example, changing
   1872     the color of a site that uses <code>&lt;font&nbsp;color=""&gt;</code>
   1873     throughout requires changes across the entire site, whereas a
   1874     similar change to a site based on CSS can be done by changing a
   1875     single file.</p>
   1876 
   1877    </dd>
   1878 
   1879 
   1880    <dt>Higher document sizes</dt>
   1881 
   1882    <dd>
   1883 
   1884     <p>Presentational markup tends to be much more redundant, and thus
   1885     results in larger document sizes.</p>
   1886 
   1887    </dd>
   1888 
   1889   </dl><p>For those reasons, presentational markup has been removed from
   1890   HTML in this version. This change should not come as a surprise;
   1891   HTML4 deprecated presentational markup many years ago and provided a
   1892   mode (HTML4 Transitional) to help authors move away from
   1893   presentational markup; later, XHTML 1.1 went further and obsoleted
   1894   those features altogether.</p>
   1895 
   1896   <p>The only remaining presentational markup features in HTML are the
   1897   <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute and the
   1898   <code><a href=#the-style-element>style</a></code> element. Use of the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute is somewhat discouraged in
   1899   production environments, but it can be useful for rapid prototyping
   1900   (where its rules can be directly moved into a separate style sheet
   1901   later) and for providing specific styles in unusual cases where a
   1902   separate style sheet would be inconvenient. Similarly, the
   1903   <code><a href=#the-style-element>style</a></code> element can be useful in syndication or for
   1904   page-specific styles, but in general an external style sheet is
   1905   likely to be more convenient when the styles apply to multiple
   1906   pages.</p>
   1907 
   1908   <p>It is also worth noting that four elements that were previously
   1909   presentational have been redefined in this specification to be
   1910   media-independent: <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>, <code><a href=#the-hr-element>hr</a></code>,
   1911   and <code><a href=#the-small-element>small</a></code>.</p>
   1912 
   1913 
   1914   <h4 id=syntax-errors><span class=secno>1.10.2 </span>Syntax errors</h4>
   1915 
   1916   <p><i>This section is non-normative.</i></p>
   1917 
   1918   <p>The syntax of HTML is constrained to avoid a wide variety of
   1919   problems.</p>
   1920 
   1921   <dl><dt>Unintuitive error-handling behavior</dt>
   1922 
   1923    <dd>
   1924 
   1925     <p>Certain invalid syntax constructs, when parsed, result in DOM
   1926     trees that are highly unintuitive.</p>
   1927 
   1928     <div class=example>
   1929 
   1930      <p>For example, the following markup fragment results in a DOM
   1931      with an <code><a href=#the-hr-element>hr</a></code> element that is an <em>earlier</em>
   1932      sibling of the corresponding <code><a href=#the-table-element>table</a></code> element:</p>
   1933 
   1934      <pre class=bad>&lt;table&gt;&lt;hr&gt;...</pre>
   1935 
   1936     </div>
   1937 
   1938    </dd>
   1939 
   1940 
   1941    <dt>Errors with optional error recovery</dt>
   1942 
   1943    <dd>
   1944 
   1945     <p>To allow user agents to be used in controlled environments
   1946     without having to implement the more bizarre and convoluted error
   1947     handling rules, user agents are permitted to fail whenever
   1948     encountering a <a href=#parse-error>parse error</a>.</p>
   1949 
   1950    </dd>
   1951 
   1952 
   1953    <dt>Errors where the error-handling behavior is not compatible with streaming user agents</dt>
   1954 
   1955    <dd>
   1956 
   1957     <p>Some error-handling behavior, such as the behavior for the
   1958     <code title="">&lt;table&gt;&lt;hr&gt;...</code> example mentioned
   1959     above, are incompatible with streaming user agents. To avoid
   1960     interoperability problems with such user agents, any syntax
   1961     resulting in such behavior is considered invalid.</p>
   1962 
   1963    </dd>
   1964 
   1965 
   1966    <dt>Errors that can result in infoset coercion</dt>
   1967 
   1968    <dd>
   1969 
   1970     <p>When a user agent based on XML is connected to an HTML parser,
   1971     it is possible that certain invariants that XML enforces, such as
   1972     comments never containing two consecutive hyphens, will be
   1973     violated by an HTML file. Handling this can require that the
   1974     parser coerce the HTML DOM into an XML-compatible infoset. Most
   1975     syntax constructs that require such handling are considered
   1976     invalid.</p>
   1977 
   1978    </dd>
   1979 
   1980 
   1981    <dt>Errors that result in disproportionally poor performance</dt>
   1982 
   1983    <dd>
   1984 
   1985     <p>Certain syntax constructs can result in disproportionally poor
   1986     performance. To discourage the use of such constructs, they are
   1987     typically made non-conforming.</p>
   1988 
   1989     <div class=example>
   1990 
   1991      <p>For example, the following markup results in poor performance
   1992      when hitting the highlighted end tag, since all the open elements
   1993      are examined first to see if they match the close tag:</p>
   1994 
   1995      <pre class=bad>&lt;p&gt;&lt;em&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;...&lt;span&gt;&lt;span&gt;&lt;span&gt;<strong>&lt;/em&gt;</strong></pre>
   1996 
   1997     </div>
   1998 
   1999    </dd>
   2000 
   2001 
   2002    <dt>Errors involving fragile syntax constructs</dt>
   2003 
   2004    <dd>
   2005 
   2006     <p>There are syntax constructs that, for historical reasons, are
   2007     relatively fragile. To help reduce the number of users who
   2008     accidentally run into such problems, they are made
   2009     non-conforming.</p>
   2010 
   2011     <div class=example>
   2012 
   2013      <p>For example, the parsing of certain named character references
   2014      in attributes happens even with the closing semicolon being
   2015      omitted. It is safe to include an ampersand followed by letters
   2016      that do not form a named character reference, but if the letters
   2017      are changed to a string that <em>does</em> form a named character
   2018      reference, they will be interpreted as that character instead.</p>
   2019 
   2020      <p>In this fragment, the attribute's value is "<code title="">?hello=1&amp;world=2</code>":</p>
   2021 
   2022      <pre class=bad>&lt;a href="?hello=1&amp;world=2"&gt;Demo&lt;/a&gt;</pre>
   2023 
   2024      <p>In the following fragment, however, the attribute's value is
   2025      actually "<code title="">?original=1&copy;=2</code>",
   2026      <em>not</em> the intended "<code title="">?original=1&amp;copy=2</code>":</p>
   2027 
   2028      <pre class=bad>&lt;a href="?original=1&amp;copy=2"&gt;Compare&lt;/a&gt;</pre>
   2029 
   2030      <p>To avoid this problem, all named character references are
   2031      required to end with a semicolon, and uses of named character
   2032      references without a semicolon are flagged as errors.</p>
   2033 
   2034      <p>Thus, the correct way to express the above cases is as
   2035      follows:</p>
   2036 
   2037      <pre>&lt;a href="?hello=1&amp;world=2"&gt;Demo&lt;/a&gt; &lt;!-- &amp;world is ok, since it's not a named character reference --&gt;</pre>
   2038      <pre>&lt;a href="?original=1&amp;amp;copy=2"&gt;Compare&lt;/a&gt; &lt;!-- the &amp; has to be escaped, since &amp;copy <em>is</em> a named character reference --&gt;</pre>
   2039 
   2040     </div>
   2041 
   2042    </dd>
   2043 
   2044 
   2045    <dt>Errors involving known interoperability problems in legacy user agents</dt>
   2046 
   2047    <dd>
   2048 
   2049     <p>Certain syntax constructs are known to cause especially subtle
   2050     or serious problems in legacy user agents, and are therefore
   2051     marked as non-conforming to help authors avoid them.</p>
   2052 
   2053     <div class=example>
   2054 
   2055      <p>For example, this is why the U+0060 GRAVE ACCENT character (`)
   2056      is not allowed in unquoted attributes. In certain legacy user
   2057      agents, <!-- namely IE --> it is sometimes treated as a quote
   2058      character.</p>
   2059 
   2060     </div>
   2061 
   2062     <div class=example>
   2063 
   2064      <p>Another example of this is the DOCTYPE, which is required to
   2065      trigger <a href=#no-quirks-mode>no-quirks mode</a>, because the behavior of
   2066      legacy user agents in <a href=#quirks-mode>quirks mode</a> is often largely
   2067      undocumented.</p>
   2068 
   2069     </div>
   2070 
   2071    </dd>
   2072 
   2073 
   2074    <dt>Errors that risk exposing authors to security attacks</dt>
   2075 
   2076    <dd>
   2077 
   2078     <p>Certain restrictions exist purely to avoid known security
   2079     problems.</p>
   2080 
   2081     <div class=example>
   2082 
   2083      <p>For example, the restriction on using UTF-7 exists purely to
   2084      avoid authors falling prey to a known cross-site-scripting attack
   2085      using UTF-7.</p>
   2086 
   2087     </div>
   2088 
   2089    </dd>
   2090 
   2091 
   2092    <dt>Cases where the author's intent is unclear</dt>
   2093 
   2094    <dd>
   2095 
   2096     <p>Markup where the author's intent is very unclear is often made
   2097     non-conforming. Correcting these errors early makes later
   2098     maintenance easier.</p>
   2099 
   2100     <div class=example>
   2101 
   2102      <p>For example, it is unclear whether the author intended the
   2103      following to be an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> heading or an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>
   2104      heading:</p>
   2105 
   2106      <pre class=bad>&lt;h1&gt;Contact details&lt;/h2&gt;</pre>
   2107 
   2108     </div>
   2109 
   2110    </dd>
   2111 
   2112 
   2113    <dt>Cases that are likely to be typos</dt>
   2114 
   2115    <dd>
   2116 
   2117     <p>When a user makes a simple typo, it is helpful if the error can
   2118     be caught early, as this can save the author a lot of debugging
   2119     time. This specification therefore usually considers it an error
   2120     to use element names, attribute names, and so forth, that do not
   2121     match the names defined in this specification.</p>
   2122 
   2123     <div class=example>
   2124 
   2125      <p>For example, if the author typed <code>&lt;capton&gt;</code>
   2126      instead of <code>&lt;caption&gt;</code>, this would be flagged as an
   2127      error and the author could correct the typo immediately.</p>
   2128 
   2129     </div>
   2130 
   2131    </dd>
   2132 
   2133 
   2134    <dt>Errors that could interfere with new syntax in the future</dt>
   2135 
   2136    <dd>
   2137 
   2138     <p>In order to allow the language syntax to be extended in the
   2139     future, certain otherwise harmless features are disallowed.</p>
   2140 
   2141     <div class=example>
   2142 
   2143      <p>For example, "attributes" in end tags are ignored currently,
   2144      but they are invalid, in case a future change to the language
   2145      makes use of that syntax feature without conflicting with
   2146      already-deployed (and valid!) content.</p>
   2147 
   2148     </div>
   2149 
   2150    </dd>
   2151 
   2152 
   2153   </dl><p>Some authors find it helpful to be in the practice of always
   2154   quoting all attributes and always including all optional tags,
   2155   preferring the consistency derived from such custom over the minor
   2156   benefits of terseness afforded by making use of the flexibility of
   2157   the HTML syntax. To aid such authors, conformance checkers can
   2158   provide modes of operation wherein such conventions are
   2159   enforced.</p>
   2160 
   2161 
   2162 
   2163   <h4 id=restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3 </span>Restrictions on content models and on attribute values</h4>
   2164 
   2165   <p><i>This section is non-normative.</i></p>
   2166 
   2167   <p>Beyond the syntax of the language, this specification also places
   2168   restrictions on how elements and attributes can be specified. These
   2169   restrictions are present for similar reasons:</p>
   2170 
   2171   <dl><dt>Errors involving content with dubious semantics</dt>
   2172 
   2173    <dd>
   2174 
   2175     <p>To avoid misuse of elements with defined meanings, content
   2176     models are defined that restrict how elements can be nested when
   2177     such nestings would be of dubious value.</p>
   2178 
   2179     <p class=example>For example, this specification disallows
   2180     nesting a <code><a href=#the-section-element>section</a></code> element inside a <code><a href=#the-kbd-element>kbd</a></code>
   2181     element, since it is highly unlikely for an author to indicate
   2182     that an entire section should be keyed in.</p>
   2183 
   2184    </dd>
   2185 
   2186 
   2187    <dt>Errors that involve a conflict in expressed semantics</dt>
   2188 
   2189    <dd>
   2190 
   2191     <p>Similarly, to draw the author's attention to mistakes in the
   2192     use of elements, clear contradictions in the semantics expressed
   2193     are also considered conformance errors.</p>
   2194 
   2195     <div class=example>
   2196 
   2197      <p>In the fragments below, for example, the semantics are
   2198      nonsensical: a row cannot simultaneously be a cell, nor can a
   2199      radio button be a progress bar.</p>
   2200 
   2201      <pre class=bad>&lt;tr role="cell"&gt;</pre>
   2202      <pre class=bad>&lt;input type=radio role=progressbar&gt;</pre>
   2203 
   2204     </div>
   2205 
   2206     <p class=example>Another example is the restrictions on the
   2207     content models of the <code><a href=#the-ul-element>ul</a></code> element, which only allows
   2208     <code><a href=#the-li-element>li</a></code> element children. Lists by definition consist just
   2209     of zero or more list items, so if a <code><a href=#the-ul-element>ul</a></code> element
   2210     contains something other than an <code><a href=#the-li-element>li</a></code> element, it's not
   2211     clear what was meant.</p>
   2212 
   2213    </dd>
   2214 
   2215 
   2216    <dt>Cases where the default styles are likely to lead to confusion</dt>
   2217 
   2218    <dd>
   2219 
   2220     <p>Certain elements have default styles or behaviors that make
   2221     certain combinations likely to lead to confusion. Where these have
   2222     equivalent alternatives without this problem, the confusing
   2223     combinations are disallowed.</p>
   2224 
   2225     <p class=example>For example, <code><a href=#the-div-element>div</a></code> elements are
   2226     rendered as block boxes, and <code><a href=#the-span-element>span</a></code> elements as inline
   2227     boxes. Putting a block box in an inline box is unnecessarily
   2228     confusing; since either nesting just <code><a href=#the-div-element>div</a></code> elements, or
   2229     nesting just <code><a href=#the-span-element>span</a></code> elements, or nesting
   2230     <code><a href=#the-span-element>span</a></code> elements inside <code><a href=#the-div-element>div</a></code> elements all
   2231     serve the same purpose as nesting a <code><a href=#the-div-element>div</a></code> element in a
   2232     <code><a href=#the-span-element>span</a></code> element, but only the latter involves a block
   2233     box in an inline box, the latter combination is disallowed.</p>
   2234 
   2235     <p class=example>Another example would be the way
   2236     <a href=#interactive-content>interactive content</a> cannot be nested. For example, a
   2237     <code><a href=#the-button-element>button</a></code> element cannot contain a <code><a href=#the-textarea-element>textarea</a></code>
   2238     element. This is because the default behavior of such nesting
   2239     interactive elements would be highly confusing to users. Instead
   2240     of nesting these elements, they can be placed side by side.</p>
   2241 
   2242    </dd>
   2243 
   2244 
   2245    <dt>Errors that indicate a likely misunderstanding of the specification</dt>
   2246 
   2247    <dd>
   2248 
   2249     <p>Sometimes, something is disallowed because allowing it would
   2250     likely cause author confusion.</p>
   2251 
   2252     <p class=example>For example, setting the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute to the value
   2253     "<code title="">false</code>" is disallowed, because despite the
   2254     appearance of meaning that the element is enabled, it in fact
   2255     means that the element is <em>disabled</em> (what matters for
   2256     implementations is the presence of the attribute, not its
   2257     value).</p>
   2258 
   2259    </dd>
   2260 
   2261 
   2262    <dt>Errors involving limits that have been imposed merely to simplify the language</dt>
   2263 
   2264    <dd>
   2265 
   2266     <p>Some conformance errors simplify the language that authors need
   2267     to learn.</p>
   2268 
   2269     <p class=example>For example, the <code><a href=#the-area-element>area</a></code> element's
   2270     <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute, despite
   2271     accepting both <code title=attr-area-shape-keyword-circ><a href=#attr-area-shape-keyword-circ>circ</a></code> and <code title=attr-area-shape-keyword-circle><a href=#attr-area-shape-keyword-circle>circle</a></code> values in
   2272     practice as synonyms, disallows the use of the <code title=attr-area-shape-keyword-circ><a href=#attr-area-shape-keyword-circ>circ</a></code> value, so as to
   2273     simplify tutorials and other learning aids. There would be no
   2274     benefit to allowing both, but it would cause extra confusion when
   2275     teaching the language.</p>
   2276 
   2277    </dd>
   2278 
   2279 
   2280    <dt>Errors that involve peculiarities of the parser</dt>
   2281 
   2282    <dd>
   2283 
   2284     <p>Certain elements are parsed in somewhat eccentric ways
   2285     (typically for historical reasons), and their content model
   2286     restrictions are intended to avoid exposing the author to these
   2287     issues.</p>
   2288 
   2289     <div class=example>
   2290 
   2291      <p>For example, a <code><a href=#the-form-element>form</a></code> element isn't allowed inside
   2292      <a href=#phrasing-content>phrasing content</a>, because when parsed as HTML, a
   2293      <code><a href=#the-form-element>form</a></code> element's start tag will imply a <code><a href=#the-p-element>p</a></code>
   2294      element's end tag. Thus, the following markup results in two
   2295      <a href=#paragraph title=paragraph>paragraphs</a>, not one:</p>
   2296 
   2297      <pre>&lt;p&gt;Welcome. &lt;form&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input&gt;&lt;/form&gt;</pre>
   2298 
   2299      <p>It is parsed exactly like the following:</p>
   2300 
   2301      <pre>&lt;p&gt;Welcome. &lt;/p&gt;&lt;form&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input&gt;&lt;/form&gt;</pre>
   2302 
   2303     </div>
   2304 
   2305    </dd>
   2306 
   2307 
   2308    <dt>Errors that would likely result in scripts failing in hard-to-debug ways</dt>
   2309 
   2310    <dd>
   2311 
   2312     <p>Some errors are intended to help prevent script problems that
   2313     would be hard to debug.</p>
   2314 
   2315     <p class=example>This is why, for instance, it is non-conforming
   2316     to have two <code title=attr-id><a href=#the-id-attribute>id</a></code> attributes with the
   2317     same value. Duplicate IDs lead to the wrong element being
   2318     selected, with sometimes disastrous effects whose cause is hard to
   2319     determine.</p>
   2320 
   2321    </dd>
   2322 
   2323 
   2324    <dt>Errors that waste authoring time</dt>
   2325 
   2326    <dd>
   2327 
   2328     <p>Some constructs are disallowed because historically they have
   2329     been the cause of a lot of wasted authoring time, and by
   2330     encouraging authors to avoid making them, authors can save time in
   2331     future efforts.</p>
   2332 
   2333     <p class=example>For example, a <code><a href=#script>script</a></code> element's
   2334     <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute causes the
   2335     element's contents to be ignored. However, this isn't obvious,
   2336     especially if the element's contents appear to be executable
   2337     script &mdash; which can lead to authors spending a lot of time
   2338     trying to debug the inline script without realising that it is not
   2339     executing. To reduce this problem, this specification makes it
   2340     non-conforming to have executable script in a <code><a href=#script>script</a></code>
   2341     element when the <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   2342     attribute is present. This means that authors who are validating
   2343     their documents are less likely to waste time with this kind of
   2344     mistake.</p>
   2345 
   2346    </dd>
   2347 
   2348 
   2349    <dt>Errors that involve areas that affect authors migrating to and from XHTML</dt>
   2350 
   2351    <dd>
   2352 
   2353     <p>Some authors like to write files that can be interpreted as
   2354     both XML and HTML with similar results. Though this practice is
   2355     discouraged in general due to the myriad of subtle complications
   2356     involved (especially when involving scripting, styling, or any
   2357     kind of automated serialization), this specification has a few
   2358     restrictions intended to at least somewhat mitigate the
   2359     difficulties. This makes it easier for authors to use this as a
   2360     transitionary step when migrating between HTML and XHTML.</p>
   2361 
   2362     <p class=example>For example, there are somewhat complicated
   2363     rules surrounding the <code title=attr-lang><a href=#attr-lang>lang</a></code> and
   2364     <code title=attr-xml-lang><a href=#attr-xml-lang>xml:lang</a></code> attributes intended
   2365     to keep the two synchronized.</p>
   2366 
   2367     <p class=example>Another example would be the restrictions on
   2368     the values of <code title="">xmlns</code> attributes in the HTML
   2369     serialization, which are intended to ensure that elements in
   2370     conforming documents end up in the same namespaces whether
   2371     processed as HTML or XML.</p>
   2372 
   2373    </dd>
   2374 
   2375 
   2376    <dt>Errors that involve areas reserved for future expansion</dt>
   2377 
   2378    <dd>
   2379 
   2380     <p>As with the restrictions on the syntax intended to allow for
   2381     new syntax in future revisions of the language, some restrictions
   2382     on the content models of elements and values of attributes are
   2383     intended to allow for future expansion of the HTML vocabulary.</p>
   2384 
   2385     <p class=example>For example, limiting the values of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute that start
   2386     with an U+005F LOW LINE character (_) to only specific predefined
   2387     values allows new predefined values to be introduced at a future
   2388     time without conflicting with author-defined values.</p>
   2389 
   2390    </dd>
   2391 
   2392 
   2393    <dt>Errors that indicate a mis-use of other specifications</dt>
   2394 
   2395    <dd>
   2396 
   2397     <p>Certain restrictions are intended to support the restrictions
   2398     made by other specifications.</p>
   2399 
   2400     <p class=example>For example, requiring that attributes that
   2401     take media queries use only <em>valid</em> media queries
   2402     reinforces the importance of following the conformance rules of
   2403     that specification.</p>
   2404 
   2405    </dd>
   2406 
   2407   </dl><h3 id=recommended-reading><span class=secno>1.11 </span>Recommended reading</h3>
   2408 
   2409   <p><i>This section is non-normative.</i></p>
   2410 
   2411   <p>The following documents might be of interest to readers of this
   2412   specification.</p>
   2413 
   2414   <dl><dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <a href=#refsCHARMOD>[CHARMOD]</a></dt>
   2415 
   2416    <dd><blockquote><p>This Architectural Specification provides
   2417    authors of specifications, software developers, and content
   2418    developers with a common reference for interoperable text
   2419    manipulation on the World Wide Web, building on the Universal
   2420    Character Set, defined jointly by the Unicode Standard and ISO/IEC
   2421    10646. Topics addressed include use of the terms 'character',
   2422    'encoding' and 'string', a reference processing model, choice and
   2423    identification of character encodings, character escaping, and
   2424    string indexing.</blockquote></dd>
   2425 
   2426    <dt><cite>Unicode Security Considerations</cite> <a href=#refsUTR36>[UTR36]</a></dt>
   2427 
   2428    <dd><blockquote><p>Because Unicode contains such a large number of
   2429    characters and incorporates the varied writing systems of the
   2430    world, incorrect usage can expose programs or systems to possible
   2431    security attacks. This is especially important as more and more
   2432    products are internationalized. This document describes some of the
   2433    security considerations that programmers, system analysts,
   2434    standards developers, and users should take into account, and
   2435    provides specific recommendations to reduce the risk of
   2436    problems.</blockquote></dd>
   2437 
   2438    <dt><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite> <a href=#refsWCAG>[WCAG]</a></dt>
   2439 
   2440    <dd><blockquote><p>Web Content Accessibility Guidelines (WCAG) 2.0
   2441    covers a wide range of recommendations for making Web content more
   2442    accessible. Following these guidelines will make content accessible
   2443    to a wider range of people with disabilities, including blindness
   2444    and low vision, deafness and hearing loss, learning disabilities,
   2445    cognitive limitations, limited movement, speech disabilities,
   2446    photosensitivity and combinations of these. Following these
   2447    guidelines will also often make your Web content more usable to
   2448    users in general.</blockquote></dd>
   2449 
   2450    <dt class=impl><cite>Authoring Tool Accessibility Guidelines (ATAG) 2.0</cite> <a href=#refsATAG>[ATAG]</a></dt>
   2451 
   2452    <dd class=impl><blockquote><p>This specification provides
   2453    guidelines for designing Web content authoring tools that are more
   2454    accessible for people with disabilities. An authoring tool that
   2455    conforms to these guidelines will promote accessibility by
   2456    providing an accessible user interface to authors with disabilities
   2457    as well as by enabling, supporting, and promoting the production of
   2458    accessible Web content by all authors.</blockquote></dd>
   2459 
   2460    <dt class=impl><cite>User Agent Accessibility Guidelines (UAAG) 2.0</cite> <a href=#refsUAAG>[UAAG]</a></dt>
   2461 
   2462    <dd class=impl><blockquote><p>This document provides guidelines
   2463    for designing user agents that lower barriers to Web accessibility
   2464    for people with disabilities. User agents include browsers and
   2465    other types of software that retrieve and render Web content. A
   2466    user agent that conforms to these guidelines will promote
   2467    accessibility through its own user interface and through other
   2468    internal facilities, including its ability to communicate with
   2469    other technologies (especially assistive
   2470    technologies). Furthermore, all users, not just users with
   2471    disabilities, should find conforming user agents to be more
   2472    usable.</blockquote></dd>
   2473 
   2474   </dl><h2 id=infrastructure><span class=secno>2 </span>Common infrastructure</h2>
   2475 
   2476   <h3 id=terminology><span class=secno>2.1 </span>Terminology</h3>
   2477 
   2478   <p>This specification refers to both HTML and XML attributes and IDL
   2479   attributes, often in the same context. When it is not clear which is
   2480   being referred to, they are referred to as <dfn title="">content
   2481   attributes</dfn> for HTML and XML attributes, and <dfn title="">IDL
   2482   attributes</dfn> for those defined on IDL interfaces. Similarly, the
   2483   term "properties" is used for both JavaScript object properties and
   2484   CSS properties. When these are ambiguous they are qualified as <dfn title="">object properties</dfn> and <dfn title="">CSS
   2485   properties</dfn> respectively.</p>
   2486 
   2487   <p>Generally, when the specification states that a feature applies
   2488   to <a href=#syntax>the HTML syntax</a> or <a href=#the-xhtml-syntax>the XHTML syntax</a>, it
   2489   also includes the other. When a feature specifically only applies to
   2490   one of the two languages, it is called out by explicitly stating
   2491   that it does not apply to the other format, as in "for HTML,
   2492   ... (this does not apply to XHTML)".</p>
   2493 
   2494   <p>This specification uses the term <dfn title="">document</dfn> to
   2495   refer to any use of HTML, ranging from short static documents to
   2496   long essays or reports with rich multimedia, as well as to
   2497   fully-fledged interactive applications.</p>
   2498 
   2499   <p>For simplicity, terms such as <dfn title="">shown</dfn>, <dfn title="">displayed</dfn>, and <dfn title="">visible</dfn> might
   2500   sometimes be used when referring to the way a document is rendered
   2501   to the user. These terms are not meant to imply a visual medium;
   2502   they must be considered to apply to other media in equivalent
   2503   ways.</p>
   2504 
   2505   <div class=impl>
   2506 
   2507   <p>When an algorithm B says to return to another algorithm A, it
   2508   implies that A called B. Upon returning to A, the implementation
   2509   must continue from where it left off in calling B.</p>
   2510 
   2511   </div>
   2512 
   2513 
   2514   <h4 id=resources><span class=secno>2.1.1 </span>Resources</h4>
   2515 
   2516   <p>The specification uses the term <dfn title="">supported</dfn>
   2517   when referring to whether a user agent has an implementation capable
   2518   of decoding the semantics of an external resource. A format or type
   2519   is said to be <i>supported</i> if the implementation can process an
   2520   external resource of that format or type without critical aspects of
   2521   the resource being ignored. Whether a specific resource is
   2522   <i>supported</i> can depend on what features of the resource's
   2523   format are in use.</p>
   2524 
   2525   <p class=example>For example, a PNG image would be considered to
   2526   be in a supported format if its pixel data could be decoded and
   2527   rendered, even if, unbeknownst to the implementation, the image also
   2528   contained animation data.</p>
   2529 
   2530   <p class=example>A MPEG4 video file would not be considered to be
   2531   in a supported format if the compression format used was not
   2532   supported, even if the implementation could determine the dimensions
   2533   of the movie from the file's metadata.</p>
   2534 
   2535   <p>What some specifications, in particular the HTTP and URI
   2536   specifications, refer to as a <i>representation</i> is referred to
   2537   in this specification as a <dfn title="">resource</dfn>. <a href=#refsHTTP>[HTTP]</a> <a href=#refsRFC3986>[RFC3986]</a></p>
   2538 
   2539   <p>The term <dfn id=mime-type>MIME type</dfn> is used to refer to what is
   2540   sometimes called an <i>Internet media type</i> in protocol
   2541   literature. The term <i>media type</i> in this specification is used
   2542   to refer to the type of media intended for presentation, as used by
   2543   the CSS specifications. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsMQ>[MQ]</a></p>
   2544 
   2545   <p>A string is a <dfn id=valid-mime-type>valid MIME type</dfn> if it matches the <code title="">media-type</code> rule defined in section 3.7 "Media Types"
   2546   of RFC 2616. In particular, a <a href=#valid-mime-type>valid MIME type</a> may
   2547   include MIME type parameters. <a href=#refsHTTP>[HTTP]</a></p>
   2548 
   2549   <p>A string is a <dfn id=valid-mime-type-with-no-parameters>valid MIME type with no parameters</dfn> if it
   2550   matches the <code title="">media-type</code> rule defined in section
   2551   3.7 "Media Types" of RFC 2616, but does not contain any U+003B
   2552   SEMICOLON characters (;). In other words, if it consists only of a
   2553   type and subtype, with no MIME Type parameters. <a href=#refsHTTP>[HTTP]</a></p>
   2554 
   2555   <p>The term <dfn id=html-mime-type>HTML MIME type</dfn> is used to refer to the <a href=#mime-type title="MIME type">MIME types</a> <code><a href=#text/html>text/html</a></code> and
   2556   <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>.</p>
   2557 
   2558   <p>A resource's <dfn id=critical-subresources>critical subresources</dfn> are those that the
   2559   resource needs to have available to be correctly processed. Which
   2560   resources are considered critical or not is defined by the
   2561   specification that defines the resource's format. For CSS resources,
   2562   only <code title="">@import</code> rules introduce <a href=#critical-subresources>critical
   2563   subresources</a>; other resources, e.g. fonts or backgrounds, are
   2564   not.</p>
   2565 
   2566 
   2567   <h4 id=xml><span class=secno>2.1.2 </span>XML</h4>
   2568 
   2569   <p id=html-namespace>To ease migration from HTML to XHTML, UAs
   2570   conforming to this specification will place elements in HTML in the
   2571   <code>http://www.w3.org/1999/xhtml</code> namespace, at least for
   2572   the purposes of the DOM and CSS. The term "<dfn id=html-elements>HTML
   2573   elements</dfn>", when used in this specification, refers to any
   2574   element in that namespace, and thus refers to both HTML and XHTML
   2575   elements.</p>
   2576 
   2577   <p>Except where otherwise stated, all elements defined or mentioned
   2578   in this specification are in the
   2579   <code>http://www.w3.org/1999/xhtml</code> namespace, and all
   2580   attributes defined or mentioned in this specification have no
   2581   namespace.</p>
   2582 
   2583   <p>Attribute names are said to be <dfn id=xml-compatible>XML-compatible</dfn> if they
   2584   match the <a href=http://www.w3.org/TR/REC-xml/#NT-Name><code title="">Name</code></a> production defined in XML, they contain no
   2585   U+003A COLON characters (:), and their first three characters are
   2586   not an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   2587   "<code title="">xml</code>". <a href=#refsXML>[XML]</a></p>
   2588 
   2589   <p>The term <dfn id=xml-mime-type>XML MIME type</dfn> is used to refer to the <a href=#mime-type title="MIME type">MIME types</a> <code title="">text/xml</code>,
   2590   <code title="">application/xml</code>, and any <a href=#mime-type>MIME
   2591   type</a> whose subtype ends with the four characters "<code title="">+xml</code>". <a href=#refsRFC3023>[RFC3023]</a></p>
   2592 
   2593 
   2594   <h4 id=dom-trees><span class=secno>2.1.3 </span>DOM trees</h4>
   2595 
   2596   <p>The term <dfn id=root-element>root element</dfn>, when not explicitly qualified
   2597   as referring to the document's root element, means the furthest
   2598   ancestor element node of whatever node is being discussed, or the
   2599   node itself if it has no ancestors. When the node is a part of the
   2600   document, then the node's <a href=#root-element>root element</a> is indeed the
   2601   document's root element; however, if the node is not currently part
   2602   of the document tree, the root element will be an orphaned node.</p>
   2603 
   2604   <p>When an element's <a href=#root-element>root element</a> is the root element
   2605   of a <code><a href=#document>Document</a></code>, it is said to be <dfn id=in-a-document>in a
   2606   <code>Document</code></dfn>. An element is said to have been <dfn id=insert-an-element-into-a-document title="insert an element into a document">inserted into a
   2607   document</dfn> when its <a href=#root-element>root element</a> changes and is now
   2608   the document's <a href=#root-element>root element</a>. Analogously, an element is
   2609   said to have been <dfn id=remove-an-element-from-a-document title="remove an element from a
   2610   document">removed from a document</dfn> when its <a href=#root-element>root
   2611   element</a> changes from being the document's <a href=#root-element>root
   2612   element</a> to being another element.</p>
   2613 
   2614   <p>A node's <dfn id=home-subtree>home subtree</dfn> is the subtree rooted at that
   2615   node's <a href=#root-element>root element</a>. When a node is <a href=#in-a-document>in a
   2616   <code>Document</code></a>, its <a href=#home-subtree>home subtree</a> is that
   2617   <code><a href=#document>Document</a></code>'s tree.</p>
   2618 
   2619   <p>The <code><a href=#document>Document</a></code> of a <code><a href=#node>Node</a></code> (such as an
   2620   element) is the <code><a href=#document>Document</a></code> that the <code><a href=#node>Node</a></code>'s
   2621   <code title="">ownerDocument</code> IDL attribute returns. When a
   2622   <code><a href=#node>Node</a></code> is <a href=#in-a-document>in a <code>Document</code></a> then
   2623   that <code><a href=#document>Document</a></code> is always the <code><a href=#node>Node</a></code>'s
   2624   <code><a href=#document>Document</a></code>, and the <code><a href=#node>Node</a></code>'s <code title="">ownerDocument</code> IDL attribute thus always returns that
   2625   <code><a href=#document>Document</a></code>.</p>
   2626 
   2627   <p>The term <dfn id=tree-order>tree order</dfn> means a pre-order, depth-first
   2628   traversal of DOM nodes involved (through the <code title=dom-Node-parentNode><a href=#dom-node-parentnode>parentNode</a></code>/<code title=dom-Node-childNodes><a href=#dom-node-childnodes>childNodes</a></code> relationship).</p>
   2629 
   2630   <p>When it is stated that some element or attribute is <dfn id=ignore title=ignore>ignored</dfn>, or treated as some other value, or
   2631   handled as if it was something else, this refers only to the
   2632   processing of the node after it is in the DOM. <span class=impl>A
   2633   user agent must not mutate the DOM in such situations.</span></p>
   2634 
   2635   <p>The term <dfn id=text-node>text node</dfn> refers to any <code><a href=#text>Text</a></code>
   2636   node, including <code><a href=#cdatasection>CDATASection</a></code> nodes; specifically, any
   2637   <code><a href=#node>Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
   2638   or <code title="">CDATA_SECTION_NODE</code> (4). <a href=#refsDOMCORE>[DOMCORE]</a></p>
   2639 
   2640   <p>A content attribute is said to <dfn title="">change</dfn> value
   2641   only if its new value is different than its previous value; setting
   2642   an attribute to a value it already has does not change it.</p>
   2643 
   2644 
   2645   <h4 id=scripting-0><span class=secno>2.1.4 </span>Scripting</h4>
   2646 
   2647   <p>The construction "a <code>Foo</code> object", where
   2648   <code>Foo</code> is actually an interface, is sometimes used instead
   2649   of the more accurate "an object implementing the interface
   2650   <code>Foo</code>".</p>
   2651 
   2652   <p>An IDL attribute is said to be <dfn title="">getting</dfn> when
   2653   its value is being retrieved (e.g. by author script), and is said to
   2654   be <dfn title="">setting</dfn> when a new value is assigned to
   2655   it.</p>
   2656 
   2657   <p>If a DOM object is said to be <dfn id=live>live</dfn>, then the
   2658   attributes and methods on that object <span class=impl>must</span>
   2659   operate on the actual underlying data, not a snapshot of the
   2660   data.</p>
   2661 
   2662   <p>The terms <dfn title="">fire</dfn> and <dfn title="">dispatch</dfn> are used interchangeably in the context of
   2663   events, as in the DOM Events specifications. The term <dfn id=concept-events-trusted title=concept-events-trusted>trusted event</dfn> is used as
   2664   defined by the DOM Events specification. <!--
   2665   http://krijnhoetmer.nl/irc-logs/webapps/20091218 --> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   2666 
   2667 
   2668   <h4 id=plugins><span class=secno>2.1.5 </span>Plugins</h4>
   2669 
   2670   <p>The term <dfn id=plugin>plugin</dfn> refers to a user-agent defined set of
   2671   content handlers used by the user agent that can take part in the
   2672   user agent's rendering of a <code><a href=#document>Document</a></code> object, but that
   2673   neither act as <a href=#child-browsing-context title="child browsing context">child browsing
   2674   contexts</a> of the <code><a href=#document>Document</a></code> nor introduce any
   2675   <code><a href=#node>Node</a></code> objects to the <code><a href=#document>Document</a></code>'s DOM.</p>
   2676 
   2677   <p>Typically such content handlers are provided by third parties,
   2678   though a user agent can also designate built-in content handlers as
   2679   plugins.</p>
   2680 
   2681   <p>A user agent must not consider the types <code>text/plain</code>
   2682   and <code>application/octet-stream</code> as having a registered
   2683   <a href=#plugin>plugin</a>.</p> <!-- because of the way <object> handles
   2684   those types, if nothing else (it also doesn't make any sense to have
   2685   a plugin registered for those types, of course) -->
   2686 
   2687   <p class=example>One example of a plugin would be a PDF viewer
   2688   that is instantiated in a <a href=#browsing-context>browsing context</a> when the
   2689   user navigates to a PDF file. This would count as a plugin
   2690   regardless of whether the party that implemented the PDF viewer
   2691   component was the same as that which implemented the user agent
   2692   itself. However, a PDF viewer application that launches separate
   2693   from the user agent (as opposed to using the same interface) is not
   2694   a plugin by this definition.</p>
   2695 
   2696   <p class=note>This specification does not define a mechanism for
   2697   interacting with plugins, as it is expected to be user-agent- and
   2698   platform-specific. Some UAs might opt to support a plugin mechanism
   2699   such as the Netscape Plugin API; others might use remote content
   2700   converters or have built-in support for certain types. <a href=#refsNPAPI>[NPAPI]</a></p>
   2701 
   2702   <p class=warning>Browsers should take extreme care when
   2703   interacting with external content intended for <a href=#plugin title=plugin>plugins</a>. When third-party software is run with
   2704   the same privileges as the user agent itself, vulnerabilities in the
   2705   third-party software become as dangerous as those in the user
   2706   agent.</p>
   2707 
   2708 
   2709   <h4 id=character-encodings><span class=secno>2.1.6 </span>Character encodings</h4>
   2710 
   2711   <p>The <dfn id=preferred-mime-name>preferred MIME name</dfn> of a character encoding is the
   2712   name or alias labeled as "preferred MIME name" in the IANA
   2713   <cite>Character Sets</cite> registry, if there is one, or the
   2714   encoding's name, if none of the aliases are so labeled. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   2715 
   2716   <p>An <dfn id=ascii-compatible-character-encoding>ASCII-compatible character encoding</dfn> is a
   2717   single-byte or variable-length encoding in which the bytes 0x09,
   2718   0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A,
   2719   and 0x61 - 0x7A<!-- is that list ok? do any character sets we want
   2720   to support do things outside that range?  -->, ignoring bytes that
   2721   are the second and later bytes of multibyte sequences, all
   2722   correspond to single-byte sequences that map to the same Unicode
   2723   characters as those bytes in ANSI_X3.4-1968 (US-ASCII). <a href=#refsRFC1345>[RFC1345]</a></p>
   2724 
   2725   <p class=note>This includes such encodings as Shift_JIS,
   2726   HZ-GB-2312, and variants of ISO-2022, even though it is possible in
   2727   these encodings for bytes like 0x70 to be part of longer sequences
   2728   that are unrelated to their interpretation as ASCII. It excludes
   2729   such encodings as UTF-7, UTF-16, GSM03.38, and EBCDIC variants.</p>
   2730 
   2731   <!--
   2732    We'll have to change that if anyone comes up with a way to have a
   2733    document that is valid as two different encodings at once, with
   2734    different <meta charset> elements applying in each case.
   2735   -->
   2736 
   2737   <p>The term <dfn title="">Unicode character</dfn> is used to mean a
   2738   <i title="">Unicode scalar value</i> (i.e. any Unicode code point
   2739   that is not a surrogate code point). <a href=#refsUNICODE>[UNICODE]</a></p>
   2740 
   2741 
   2742 
   2743 
   2744 
   2745 <!--FIXUP microdata +1-->
   2746 <!--FIXUP 2dcontext +1-->
   2747   <h3 id=conformance-requirements><span class=secno>2.2 </span>Conformance requirements</h3>
   2748 <!--FIXUP microdata -1-->
   2749 <!--FIXUP 2dcontext -1-->
   2750 
   2751   <p>All diagrams, examples, and notes in this specification are
   2752   non-normative, as are all sections explicitly marked non-normative.
   2753   Everything else in this specification is normative.</p>
   2754 
   2755   <p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
   2756   NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
   2757   "OPTIONAL" in the normative parts of this document are to be
   2758   interpreted as described in RFC2119. For readability, these words do
   2759   not appear in all uppercase letters in this specification. <a href=#refsRFC2119>[RFC2119]</a></p>
   2760 
   2761   <p class=impl>Requirements phrased in the imperative as part of
   2762   algorithms (such as "strip any leading space characters" or "return
   2763   false and abort these steps") are to be interpreted with the meaning
   2764   of the key word ("must", "should", "may", etc) used in introducing
   2765   the algorithm.</p>
   2766 
   2767   <p>This specification describes the conformance criteria for <span class=impl>user agents (relevant to implementors) and</span>
   2768   documents<span class=impl> (relevant to authors and authoring tool
   2769   implementors)</span>.</p>
   2770 
   2771   <p><dfn id=conforming-documents>Conforming documents</dfn> are those that comply with all
   2772   the conformance criteria for documents. For readability, some of
   2773   these conformance requirements are phrased as conformance
   2774   requirements on authors; such requirements are implicitly
   2775   requirements on documents: by definition, all documents are assumed
   2776   to have had an author. (In some cases, that author may itself be a
   2777   user agent &mdash; such user agents are subject to additional rules,
   2778   as explained below.)</p>
   2779 
   2780   <p class=example>For example, if a requirement states that
   2781   "authors must not use the <code title="">foobar</code> element", it
   2782   would imply that documents are not allowed to contain elements named
   2783   <code title="">foobar</code>.</p>
   2784 
   2785   <div class=impl>
   2786 
   2787 
   2788 
   2789   <p>User agents fall into several (overlapping) categories with
   2790   different conformance requirements.</p>
   2791 
   2792   <dl><dt id=interactive>Web browsers and other interactive user agents</dt>
   2793 
   2794    <dd>
   2795 
   2796     <p>Web browsers that support <a href=#the-xhtml-syntax>the XHTML syntax</a> must
   2797     process elements and attributes from the <a href=#html-namespace-0>HTML
   2798     namespace</a> found in XML documents as described in this
   2799     specification, so that users can interact with them, unless the
   2800     semantics of those elements have been overridden by other
   2801     specifications.</p>
   2802 
   2803     <p class=example>A conforming XHTML processor would, upon
   2804     finding an XHTML <code><a href=#script>script</a></code> element in an XML document,
   2805     execute the script contained in that element. However, if the
   2806     element is found within a transformation expressed in XSLT
   2807     (assuming the user agent also supports XSLT), then the processor
   2808     would instead treat the <code><a href=#script>script</a></code> element as an opaque
   2809     element that forms part of the transform.</p>
   2810 
   2811     <p>Web browsers that support <a href=#syntax>the HTML syntax</a> must
   2812     process documents labeled with an <a href=#html-mime-type>HTML MIME type</a> as
   2813     described in this specification, so that users can interact with
   2814     them.</p>
   2815 
   2816     <p>User agents that support scripting must also be conforming
   2817     implementations of the IDL fragments in this specification, as
   2818     described in the Web IDL specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
   2819 
   2820     <p class=note>Unless explicitly stated, specifications that
   2821     override the semantics of HTML elements do not override the
   2822     requirements on DOM objects representing those elements. For
   2823     example, the <code><a href=#script>script</a></code> element in the example above
   2824     would still implement the <code><a href=#htmlscriptelement>HTMLScriptElement</a></code>
   2825     interface.</p>
   2826 
   2827    </dd>
   2828 
   2829    <dt id=non-interactive>Non-interactive presentation user agents</dt>
   2830 
   2831    <dd>
   2832 
   2833     <p>User agents that process HTML and XHTML documents purely to
   2834     render non-interactive versions of them must comply to the same
   2835     conformance criteria as Web browsers, except that they are exempt
   2836     from requirements regarding user interaction.</p>
   2837 
   2838     <p class=note>Typical examples of non-interactive presentation
   2839     user agents are printers (static UAs) and overhead displays
   2840     (dynamic UAs). It is expected that most static non-interactive
   2841     presentation user agents will also opt to <a href=#non-scripted>lack scripting support</a>.</p>
   2842 
   2843     <p class=example>A non-interactive but dynamic presentation UA
   2844     would still execute scripts, allowing forms to be dynamically
   2845     submitted, and so forth. However, since the concept of "focus" is
   2846     irrelevant when the user cannot interact with the document, the UA
   2847     would not need to support any of the focus-related DOM APIs.</p>
   2848 
   2849    </dd>
   2850 
   2851    <dt><dfn id=non-scripted>User agents with no scripting support</dfn></dt>
   2852 
   2853    <dd>
   2854 
   2855     <p>Implementations that do not support scripting (or which have
   2856     their scripting features disabled entirely) are exempt from
   2857     supporting the events and DOM interfaces mentioned in this
   2858     specification. For the parts of this specification that are
   2859     defined in terms of an events model or in terms of the DOM, such
   2860     user agents must still act as if events and the DOM were
   2861     supported.</p>
   2862 
   2863     <p class=note>Scripting can form an integral part of an
   2864     application. Web browsers that do not support scripting, or that
   2865     have scripting disabled, might be unable to fully convey the
   2866     author's intent.</p>
   2867 
   2868    </dd>
   2869 
   2870    <dt>Conformance checkers</dt>
   2871 
   2872    <dd id=conformance-checkers>
   2873 
   2874     <p>Conformance checkers must verify that a document conforms to
   2875     the applicable conformance criteria described in this
   2876     specification. Automated conformance checkers are exempt from
   2877     detecting errors that require interpretation of the author's
   2878     intent (for example, while a document is non-conforming if the
   2879     content of a <code><a href=#the-blockquote-element>blockquote</a></code> element is not a quote,
   2880     conformance checkers running without the input of human judgement
   2881     do not have to check that <code><a href=#the-blockquote-element>blockquote</a></code> elements only
   2882     contain quoted material).</p>
   2883 
   2884     <p>Conformance checkers must check that the input document
   2885     conforms when parsed without a <a href=#browsing-context>browsing context</a>
   2886     (meaning that no scripts are run, and that the parser's
   2887     <a href=#scripting-flag>scripting flag</a> is disabled), and should also check
   2888     that the input document conforms when parsed with a <a href=#browsing-context>browsing
   2889     context</a> in which scripts execute, and that the scripts
   2890     never cause non-conforming states to occur other than transiently
   2891     during script execution itself. (This is only a "SHOULD" and not a
   2892     "MUST" requirement because it has been proven to be impossible. <a href=#refsCOMPUTABLE>[COMPUTABLE]</a>)</p>
   2893 
   2894     <p>The term "HTML validator" can be used to refer to a
   2895     conformance checker that itself conforms to the applicable
   2896     requirements of this specification.</p>
   2897     
   2898 
   2899     <div class=note>
   2900 
   2901      <p>XML DTDs cannot express all the conformance requirements of
   2902      this specification. Therefore, a validating XML processor and a
   2903      DTD cannot constitute a conformance checker. Also, since neither
   2904      of the two authoring formats defined in this specification are
   2905      applications of SGML, a validating SGML system cannot constitute
   2906      a conformance checker either.</p>
   2907 
   2908      <p>To put it another way, there are three types of conformance
   2909      criteria:</p>
   2910 
   2911      <ol><li>Criteria that can be expressed in a DTD.</li>
   2912 
   2913       <li>Criteria that cannot be expressed by a DTD, but can still be
   2914       checked by a machine.</li>
   2915 
   2916       <li>Criteria that can only be checked by a human.</li>
   2917 
   2918      </ol><p>A conformance checker must check for the first two. A simple
   2919      DTD-based validator only checks for the first class of errors and
   2920      is therefore not a conforming conformance checker according to
   2921      this specification.</p>
   2922 
   2923     </div>
   2924    </dd>
   2925 
   2926    <dt>Data mining tools</dt>
   2927 
   2928    <dd id=data-mining>
   2929 
   2930     <p>Applications and tools that process HTML and XHTML documents
   2931     for reasons other than to either render the documents or check
   2932     them for conformance should act in accordance with the semantics
   2933     of the documents that they process.</p>
   2934 
   2935     <p class=example>A tool that generates <a href=#outline title=outline>document outlines</a> but increases the nesting
   2936     level for each paragraph and does not increase the nesting level
   2937     for each section would not be conforming.</p>
   2938 
   2939    </dd>
   2940 
   2941    <dt id=editors>Authoring tools and markup generators</dt>
   2942 
   2943    <dd>
   2944 
   2945     <p>Authoring tools and markup generators must generate
   2946     <a href=#conforming-documents>conforming documents</a>. Conformance criteria that apply
   2947     to authors also apply to authoring tools, where appropriate.</p>
   2948 
   2949     <p>Authoring tools are exempt from the strict requirements of
   2950     using elements only for their specified purpose, but only to the
   2951     extent that authoring tools are not yet able to determine author
   2952     intent. However, authoring tools must not automatically misuse
   2953     elements or encourage their users to do so.</p>
   2954 
   2955     <p class=example>For example, it is not conforming to use an
   2956     <code><a href=#the-address-element>address</a></code> element for arbitrary contact information;
   2957     that element can only be used for marking up contact information
   2958     for the author of the document or section. However, since an
   2959     authoring tool is likely unable to determine the difference, an
   2960     authoring tool is exempt from that requirement. This does not
   2961     mean, though, that authoring tools can use <code><a href=#the-address-element>address</a></code>
   2962     elements for any block of italics text (for instance); it just
   2963     means that the authoring tool doesn't have to verify that when the
   2964     user uses a tool for inserting contact information for a section,
   2965     that the user really is doing that and not inserting something
   2966     else instead.</p>
   2967 
   2968     <p class=note>In terms of conformance checking, an editor has to
   2969     output documents that conform to the same extent that a
   2970     conformance checker will verify.</p>
   2971 
   2972     <p>When an authoring tool is used to edit a non-conforming
   2973     document, it may preserve the conformance errors in sections of
   2974     the document that were not edited during the editing session
   2975     (i.e. an editing tool is allowed to round-trip erroneous
   2976     content). However, an authoring tool must not claim that the
   2977     output is conformant if errors have been so preserved.</p>
   2978 
   2979     <p>Authoring tools are expected to come in two broad varieties:
   2980     tools that work from structure or semantic data, and tools that
   2981     work on a What-You-See-Is-What-You-Get media-specific editing
   2982     basis (WYSIWYG).</p>
   2983 
   2984     <p>The former is the preferred mechanism for tools that author
   2985     HTML, since the structure in the source information can be used to
   2986     make informed choices regarding which HTML elements and attributes
   2987     are most appropriate.</p>
   2988 
   2989     <p>However, WYSIWYG tools are legitimate. WYSIWYG tools should use
   2990     elements they know are appropriate, and should not use elements
   2991     that they do not know to be appropriate. This might in certain
   2992     extreme cases mean limiting the use of flow elements to just a few
   2993     elements, like <code><a href=#the-div-element>div</a></code>, <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>,
   2994     and <code><a href=#the-span-element>span</a></code> and making liberal use of the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute.</p>
   2995 
   2996     <p>All authoring tools, whether WYSIWYG or not, should make a best
   2997     effort attempt at enabling users to create well-structured,
   2998     semantically rich, media-independent content.</p>
   2999 
   3000    </dd>
   3001 
   3002   </dl><p>Some conformance requirements are phrased as requirements on
   3003   elements, attributes, methods or objects. Such requirements fall
   3004   into two categories: those describing content model restrictions,
   3005   and those describing implementation behavior. Those in the former
   3006   category are requirements on documents and authoring tools. Those in
   3007   the second category are requirements on user agents. Similarly, some
   3008   conformance requirements are phrased as requirements on authors;
   3009   such requirements are to be interpreted as conformance requirements
   3010   on the documents that authors produce. (In other words, this
   3011   specification does not distinguish between conformance criteria on
   3012   authors and conformance criteria on documents.)</p>
   3013 
   3014   <p>Conformance requirements phrased as algorithms or specific steps
   3015   may be implemented in any manner, so long as the end result is
   3016   equivalent. (In particular, the algorithms defined in this
   3017   specification are intended to be easy to follow, and not intended to
   3018   be performant.)</p>
   3019 
   3020   <p id=hardwareLimitations>User agents may impose
   3021   implementation-specific limits on otherwise unconstrained inputs,
   3022   e.g. to prevent denial of service attacks, to guard against running
   3023   out of memory, or to work around platform-specific limitations.</p>
   3024 
   3025   </div>
   3026 
   3027 
   3028 
   3029   <p class="note impl">There is no implied relationship between
   3030   document conformance requirements and implementation conformance
   3031   requirements. User agents are not free to handle non-conformant
   3032   documents as they please; the processing model described in this
   3033   specification applies to implementations regardless of the
   3034   conformity of the input documents.</p>
   3035 
   3036   <p>For compatibility with existing content and prior specifications,
   3037   this specification describes two authoring formats: one based on XML
   3038   (referred to as <a href=#the-xhtml-syntax>the XHTML syntax</a>), and one using a <a href=#writing>custom format</a> inspired by SGML (referred to as
   3039   <a href=#syntax>the HTML syntax</a>). <span class=impl>Implementations
   3040   may support only one of these two formats, although supporting both
   3041   is encouraged.</span></p>
   3042 
   3043   <p class=impl id=entity-references>The language in this
   3044   specification assumes that the user agent expands all entity
   3045   references, and therefore does not include entity reference nodes in
   3046   the DOM. If user agents do include entity reference nodes in the
   3047   DOM, then user agents must handle them as if they were fully
   3048   expanded when implementing this specification. For example, if a
   3049   requirement talks about an element's child text nodes, then any text
   3050   nodes that are children of an entity reference that is a child of
   3051   that element would be used as well. Entity references to unknown
   3052   entities must be treated as if they contained just an empty text
   3053   node for the purposes of the algorithms defined in this
   3054   specification.</p>
   3055 
   3056 
   3057   <div class=impl>
   3058 
   3059   <h4 id=dependencies><span class=secno>2.2.1 </span>Dependencies</h4>
   3060 
   3061   <p>This specification relies on several other underlying
   3062   specifications.</p>
   3063 
   3064   <dl><dt>XML</dt>
   3065 
   3066    <dd>
   3067 
   3068     <p>Implementations that support <a href=#the-xhtml-syntax>the XHTML syntax</a> must
   3069     support some version of XML, as well as its corresponding
   3070     namespaces specification, because that syntax uses an XML
   3071     serialization with namespaces. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>
   3072 
   3073    </dd>
   3074 
   3075    <dt>DOM</dt>
   3076 
   3077    <dd>
   3078 
   3079     <p>The Document Object Model (DOM) is a representation &mdash; a
   3080     model &mdash; of a document and its content. The DOM is not just
   3081     an API; the conformance criteria of HTML implementations are
   3082     defined, in this specification, in terms of operations on the DOM.
   3083     <a href=#refsDOMCORE>[DOMCORE]</a></p>
   3084 
   3085     <p>Implementations must support some version of DOM Core and DOM
   3086     Events, because this specification is defined in terms of the DOM,
   3087     and some of the features are defined as extensions to the DOM Core
   3088     interfaces. <a href=#refsDOMCORE>[DOMCORE]</a> <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   3089 
   3090     <p>In particular, the following features are defined in the DOM
   3091     Core specification: <a href=#refsDOMCORE>[DOMCORE]</a></p>
   3092 
   3093     <ul class=brief><li><dfn id=attr><code>Attr</code></dfn> interface</li>
   3094      <li><dfn id=cdatasection><code>CDATASection</code></dfn> interface</li>
   3095      <li><dfn id=comment-0><code>Comment</code></dfn> interface</li>
   3096      <li><dfn id=domimplementation><code>DOMImplementation</code></dfn> interface</li>
   3097      <li><dfn id=document><code>Document</code></dfn> interface</li>
   3098      <li><dfn id=documentfragment><code>DocumentFragment</code></dfn> interface</li>
   3099      <li><dfn id=documenttype><code>DocumentType</code></dfn> interface</li>
   3100      <li><dfn id=domexception><code>DOMException</code></dfn> interface</li>
   3101      <li><dfn id=element><code>Element</code></dfn> interface</li>
   3102      <li><dfn id=node><code>Node</code></dfn> interface</li>
   3103      <li><dfn id=nodelist><code>NodeList</code></dfn> interface</li>
   3104      <li><dfn id=processinginstruction><code>ProcessingInstruction</code></dfn> interface</li>
   3105      <li><dfn id=text><code>Text</code></dfn> interface</li>
   3106 
   3107      <li><dfn id=dom-domimplementation-createdocument title=dom-DOMImplementation-createDocument><code>createDocument()</code></dfn> method</li>
   3108      <li><dfn id=dom-document-getelementbyid title=dom-Document-getElementById><code>getElementById()</code></dfn> method</li>
   3109      <li><dfn id=dom-node-insertbefore title=dom-Node-insertBefore><code>insertBefore()</code></dfn> method</li>
   3110 
   3111      <li><dfn id=dom-node-childnodes title=dom-Node-childNodes><code>childNodes</code></dfn> attribute </li>
   3112      <li><dfn id=dom-node-localname title=dom-Node-localName><code>localName</code></dfn> attribute </li>
   3113      <li><dfn id=dom-node-parentnode title=dom-Node-parentNode><code>parentNode</code></dfn> attribute </li>
   3114      <li><dfn id=dom-element-tagname title=dom-Element-tagName><code>tagName</code></dfn> attribute </li>
   3115      <li><dfn id=textcontent><code>textContent</code></dfn> attribute </li>
   3116 
   3117     </ul><p>The following features are defined in the DOM Events
   3118     specification: <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   3119 
   3120     <ul class=brief><li><dfn id=event><code>Event</code></dfn> interface</li>
   3121      <li><dfn id=eventtarget><code>EventTarget</code></dfn> interface</li>
   3122      <li><dfn id=uievent><code>UIEvent</code></dfn> interface</li>
   3123 
   3124      <li><dfn id=event-click title=event-click><code>click</code></dfn> event</li>
   3125      <li><dfn id=event-domactivate title=event-DOMActivate><code>DOMActivate</code></dfn> event</li>
   3126 
   3127      <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>
   3128 
   3129     </ul><p>The following features are defined in the DOM
   3130     Range specification: <a href=#refsDOMRANGE>[DOMRANGE]</a></p>
   3131 
   3132     <ul class=brief><li><dfn id=range><code>Range</code></dfn> interface</li>
   3133 
   3134      <li><dfn id=dom-range-deletecontents title=dom-Range-deleteContents><code>deleteContents()</code></dfn> method </li>
   3135      <li><dfn id=dom-range-selectnodecontents title=dom-Range-selectNodeContents><code>selectNodeContents()</code></dfn> method </li>
   3136      <li><dfn id=dom-range-setend title=dom-Range-setEnd><code>setEnd()</code></dfn> method </li>
   3137      <li><dfn id=dom-range-setstart title=dom-Range-setStart><code>setStart()</code></dfn> method </li>
   3138 
   3139      <li><dfn id=dom-range-collapsed title=dom-Range-collapsed><code>collapsed</code></dfn> attribute </li>
   3140      <li><dfn id=dom-range-endcontainer title=dom-Range-endContainer><code>endContainer</code></dfn> attribute </li>
   3141      <li><dfn id=dom-range-endoffset title=dom-Range-endOffset><code>endOffset</code></dfn> attribute </li>
   3142      <li><dfn id=dom-range-startcontainer title=dom-Range-startContainer><code>startContainer</code></dfn> attribute </li>
   3143      <li><dfn id=dom-range-startoffset title=dom-Range-startOffset><code>startOffset</code></dfn> attribute </li>
   3144 
   3145     </ul></dd>
   3146 
   3147    <dt>Web IDL</dt>
   3148 
   3149    <dd>
   3150 
   3151     <p>The IDL fragments in this specification must be interpreted as
   3152     required for conforming IDL fragments, as described in the Web IDL
   3153     specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
   3154 
   3155     <p id=float-nan>Except where otherwise specified, if an IDL
   3156     attribute that is a floating point number type (<code title="">float</code>) is assigned an Infinity or Not-a-Number
   3157     (NaN) value, a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be
   3158     raised.</p>
   3159 
   3160     <p>Except where otherwise specified, if a method with an argument
   3161     that is a floating point number type (<code title="">float</code>)
   3162     is passed an Infinity or Not-a-Number (NaN) value, a
   3163     <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be raised.</p>
   3164 
   3165    </dd>
   3166 
   3167    <dt>JavaScript</dt>
   3168 
   3169    <dd>
   3170 
   3171     <p>Some parts of the language described by this specification only
   3172     support JavaScript as the underlying scripting language. <a href=#refsECMA262>[ECMA262]</a></p>
   3173 
   3174     <p class=note>The term "JavaScript" is used to refer to ECMA262,
   3175     rather than the official term ECMAScript, since the term
   3176     JavaScript is more widely known. Similarly, the <a href=#mime-type>MIME
   3177     type</a> used to refer to JavaScript in this specification is
   3178     <code title="">text/javascript</code>, since that is the most
   3179     commonly used type, <a href=#willful-violation title="willful violation">despite it
   3180     being an officially obsoleted type</a> according to RFC
   3181     4329. <a href=#refsRFC4329>[RFC4329]</a></p>
   3182 
   3183    </dd>
   3184 
   3185    <dt>Media Queries</dt>
   3186 
   3187    <dd>
   3188 
   3189     <p>Implementations must support some version of the Media Queries
   3190     language. <a href=#refsMQ>[MQ]</a></p>
   3191 
   3192    </dd>
   3193 
   3194    <dt>URIs, IRIs, IDNA</dt>
   3195 
   3196    <dd>
   3197 
   3198     <p>Implementations must support the semantics of <a href=#url title=URL>URLs</a> defined in the URI and IRI specifications,
   3199     as well as the semantics of IDNA domain names defined in the
   3200     <cite>Internationalizing Domain Names in Applications
   3201     (IDNA)</cite> specification. <a href=#refsRFC3986>[RFC3986]</a>
   3202     <a href=#refsRFC3987>[RFC3987]</a> <a href=#refsRFC3490>[RFC3490]</a>
   3203 
   3204    </dd>
   3205 
   3206   </dl><p>This specification does not <em>require</em> support of any
   3207   particular network protocol, style sheet language, scripting
   3208   language, or any of the DOM specifications beyond those described
   3209   above. However, the language described by this specification is
   3210   biased towards CSS as the styling language, JavaScript as the
   3211   scripting language, and HTTP as the network protocol, and several
   3212   features assume that those languages and protocols are in use.</p>
   3213 
   3214   <p class=note>This specification might have certain additional
   3215   requirements on character encodings, image formats, audio formats,
   3216   and video formats in the respective sections.</p>
   3217 
   3218   </div>
   3219 
   3220 
   3221 
   3222   <h4 id=extensibility><span class=secno>2.2.2 </span>Extensibility</h4>
   3223 
   3224   <p>HTML has a wide number of extensibility mechanisms that can be
   3225   used for adding semantics in a safe manner:</p>
   3226 
   3227   <ul><li>Authors can use the <code title=attr-class><a href=#classes>class</a></code>
   3228    attribute to extend elements, effectively creating their own
   3229    elements, while using the most applicable existing "real" HTML
   3230    element, so that browsers and other tools that don't know of the
   3231    extension can still support it somewhat well. This is the tack used
   3232    by Microformats, for example.</li>
   3233 
   3234    <li>Authors can include data for inline client-side scripts or
   3235    server-side site-wide scripts to process using the <code title=attr-data-*><a href=#attr-data-*>data-*=""</a></code> attributes. These are
   3236    guaranteed to never be touched by browsers, and allow scripts to
   3237    include data on HTML elements that scripts can then look for and
   3238    process.</li>
   3239 
   3240    <li>Authors can use the <code title=meta><a href=#meta>&lt;meta name=""
   3241    content=""&gt;</a></code> mechanism to include page-wide metadata by
   3242    registering <a href=#concept-meta-extensions title=concept-meta-extensions>extensions to the
   3243    predefined set of metadata names</a>.</li>
   3244 
   3245    <li>Authors can use the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel=""</a></code> mechanism to annotate
   3246    links with specific meanings by registering <a href=#concept-rel-extensions title=concept-rel-extensions> extensions to the predefined set of
   3247    link types</a>. This is also used by Microformats.</li>
   3248 
   3249    <li>Authors can embed raw data using the <code title=script><a href=#script>&lt;script type=""&gt;</a></code> mechanism with a custom
   3250    type, for further handling by a inline or server-side scripts.</li>
   3251 
   3252    <li>Authors can create <a href=#plugin title=plugin>plugins</a> and
   3253    invoke them using the <code><a href=#the-embed-element>embed</a></code> element. This is how Flash
   3254    works.</li>
   3255 
   3256    <li>Authors can extend APIs using the JavaScript prototyping
   3257    mechanism. This is widely used by script libraries, for
   3258    instance.</li>
   3259 
   3260    <li>Authors can use the microdata feature (the <code title=attr-item>item=""</code> and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop=""</a></code> attributes) to embed
   3261    nested name-value pairs of data to be shared with other
   3262    applications and sites.</li>
   3263 
   3264   </ul><div class=impl>
   3265 
   3266   <hr><p>Vendor-specific proprietary user agent extensions to this
   3267   specification are strongly discouraged. Documents must not use such
   3268   extensions, as doing so reduces interoperability and fragments the
   3269   user base, allowing only users of specific user agents to access the
   3270   content in question.</p>
   3271 
   3272   <p>If such extensions are nonetheless needed, e.g. for experimental
   3273   purposes, then vendors are strongly urged to use one of the
   3274   following extension mechanisms:</p>
   3275 
   3276   <p>For markup-level features that can be limited to the XML
   3277   serialization and need not be supported in the HTML serialization,
   3278   vendors should use the namespace mechanism to define custom
   3279   namespaces in which the non-standard elements and attributes are
   3280   supported.</p>
   3281 
   3282   <p>For markup-level features that are intended for use with
   3283   <a href=#syntax>the HTML syntax</a>, extensions should be limited to new
   3284   attributes of the form "<code title="">_<var title="">vendor</var>-<var title="">feature</var></code>", where
   3285   <var title="">vendor</var> is a short string that identifies the
   3286   vendor responsible for the extension, and <var title="">feature</var> is the name of the feature. New element names
   3287   should not be created. Using attributes for such extensions
   3288   exclusively allows extensions from multiple vendors to co-exist on
   3289   the same element, which would not be possible with elements. Using
   3290   the "<code title="">_<var title="">vendor</var>-<var title="">feature</var></code>" form allows extensions to be made
   3291   without risk of conflicting with future additions to the
   3292   specification.</p>
   3293 
   3294   <div class=example>
   3295 
   3296    <p>For instance, a browser named "FerretBrowser" could use "ferret"
   3297    as a vendor prefix, while a browser named "Mellblom Browser" could
   3298    use "mb". If both of these browsers invented extensions that turned
   3299    elements into scratch-and-sniff areas, an author experimenting with
   3300    these features could write:</p>
   3301 
   3302    <pre>&lt;p&gt;This smells of lemons!
   3303 &lt;span _ferret-smellovision _ferret-smellcode="LEM01"
   3304       _mb-outputsmell _mb-smell="lemon juice"&gt;&lt;/span&gt;&lt;/p&gt;</pre>
   3305 
   3306   </div>
   3307 
   3308   <p>Attribute names starting with a U+005F LOW LINE character (_) are
   3309   reserved for user agent use and are guaranteed to never be formally
   3310   added to the HTML language.</p>
   3311 
   3312   <p class=note>Pages that use such attributes are by definition
   3313   non-conforming.</p>
   3314 
   3315   <p>For DOM extensions, e.g. new methods and IDL attributes, the new
   3316   members should be prefixed by vendor-specific strings to prevent
   3317   clashes with future versions of this specification.</p>
   3318 
   3319   <p>All extensions must be defined so that the use of extensions
   3320   neither contradicts nor causes the non-conformance of functionality
   3321   defined in the specification.</p> <!-- thanks to QA Framework -->
   3322 
   3323   <div class=example>
   3324 
   3325    <p>For example, while strongly discouraged from doing so, an
   3326    implementation "Foo Browser" could add a new IDL attribute "<code title="">fooTypeTime</code>" to a control's DOM interface that
   3327    returned the time it took the user to select the current value of a
   3328    control (say). On the other hand, defining a new control that
   3329    appears in a form's <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code>
   3330    array would be in violation of the above requirement, as it would
   3331    violate the definition of <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> given in this
   3332    specification.</p>
   3333 
   3334   </div>
   3335 
   3336   <hr><p>When vendor-neutral extensions to this specification are needed,
   3337   either this specification can be updated accordingly, or an
   3338   extension specification can be written that overrides the
   3339   requirements in this specification. When someone applying this
   3340   specification to their activities decides that they will recognize
   3341   the requirements of such an extension specification, it becomes an
   3342   <dfn id=other-applicable-specifications title="other applicable specifications">applicable
   3343   specification</dfn> for the purposes of conformance requirements in
   3344   this specification.</p>
   3345   <!-- http://www.w3.org/mid/17E341CD-E790-422C-9F9A-69347EE01CEB@iki.fi -->
   3346 
   3347   <hr><p>User agents must treat elements and attributes that they do not
   3348   understand as semantically neutral; leaving them in the DOM (for DOM
   3349   processors), and styling them according to CSS (for CSS processors),
   3350   but not inferring any meaning from them.</p>
   3351 
   3352   <p>When support for a feature is disabled (e.g. as an emergency
   3353   measure to mitigate a security problem, or to aid in development, or
   3354   for performance reasons), user agents must act as if they had no
   3355   support for the feature whatsoever, and as if the feature was not
   3356   mentioned in this specification. For example, if a particular
   3357   feature is accessed via an attribute in a Web IDL interface, the
   3358   attribute itself would be omitted from the objects that implement
   3359   that interface &mdash; leaving the attribute on the object but
   3360   making it return null or throw an exception is insufficient.</p>
   3361 
   3362   </div>
   3363 
   3364 
   3365 
   3366   <h3 id=case-sensitivity-and-string-comparison><span class=secno>2.3 </span>Case-sensitivity and string comparison</h3>
   3367 
   3368   <p>Comparing two strings in a <dfn id=case-sensitive>case-sensitive</dfn> manner means
   3369   comparing them exactly, code point for code point.</p>
   3370 
   3371   <p>Comparing two strings in an <dfn id=ascii-case-insensitive>ASCII case-insensitive</dfn>
   3372   manner means comparing them exactly, code point for code point, except
   3373   that the characters in the range U+0041 to U+005A (i.e. LATIN
   3374   CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding
   3375   characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A
   3376   to LATIN SMALL LETTER Z) are considered to also match.</p>
   3377 
   3378   <p>Comparing two strings in a <dfn id=compatibility-caseless>compatibility caseless</dfn>
   3379   manner means using the Unicode <i>compatibility caseless match</i>
   3380   operation to compare the two strings. <a href=#refsUNICODE>[UNICODE]</a></p>
   3381 
   3382 
   3383   <div class=impl>
   3384 
   3385   <p><dfn id=converted-to-ascii-uppercase title="converted to ASCII uppercase">Converting a string to
   3386   ASCII uppercase</dfn> means replacing all characters in the range
   3387   U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z)
   3388   with the corresponding characters in the range U+0041 to U+005A
   3389   (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).</p>
   3390 
   3391   <p><dfn id=converted-to-ascii-lowercase title="converted to ASCII lowercase">Converting a string to
   3392   ASCII lowercase</dfn> means replacing all characters in the range
   3393   U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL
   3394   LETTER Z) with the corresponding characters in the range U+0061
   3395   to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z).</p>
   3396 
   3397   </div>
   3398 
   3399 
   3400   <p>A string <var title="">pattern</var> is a <dfn id=prefix-match>prefix match</dfn>
   3401   for a string <var title="">s</var> when <var title="">pattern</var>
   3402   is not longer than <var title="">s</var> and truncating <var title="">s</var> to <var title="">pattern</var>'s length leaves the
   3403   two strings as matches of each other.</p>
   3404 
   3405 
   3406   <h3 id=common-microsyntaxes><span class=secno>2.4 </span>Common microsyntaxes</h3>
   3407 
   3408   <p>There are various places in HTML that accept particular data
   3409   types, such as dates or numbers. This section describes what the
   3410   conformance criteria for content in those formats is, and how to
   3411   parse them.</p>
   3412 
   3413   <div class=impl>
   3414 
   3415   <p class=note>Implementors are strongly urged to carefully examine
   3416   any third-party libraries they might consider using to implement the
   3417   parsing of syntaxes described below. For example, date libraries are
   3418   likely to implement error handling behavior that differs from what
   3419   is required in this specification, since error-handling behavior is
   3420   often not defined in specifications that describe date syntaxes
   3421   similar to those used in this specification, and thus
   3422   implementations tend to vary greatly in how they handle errors.</p>
   3423 
   3424   </div>
   3425 
   3426 
   3427   <div class=impl>
   3428 
   3429   <h4 id=common-parser-idioms><span class=secno>2.4.1 </span>Common parser idioms</h4>
   3430 
   3431   <p>The <dfn id=space-character title="space character">space characters</dfn>, for the
   3432   purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER
   3433   TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and
   3434   U+000D CARRIAGE RETURN (CR).</p>
   3435 
   3436   <p>The <dfn id=white_space title=White_Space>White_Space characters</dfn> are
   3437   those that have the Unicode property "White_Space" in the Unicode
   3438   <code title="">PropList.txt</code> data file. <a href=#refsUNICODE>[UNICODE]</a></p>
   3439 
   3440   <p class=note>This should not be confused with the "White_Space"
   3441   value (abbreviated "WS") of the "Bidi_Class" property in the <code title="">Unicode.txt</code> data file.</p>
   3442 
   3443   <p>The <dfn id=alphanumeric-ascii-characters>alphanumeric ASCII characters</dfn> are those in the
   3444   ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
   3445   CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z, U+0061 LATIN
   3446   SMALL LETTER A to U+007A LATIN SMALL LETTER Z.</p>
   3447 
   3448   <p>Some of the micro-parsers described below follow the pattern of
   3449   having an <var title="">input</var> variable that holds the string
   3450   being parsed, and having a <var title="">position</var> variable
   3451   pointing at the next character to parse in <var title="">input</var>.</p>
   3452 
   3453   <p>For parsers based on this pattern, a step that requires the user
   3454   agent to <dfn id=collect-a-sequence-of-characters>collect a sequence of characters</dfn> means that the
   3455   following algorithm must be run, with <var title="">characters</var>
   3456   being the set of characters that can be collected:</p>
   3457 
   3458   <ol><li><p>Let <var title="">input</var> and <var title="">position</var> be the same variables as those of the same
   3459    name in the algorithm that invoked these steps.</li>
   3460 
   3461    <li><p>Let <var title="">result</var> be the empty string.</li>
   3462 
   3463    <li><p>While <var title="">position</var> doesn't point past the
   3464    end of <var title="">input</var> and the character at <var title="">position</var> is one of the <var title="">characters</var>, append that character to the end of <var title="">result</var> and advance <var title="">position</var> to
   3465    the next character in <var title="">input</var>.</li>
   3466 
   3467    <li><p>Return <var title="">result</var>.</li>
   3468 
   3469   </ol><p>The step <dfn id=skip-whitespace>skip whitespace</dfn> means that the user agent
   3470   must <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are <a href=#space-character title="space character">space characters</a>. The step <dfn id=skip-white_space-characters>skip
   3471   White_Space characters</dfn> means that the user agent must
   3472   <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are
   3473   <a href=#white_space>White_Space</a> characters. In both cases, the collected
   3474   characters are not used. <a href=#refsUNICODE>[UNICODE]</a></p>
   3475 
   3476   <p>When a user agent is to <dfn id=strip-line-breaks>strip line breaks</dfn> from a
   3477   string, the user agent must remove any U+000A LINE FEED (LF) and
   3478   U+000D CARRIAGE RETURN (CR) characters from that string.</p>
   3479 
   3480   <p>When a user agent is to <dfn id=strip-leading-and-trailing-whitespace>strip leading and trailing
   3481   whitespace</dfn> from a string, the user agent must remove all <a href=#space-character title="space character">space characters</a> that are at the
   3482   start or end of the string.</p>
   3483 
   3484   <p>The <dfn id=code-point-length>code-point length</dfn> of a string is the number of
   3485   Unicode code points in that string.</p>
   3486 
   3487   </div>
   3488 
   3489 
   3490 
   3491   <h4 id=boolean-attributes><span class=secno>2.4.2 </span>Boolean attributes</h4>
   3492 
   3493   <p>A number of attributes are <dfn id=boolean-attribute title="boolean attribute">boolean
   3494   attributes</dfn>. The presence of a boolean attribute on an element
   3495   represents the true value, and the absence of the attribute
   3496   represents the false value.</p>
   3497 
   3498   <p>If the attribute is present, its value must either be the empty
   3499   string or a value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
   3500   match for the attribute's canonical name, with no leading or
   3501   trailing whitespace.</p>
   3502 
   3503   <p class=note>The values "true" and "false" are not allowed on
   3504   boolean attributes. To represent a false value, the attribute has to
   3505   be omitted altogether.</p>
   3506 
   3507 
   3508 
   3509   <h4 id=keywords-and-enumerated-attributes><span class=secno>2.4.3 </span>Keywords and enumerated attributes</h4>
   3510 
   3511   <p>Some attributes are defined as taking one of a finite set of
   3512   keywords. Such attributes are called <dfn id=enumerated-attribute title="enumerated
   3513   attribute">enumerated attributes</dfn>. The keywords are each
   3514   defined to map to a particular <em>state</em> (several keywords
   3515   might map to the same state, in which case some of the keywords are
   3516   synonyms of each other; additionally, some of the keywords can be
   3517   said to be non-conforming, and are only in the specification for
   3518   historical reasons). In addition, two default states can be
   3519   given. The first is the <i>invalid value default</i>, the second
   3520   is the <i>missing value default</i>.</p>
   3521 
   3522   <p>If an enumerated attribute is specified, the attribute's value
   3523   must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
   3524   given keywords that are not said to be non-conforming, with no
   3525   leading or trailing whitespace.</p>
   3526 
   3527   <p>When the attribute is specified, if its value is an <a href=#ascii-case-insensitive>ASCII
   3528   case-insensitive</a> match for one of the given keywords then
   3529   that keyword's state is the state that the attribute represents. If
   3530   the attribute value matches none of the given keywords, but the
   3531   attribute has an <i>invalid value default</i>, then the attribute
   3532   represents that state. Otherwise, if the attribute value matches
   3533   none of the keywords but there is a <i>missing value default</i>
   3534   state defined, then <em>that</em> is the state represented by the
   3535   attribute. Otherwise, there is no default, and invalid values must
   3536   be ignored.</p>
   3537 
   3538   <p>When the attribute is <em>not</em> specified, if there is a
   3539   <i>missing value default</i> state defined, then that is the state
   3540   represented by the (missing) attribute. Otherwise, the absence of
   3541   the attribute means that there is no state represented.</p>
   3542 
   3543   <p class=note>The empty string can be a valid keyword.</p>
   3544 
   3545 
   3546   <h4 id=numbers><span class=secno>2.4.4 </span>Numbers</h4>
   3547 
   3548   <h5 id=non-negative-integers><span class=secno>2.4.4.1 </span>Non-negative integers</h5>
   3549 
   3550   <p>A string is a <dfn id=valid-non-negative-integer>valid non-negative integer</dfn> if it
   3551   consists of one or more characters in the range U+0030 DIGIT ZERO
   3552   (0) to U+0039 DIGIT NINE (9).</p>
   3553 
   3554   <p>A <a href=#valid-non-negative-integer>valid non-negative integer</a> represents the number
   3555   that is represented in base ten by that string of digits.</p>
   3556 
   3557   <div class=impl>
   3558 
   3559   <p>The <dfn id=rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</dfn> are as
   3560   given in the following algorithm. When invoked, the steps must be
   3561   followed in the order given, aborting at the first step that returns
   3562   a value. This algorithm will return either zero, a positive integer,
   3563   or an error. Leading spaces are ignored. Trailing spaces and any
   3564   trailing garbage characters are ignored.</p>
   3565 
   3566   <ol><li><p>Let <var title="">input</var> be the string being
   3567    parsed.</li>
   3568 
   3569    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   3570    string.</li>
   3571 
   3572    <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   3573 
   3574    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3575 
   3576    <li><p>If the character indicated by <var title="">position</var>
   3577    is a U+002B PLUS SIGN character (+), advance <var title="">position</var> to the next character. (The "<code title="">+</code>" is ignored, but it is not conforming.)</li>
   3578 
   3579    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3580 
   3581    <li><p>If the character indicated by <var title="">position</var>
   3582    is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   3583    return an error.</li>
   3584 
   3585    <!-- Ok. At this point we know we have a number. It might have
   3586    trailing garbage which we'll ignore, but it's a number, and we
   3587    won't return an error. -->
   3588 
   3589    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   3590    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   3591    resulting sequence as a base-ten integer. Let <var title="">value</var> be that integer.</li>
   3592 
   3593    <li><p>Return <var title="">value</var>.</li>
   3594 
   3595   </ol></div>
   3596 
   3597 
   3598   <h5 id=signed-integers><span class=secno>2.4.4.2 </span>Signed integers</h5>
   3599 
   3600   <p>A string is a <dfn id=valid-integer>valid integer</dfn> if it consists of one or
   3601   more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   3602   NINE (9), optionally prefixed with a U+002D HYPHEN-MINUS character
   3603   (-).</p>
   3604 
   3605   <p>A <a href=#valid-integer>valid integer</a> without a U+002D HYPHEN-MINUS (-)
   3606   prefix represents the number that is represented in base ten by that
   3607   string of digits. A <a href=#valid-integer>valid integer</a> <em>with</em> a
   3608   U+002D HYPHEN-MINUS (-) prefix represents the number represented in
   3609   base ten by the string of digits that follows the U+002D
   3610   HYPHEN-MINUS, subtracted from zero.</p>
   3611 
   3612   <div class=impl>
   3613 
   3614   <p>The <dfn id=rules-for-parsing-integers>rules for parsing integers</dfn> are similar to the
   3615   <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">rules for
   3616   non-negative integers</a>, and are as given in the following
   3617   algorithm. When invoked, the steps must be followed in the order
   3618   given, aborting at the first step that returns a value. This
   3619   algorithm will return either an integer or an error. Leading spaces
   3620   are ignored. Trailing spaces and trailing garbage characters are
   3621   ignored.</p>
   3622 
   3623   <ol><li><p>Let <var title="">input</var> be the string being
   3624    parsed.</li>
   3625 
   3626    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   3627    string.</li>
   3628 
   3629    <li><p>Let <var title="">sign</var> have the value
   3630    "positive".</li>
   3631 
   3632    <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   3633 
   3634    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3635 
   3636    <li>
   3637 
   3638     <p>If the character indicated by <var title="">position</var> (the
   3639     first character) is a U+002D HYPHEN-MINUS character (-):</p>
   3640 
   3641     <ol><li>Let <var title="">sign</var> be "negative".</li>
   3642 
   3643      <li>Advance <var title="">position</var> to the next
   3644      character.</li>
   3645 
   3646      <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3647 
   3648     </ol><p>Otherwise, if the character indicated by <var title="">position</var> (the first character) is a U+002B PLUS
   3649     SIGN character (+):</p>
   3650 
   3651     <ol><li>Advance <var title="">position</var> to the next
   3652      character. (The "<code title="">+</code>" is ignored, but it is
   3653      not conforming.)</li>
   3654 
   3655      <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3656 
   3657     </ol></li>
   3658 
   3659    <li><p>If the character indicated by <var title="">position</var>
   3660    is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   3661    return an error.</li>
   3662 
   3663    <!-- Ok. At this point we know we have a number. It might have
   3664    trailing garbage which we'll ignore, but it's a number, and we
   3665    won't return an error. -->
   3666 
   3667    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   3668    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   3669    resulting sequence as a base-ten integer. Let <var title="">value</var> be that integer.</li>
   3670 
   3671    <li><p>If <var title="">sign</var> is "positive", return <var title="">value</var>, otherwise return the result of subtracting
   3672    <var title="">value</var> from zero.</li>
   3673 
   3674   </ol></div>
   3675 
   3676 
   3677   <h5 id=real-numbers><span class=secno>2.4.4.3 </span>Real numbers</h5>
   3678 
   3679   <p>A string is a <dfn id=valid-floating-point-number>valid floating point number</dfn> if it
   3680   consists of:</p>
   3681 
   3682   <ol class=brief><li>Optionally, a U+002D HYPHEN-MINUS character (-).</li>
   3683 
   3684    <li>A series of one or more characters in the range U+0030 DIGIT
   3685    ZERO (0) to U+0039 DIGIT NINE (9).</li>
   3686 
   3687    <li>Optionally:
   3688 
   3689     <ol><li>A single U+002E FULL STOP character (.).</li>
   3690 
   3691      <li>A series of one or more characters in the range U+0030 DIGIT
   3692      ZERO (0) to U+0039 DIGIT NINE (9).</li>
   3693 
   3694     </ol></li>
   3695 
   3696    <li>Optionally:
   3697 
   3698     <ol><li>Either a U+0065 LATIN SMALL LETTER E character (e) or a
   3699      U+0045 LATIN CAPITAL LETTER E character (E).</li>
   3700 
   3701      <li>Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B
   3702      PLUS SIGN character (+).</li>
   3703 
   3704      <li>A series of one or more characters in the range U+0030 DIGIT
   3705      ZERO (0) to U+0039 DIGIT NINE (9).</li>
   3706 
   3707     </ol></li>
   3708 
   3709   </ol><p>A <a href=#valid-floating-point-number>valid floating point number</a> represents the number
   3710   obtained by multiplying the significand by ten raised to the power
   3711   of the exponent, where the significand is the first number,
   3712   interpreted as base ten (including the decimal point and the number
   3713   after the decimal point, if any, and interpreting the significand as
   3714   a negative number if the whole string starts with a U+002D
   3715   HYPHEN-MINUS character (-) and the number is not zero), and where
   3716   the exponent is the number after the E, if any (interpreted as a
   3717   negative number if there is a U+002D HYPHEN-MINUS character (-)
   3718   between the E and the number and the number is not zero, or else
   3719   ignoring a U+002B PLUS SIGN character (+) between the E and the
   3720   number if there is one). If there is no E, then the exponent is
   3721   treated as zero.</p>
   3722 
   3723   <p class=note>The Infinity and Not-a-Number (NaN) values are not
   3724   <a href=#valid-floating-point-number title="valid floating point number">valid floating point
   3725   numbers</a>.</p>
   3726 
   3727   <div class=impl>
   3728 
   3729   <p>The <dfn id=best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating
   3730   point number">best representation of the number <var title="">n</var> as a floating point number</dfn> is the string
   3731   obtained from applying the JavaScript operator ToString to <var title="">n</var>. The JavaScript operator ToString is not uniquely
   3732   determined. When there are multiple possible strings that could be
   3733   obtained from the JavaScript operator ToString for a particular
   3734   value, the user agent must always return the same string for that
   3735   value (though it may differ from the value used by other user
   3736   agents).</p>
   3737 
   3738   <p>The <dfn id=rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</dfn> are
   3739   as given in the following algorithm. This algorithm must be aborted
   3740   at the first step that returns something. This algorithm will return
   3741   either a number or an error. Leading spaces are ignored. Trailing
   3742   spaces and garbage characters are ignored.</p>
   3743 
   3744   <ol><li><p>Let <var title="">input</var> be the string being
   3745    parsed.</li>
   3746 
   3747    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   3748    string.</li>
   3749 
   3750    <li><p>Let <var title="">value</var> have the value 1.</li>
   3751 
   3752    <li><p>Let <var title="">divisor</var> have the value 1.</li>
   3753 
   3754    <li><p>Let <var title="">exponent</var> have the value 1.</li>
   3755 
   3756    <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   3757 
   3758    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3759 
   3760    <li>
   3761 
   3762     <p>If the character indicated by <var title="">position</var> is a
   3763     U+002D HYPHEN-MINUS character (-):</p>
   3764 
   3765     <ol><li>Change <var title="">value</var> and <var title="">divisor</var> to &minus;1.</li>
   3766 
   3767      <li>Advance <var title="">position</var> to the next
   3768      character.</li>
   3769 
   3770      <li>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3771 
   3772     </ol></li>
   3773 
   3774    <li><p>If the character indicated by <var title="">position</var>
   3775    is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   3776    return an error.</li>
   3777 
   3778    <!-- Ok. At this point we know we have a number. It might have
   3779    trailing garbage which we'll ignore, but it's a number, and we
   3780    won't return an error unless it's out of range. -->
   3781 
   3782    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   3783    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   3784    resulting sequence as a base-ten integer. Multiply <var title="">value</var> by that integer.</li>
   3785 
   3786    <li>If <var title="">position</var> is past the end of <var title="">input</var>, jump to the step labeled
   3787    <i>conversion</i>.</li>
   3788 
   3789    <li><p>If the character indicated by <var title="">position</var>
   3790    is a U+002E FULL STOP (.), run these substeps:</p>
   3791 
   3792     <ol><li><p>Advance <var title="">position</var> to the next
   3793      character.</li>
   3794 
   3795      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, or if the character indicated by <var title="">position</var> is not one of U+0030 DIGIT ZERO (0) to
   3796      U+0039 DIGIT NINE (9), then jump to the step labeled
   3797      <i>conversion</i>.</li>
   3798 
   3799      <li><p><i>Fraction loop</i>: Multiply <var title="">divisor</var>
   3800      by ten.</li>
   3801 
   3802      <li>Add the value of the character indicated by <var title="">position</var>, interpreted as a base-ten digit (0..9)
   3803      and divided by <var title="">divisor</var>, to <var title="">value</var>.</li>
   3804 
   3805      <li><p>Advance <var title="">position</var> to the next
   3806      character.</li>
   3807 
   3808      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   3809      <i>conversion</i>.</li>
   3810 
   3811      <li><p>If the character indicated by <var title="">position</var>
   3812      is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), jump
   3813      back to the step labeled <i>fraction loop</i> in these
   3814      substeps.</li>
   3815 
   3816     </ol></li>
   3817 
   3818    <li><p>If the character indicated by <var title="">position</var>
   3819    is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN
   3820    CAPITAL LETTER E character (E), run these substeps:</p>
   3821 
   3822     <ol><li><p>Advance <var title="">position</var> to the next
   3823      character.</li>
   3824 
   3825      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   3826      <i>conversion</i>.</li>
   3827 
   3828      <li>
   3829 
   3830       <p>If the character indicated by <var title="">position</var> is
   3831       a U+002D HYPHEN-MINUS character (-):</p>
   3832 
   3833       <ol><li>Change <var title="">exponent</var> to &minus;1.</li>
   3834 
   3835        <li>Advance <var title="">position</var> to the next
   3836        character.</li>
   3837 
   3838        <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   3839        <i>conversion</i>.</li>
   3840 
   3841       </ol><p>Otherwise, if the character indicated by <var title="">position</var> is a U+002B PLUS SIGN character (+):</p>
   3842 
   3843       <ol><li>Advance <var title="">position</var> to the next
   3844        character.</li>
   3845 
   3846        <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   3847        <i>conversion</i>.</li>
   3848 
   3849       </ol></li>
   3850 
   3851      <li><p>If the character indicated by <var title="">position</var>
   3852      is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9),
   3853      then jump to the step labeled <i>conversion</i>.</li>
   3854 
   3855      <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   3856      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   3857      resulting sequence as a base-ten integer. Multiply <var title="">exponent</var> by that integer.</li>
   3858 
   3859      <li><p>Multiply <var title="">value</var> by ten raised to the
   3860      <var title="">exponent</var>th power.</li>
   3861 
   3862     </ol></li>
   3863 
   3864    <li><p><i>Conversion</i>: Let <var title="">S</var> be the set of
   3865    finite IEEE 754 single-precision floating point values except
   3866    &minus;0, but with two special values added: 2<sup title="">128</sup> and &minus;2<sup title="">128</sup>.</li>
   3867 
   3868    <li><p>Let <var title="">rounded-value</var> be the number in <var title="">S</var> that is closest to <var title="">value</var>,
   3869    selecting the number with an even significand if there are two
   3870    equally close values. (The two special values 2<sup title="">128</sup> and &minus;2<sup title="">128</sup> are
   3871    considered to have even significands for this purpose.)</li>
   3872 
   3873    <li><p>If <var title="">rounded-value</var> is 2<sup title="">128</sup> or &minus;2<sup title="">128</sup>, return an
   3874    error.</li>
   3875 
   3876    <li><p>Return <var title="">rounded-value</var>.</li>
   3877 
   3878   </ol></div>
   3879 
   3880 
   3881 <div class=impl>
   3882   <h5 id=percentages-and-dimensions><span class=secno>2.4.4.4 </span>Percentages and lengths</h5>
   3883 <!--(percentages are not used in valid html anymore)
   3884   <p>A string is a <dfn>valid dimension value</dfn> if it consists of
   3885   a character in the range U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE
   3886   (9), optionally followed by zero of more characters in the range
   3887   U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), optionally followed
   3888   by a U+002E FULL STOP character (.) and one or more characters in
   3889   the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and
   3890   optionally suffixed by a U+0025 PERCENT SIGN character (%).</p>
   3891 
   3892   <p>A <span>valid dimension value</span> represents the number that
   3893   is represented in base ten by that string of digits, optionally with
   3894   a fractional component. If the U+0025 PERCENT SIGN is present, then
   3895   the dimension is a percentage; otherwise, it is a length.</p>
   3896 
   3897   <p class="note">For historical reasons, percentanges and lengths
   3898   less than 1.0 cannot be represented as <span title="valid dimension
   3899   value">valid dimension values</span>.</p>
   3900 -->
   3901   <p>The <dfn id=rules-for-parsing-dimension-values>rules for parsing dimension values</dfn> are as given in
   3902   the following algorithm. When invoked, the steps must be followed in
   3903   the order given, aborting at the first step that returns a
   3904   value. This algorithm will return either a number greater than or
   3905   equal to 1.0, or an error; if a number is returned, then it is
   3906   further categorized as either a percentage or a length.</p>
   3907 
   3908   <ol><li><p>Let <var title="">input</var> be the string being
   3909    parsed.</li>
   3910 
   3911    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   3912    string.</li>
   3913 
   3914    <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   3915 
   3916    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3917 
   3918    <li><p>If the character indicated by <var title="">position</var>
   3919    is a U+002B PLUS SIGN character (+), advance <var title="">position</var> to the next character.</li>
   3920 
   3921    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   3922    U+0030 DIGIT ZERO (0) characters, and discard them.</li>
   3923 
   3924    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return an error.</li>
   3925 
   3926    <li><p>If the character indicated by <var title="">position</var>
   3927    is not one of U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE (9), then
   3928    return an error.</li>
   3929 
   3930    <!-- Ok. At this point we know we have a number. It might have
   3931    trailing garbage which we'll ignore, but it's a number, and we
   3932    won't return an error. -->
   3933 
   3934    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   3935    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the
   3936    resulting sequence as a base-ten integer. Let <var title="">value</var> be that number.</li>
   3937 
   3938    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as a
   3939    length.</li>
   3940 
   3941    <li>
   3942 
   3943     <p>If the character indicated by <var title="">position</var> is a
   3944     U+002E FULL STOP character (.):</p>
   3945 
   3946     <ol><li><p>Advance <var title="">position</var> to the next
   3947      character.</li>
   3948 
   3949      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, or if the character indicated by <var title="">position</var> is not one of U+0030 DIGIT ZERO (0) to
   3950      U+0039 DIGIT NINE (9), then return <var title="">value</var> as a
   3951      length.</li>
   3952 
   3953      <li><p>Let <var title="">divisor</var> have the value 1.</li>
   3954 
   3955      <li><p><i>Fraction loop</i>: Multiply <var title="">divisor</var>
   3956      by ten.</li>
   3957 
   3958      <li>Add the value of the character indicated by <var title="">position</var>, interpreted as a base-ten digit (0..9)
   3959      and divided by <var title="">divisor</var>, to <var title="">value</var>.</li>
   3960 
   3961      <li><p>Advance <var title="">position</var> to the next
   3962      character.</li>
   3963 
   3964      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then return <var title="">value</var> as a
   3965      length.</li>
   3966 
   3967      <li><p>If the character indicated by <var title="">position</var>
   3968      is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), return
   3969      to the step labeled <i>fraction loop</i> in these
   3970      substeps.</li>
   3971 
   3972     </ol></li>
   3973 
   3974    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, return <var title="">value</var> as a
   3975    length.</li>
   3976 
   3977    <li><p>If the character indicated by <var title="">position</var>
   3978    is a U+0025 PERCENT SIGN character (%), return <var title="">value</var> as a percentage.</li>
   3979 
   3980    <li><p>Return <var title="">value</var> as a length.</li>
   3981 
   3982   </ol></div>
   3983 
   3984 
   3985   <h5 id=lists-of-integers><span class=secno>2.4.4.5 </span>Lists of integers</h5>
   3986 
   3987   <p>A <dfn id=valid-list-of-integers>valid list of integers</dfn> is a number of <a href=#valid-integer title="valid integer">valid integers</a> separated by U+002C
   3988   COMMA characters, with no other characters (e.g. no <a href=#space-character title="space character">space characters</a>). In addition, there
   3989   might be restrictions on the number of integers that can be given,
   3990   or on the range of values allowed.</p>
   3991 
   3992   <div class=impl>
   3993 
   3994   <p>The <dfn id=rules-for-parsing-a-list-of-integers>rules for parsing a list of integers</dfn> are as
   3995   follows:</p>
   3996 
   3997   <ol><li><p>Let <var title="">input</var> be the string being
   3998    parsed.</li>
   3999 
   4000    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4001    string.</li>
   4002 
   4003    <li><p>Let <var title="">numbers</var> be an initially empty list
   4004    of integers. This list will be the result of this
   4005    algorithm.</li>
   4006 
   4007    <li><p>If there is a character in the string <var title="">input</var> at position <var title="">position</var>, and
   4008    it is either a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON
   4009    character, then advance <var title="">position</var> to the next
   4010    character in <var title="">input</var>, or to beyond the end of the
   4011    string if there are no more characters.</li>
   4012 
   4013    <li><p>If <var title="">position</var> points to beyond the end of
   4014    <var title="">input</var>, return <var title="">numbers</var> and
   4015    abort.</li>
   4016 
   4017    <li><p>If the character in the string <var title="">input</var> at
   4018    position <var title="">position</var> is a U+0020 SPACE, U+002C
   4019    COMMA, or U+003B SEMICOLON character, then return to step 4.</li>
   4020 
   4021    <li><p>Let <var title="">negated</var> be false.</li>
   4022    <li><p>Let <var title="">value</var> be 0.</li>
   4023 
   4024    <li><p>Let <var title="">started</var> be false. This variable is
   4025    set to true when the parser sees a number or a U+002D HYPHEN-MINUS
   4026    character (-).</li>
   4027 
   4028    <li><p>Let <var title="">got number</var> be false. This variable
   4029    is set to true when the parser sees a number.</li>
   4030 
   4031    <li><p>Let <var title="">finished</var> be false. This variable is
   4032    set to true to switch parser into a mode where it ignores
   4033    characters until the next separator.</li>
   4034 
   4035    <li><p>Let <var title="">bogus</var> be false.</li>
   4036 
   4037    <li><p><i>Parser</i>: If the character in the string <var title="">input</var> at position <var title="">position</var>
   4038    is:</p>
   4039 
   4040     <dl class=switch><dt>A U+002D HYPHEN-MINUS character</dt>
   4041 
   4042      <dd>
   4043 
   4044       <p>Follow these substeps:</p>
   4045 
   4046       <ol><li>If <var title="">got number</var> is true, let <var title="">finished</var> be true.</li>
   4047 
   4048        <li>If <var title="">finished</var> is true, skip to the next
   4049        step in the overall set of steps.</li>
   4050 
   4051        <li>If <var title="">started</var> is true, let <var title="">negated</var> be false.</li>
   4052 
   4053        <li>Otherwise, if <var title="">started</var> is false and if <var title="">bogus</var> is false, let <var title="">negated</var>
   4054        be true.</li>
   4055 
   4056        <li>Let <var title="">started</var> be true.</li>
   4057 
   4058       </ol></dd>
   4059 
   4060 
   4061      <dt>A character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   4062      NINE (9)</dt>
   4063 
   4064      <dd>
   4065 
   4066       <p>Follow these substeps:</p>
   4067 
   4068       <ol><li>If <var title="">finished</var> is true, skip to the next
   4069        step in the overall set of steps.</li>
   4070 
   4071        <li>Multiply <var title="">value</var> by ten.</li>
   4072 
   4073        <li>Add the value of the digit, interpreted in base ten, to
   4074        <var title="">value</var>.</li>
   4075 
   4076        <li>Let <var title="">started</var> be true.</li>
   4077 
   4078        <li>Let <var title="">got number</var> be true.</li>
   4079 
   4080       </ol></dd>
   4081 
   4082 
   4083      <dt>A U+0020 SPACE character</dt>
   4084      <dt>A U+002C COMMA character</dt>
   4085      <dt>A U+003B SEMICOLON character</dt>
   4086 
   4087      <dd>
   4088 
   4089       <p>Follow these substeps:</p>
   4090 
   4091       <ol><li>If <var title="">got number</var> is false, return the <var title="">numbers</var> list and abort. This happens if an entry
   4092        in the list has no digits, as in "<code title="">1,2,x,4</code>".</li>
   4093 
   4094        <li>If <var title="">negated</var> is true, then negate <var title="">value</var>.</li>
   4095 
   4096        <li>Append <var title="">value</var> to the <var title="">numbers</var> list.</li>
   4097 
   4098        <li>Jump to step 4 in the overall set of steps.</li>
   4099 
   4100       </ol></dd>
   4101 
   4102 
   4103      <!-- <dt>A U+002E FULL STOP character</dt> -->
   4104      <dt>A character in the range U+0001 to U+001F, <!-- space --> U+0021 to U+002B, <!-- comma --> U+002D to U+002F, <!-- digits --> U+003A, <!-- semicolon --> U+003C to U+0040, <!-- a-z --> U+005B to U+0060, <!-- A-Z --> U+007b to U+007F
   4105         (i.e. any other non-alphabetic ASCII character)</dt>
   4106 
   4107  <!--
   4108  Test: http://www.hixie.ch/tests/adhoc/html/flow/image-maps/004-demo.html
   4109  IE6 on Wine treats the following characters like this also: U+1-U+1f,
   4110  U+21-U+2b, U+2d-U+2f, U+3a, U+3c-U+40, U+5b-U+60, U+7b-U+82,
   4111  U+84-U+89, U+8b, U+8d, U+8f-U+99, U+9b, U+9d, U+a0-U+bf, U+d7, U+f7,
   4112  U+1f6-U+1f9, U+218-U+24f, U+2a9-U+385, U+387, U+38b, U+38d, U+3a2,
   4113  U+3cf, U+3d7-U+3d9, U+3db, U+3dd, U+3df, U+3e1, U+3f4-U+400, U+40d,
   4114  U+450, U+45d, U+482-U+48f, U+4c5-U+4c6, U+4c9-U+4ca, U+4cd-U+4cf,
   4115  U+4ec-U+4ed, U+4f6-U+4f7, U+4fa-U+530, U+557-U+560, U+588-U+5cf,
   4116  U+5eb-U+5ef, U+5f3-U+620, U+63b-U+640, U+64b-U+670, U+6b8-U+6b9,
   4117  U+6bf, U+6cf, U+6d4, U+6d6-U+904, U+93a-U+957, U+962-U+984,
   4118  U+98d-U+98e, U+991-U+992, U+9a9, U+9b1, U+9b3-U+9b5, U+9ba-U+9db,
   4119  U+9de, U+9e2-U+9ef, U+9f2-U+a04, U+a0b-U+a0e, U+a11-U+a12, U+a29,
   4120  U+a31, U+a34, U+a37, U+a3a-U+a58, U+a5d, U+a5f-U+a84, U+a8c, U+a8e,
   4121  U+a92, U+aa9, U+ab1, U+ab4, U+aba-U+adf, U+ae1-U+b04, U+b0d-U+b0e,
   4122  U+b11-U+b12, U+b29, U+b31, U+b34-U+b35, U+b3a-U+b5b, U+b5e,
   4123  U+b62-U+b84, U+b8b-U+b8d, U+b91, U+b96-U+b98, U+b9b, U+b9d,
   4124  U+ba0-U+ba2, U+ba5-U+ba7, U+bab-U+bad, U+bb6, U+bba-U+c04, U+c0d,
   4125  U+c11, U+c29, U+c34, U+c3a-U+c5f, U+c62-U+c84, U+c8d, U+c91, U+ca9,
   4126  U+cb4, U+cba-U+cdd, U+cdf, U+ce2-U+d04, U+d0d, U+d11, U+d29,
   4127  U+d3a-U+d5f, U+d62-U+e00, U+e2f, U+e31, U+e34-U+e3f, U+e46-U+e80,
   4128  U+e83, U+e85-U+e86, U+e89, U+e8b-U+e8c, U+e8e-U+e93, U+e98, U+ea0,
   4129  U+ea4, U+ea6, U+ea8-U+ea9, U+eac, U+eaf-U+edb, U+ede-U+109f,
   4130  U+10c6-U+10cf, U+10f7-U+10ff, U+115a-U+115e, U+11a3-U+11a7,
   4131  U+11fa-U+1dff, U+1e9b-U+1e9f, U+1efa-U+1eff, U+1f16-U+1f17,
   4132  U+1f1e-U+1f1f, U+1f46-U+1f47, U+1f4e-U+1f4f, U+1f58, U+1f5a, U+1f5c,
   4133  U+1f5e, U+1f7e-U+1f7f, U+1fb5, U+1fbd-U+1fc1, U+1fc5, U+1fcd-U+1fcf,
   4134  U+1fd4-U+1fd5, U+1fdc-U+1fdf, U+1fed-U+1ff1, U+1ff5, U+1ffd-U+249b,
   4135  U+24ea-U+3004, U+3006-U+3040, U+3095-U+309a, U+309f-U+30a0, U+30fb,
   4136  U+30ff-U+3104, U+312d-U+3130, U+318f-U+4dff, U+9fa6-U+abff,
   4137  U+d7a4-U+d7ff, U+e000-U+f8ff, U+fa2e-U+faff, U+fb07-U+fb12,
   4138  U+fb18-U+fb1e, U+fb37, U+fb3d, U+fb3f, U+fb42, U+fb45, U+fbb2-U+fbd2,
   4139  U+fbe9, U+fce1, U+fd3e-U+fd4f, U+fd90-U+fd91, U+fdc8-U+fdef,
   4140  U+fdfc-U+fe7f, U+fefd-U+ff20, U+ff3b-U+ff40, U+ff5b-U+ff65, U+ffa0,
   4141  U+ffbf-U+ffc1, U+ffc8-U+ffc9, U+ffd0-U+ffd1, U+ffd8-U+ffd9,
   4142  U+ffdd-U+ffff
   4143  IE7 on Win2003 treats the following characters like this also
   4144  instead: U+1-U+1f, U+21-U+2b, U+2d-U+2f, U+3a, U+3c-U+40, U+5b-U+60,
   4145  U+7b-U+82, U+84-U+89, U+8b, U+8d, U+8f-U+99, U+9b, U+9d, U+a0-U+a9,
   4146  U+ab-U+b4, U+b6-U+b9, U+bb-U+bf, U+d7, U+f7, U+220-U+221,
   4147  U+234-U+24f, U+2ae-U+2af, U+2b9-U+2ba, U+2c2-U+2df, U+2e5-U+2ed,
   4148  U+2ef-U+344, U+346-U+379, U+37b-U+385, U+387, U+38b, U+38d, U+3a2,
   4149  U+3cf, U+3d8-U+3d9, U+3f4-U+3ff, U+482-U+48b, U+4c5-U+4c6,
   4150  U+4c9-U+4ca, U+4cd-U+4cf, U+4f6-U+4f7, U+4fa-U+530, U+557-U+558,
   4151  U+55a-U+560, U+588-U+5cf, U+5eb-U+5ef, U+5f3-U+620, U+63b-U+640,
   4152  U+656-U+66f, U+6d4, U+6dd-U+6e0, U+6e9-U+6ec, U+6ee-U+6f9,
   4153  U+6fd-U+70f, U+72d-U+72f, U+740-U+77f, U+7b1-U+900, U+904,
   4154  U+93a-U+93c, U+94d - U+94f, U+951-U+957, U+964-U+980, U+984,
   4155  U+98d-U+98e, U+991-U+992, U+9a9, U+9b1, U+9b3-U+9b5, U+9ba-U+9bd,
   4156  U+9c5-U+9c6, U+9c9-U+9ca, U+9cd-U+9d6, U+9d8-U+9db, U+9de,
   4157  U+9e4-U+9ef, U+9f2-U+a01, U+a03-U+a04, U+a0b-U+a0e, U+a11-U+a12,
   4158  U+a29, U+a31, U+a34, U+a37, U+a3a-U+a3d, U+a43-U+a46, U+a49-U+a4a,
   4159  U+a4d-U+a58, U+a5d, U+a5f-U+a6f, U+a75-U+a80, U+a84, U+a8c, U+a8e,
   4160  U+a92, U+aa9, U+ab1, U+ab4, U+aba-U+abc, U+ac6, U+aca, U+acd-U+acf,
   4161  U+ad1-U+adf, U+ae1-U+b00, U+b04, U+b0d-U+b0e, U+b11-U+b12, U+b29,
   4162  U+b31, U+b34-U+b35, U+b3a-U+b3c, U+b44-U+b46, U+b49 - U+b4a,
   4163  U+b4d-U+b55, U+b58-U+b5b, U+b5e, U+b62-U+b81, U+b84, U+b8b-U+b8d,
   4164  U+b91, U+b96-U+b98, U+b9b, U+b9d, U+ba0 - U+ba2, U+ba5-U+ba7,
   4165  U+bab-U+bad, U+bb6, U+bba-U+bbd, U+bc3-U+bc5, U+bc9, U+bcd-U+bd6,
   4166  U+bd8-U+c00, U+c04, U+c0d, U+c11, U+c29, U+c34, U+c3a-U+c3d, U+c45,
   4167  U+c49, U+c4d-U+c54, U+c57-U+c5f, U+c62-U+c81, U+c84, U+c8d, U+c91,
   4168  U+ca9, U+cb4, U+cba-U+cbd, U+cc5, U+cc9, U+ccd-U+cd4, U+cd7-U+cdd,
   4169  U+cdf, U+ce2-U+d01, U+d04, U+d0d, U+d11, U+d29, U+d3a-U+d3d,
   4170  U+d44-U+d45, U+d49, U+d4d-U+d56, U+d58-U+d5f, U+d62-U+d81, U+d84,
   4171  U+d97-U+d99, U+db2, U+dbc, U+dbe - U+dbf, U+dc7-U+dce, U+dd5, U+dd7,
   4172  U+de0-U+df1, U+df4-U+e00, U+e3b-U+e3f, U+e4f-U+e80, U+e83,
   4173  U+e85-U+e86, U+e89, U+e8b-U+e8c, U+e8e-U+e93, U+e98, U+ea0, U+ea4,
   4174  U+ea6, U+ea8-U+ea9, U+eac, U+eba, U+ebe-U+ebf, U+ec5-U+ecc,
   4175  U+ece-U+edb, U+ede-U+eff, U+f01-U+f3f, U+f48, U+f6b-U+f70,
   4176  U+f82-U+f87, U+f8c-U+f8f, U+f98, U+fbd-U+fff, U+1022, U+1028, U+102b,
   4177  U+1033-U+1035, U+1037, U+1039-U+104f, U+105a-U+109f, U+10c6-U+10cf,
   4178  U+10f7-U+10ff, U+115a - U+115e, U+11a3-U+11a7, U+11fa-U+11ff, U+1207,
   4179  U+1247, U+1249, U+124e-U+124f, U+1257, U+1259, U+125e-U+125f, U+1287,
   4180  U+1289, U+128e-U+128f, U+12af, U+12b1, U+12b6-U+12b7, U+12bf, U+12c1,
   4181  U+12c6-U+12c7, U+12cf, U+12d7, U+12ef, U+130f, U+1311, U+1316-U+1317,
   4182  U+131f, U+1347, U+135b-U+139f, U+13f5-U+1400, U+166d-U+166e,
   4183  U+1677-U+1680, U+169b - U+169f, U+16eb-U+177f, U+17c9-U+181f, U+1843,
   4184  U+1878-U+187f, U+18aa-U+1dff, U+1e9c-U+1e9f, U+1efa-U+1eff,
   4185  U+1f16-U+1f17, U+1f1e-U+1f1f, U+1f46-U+1f47, U+1f4e-U+1f4f, U+1f58,
   4186  U+1f5a, U+1f5c, U+1f5e, U+1f7e-U+1f7f, U+1fb5, U+1fbd, U+1fbf-U+1fc1,
   4187  U+1fc5, U+1fcd-U+1fcf, U+1fd4-U+1fd5, U+1fdc-U+1fdf, U+1fed-U+1ff1,
   4188  U+1ff5, U+1ffd-U+207e, U+2080-U+2101, U+2103-U+2106, U+2108-U+2109,
   4189  U+2114, U+2116-U+2118, U+211e-U+2123, U+2125, U+2127, U+2129, U+212e,
   4190  U+2132, U+213a-U+215f, U+2184-U+3005, U+3008-U+3020, U+302a-U+3037,
   4191  U+303b-U+3104, U+312d-U+3130, U+318f - U+319f, U+31b8-U+33ff,
   4192  U+4db6-U+4dff, U+9fa6-U+9fff, U+a48d-U+abff, U+d7a4-U+d7ff,
   4193  U+e000-U+f8ff, U+fa2e-U+faff, U+fb07-U+fb12, U+fb18-U+fb1c, U+fb1e,
   4194  U+fb29, U+fb37, U+fb3d, U+fb3f, U+fb42, U+fb45, U+fbb2-U+fbd2,
   4195  U+fd3e-U+fd4f, U+fd90-U+fd91, U+fdc8-U+fdef, U+fdfc-U+fe6f, U+fe73,
   4196  U+fe75, U+fefd-U+ff20, U+ff3b-U+ff40, U+ff5b-U+ff9f, U+ffbf-U+ffc1,
   4197  U+ffc8-U+ffc9, U+ffd0-U+ffd1, U+ffd8-U+ffd9, U+ffdd-U+ffff
   4198  -->
   4199 
   4200      <dd>
   4201 
   4202       <p>Follow these substeps:</p>
   4203 
   4204       <ol><li>If <var title="">got number</var> is true, let <var title="">finished</var> be true.</li>
   4205 
   4206        <li>If <var title="">finished</var> is true, skip to the next
   4207        step in the overall set of steps.</li>
   4208 
   4209        <li>Let <var title="">negated</var> be false.</li>
   4210 
   4211       </ol></dd>
   4212 
   4213 
   4214      <dt>Any other character</dt>
   4215      <!-- alphabetic a-z A-Z, and non-ASCII -->
   4216 
   4217      <dd>
   4218 
   4219       <p>Follow these substeps:</p>
   4220 
   4221       <ol><li>If <var title="">finished</var> is true, skip to the next
   4222        step in the overall set of steps.</li>
   4223 
   4224        <li>Let <var title="">negated</var> be false.</li>
   4225 
   4226        <li>Let <var title="">bogus</var> be true.</li>
   4227 
   4228        <li>If <var title="">started</var> is true, then return the
   4229        <var title="">numbers</var> list, and abort. (The value in <var title="">value</var> is not appended to the list first; it is
   4230        dropped.)</li>
   4231 
   4232       </ol></dd>
   4233 
   4234     </dl></li>
   4235 
   4236    <li><p>Advance <var title="">position</var> to the next character
   4237    in <var title="">input</var>, or to beyond the end of the string if
   4238    there are no more characters.</li>
   4239 
   4240    <li><p>If <var title="">position</var> points to a character (and
   4241    not to beyond the end of <var title="">input</var>), jump to the
   4242    big <i>Parser</i> step above.</li>
   4243 
   4244    <li><p>If <var title="">negated</var> is true, then negate <var title="">value</var>.</li>
   4245 
   4246    <li><p>If <var title="">got number</var> is true, then append <var title="">value</var> to the <var title="">numbers</var> list.</li>
   4247 
   4248    <li><p>Return the <var title="">numbers</var> list and
   4249    abort.</li>
   4250 
   4251   </ol></div>
   4252 
   4253 
   4254   <div class=impl>
   4255 
   4256   <h5 id=lists-of-dimensions><span class=secno>2.4.4.6 </span>Lists of dimensions</h5>
   4257 
   4258   <!-- no definition of a type since no conforming feature uses this
   4259   syntax (it's only used in cols="" and rows="" on <frameset> -->
   4260 
   4261   <p>The <dfn id=rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</dfn> are as
   4262   follows. These rules return a list of zero or more pairs consisting
   4263   of a number and a unit, the unit being one of <i>percentage</i>,
   4264   <i>relative</i>, and <i>absolute</i>.</p>
   4265 
   4266   <ol><li><p>Let <var title="">raw input</var> be the string being
   4267    parsed.</li>
   4268 
   4269    <li><p>If the last character in <var title="">raw input</var> is a
   4270    U+002C COMMA character (,), then remove that character from <var title="">raw input</var>.</li>
   4271 
   4272    <li><p><a href=#split-a-string-on-commas title="split a string on commas">Split the string <var title="">raw input</var> on commas</a>. Let <var title="">raw
   4273    tokens</var> be the resulting list of tokens.</li>
   4274 
   4275    <li><p>Let <var title="">result</var> be an empty list of
   4276    number/unit pairs.</li>
   4277 
   4278    <li>
   4279 
   4280     <p>For each token in <var title="">raw tokens</var>, run the
   4281     following substeps:</p>
   4282 
   4283     <ol><li><p>Let <var title="">input</var> be the token.</li>
   4284 
   4285      <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4286      string.</li>
   4287 
   4288      <li><p>Let <var title="">value</var> be the number 0.</li>
   4289 
   4290      <li><p>Let <var title="">unit</var> be <i>absolute</i>.</li>
   4291 
   4292      <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, set <var title="">unit</var> to
   4293      <i>relative</i> and jump to the last substep.</li>
   4294 
   4295      <li><p>If the character at <var title="">position</var> is a
   4296      character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
   4297      (9), <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> in the range
   4298      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the
   4299      resulting sequence as an integer in base ten, and increment <var title="">value</var> by that integer.</li>
   4300 
   4301      <li>
   4302 
   4303       <p>If the character at <var title="">position</var> is a U+002E
   4304       FULL STOP character (.), run these substeps:</p>
   4305 
   4306       <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> consisting
   4307        of <a href=#space-character title="space character">space characters</a> and
   4308        characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   4309        NINE (9). Let <var title="">s</var> be the resulting
   4310        sequence.</li>
   4311 
   4312        <li><p>Remove all <a href=#space-character title="space character">space
   4313        characters</a> in <var title="">s</var>.</li>
   4314 
   4315        <li>
   4316 
   4317         <p>If <var title="">s</var> is not the empty string, run these
   4318         subsubsteps:</p>
   4319 
   4320         <ol><li><p>Let <var title="">length</var> be the number of
   4321          characters in <var title="">s</var> (after the spaces were
   4322          removed).</li>
   4323 
   4324          <li><p>Let <var title="">fraction</var> be the result of
   4325          interpreting <var title="">s</var> as a base-ten integer, and
   4326          then dividing that number by <span title="">10<sup title=""><var title="">length</var></sup></span>.</li>
   4327 
   4328          <li><p>Increment <var title="">value</var> by <var title="">fraction</var>.</li>
   4329 
   4330         </ol></li>
   4331 
   4332       </ol></li>
   4333 
   4334      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   4335 
   4336      <li>
   4337 
   4338       <p>If the character at <var title="">position</var> is a U+0025
   4339       PERCENT SIGN character (%), then set <var title="">unit</var> to
   4340       <i>percentage</i>.</p>
   4341 
   4342       <p>Otherwise, if the character at <var title="">position</var>
   4343       is a U+002A ASTERISK character (*), then set <var title="">unit</var> to <i>relative</i>.</p>
   4344 
   4345      </li>
   4346 
   4347      <!-- the remaining characters in /input/ are ignored -->
   4348 
   4349      <li><p>Add an entry to <var title="">result</var> consisting of
   4350      the number given by <var title="">value</var> and the unit given
   4351      by <var title="">unit</var>.</li>
   4352 
   4353     </ol></li>
   4354 
   4355    <li><p>Return the list <var title="">result</var>.</li>
   4356 
   4357   </ol></div>
   4358 
   4359 
   4360   <h4 id=dates-and-times><span class=secno>2.4.5 </span>Dates and times</h4>
   4361 
   4362   <p>In the algorithms below, the <dfn id=number-of-days-in-month-month-of-year-year>number of days in month <var title="">month</var> of year <var title="">year</var></dfn> is:
   4363   <em>31</em> if <var title="">month</var> is 1, 3, 5, 7, 8, 10, or
   4364   12; <em>30</em> if <var title="">month</var> is 4, 6, 9, or 11;
   4365   <em>29</em> if <var title="">month</var> is 2 and <var title="">year</var> is a number divisible by 400, or if <var title="">year</var> is a number divisible by 4 but not by 100; and
   4366   <em>28</em> otherwise. This takes into account leap years in the
   4367   Gregorian calendar. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4368 
   4369   <p>The <dfn id=concept-datetime-digit title=concept-datetime-digit>digits</dfn> in the date
   4370   and time syntaxes defined in this section must be characters in the
   4371   range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), used to
   4372   express numbers in base ten.</p>
   4373 
   4374   <div class=impl>
   4375 
   4376   <p class=note>While the formats described here are intended to be
   4377   subsets of the corresponding ISO8601 formats, this specification
   4378   defines parsing rules in much more detail than ISO8601.
   4379   Implementors are therefore encouraged to carefully examine any date
   4380   parsing libraries before using them to implement the parsing rules
   4381   described below; ISO8601 libraries might not parse dates and times
   4382   in exactly the same manner. <a href=#refsISO8601>[ISO8601]</a></p>
   4383 
   4384   </div>
   4385 
   4386 
   4387   <h5 id=months><span class=secno>2.4.5.1 </span>Months</h5>
   4388 
   4389   <p>A <dfn id=concept-month title=concept-month>month</dfn> consists of a specific
   4390   proleptic Gregorian date with no time-zone information and no date
   4391   information beyond a year and a month. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4392 
   4393   <p>A string is a <dfn id=valid-month-string>valid month string</dfn> representing a year
   4394   <var title="">year</var> and month <var title="">month</var> if it
   4395   consists of the following components in the given order:</p>
   4396 
   4397   <ol><li>Four or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing <var title="">year</var>, where <var title="">year</var>&nbsp;&gt;&nbsp;0</li>
   4398 
   4399    <li>A U+002D HYPHEN-MINUS character (-)</li>
   4400 
   4401    <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4402    representing the month <var title="">month</var>, in the range
   4403    1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12</li>
   4404 
   4405   </ol><div class=impl>
   4406 
   4407   <p>The rules to <dfn id=parse-a-month-string>parse a month string</dfn> are as follows. This
   4408   will return either a year and month, or nothing. If at any point the
   4409   algorithm says that it "fails", this means that it is aborted at
   4410   that point and returns nothing.</p>
   4411 
   4412   <ol><li><p>Let <var title="">input</var> be the string being
   4413    parsed.</li>
   4414 
   4415    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4416    string.</li>
   4417 
   4418    <li><p><a href=#parse-a-month-component>Parse a month component</a> to obtain <var title="">year</var> and <var title="">month</var>. If this returns
   4419    nothing, then fail.</p>
   4420 
   4421    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   4422    end of <var title="">input</var>, then fail.</li>
   4423 
   4424    <li><p>Return <var title="">year</var> and <var title="">month</var>.</li>
   4425 
   4426   </ol><p>The rules to <dfn id=parse-a-month-component>parse a month component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
   4427   as follows. This will return either a year and a month, or
   4428   nothing. If at any point the algorithm says that it "fails", this
   4429   means that it is aborted at that point and returns nothing.</p>
   4430 
   4431   <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4432    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4433    sequence is not at least four characters long, then
   4434    fail. Otherwise, interpret the resulting sequence as a base-ten
   4435    integer. Let that number be the <var title="">year</var>.</li>
   4436 
   4437    <li><p>If <var title="">year</var> is not a number greater than
   4438    zero, then fail.</li>
   4439 
   4440    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   4441    then fail. Otherwise, move <var title="">position</var> forwards
   4442    one character.</li>
   4443 
   4444    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4445    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4446    sequence is not exactly two characters long, then fail. Otherwise,
   4447    interpret the resulting sequence as a base-ten integer. Let that
   4448    number be the <var title="">month</var>.</li>
   4449 
   4450    <li><p>If <var title="">month</var> is not a number in the range
   4451    1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12, then
   4452    fail.</li>
   4453 
   4454    <li><p>Return <var title="">year</var> and <var title="">month</var>.</li>
   4455 
   4456   </ol></div>
   4457 
   4458 
   4459   <h5 id=dates><span class=secno>2.4.5.2 </span>Dates</h5>
   4460 
   4461   <p>A <dfn id=concept-date title=concept-date>date</dfn> consists of a specific
   4462   proleptic Gregorian date with no time-zone information, consisting
   4463   of a year, a month, and a day. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4464 
   4465   <p>A string is a <dfn id=valid-date-string>valid date string</dfn> representing a year
   4466   <var title="">year</var>, month <var title="">month</var>, and day
   4467   <var title="">day</var> if it consists of the following components
   4468   in the given order:</p>
   4469 
   4470   <ol><li>A <a href=#valid-month-string>valid month string</a>, representing <var title="">year</var> and <var title="">month</var></li>
   4471 
   4472    <li>A U+002D HYPHEN-MINUS character (-)</li>
   4473 
   4474    <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4475    representing <var title="">day</var>, in the range
   4476    1&nbsp;&le;&nbsp;<var title="">day</var>&nbsp;&le;&nbsp;<var title="">maxday</var> where <var title="">maxday</var> is the <a href=#number-of-days-in-month-month-of-year-year title="number of days in month month of year year">number of days
   4477    in the month <var title="">month</var> and year <var title="">year</var></a></li>
   4478 
   4479   </ol><div class=impl>
   4480 
   4481   <p>The rules to <dfn id=parse-a-date-string>parse a date string</dfn> are as follows. This
   4482   will return either a date, or nothing. If at any point the algorithm
   4483   says that it "fails", this means that it is aborted at that point
   4484   and returns nothing.</p>
   4485 
   4486   <ol><li><p>Let <var title="">input</var> be the string being
   4487    parsed.</li>
   4488 
   4489    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4490    string.</li>
   4491 
   4492    <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>
   4493 
   4494    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   4495    end of <var title="">input</var>, then fail.</li>
   4496 
   4497    <li><p>Let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>.</li>
   4498 
   4499    <li><p>Return <var title="">date</var>.</li>
   4500 
   4501   </ol><p>The rules to <dfn id=parse-a-date-component>parse a date component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
   4502   as follows. This will return either a year, a month, and a day, or
   4503   nothing. If at any point the algorithm says that it "fails", this
   4504   means that it is aborted at that point and returns nothing.</p>
   4505 
   4506   <ol><li><p><a href=#parse-a-month-component>Parse a month component</a> to obtain <var title="">year</var> and <var title="">month</var>. If this returns
   4507    nothing, then fail.</li>
   4508 
   4509    <li><p>Let <var title="">maxday</var> be the <a href=#number-of-days-in-month-month-of-year-year>number of days
   4510    in month <var title="">month</var> of year <var title="">year</var></a>.</li>
   4511 
   4512    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   4513    then fail. Otherwise, move <var title="">position</var> forwards
   4514    one character.</li>
   4515 
   4516    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4517    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4518    sequence is not exactly two characters long, then fail. Otherwise,
   4519    interpret the resulting sequence as a base-ten integer. Let that
   4520    number be the <var title="">day</var>.</li>
   4521 
   4522    <li><p>If <var title="">day</var> is not a number in the range
   4523    1&nbsp;&le;&nbsp;<var title="">day</var>&nbsp;&le;&nbsp;<var title="">maxday</var>, then fail.</li>
   4524 
   4525    <li><p>Return <var title="">year</var>, <var title="">month</var>,
   4526    and <var title="">day</var>.</li>
   4527 
   4528   </ol></div>
   4529 
   4530 
   4531   <h5 id=times><span class=secno>2.4.5.3 </span>Times</h5>
   4532 
   4533   <p>A <dfn id=concept-time title=concept-time>time</dfn> consists of a specific
   4534   time with no time-zone information, consisting of an hour, a minute,
   4535   a second, and a fraction of a second.</p>
   4536 
   4537   <p>A string is a <dfn id=valid-time-string>valid time string</dfn> representing an hour
   4538   <var title="">hour</var>, a minute <var title="">minute</var>, and a
   4539   second <var title="">second</var> if it consists of the following
   4540   components in the given order:</p>
   4541 
   4542   <ol><li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4543    representing <var title="">hour</var>, in the range
   4544    0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23</li>
   4545 
   4546    <li>A U+003A COLON character (:)</li>
   4547 
   4548    <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4549    representing <var title="">minute</var>, in the range
   4550    0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59</li>
   4551 
   4552    <li>Optionally (required if <var title="">second</var> is
   4553    non-zero):
   4554 
   4555     <ol><li>A U+003A COLON character (:)</li>
   4556 
   4557      <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4558      representing the integer part of <var title="">second</var>, in
   4559      the range 0&nbsp;&le;&nbsp;<var title="">s</var>&nbsp;&le;&nbsp;59</li>
   4560 
   4561      <li>Optionally (required if <var title="">second</var> is not an
   4562      integer):
   4563 
   4564       <ol><li>A 002E FULL STOP character (.)</li>
   4565 
   4566        <li>One or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing the
   4567        fractional part of <var title="">second</var></li>
   4568 
   4569       </ol></li>
   4570 
   4571     </ol></li>
   4572 
   4573   </ol><p class=note>The <var title="">second</var> component cannot be
   4574   60 or 61; leap seconds cannot be represented.</p>
   4575 
   4576   <div class=impl>
   4577 
   4578   <p>The rules to <dfn id=parse-a-time-string>parse a time string</dfn> are as follows. This
   4579   will return either a time, or nothing. If at any point the algorithm
   4580   says that it "fails", this means that it is aborted at that point
   4581   and returns nothing.</p>
   4582 
   4583   <ol><li><p>Let <var title="">input</var> be the string being
   4584    parsed.</li>
   4585 
   4586    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4587    string.</li>
   4588 
   4589    <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>
   4590 
   4591    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   4592    end of <var title="">input</var>, then fail.</li>
   4593 
   4594    <li><p>Let <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
   4595    <var title="">second</var>.</li>
   4596 
   4597    <li><p>Return <var title="">time</var>.</li>
   4598 
   4599   </ol><p>The rules to <dfn id=parse-a-time-component>parse a time component</dfn>, given an <var title="">input</var> string and a <var title="">position</var>, are
   4600   as follows. This will return either an hour, a minute, and a second,
   4601   or nothing. If at any point the algorithm says that it "fails", this
   4602   means that it is aborted at that point and returns nothing.</p>
   4603 
   4604   <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4605    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4606    sequence is not exactly two characters long, then fail. Otherwise,
   4607    interpret the resulting sequence as a base-ten integer. Let that
   4608    number be the <var title="">hour</var>.</li>
   4609 
   4610    <li>If <var title="">hour</var> is not a number in the range
   4611    0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23, then
   4612    fail.</li>
   4613 
   4614    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character, then
   4615    fail. Otherwise, move <var title="">position</var> forwards one
   4616    character.</li>
   4617 
   4618    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4619    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4620    sequence is not exactly two characters long, then fail. Otherwise,
   4621    interpret the resulting sequence as a base-ten integer. Let that
   4622    number be the <var title="">minute</var>.</li>
   4623 
   4624    <li>If <var title="">minute</var> is not a number in the range
   4625    0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59, then
   4626    fail.</li>
   4627 
   4628    <li><p>Let <var title="">second</var> be a string with the value
   4629    "0".</li>
   4630 
   4631    <li>
   4632 
   4633     <p>If <var title="">position</var> is not beyond the end of
   4634     <var title="">input</var> and the character at <var title="">position</var> is a U+003A COLON, then run these
   4635     substeps:</p>
   4636 
   4637     <ol><li><p>Advance <var title="">position</var> to the next character
   4638      in <var title="">input</var>.</li>
   4639 
   4640      <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var>, or at the last character in <var title="">input</var>, or if the next <em>two</em> characters in
   4641      <var title="">input</var> starting at <var title="">position</var> are not two characters both in the range
   4642      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
   4643      fail.</li>
   4644 
   4645      <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   4646      either characters in the range U+0030 DIGIT ZERO (0) to U+0039
   4647      DIGIT NINE (9) or U+002E FULL STOP characters. If the collected
   4648      sequence has more than one U+002E FULL STOP characters, or if the
   4649      last character in the sequence is a U+002E FULL STOP character,
   4650      then fail. Otherwise, let the collected string be <var title="">second</var> instead of its previous value.</li>
   4651 
   4652     </ol></li>
   4653 
   4654    <li><p>Interpret <var title="">second</var> as a base-ten number
   4655    (possibly with a fractional part). Let <var title="">second</var>
   4656    be that number instead of the string version.</li>
   4657 
   4658    <li><p>If <var title="">second</var> is not a number in the range
   4659    0&nbsp;&le;&nbsp;<var title="">second</var>&nbsp;&lt;&nbsp;60, then
   4660    fail.</li>
   4661 
   4662    <li><p>Return <var title="">hour</var>, <var title="">minute</var>,
   4663    and <var title="">second</var>.</li>
   4664 
   4665   </ol></div>
   4666 
   4667 
   4668   <h5 id=local-dates-and-times><span class=secno>2.4.5.4 </span>Local dates and times</h5>
   4669 
   4670   <p>A <dfn id=concept-datetime-local title=concept-datetime-local>local date and time</dfn>
   4671   consists of a specific proleptic Gregorian date, consisting of a
   4672   year, a month, and a day, and a time, consisting of an hour, a
   4673   minute, a second, and a fraction of a second, but expressed without
   4674   a time zone. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4675 
   4676   <p>A string is a <dfn id=valid-local-date-and-time-string>valid local date and time string</dfn>
   4677   representing a date and time if it consists of the following
   4678   components in the given order:</p>
   4679 
   4680   <ol><li>A <a href=#valid-date-string>valid date string</a> representing the date.</li>
   4681 
   4682    <li>A U+0054 LATIN CAPITAL LETTER T character (T).</li>
   4683 
   4684    <li>A <a href=#valid-time-string>valid time string</a> representing the time.</li>
   4685 
   4686   </ol><div class=impl>
   4687 
   4688   <p>The rules to <dfn id=parse-a-local-date-and-time-string>parse a local date and time string</dfn> are as
   4689   follows. This will return either a date and time, or nothing. If at
   4690   any point the algorithm says that it "fails", this means that it is
   4691   aborted at that point and returns nothing.</p>
   4692 
   4693   <ol><li><p>Let <var title="">input</var> be the string being
   4694    parsed.</li>
   4695 
   4696    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4697    string.</li>
   4698 
   4699    <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>
   4700 
   4701    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
   4702    character (T) then fail. Otherwise, move <var title="">position</var> forwards one character.</li>
   4703 
   4704    <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>
   4705 
   4706    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   4707    end of <var title="">input</var>, then fail.</li>
   4708 
   4709    <li><p>Let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>.</li>
   4710 
   4711    <li><p>Let <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
   4712    <var title="">second</var>.</li>
   4713 
   4714    <li><p>Return <var title="">date</var> and <var title="">time</var>.</li>
   4715 
   4716   </ol></div>
   4717 
   4718 
   4719 
   4720   <h5 id=global-dates-and-times><span class=secno>2.4.5.5 </span>Global dates and times</h5>
   4721 
   4722   <p>A <dfn id=concept-datetime title=concept-datetime>global date and time</dfn>
   4723   consists of a specific proleptic Gregorian date, consisting of a
   4724   year, a month, and a day, and a time, consisting of an hour, a
   4725   minute, a second, and a fraction of a second, expressed with a
   4726   time-zone offset, consisting of a signed number of hours and
   4727   minutes. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4728 
   4729   <p>A string is a <dfn id=valid-global-date-and-time-string>valid global date and time string</dfn>
   4730   representing a date, time, and a time-zone offset if it consists of
   4731   the following components in the given order:</p>
   4732 
   4733   <ol><li>A <a href=#valid-date-string>valid date string</a> representing the date</li>
   4734 
   4735    <li>A U+0054 LATIN CAPITAL LETTER T character (T)</li>
   4736 
   4737    <li>A <a href=#valid-time-string>valid time string</a> representing the time</li>
   4738 
   4739    <li>Either:
   4740 
   4741     <ul><li>A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only
   4742      if the time zone is UTC</li>
   4743 
   4744      <li>Or:
   4745 
   4746       <ol><li>Either a U+002B PLUS SIGN character (+) or a U+002D
   4747        HYPHEN-MINUS character (-), representing the sign of the
   4748        time-zone offset</li>
   4749 
   4750        <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4751        representing the hours component <var title="">hour</var> of
   4752        the time-zone offset, in the range 0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23</li>
   4753 
   4754        <li>A U+003A COLON character (:)</li>
   4755 
   4756        <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4757        representing the minutes component <var title="">minute</var>
   4758        of the time-zone offset, in the range 0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59</li>
   4759 
   4760       </ol></li>
   4761 
   4762     </ul></li>
   4763 
   4764   </ol><p class=note>This format allows for time-zone offsets from -23:59
   4765   to +23:59. In practice, however, the range of offsets of actual time
   4766   zones is -12:00 to +14:00, and the minutes component of offsets of
   4767   actual time zones is always either 00, 30, or 45.</p>
   4768 
   4769   <div class=example>
   4770 
   4771    <p>The following are some examples of dates written as <a href=#valid-global-date-and-time-string title="valid global date and time string">valid global date and
   4772    time strings</a>.</p>
   4773 
   4774    <dl><dt>"<code>0037-12-13T00:00Z</code>"</dt>
   4775 
   4776     <dd>Midnight UTC on the birthday of Nero (the Roman Emperor). See
   4777     below for further discussion on which date this actually
   4778     corresponds to.</dd>
   4779 
   4780     <dt>"<code>1979-10-14T12:00:00.001-04:00</code>"</dt>
   4781 
   4782     <dd>One millisecond after noon on October 14th 1979, in the time
   4783     zone in use on the east coast of the USA during daylight saving
   4784     time.</dd>
   4785 
   4786     <dt>"<code>8592-01-01T02:09+02:09</code>"</dt>
   4787 
   4788     <dd>Midnight UTC on the 1st of January, 8592. The time zone
   4789     associated with that time is two hours and nine minutes ahead of
   4790     UTC, which is not currently a real time zone, but is nonetheless
   4791     allowed.</dd>
   4792 
   4793    </dl><p>Several things are notable about these dates:</p>
   4794 
   4795    <ul><li>Years with fewer than four digits have to be
   4796     zero-padded. The date "37-12-13" would not be a valid date.</li>
   4797 
   4798     <li>To unambiguously identify a moment in time prior to the
   4799     introduction of the Gregorian calendar, the date has to be first
   4800     converted to the Gregorian calendar from the calendar in use at
   4801     the time (e.g. from the Julian calendar). The date of Nero's birth
   4802     is the 15th of December 37, in the Julian Calendar, which is the
   4803     13th of December 37 in the proleptic Gregorian Calendar.</li> <!--
   4804     This might not be true. I can't find a reference that gives his
   4805     birthday with an explicit statement about the calendar being
   4806     used. However, it seems unlikely that it would be given in the
   4807     Gregorian calendar, so I assume sites use the Julian one. -->
   4808 
   4809     <li>The time and time-zone offset components are not optional.</li>
   4810 
   4811     <li>Dates before the year one can't be represented as a datetime
   4812     in this version of HTML.</li>
   4813 
   4814     <li>Time-zone offsets differ based on daylight savings time.</li>
   4815 
   4816    </ul></div>
   4817 
   4818   <div class=impl>
   4819 
   4820   <p>The <dfn id=best-representation-of-the-global-date-and-time-string>best representation of the global date and time
   4821   string</dfn> <var title="">datetime</var> is the <a href=#valid-global-date-and-time-string>valid global
   4822   date and time string</a> representing <var title="">datetime</var> with the last character of the string not
   4823   being a U+005A LATIN CAPITAL LETTER Z character (Z), even if the
   4824   time zone is UTC, and with a U+002D HYPHEN-MINUS character (-)
   4825   representing the sign of the time-zone offset when the time zone is
   4826   UTC.</p>
   4827 
   4828   <p>The rules to <dfn id=parse-a-global-date-and-time-string>parse a global date and time string</dfn> are
   4829   as follows. This will return either a time in UTC, with associated
   4830   time-zone offset information for round tripping or display purposes,
   4831   or nothing. If at any point the algorithm says that it "fails", this
   4832   means that it is aborted at that point and returns nothing.</p>
   4833 
   4834   <ol><li><p>Let <var title="">input</var> be the string being
   4835    parsed.</li>
   4836 
   4837    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4838    string.</li>
   4839 
   4840    <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this returns nothing, then fail.</p>
   4841 
   4842    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
   4843    character (T) then fail. Otherwise, move <var title="">position</var> forwards one character.</li>
   4844 
   4845    <li><p><a href=#parse-a-time-component>Parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</p>
   4846 
   4847    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var>, then fail.</li>
   4848 
   4849    <li><p><a href=#parse-a-time-zone-offset-component>Parse a time-zone offset component</a> to obtain
   4850    <var title="">timezone<sub title="">hours</sub></var> and <var title="">timezone<sub title="">minutes</sub></var>. If this returns
   4851    nothing, then fail.</p>
   4852 
   4853    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   4854    end of <var title="">input</var>, then fail.</li>
   4855 
   4856    <li><p>Let <var title="">time</var> be the moment in time at year
   4857    <var title="">year</var>, month <var title="">month</var>, day <var title="">day</var>, hours <var title="">hour</var>, minute <var title="">minute</var>, second <var title="">second</var>,
   4858    subtracting <var title="">timezone<sub title="">hours</sub></var>
   4859    hours and <var title="">timezone<sub title="">minutes</sub></var>
   4860    minutes. That moment in time is a moment in the UTC
   4861    time zone.</li>
   4862 
   4863    <li><p>Let <var title="">timezone</var> be <var title="">timezone<sub title="">hours</sub></var> hours and <var title="">timezone<sub title="">minutes</sub></var> minutes from
   4864    UTC.</li>
   4865 
   4866    <li><p>Return <var title="">time</var> and <var title="">timezone</var>.</li>
   4867 
   4868   </ol><p>The rules to <dfn id=parse-a-time-zone-offset-component>parse a time-zone offset component</dfn>, given
   4869   an <var title="">input</var> string and a <var title="">position</var>, are as follows. This will return either
   4870   time-zone hours and time-zone minutes, or nothing. If at any point
   4871   the algorithm says that it "fails", this means that it is aborted at
   4872   that point and returns nothing.</p>
   4873 
   4874   <ol><li>
   4875 
   4876     <p>If the character at <var title="">position</var> is a U+005A
   4877     LATIN CAPITAL LETTER Z character (Z), then:</p>
   4878 
   4879     <ol><li><p>Let <var title="">timezone<sub title="">hours</sub></var>
   4880      be 0.</li>
   4881 
   4882      <li><p>Let <var title="">timezone<sub title="">minutes</sub></var> be 0.</li>
   4883 
   4884      <li><p>Advance <var title="">position</var> to the next character
   4885      in <var title="">input</var>.</li>
   4886 
   4887     </ol><p>Otherwise, if the character at <var title="">position</var> is
   4888     either a U+002B PLUS SIGN (+) or a U+002D HYPHEN-MINUS (-),
   4889     then:</p>
   4890 
   4891     <ol><li><p>If the character at <var title="">position</var> is a
   4892      U+002B PLUS SIGN (+), let <var title="">sign</var> be
   4893      "positive". Otherwise, it's a U+002D HYPHEN-MINUS (-); let <var title="">sign</var> be "negative".</li>
   4894 
   4895      <li><p>Advance <var title="">position</var> to the next character
   4896      in <var title="">input</var>.</li>
   4897 
   4898      <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4899      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4900      sequence is not exactly two characters long, then
   4901      fail. Otherwise, interpret the resulting sequence as a base-ten
   4902      integer. Let that number be the <var title="">timezone<sub title="">hours</sub></var>.</li>
   4903 
   4904      <li>If <var title="">timezone<sub title="">hours</sub></var> is
   4905      not a number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub title="">hours</sub></var>&nbsp;&le;&nbsp;23, then fail.</li>
   4906 
   4907      <li>If <var title="">sign</var> is "negative", then negate <var title="">timezone<sub title="">hours</sub></var>.</li>
   4908 
   4909      <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+003A COLON character, then
   4910      fail. Otherwise, move <var title="">position</var> forwards one
   4911      character.</li>
   4912 
   4913      <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4914      U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4915      sequence is not exactly two characters long, then
   4916      fail. Otherwise, interpret the resulting sequence as a base-ten
   4917      integer. Let that number be the <var title="">timezone<sub title="">minutes</sub></var>.</li>
   4918 
   4919      <li>If <var title="">timezone<sub title="">minutes</sub></var> is
   4920      not a number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub title="">minutes</sub></var>&nbsp;&le;&nbsp;59, then fail.</li>
   4921 
   4922      <li>If <var title="">sign</var> is "negative", then negate <var title="">timezone<sub title="">minutes</sub></var>.</li>
   4923 
   4924     </ol><p>Otherwise, fail.</p>
   4925 
   4926    </li>
   4927 
   4928    <li><p>Return <var title="">timezone<sub title="">hours</sub></var>
   4929    and <var title="">timezone<sub title="">minutes</sub></var>.</li>
   4930 
   4931   </ol></div>
   4932 
   4933 
   4934   <h5 id=weeks><span class=secno>2.4.5.6 </span>Weeks</h5>
   4935 
   4936   <p>A <dfn id=concept-week title=concept-week>week</dfn> consists of a week-year
   4937   number and a week number representing a seven-day period starting on
   4938   a Monday. Each week-year in this calendaring system has either 52 or
   4939   53 such seven-day periods, as defined below. The seven-day period
   4940   starting on the Gregorian date Monday December 29th 1969
   4941   (1969-12-29) is defined as week number 1 in week-year
   4942   1970. Consecutive weeks are numbered sequentially. The week before
   4943   the number 1 week in a week-year is the last week in the previous
   4944   week-year, and vice versa. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   4945 
   4946   <p>A week-year with a number <var title="">year</var> has 53 weeks
   4947   if it corresponds to either a year <var title="">year</var> in the
   4948   proleptic Gregorian calendar that has a Thursday as its first day
   4949   (January 1st), or a year <var title="">year</var> in the proleptic
   4950   Gregorian calendar that has a Wednesday as its first day (January
   4951   1st) and where <var title="">year</var> is a number divisible by
   4952   400, or a number divisible by 4 but not by 100. All other week-years
   4953   have 52 weeks.</p>
   4954 
   4955   <p>The <dfn id=week-number-of-the-last-day>week number of the last day</dfn> of a week-year with 53
   4956   weeks is 53; the week number of the last day of a week-year with 52
   4957   weeks is 52.</p>
   4958 
   4959   <p class=note>The week-year number of a particular day can be
   4960   different than the number of the year that contains that day in the
   4961   proleptic Gregorian calendar. The first week in a week-year <var title="">y</var> is the week that contains the first Thursday of
   4962   the Gregorian year <var title="">y</var>.</p>
   4963 
   4964   <p>A string is a <dfn id=valid-week-string>valid week string</dfn> representing a
   4965   week-year <var title="">year</var> and week <var title="">week</var>
   4966   if it consists of the following components in the given order:</p>
   4967 
   4968   <ol><li>Four or more <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>, representing <var title="">year</var>, where <var title="">year</var>&nbsp;&gt;&nbsp;0</li>
   4969 
   4970    <li>A U+002D HYPHEN-MINUS character (-)</li>
   4971 
   4972    <li>A U+0057 LATIN CAPITAL LETTER W character (W)</li>
   4973 
   4974    <li>Two <a href=#concept-datetime-digit title=concept-datetime-digit>digits</a>,
   4975    representing the week <var title="">week</var>, in the range
   4976    1&nbsp;&le;&nbsp;<var title="">week</var>&nbsp;&le;&nbsp;<var title="">maxweek</var>, where <var title="">maxweek</var> is the
   4977    <a href=#week-number-of-the-last-day>week number of the last day</a> of week-year <var title="">year</var></li>
   4978 
   4979   </ol><div class=impl>
   4980 
   4981   <p>The rules to <dfn id=parse-a-week-string>parse a week string</dfn> are as follows. This
   4982   will return either a week-year number and week number, or
   4983   nothing. If at any point the algorithm says that it "fails", this
   4984   means that it is aborted at that point and returns nothing.</p>
   4985 
   4986   <ol><li><p>Let <var title="">input</var> be the string being
   4987    parsed.</li>
   4988 
   4989    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   4990    string.</li>
   4991 
   4992    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   4993    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   4994    sequence is not at least four characters long, then
   4995    fail. Otherwise, interpret the resulting sequence as a base-ten
   4996    integer. Let that number be the <var title="">year</var>.</li>
   4997 
   4998    <li><p>If <var title="">year</var> is not a number greater than
   4999    zero, then fail.</li>
   5000 
   5001    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+002D HYPHEN-MINUS character,
   5002    then fail. Otherwise, move <var title="">position</var> forwards
   5003    one character.</li>
   5004 
   5005    <li><p>If <var title="">position</var> is beyond the end of <var title="">input</var> or if the character at <var title="">position</var> is not a U+0057 LATIN CAPITAL LETTER W
   5006    character (W), then fail. Otherwise, move <var title="">position</var> forwards one character.</li>
   5007 
   5008    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   5009    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
   5010    sequence is not exactly two characters long, then fail. Otherwise,
   5011    interpret the resulting sequence as a base-ten integer. Let that
   5012    number be the <var title="">week</var>.</li>
   5013 
   5014    <li><p>Let <var title="">maxweek</var> be the <a href=#week-number-of-the-last-day>week number of
   5015    the last day</a> of year <var title="">year</var>.</li>
   5016 
   5017    <li><p>If <var title="">week</var> is not a number in the range
   5018    1&nbsp;&le;&nbsp;<var title="">week</var>&nbsp;&le;&nbsp;<var title="">maxweek</var>, then fail.</li>
   5019 
   5020    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   5021    end of <var title="">input</var>, then fail.</li>
   5022 
   5023    <li><p>Return the week-year number <var title="">year</var> and the
   5024    week number <var title="">week</var>.</li>
   5025 
   5026   </ol></div>
   5027 
   5028 
   5029   <h5 id=vaguer-moments-in-time><span class=secno>2.4.5.7 </span>Vaguer moments in time</h5>
   5030 
   5031   <p>A string is a <dfn id=valid-date-or-time-string>valid date or time string</dfn> if it is also
   5032   one of the following:</p>
   5033 
   5034   <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>
   5035 
   5036    <li>A <a href=#valid-time-string>valid time string</a>.</li>
   5037 
   5038    <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>
   5039 
   5040   </ul><p>A string is a <dfn id=valid-date-or-time-string-in-content>valid date or time string in content</dfn> if
   5041   it consists of zero or more <a href=#white_space>White_Space</a> characters,
   5042   followed by a <a href=#valid-date-or-time-string>valid date or time string</a>, followed by
   5043   zero or more further <a href=#white_space>White_Space</a> characters.</p>
   5044 
   5045   <hr><p>A string is a <dfn id=valid-date-string-with-optional-time>valid date string with optional time</dfn> if
   5046   it is also one of the following:</p>
   5047 
   5048   <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>
   5049 
   5050    <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>
   5051 
   5052   </ul><p>A string is a <dfn id=valid-date-string-in-content-with-optional-time>valid date string in content with optional
   5053   time</dfn> if it consists of zero or more <a href=#white_space>White_Space</a>
   5054   characters, followed by a <a href=#valid-date-string-with-optional-time>valid date string with optional
   5055   time</a>, followed by zero or more further
   5056   <a href=#white_space>White_Space</a> characters.</p>
   5057 
   5058   <div class=impl>
   5059 
   5060   <hr><p>The rules to <dfn id=parse-a-date-or-time-string>parse a date or time string</dfn> are as
   5061   follows. The algorithm is invoked with a flag indicating if the
   5062   <i>in attribute</i> variant or the <i>in content</i> variant is to
   5063   be used. The algorithm will return either a <a href=#concept-date title=concept-date>date</a>, a <a href=#concept-time title=concept-time>time</a>, a <a href=#concept-datetime title=concept-datetime>global date and time</a>, or nothing. If
   5064   at any point the algorithm says that it "fails", this means that it
   5065   is aborted at that point and returns nothing.</p>
   5066 
   5067   <ol><li><p>Let <var title="">input</var> be the string being
   5068    parsed.</li>
   5069 
   5070    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   5071    string.</li>
   5072 
   5073    <li><p>For the <i>in content</i> variant: <a href=#skip-white_space-characters>skip White_Space
   5074    characters</a>.</li>
   5075 
   5076    <li><p>Set <var title="">start position</var> to the same position
   5077    as <var title="">position</var>.</li>
   5078 
   5079    <li><p>Set the <var title="">date present</var> and <var title="">time present</var> flags to true.</li>
   5080 
   5081    <li><p><a href=#parse-a-date-component>Parse a date component</a> to obtain <var title="">year</var>, <var title="">month</var>, and <var title="">day</var>. If this fails, then set the <var title="">date
   5082    present</var> flag to false.</p>
   5083 
   5084    <li>
   5085 
   5086     <p>If <var title="">date present</var> is true, and <var title="">position</var> is not beyond the end of <var title="">input</var>, and the character at <var title="">position</var> is a U+0054 LATIN CAPITAL LETTER T
   5087     character (T), then advance <var title="">position</var> to the
   5088     next character in <var title="">input</var>.</p>
   5089 
   5090     <p>Otherwise, if <var title="">date present</var> is true, and
   5091     either <var title="">position</var> is beyond the end of <var title="">input</var> or the character at <var title="">position</var> is not a U+0054 LATIN CAPITAL LETTER T
   5092     character (T), then set <var title="">time present</var> to
   5093     false.</p>
   5094 
   5095     <p>Otherwise, if <var title="">date present</var> is false, set
   5096     <var title="">position</var> back to the same position as <var title="">start position</var>.</p>
   5097 
   5098    </li>
   5099 
   5100    <li><p>If the <var title="">time present</var> flag is true, then
   5101    <a href=#parse-a-time-component>parse a time component</a> to obtain <var title="">hour</var>, <var title="">minute</var>, and <var title="">second</var>. If this returns nothing, then fail.</li>
   5102 
   5103    <li><p>If the <var title="">date present</var> and <var title="">time present</var> flags are both true, but <var title="">position</var> is beyond the end of <var title="">input</var>, then fail.</li>
   5104 
   5105    <li><p>If the <var title="">date present</var> and <var title="">time present</var> flags are both true, <a href=#parse-a-time-zone-offset-component>parse a
   5106    time-zone offset component</a> to obtain <var title="">timezone<sub title="">hours</sub></var> and <var title="">timezone<sub title="">minutes</sub></var>. If this returns
   5107    nothing, then fail.</p>
   5108 
   5109    <li><p>For the <i>in content</i> variant: <a href=#skip-white_space-characters>skip White_Space
   5110    characters</a>.</li>
   5111 
   5112    <li><p>If <var title="">position</var> is <em>not</em> beyond the
   5113    end of <var title="">input</var>, then fail.</li>
   5114 
   5115    <li>
   5116 
   5117     <p>If the <var title="">date present</var> flag is true and the
   5118     <var title="">time present</var> flag is false, then let <var title="">date</var> be the date with year <var title="">year</var>, month <var title="">month</var>, and day <var title="">day</var>, and return <var title="">date</var>.</p>
   5119 
   5120     <p>Otherwise, if the <var title="">time present</var> flag is true
   5121     and the <var title="">date present</var> flag is false, then let
   5122     <var title="">time</var> be the time with hour <var title="">hour</var>, minute <var title="">minute</var>, and second
   5123     <var title="">second</var>, and return <var title="">time</var>.</p>
   5124 
   5125     <p>Otherwise, let <var title="">time</var> be the moment in time
   5126     at year <var title="">year</var>, month <var title="">month</var>,
   5127     day <var title="">day</var>, hours <var title="">hour</var>,
   5128     minute <var title="">minute</var>, second <var title="">second</var>, subtracting <var title="">timezone<sub title="">hours</sub></var> hours and <var title="">timezone<sub title="">minutes</sub></var> minutes, that moment in time being a
   5129     moment in the UTC time zone; let <var title="">timezone</var> be
   5130     <var title="">timezone<sub title="">hours</sub></var> hours and
   5131     <var title="">timezone<sub title="">minutes</sub></var> minutes
   5132     from UTC; and return <var title="">time</var> and <var title="">timezone</var>.</p>
   5133 
   5134    </li>
   5135 
   5136   </ol></div>
   5137 
   5138 
   5139   <h4 id=colors><span class=secno>2.4.6 </span>Colors</h4>
   5140 
   5141   <p>A <dfn id=simple-color>simple color</dfn> consists of three 8-bit numbers in the
   5142   range 0..255, representing the red, green, and blue components of
   5143   the color respectively, in the sRGB color space. <a href=#refsSRGB>[SRGB]</a></p>
   5144 
   5145   <p>A string is a <dfn id=valid-simple-color>valid simple color</dfn> if it is exactly
   5146   seven characters long, and the first character is a U+0023 NUMBER
   5147   SIGN character (#), and the remaining six characters are all in the
   5148   range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
   5149   CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN
   5150   SMALL LETTER A to U+0066 LATIN SMALL LETTER F, with the first two
   5151   digits representing the red component, the middle two digits
   5152   representing the green component, and the last two digits
   5153   representing the blue component, in hexadecimal.</p>
   5154 
   5155   <p>A string is a <dfn id=valid-lowercase-simple-color>valid lowercase simple color</dfn> if it is a
   5156   <a href=#valid-simple-color>valid simple color</a> and doesn't use any characters in
   5157   the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL
   5158   LETTER F.</p>
   5159 
   5160   <div class=impl>
   5161 
   5162   <p>The <dfn id=rules-for-parsing-simple-color-values>rules for parsing simple color values</dfn> are as given
   5163   in the following algorithm. When invoked, the steps must be followed
   5164   in the order given, aborting at the first step that returns a
   5165   value. This algorithm will return either a <a href=#simple-color>simple color</a>
   5166   or an error.</p>
   5167 
   5168   <ol><li><p>Let <var title="">input</var> be the string being
   5169    parsed.</li>
   5170 
   5171    <li><p>If <var title="">input</var> is not exactly seven characters
   5172    long, then return an error.</li>
   5173 
   5174    <li><p>If the first character in <var title="">input</var> is not a
   5175    U+0023 NUMBER SIGN character (#), then return an error.</li>
   5176 
   5177    <li><p>If the last six characters of <var title="">input</var> are
   5178    not all in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
   5179    (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER
   5180    F, U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, then
   5181    return an error.</li>
   5182 
   5183    <li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
   5184    color</a>.</p>
   5185 
   5186    <li><p>Interpret the second and third characters as a hexadecimal
   5187    number and let the result be the red component of <var title="">result</var>.</p>
   5188 
   5189    <li><p>Interpret the fourth and fifth characters as a hexadecimal
   5190    number and let the result be the green component of <var title="">result</var>.</p>
   5191 
   5192    <li><p>Interpret the sixth and seventh characters as a hexadecimal
   5193    number and let the result be the blue component of <var title="">result</var>.</p>
   5194 
   5195    <li><p>Return <var title="">result</var>.</p>
   5196 
   5197   </ol><p>The <dfn id=rules-for-serializing-simple-color-values>rules for serializing simple color values</dfn> given a
   5198   <a href=#simple-color>simple color</a> are as given in the following
   5199   algorithm:</p>
   5200 
   5201   <ol><li><p>Let <var title="">result</var> be a string consisting of a
   5202    single U+0023 NUMBER SIGN character (#).</li>
   5203 
   5204    <li><p>Convert the red, green, and blue components in turn to
   5205    two-digit hexadecimal numbers using the digits U+0030 DIGIT ZERO
   5206    (0) to U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A
   5207    to U+0066 LATIN SMALL LETTER F, zero-padding if necessary, and
   5208    append these numbers to <var title="">result</var>, in the order
   5209    red, green, blue.</p>
   5210 
   5211    <li><p>Return <var title="">result</var>, which will be a
   5212    <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>.</li>
   5213 
   5214   </ol><hr><p>Some obsolete legacy attributes parse colors in a more
   5215   complicated manner, using the <dfn id=rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
   5216   value</dfn>, which are given in the following algorithm. When
   5217   invoked, the steps must be followed in the order given, aborting at
   5218   the first step that returns a value. This algorithm will return
   5219   either a <a href=#simple-color>simple color</a> or an error.</p>
   5220 
   5221   <ol><li><p>Let <var title="">input</var> be the string being
   5222    parsed.</li>
   5223 
   5224    <li><p>If <var title="">input</var> is the empty string, then
   5225    return an error.</li>
   5226 
   5227    <li><p>If <var title="">input</var> is an <a href=#ascii-case-insensitive>ASCII
   5228    case-insensitive</a> match for the string "<code title="">transparent</code>", then return an error.</li>
   5229 
   5230    <li><p>If <var title="">input</var> is an <a href=#ascii-case-insensitive>ASCII
   5231    case-insensitive</a> match for one of the keywords listed in the
   5232    <a href=http://www.w3.org/TR/css3-color/#svg-color>SVG color
   5233    keywords</a> or <a href=http://www.w3.org/TR/css3-color/#css2-system>CSS2 System
   5234    Colors</a> sections of the CSS3 Color specification, then return
   5235    the <a href=#simple-color>simple color</a> corresponding to that keyword. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></li>
   5236 
   5237    <li>
   5238 
   5239     <p>If <var title="">input</var> is four characters long, and the
   5240     first character in <var title="">input</var> is a U+0023 NUMBER
   5241     SIGN character (#), and the last three characters of <var title="">input</var> are all in the range U+0030 DIGIT ZERO (0)
   5242     to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046
   5243     LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066
   5244     LATIN SMALL LETTER F, then run these substeps:</p>
   5245 
   5246     <ol><li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
   5247      color</a>.</p>
   5248 
   5249      <li><p>Interpret the second character of <var title="">input</var> as a hexadecimal digit; let the red
   5250      component of <var title="">result</var> be the resulting number
   5251      multiplied by 17.</p>
   5252 
   5253      <li><p>Interpret the third character of <var title="">input</var>
   5254      as a hexadecimal digit; let the green component of <var title="">result</var> be the resulting number multiplied by
   5255      17.</p>
   5256 
   5257      <li><p>Interpret the fourth character of <var title="">input</var> as a hexadecimal digit; let the blue
   5258      component of <var title="">result</var> be the resulting number
   5259      multiplied by 17.</p>
   5260 
   5261      <li><p>Return <var title="">result</var>.</p>
   5262 
   5263     </ol></li>
   5264 
   5265    <li><p>Replace any characters in <var title="">input</var> that
   5266    have a Unicode code point greater than U+FFFF (i.e. any characters
   5267    that are not in the basic multilingual plane) with the
   5268    two-character string "<code title="">00</code>".</li>
   5269 
   5270    <li><p>If <var title="">input</var> is longer than 128 characters,
   5271    truncate <var title="">input</var>, leaving only the first 128
   5272    characters.</li>
   5273 
   5274    <li><p>If the first character in <var title="">input</var> is a
   5275    U+0023 NUMBER SIGN character (#), remove it.</li>
   5276 
   5277    <li><p>Replace any character in <var title="">input</var> that is
   5278    not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9),
   5279    U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, and
   5280    U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F with the
   5281    character U+0030 DIGIT ZERO (0).</li>
   5282 
   5283    <li><p>While <var title="">input</var>'s length is zero or not a
   5284    multiple of three, append a U+0030 DIGIT ZERO (0) character to <var title="">input</var>.</li>
   5285 
   5286    <li><p>Split <var title="">input</var> into three strings of equal
   5287    length, to obtain three components. Let <var title="">length</var>
   5288    be the length of those components (one third the length of <var title="">input</var>).</li>
   5289 
   5290    <li><p>If <var title="">length</var> is greater than 8, then remove
   5291    the leading <span title=""><var title="">length</var>-8</span>
   5292    characters in each component, and let <var title="">length</var> be
   5293    8.</li>
   5294 
   5295    <li><p>While <var title="">length</var> is greater than two and the
   5296    first character in each component is a U+0030 DIGIT ZERO (0)
   5297    character, remove that character and reduce <var title="">length</var> by one.</li>
   5298 
   5299    <li><p>If <var title="">length</var> is <em>still</em> greater than
   5300    two, truncate each component, leaving only the first two
   5301    characters in each.</li>
   5302 
   5303    <li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
   5304    color</a>.</p>
   5305 
   5306    <li><p>Interpret the first component as a hexadecimal number; let
   5307    the red component of <var title="">result</var> be the resulting
   5308    number.</li>
   5309 
   5310    <li><p>Interpret the second component as a hexadecimal number; let
   5311    the green component of <var title="">result</var> be the resulting
   5312    number.</li>
   5313 
   5314    <li><p>Interpret the third component as a hexadecimal number; let
   5315    the blue component of <var title="">result</var> be the resulting
   5316    number.</li>
   5317 
   5318    <li><p>Return <var title="">result</var>.</p>
   5319 
   5320   </ol></div>
   5321 
   5322   <hr><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
   5323   context</a> has a separate color syntax that also handles
   5324   opacity.</p>
   5325 
   5326   
   5327 
   5328 
   5329   <h4 id=space-separated-tokens><span class=secno>2.4.7 </span>Space-separated tokens</h4>
   5330 
   5331   <p>A <dfn id=set-of-space-separated-tokens>set of space-separated tokens</dfn> is a string containing
   5332   zero or more words separated by one or more <a href=#space-character title="space
   5333   character">space characters</a>, where words consist of any
   5334   string of one or more characters, none of which are <a href=#space-character title="space character">space characters</a>.</p>
   5335 
   5336   <p>A string containing a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>
   5337   may have leading or trailing <a href=#space-character title="space character">space
   5338   characters</a>.</p>
   5339 
   5340   <p>An <dfn id=unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</dfn> is a
   5341   <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> where none of the words
   5342   are duplicated.</p>
   5343 
   5344   <p>An <dfn id=ordered-set-of-unique-space-separated-tokens>ordered set of unique space-separated tokens</dfn> is a
   5345   <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> where none of the words
   5346   are duplicated but where the order of the tokens is meaningful.</p>
   5347 
   5348   <p><a href=#set-of-space-separated-tokens title="set of space-separated tokens">Sets of
   5349   space-separated tokens</a> sometimes have a defined set of
   5350   allowed values. When a set of allowed values is defined, the tokens
   5351   must all be from that list of allowed values; other values are
   5352   non-conforming. If no such set of allowed values is provided, then
   5353   all values are conforming.</p>
   5354 
   5355   <div class=impl>
   5356 
   5357   <p>When a user agent has to <dfn id=split-a-string-on-spaces>split a string on spaces</dfn>, it
   5358   must use the following algorithm:</p>
   5359 
   5360   <ol><li><p>Let <var title="">input</var> be the string being
   5361    parsed.</li>
   5362 
   5363    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   5364    string.</li>
   5365 
   5366    <li><p>Let <var title="">tokens</var> be a list of tokens,
   5367    initially empty.</li>
   5368 
   5369    <li><p><a href=#skip-whitespace>Skip whitespace</a></li>
   5370 
   5371    <li><p>While <var title="">position</var> is not past the end of
   5372    <var title="">input</var>:</p>
   5373 
   5374     <ol><li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
   5375      <a href=#space-character title="space character">space characters</a>.</li>
   5376 
   5377      <li><p>Add the string collected in the previous step to <var title="">tokens</var>.</li>
   5378 
   5379      <li><p><a href=#skip-whitespace>Skip whitespace</a></li>
   5380 
   5381     </ol></li>
   5382 
   5383    <li><p>Return <var title="">tokens</var>.</li>
   5384 
   5385   </ol><p>When a user agent has to <dfn id=remove-a-token-from-a-string>remove a token from a string</dfn>,
   5386   it must use the following algorithm:</p>
   5387 
   5388   <ol><li><p>Let <var title="">input</var> be the string being
   5389    modified.</li>
   5390 
   5391    <li><p>Let <var title="">token</var> be the token being removed. It
   5392    will not contain any <a href=#space-character title="space character">space
   5393    characters</a>.</li>
   5394 
   5395    <li><p>Let <var title="">output</var> be the output string,
   5396    initially empty.</li>
   5397 
   5398    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   5399    string.</li>
   5400 
   5401    <li><p><i>Loop</i>: If <var title="">position</var> is beyond the
   5402    end of <var title="">input</var>, abort these steps.</li>
   5403 
   5404    <li><p>If the character at <var title="">position</var> is a
   5405    <a href=#space-character>space character</a>:</p>
   5406 
   5407     <ol><li><p>Append the character at <var title="">position</var> to
   5408      the end of <var title="">output</var>.</li>
   5409 
   5410      <li><p>Advance <var title="">position</var> so it points at the
   5411      next character in <var title="">input</var>.</li>
   5412 
   5413      <li><p>Return to the step labeled <i>loop</i>.</li>
   5414 
   5415     </ol></li>
   5416 
   5417    <li><p>Otherwise, the character at <var title="">position</var> is
   5418    the first character of a token. <a href=#collect-a-sequence-of-characters>Collect a sequence of
   5419    characters</a> that are not <a href=#space-character title="space character">space
   5420    characters</a>, and let that be <var title="">s</var>.</li>
   5421 
   5422    <li><p>If <var title="">s</var> is exactly equal to <var title="">token</var>, then:</p>
   5423 
   5424     <ol><li><p><a href=#skip-whitespace>Skip whitespace</a> (in <var title="">input</var>).</li>
   5425 
   5426      <li><p>Remove any <a href=#space-character title="space character">space
   5427      characters</a> currently at the end of <var title="">output</var>.</li>
   5428 
   5429      <li><p>If <var title="">position</var> is not past the end of
   5430      <var title="">input</var>, and <var title="">output</var> is not
   5431      the empty string, append a single U+0020 SPACE character at the
   5432      end of <var title="">output</var>.</li>
   5433 
   5434     </ol></li>
   5435 
   5436    <li><p>Otherwise, append <var title="">s</var> to the end of <var title="">output</var>.</li>
   5437 
   5438    <li><p>Return to the step labeled <i>loop</i>.</li>
   5439 
   5440   </ol><p class=note>This causes any occurrences of the token to be
   5441   removed from the string, and any spaces that were surrounding the
   5442   token to be collapsed to a single space, except at the start and end
   5443   of the string, where such spaces are removed.</p>
   5444 
   5445   </div>
   5446 
   5447 
   5448 
   5449   <h4 id=comma-separated-tokens><span class=secno>2.4.8 </span>Comma-separated tokens</h4>
   5450 
   5451   <p>A <dfn id=set-of-comma-separated-tokens>set of comma-separated tokens</dfn> is a string containing
   5452   zero or more tokens each separated from the next by a single U+002C
   5453   COMMA character (,), where tokens consist of any string of zero or
   5454   more characters, neither beginning nor ending with <a href=#space-character title="space character">space characters</a>, nor containing any
   5455   U+002C COMMA characters (,), and optionally surrounded by <a href=#space-character title="space character">space characters</a>.</p>
   5456 
   5457   <p class=example>For instance, the string "<code title="">&nbsp;a&nbsp;,b,,d&nbsp;d&nbsp;</code>" consists of four
   5458   tokens: "a", "b", the empty string, and "d&nbsp;d". Leading and
   5459   trailing whitespace around each token doesn't count as part of the
   5460   token, and the empty string can be a token.</p>
   5461 
   5462   <p><a href=#set-of-comma-separated-tokens title="set of comma-separated tokens">Sets of
   5463   comma-separated tokens</a> sometimes have further restrictions on
   5464   what consists a valid token. When such restrictions are defined, the
   5465   tokens must all fit within those restrictions; other values are
   5466   non-conforming. If no such restrictions are specified, then all
   5467   values are conforming.</p>
   5468 
   5469   <div class=impl>
   5470 
   5471   <p>When a user agent has to <dfn id=split-a-string-on-commas>split a string on commas</dfn>, it
   5472   must use the following algorithm:</p>
   5473 
   5474   <ol><li><p>Let <var title="">input</var> be the string being
   5475    parsed.</li>
   5476 
   5477    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   5478    string.</li>
   5479 
   5480    <li><p>Let <var title="">tokens</var> be a list of tokens,
   5481    initially empty.</li>
   5482 
   5483    <li><p><i>Token</i>: If <var title="">position</var> is past the
   5484    end of <var title="">input</var>, jump to the last step.</li>
   5485 
   5486    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
   5487    U+002C COMMA characters (,). Let <var title="">s</var> be the resulting sequence (which might be the
   5488    empty string).</li>
   5489 
   5490    <li><p>Remove any leading or trailing sequence of <a href=#space-character title="space character">space characters</a> from <var title="">s</var>.</li>
   5491 
   5492    <li><p>Add <var title="">s</var> to <var title="">tokens</var>.</li>
   5493 
   5494    <li><p>If <var title="">position</var> is not past the end of <var title="">input</var>, then the character at <var title="">position</var> is a U+002C COMMA character (,); advance
   5495    <var title="">position</var> past that character.</li>
   5496 
   5497    <li><p>Jump back to the step labeled <i>token</i>.</li>
   5498 
   5499    <li><p>Return <var title="">tokens</var>.</li>
   5500 
   5501   </ol></div>
   5502 
   5503 
   5504 
   5505 
   5506   <h4 id=syntax-references><span class=secno>2.4.9 </span>References</h4>
   5507 
   5508   <p>A <dfn id=valid-hash-name-reference>valid hash-name reference</dfn> to an element of type <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
   5509   character (#) followed by a string which exactly matches the value
   5510   of the <code title="">name</code> attribute of an element with type
   5511   <var title="">type</var> in the document.</p>
   5512 
   5513   <div class=impl>
   5514 
   5515   <p>The <dfn id=rules-for-parsing-a-hash-name-reference>rules for parsing a hash-name reference</dfn> to an
   5516   element of type <var title="">type</var> are as follows:</p>
   5517 
   5518   <ol><li><p>If the string being parsed does not contain a U+0023 NUMBER
   5519    SIGN character, or if the first such character in the string is the
   5520    last character in the string, then return null and abort these
   5521    steps.</li>
   5522 
   5523    <li><p>Let <var title="">s</var> be the string from the character
   5524    immediately after the first U+0023 NUMBER SIGN character in the
   5525    string being parsed up to the end of that string.</li>
   5526 
   5527    <li><p>Return the first element of type <var title="">type</var>
   5528    that has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute whose value
   5529    is a <a href=#case-sensitive>case-sensitive</a> match for <var title="">s</var> or
   5530    a <code title="">name</code> attribute whose value is a
   5531    <a href=#compatibility-caseless>compatibility caseless</a> match for <var title="">s</var>.</li>
   5532 
   5533    <!--
   5534    IE is also doing case-insensitive id="" matching.
   5535    Tests:
   5536    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
   5537    ...except that doesn't explain why this fails:
   5538    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
   5539    maybe they just don't know about combining dot above?
   5540    -->
   5541 
   5542   </ol></div>
   5543 
   5544 
   5545   <h4 id=mq><span class=secno>2.4.10 </span>Media queries</h4>
   5546 
   5547   <p>A string is a <dfn id=valid-media-query>valid media query</dfn> if it matches the
   5548   <code title="">media_query_list</code> production of the Media
   5549   Queries specification. <a href=#refsMQ>[MQ]</a></p>
   5550 
   5551   <p>A string <dfn id=matches-the-environment>matches the environment</dfn> of the user if it is
   5552   the empty string, a string consisting of only <a href=#space-character title="space
   5553   character">space characters</a>, or is a media query that matches
   5554   the user's environment according to the definitions given in the
   5555   Media Queries specification. <a href=#refsMQ>[MQ]</a></p>
   5556 
   5557 
   5558 
   5559 
   5560   <h3 id=urls><span class=secno>2.5 </span>URLs</h3>
   5561 
   5562   <h4 id=terminology-0><span class=secno>2.5.1 </span>Terminology</h4>
   5563 
   5564   <!-- see also: svn diff -r3244:3245 source -->
   5565 
   5566   <p>A <dfn id=url>URL</dfn> is a string used to identify a resource.</p>
   5567 
   5568   <p>A <a href=#url>URL</a> is a <dfn id=valid-url>valid URL</dfn> if at least one of
   5569   the following conditions holds:</p>
   5570 
   5571   <ul><li><p>The <a href=#url>URL</a> is a valid URI reference <a href=#refsRFC3986>[RFC3986]</a>.</li>
   5572 
   5573    <li><p>The <a href=#url>URL</a> is a valid IRI reference and it has no
   5574    query component. <a href=#refsRFC3987>[RFC3987]</a></li>
   5575 
   5576    <li><p>The <a href=#url>URL</a> is a valid IRI reference and its query
   5577    component contains no unescaped non-ASCII characters. <a href=#refsRFC3987>[RFC3987]</a></li>
   5578 
   5579    <li><p>The <a href=#url>URL</a> is a valid IRI reference and the <a href="#document's-character-encoding" title="document's character encoding">character encoding</a> of
   5580    the URL's <code><a href=#document>Document</a></code> is UTF-8 or UTF-16. <a href=#refsRFC3987>[RFC3987]</a></li>
   5581 
   5582   </ul><p>A string is a <dfn id=valid-non-empty-url>valid non-empty URL</dfn> if it is a
   5583   <a href=#valid-url>valid URL</a> but it is not the empty string.</p>
   5584 
   5585   <p>A string is a <dfn id=valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
   5586   spaces</dfn> if, after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing
   5587   whitespace">stripping leading and trailing whitespace</a> from
   5588   it, it is a <a href=#valid-url>valid URL</a>.</p>
   5589 
   5590   <p>A string is a <dfn id=valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   5591   spaces</dfn> if, after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing
   5592   whitespace">stripping leading and trailing whitespace</a> from
   5593   it, it is a <a href=#valid-non-empty-url>valid non-empty URL</a>.</p>
   5594 
   5595   <div class=impl>
   5596 
   5597   <p>To <dfn id=parse-a-url>parse a URL</dfn> <var title="">url</var> into its
   5598   component parts, the user agent must use the <span class=XXX>parse
   5599   an address</span> algorithm defined by the IRI specification. <a href=#refsRFC3987>[RFC3987]</a></p>
   5600 
   5601   <p>Parsing a URL can fail. If it does not, then it results in the
   5602   following components, again as defined by the IRI specification:</p>
   5603 
   5604   <ul class=brief><li><dfn id=url-scheme title=url-scheme>&lt;scheme&gt;</dfn></li>
   5605    <li><dfn id=url-host title=url-host>&lt;host&gt;</dfn></li>
   5606    <li><dfn id=url-port title=url-port>&lt;port&gt;</dfn></li>
   5607    <li><dfn id=url-hostport title=url-hostport>&lt;hostport&gt;</dfn></li>
   5608    <li><dfn id=url-path title=url-path>&lt;path&gt;</dfn></li>
   5609    <li><dfn id=url-query title=url-query>&lt;query&gt;</dfn></li>
   5610    <li><dfn id=url-fragment title=url-fragment>&lt;fragment&gt;</dfn></li>
   5611    <li><dfn id=url-host-specific title=url-host-specific>&lt;host-specific&gt;</dfn></li>
   5612   </ul><hr><p>To <dfn id=resolve-a-url>resolve a URL</dfn> to an <a href=#absolute-url>absolute URL</a>
   5613   relative to either another <a href=#absolute-url>absolute URL</a> or an element,
   5614   the user agent must use the following steps. Resolving a URL can
   5615   result in an error, in which case the URL is not resolvable.</p>
   5616 
   5617   <ol><li><p>Let <var title="">url</var> be the <a href=#url>URL</a> being
   5618    resolved.</li>
   5619 
   5620    <li>
   5621 
   5622     <p>Let <var title="">encoding</var> be determined as follows:</p>
   5623 
   5624     <dl class=switch><dt>If the URL had a character encoding defined when the URL was
   5625      created or defined</dt>
   5626 
   5627      <dd>The URL character encoding is as defined.</dd>
   5628 
   5629      <dt>If the URL came from a script (e.g. as an argument to a
   5630      method)</dt>
   5631 
   5632      <dd>The URL character encoding is the <a href="#script's-url-character-encoding">script's URL character
   5633      encoding</a>.</dd>
   5634 
   5635      <dt>If the URL came from a DOM node (e.g. from an element)</dt>
   5636 
   5637      <dd>The node has a <code><a href=#document>Document</a></code>, and the URL character
   5638      encoding is the <a href="#document's-character-encoding">document's character encoding</a>.</dd>
   5639 
   5640     </dl></li>
   5641 
   5642    <li><p>If <var title="">encoding</var> is a UTF-16 encoding, then
   5643    change the value of <var title="">encoding</var> to UTF-8.</li>
   5644 
   5645    <li>
   5646 
   5647     <p>If the algorithm was invoked with an <a href=#absolute-url>absolute URL</a>
   5648     to use as the base URL, let <var title="">base</var> be that
   5649     <a href=#absolute-url>absolute URL</a>.</p>
   5650 
   5651     <p>Otherwise, let <var title="">base</var> be the <i>base URI of
   5652     the element</i>, as defined by the XML Base specification, with
   5653     <i>the base URI of the document entity</i> being defined as the
   5654     <a href=#document-base-url>document base URL</a> of the <code><a href=#document>Document</a></code> that
   5655     owns the element. <a href=#refsXMLBASE>[XMLBASE]</a></p>
   5656 
   5657     <p>For the purposes of the XML Base specification, user agents
   5658     must act as if all <code><a href=#document>Document</a></code> objects represented XML
   5659     documents.</p>
   5660 
   5661     <p class=note>It is possible for <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes to be present
   5662     even in HTML fragments, as such attributes can be added
   5663     dynamically using script. (Such scripts would not be conforming,
   5664     however, as <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes
   5665     are not allowed in <a href=#html-documents>HTML documents</a>.)</p>
   5666 
   5667     <p>The <dfn id=document-base-url>document base URL</dfn> of a <code><a href=#document>Document</a></code>
   5668     object is the <a href=#absolute-url>absolute URL</a> obtained by running these
   5669     substeps:</p>
   5670 
   5671     <ol><li><p>Let <var title="">fallback base url</var> be <a href="#the-document's-address">the
   5672      document's address</a>.</li>
   5673 
   5674      <li>
   5675 
   5676       <!-- http://www.hixie.ch/tests/adhoc/html/navigation/javascript-url/ -->
   5677 
   5678       <!-- this should be tested in the case of a browsing context that
   5679       was navigated to about:blank after having been elsewhere, as
   5680       opposed to the about:blank used at the time of the browsing
   5681       context's creation. -->
   5682 
   5683       <p>If <var title="">fallback base url</var> is
   5684       <code><a href=#about:blank>about:blank</a></code>, and the <code><a href=#document>Document</a></code>'s
   5685       <a href=#browsing-context>browsing context</a> has a <a href=#creator-browsing-context>creator browsing
   5686       context</a>, then let <var title="">fallback base url</var>
   5687       be the <a href=#document-base-url>document base URL</a> of the <a href=#creator-document>creator
   5688       <code>Document</code></a> instead.</p>
   5689 
   5690      </li>
   5691 
   5692      <li><p>If there is no <code><a href=#the-base-element>base</a></code> element that is both a
   5693      child of <a href=#the-head-element>the <code>head</code> element</a> and has an
   5694      <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, then the
   5695      <a href=#document-base-url>document base URL</a> is <var title="">fallback base
   5696      url</var>.</li>
   5697 
   5698      <li><p>Otherwise, let <var title="">url</var> be the value of the
   5699      <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute of the first
   5700      such element.</li>
   5701 
   5702      <li><p><a href=#resolve-a-url title="resolve a URL">Resolve</a> <var title="">url</var> relative to <var title="">fallback base
   5703      url</var> (thus, the <code><a href=#the-base-element>base</a></code> <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute isn't affected by
   5704      <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attributes).</li>
   5705 
   5706      <li><p>The <a href=#document-base-url>document base URL</a> is the result of the
   5707      previous step if it was successful; otherwise it is <var title="">fallback base url</var>.</li>
   5708 
   5709     </ol></li>
   5710 
   5711    <li><p>Return the result of applying the <span class=XXX>resolve
   5712    an address</span> algorithm defined by the IRI specification to
   5713    resolve <var title="">url</var> relative to <var title="">base</var> using encoding <var title="">encoding</var>. <a href=#refsRFC3987>[RFC3987]</a></li>
   5714 
   5715   </ol></div>
   5716 
   5717   <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
   5718   regardless of what it is resolved relative to, and that output is
   5719   not a failure.</p>
   5720 
   5721   <p>An <a href=#absolute-url>absolute URL</a> is a <dfn id=hierarchical-url>hierarchical URL</dfn> if,
   5722   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
   5723   after the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component
   5724   and it is a U+002F SOLIDUS character (/).</p>
   5725 
   5726   <p>An <a href=#absolute-url>absolute URL</a> is an <dfn id=authority-based-url>authority-based URL</dfn>
   5727   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
   5728   immediately after the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
   5729   component and they are both U+002F SOLIDUS characters (//).</p>
   5730 
   5731   <hr><p>This specification defines the URL
   5732   <dfn id=about:legacy-compat><code>about:legacy-compat</code></dfn> as a reserved, though
   5733   unresolvable, <code title="">about:</code> URI, for use in <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>s in <a href=#html-documents>HTML
   5734   documents</a> when needed for compatibility with XML tools. <a href=#refsABOUT>[ABOUT]</a></p>
   5735 
   5736   <p>This specification defines the URL
   5737   <dfn id=about:srcdoc><code>about:srcdoc</code></dfn> as a reserved, though
   5738   unresolvable, <code title="">about:</code> URI, that is used as
   5739   <a href="#the-document's-address">the document's address</a> of <a href=#an-iframe-srcdoc-document title="an iframe srcdoc
   5740   document"><code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> documents</a>. <a href=#refsABOUT>[ABOUT]</a></p>
   5741 
   5742   <p class=note>The term "URL" in this specification is used in a
   5743   manner distinct from the precise technical meaning it is given in
   5744   RFC 3986. Readers familiar with that RFC will find it easier to read
   5745   <em>this</em> specification if they pretend the term "URL" as used
   5746   herein is really called something else altogether. This is a
   5747   <a href=#willful-violation>willful violation</a> of RFC 3986. <a href=#refsRFC3986>[RFC3986]</a></p>
   5748 
   5749 
   5750   <div class=impl>
   5751 
   5752   <h4 id=dynamic-changes-to-base-urls><span class=secno>2.5.2 </span>Dynamic changes to base URLs</h4>
   5753 
   5754   <p>When an <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute
   5755   changes, the attribute's element, and all descendant elements, are
   5756   <a href=#affected-by-a-base-url-change>affected by a base URL change</a>.</p>
   5757 
   5758   <p>When a document's <a href=#document-base-url>document base URL</a> changes, all
   5759   elements in that document are <a href=#affected-by-a-base-url-change>affected by a base URL
   5760   change</a>.</p>
   5761 
   5762   <p>When an element is moved from one document to another, if the two
   5763   documents have different <a href=#document-base-url title="document base URL">base
   5764   URLs</a>, then that element and all its descendants are
   5765   <a href=#affected-by-a-base-url-change>affected by a base URL change</a>.</p>
   5766 
   5767   <p>When an element is <dfn id=affected-by-a-base-url-change>affected by a base URL change</dfn>, it
   5768   must act as described in the following list:</p>
   5769 
   5770   <dl class=switch><dt>If the element is a <a href=#hyperlink title=hyperlink>hyperlink
   5771    element</a></dt>
   5772 
   5773    <dd>
   5774 
   5775     <p>If the <a href=#absolute-url>absolute URL</a> identified by the hyperlink is
   5776     being shown to the user, or if any data derived from that URL is
   5777     affecting the display, then the <code title=attr-hyperlink-href><a href=#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
   5778     and the UI updated appropriately.</p>
   5779 
   5780     <p class=example>For example, the CSS <code title=selector-link><a href=#selector-link>:link</a></code>/<code title=selector-visited><a href=#selector-visited>:visited</a></code> pseudo-classes might have
   5781     been affected.</p>
   5782 
   5783 <!--PING-->
   5784     <p>If the hyperlink has a <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute and its <a href=#absolute-url title="absolute URL">absolute URL(s)</a> are being shown to the
   5785     user, then the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
   5786     attribute's tokens should be <a href=#resolve-a-url title="resolve a
   5787     url">re-resolved</a> relative to the element and the UI updated
   5788     appropriately.</p>
   5789 <!--PING-->
   5790 
   5791    </dd>
   5792 
   5793    <dt>If the element is a <code><a href=#the-q-element>q</a></code>, <code><a href=#the-blockquote-element>blockquote</a></code>,
   5794    <code><a href=#the-section-element>section</a></code>, <code><a href=#the-article-element>article</a></code>, <code><a href=#the-ins-element>ins</a></code>, or
   5795    <code><a href=#the-del-element>del</a></code> element with a <code title="">cite</code>
   5796    attribute</dt>
   5797 
   5798    <dd>
   5799 
   5800     <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
   5801     any data derived from that URL is affecting the display, then the
   5802     <a href=#url>URL</a> should be <a href=#resolve-a-url title="resolve a
   5803     url">re-resolved</a> relative to the element and the UI updated
   5804     appropriately.</p>
   5805 
   5806    </dd>
   5807 
   5808    <dt>Otherwise</dt>
   5809 
   5810    <dd>
   5811 
   5812     <p>The element is not directly affected.</p>
   5813 
   5814     <p class=example>Changing the base URL doesn't affect the image
   5815     displayed by <code><a href=#the-img-element>img</a></code> elements, although subsequent
   5816     accesses of the <code title=dom-img-src><a href=#dom-img-src>src</a></code> IDL attribute
   5817     from script will return a new <a href=#absolute-url>absolute URL</a> that might
   5818     no longer correspond to the image being shown.</p>
   5819 
   5820    </dd>
   5821 
   5822   </dl></div>
   5823 
   5824 
   5825 
   5826   <h4 id=interfaces-for-url-manipulation><span class=secno>2.5.3 </span>Interfaces for URL manipulation</h4>
   5827 
   5828   <p>An interface that has a complement of <dfn id=url-decomposition-idl-attributes>URL decomposition IDL
   5829   attributes</dfn> will have seven attributes with the following
   5830   definitions:</p>
   5831 
   5832 <pre class="idl extract">           attribute DOMString <a href=#dom-uda-protocol title=dom-uda-protocol>protocol</a>;
   5833            attribute DOMString <a href=#dom-uda-host title=dom-uda-host>host</a>;
   5834            attribute DOMString <a href=#dom-uda-hostname title=dom-uda-hostname>hostname</a>;
   5835            attribute DOMString <a href=#dom-uda-port title=dom-uda-port>port</a>;
   5836            attribute DOMString <a href=#dom-uda-pathname title=dom-uda-pathname>pathname</a>;
   5837            attribute DOMString <a href=#dom-uda-search title=dom-uda-search>search</a>;
   5838            attribute DOMString <a href=#dom-uda-hash title=dom-uda-hash>hash</a>;</pre>
   5839 
   5840   <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>
   5841    <dd>
   5842     <p>Returns the current scheme of the underlying URL.</p>
   5843     <p>Can be set, to change the underlying URL's scheme.</p>
   5844    </dd>
   5845 
   5846    <dt><var title="">o</var> . <code title=dom-uda-host><a href=#dom-uda-host>host</a></code> [ = <var title="">value</var> ]</dt>
   5847    <dd>
   5848     <p>Returns the current host and port (if it's not the default port) in the underlying URL.</p>
   5849     <p>Can be set, to change the underlying URL's host and port.</p>
   5850     <p>The host and the port are separated by a colon. The port part,
   5851     if omitted, will be assumed to be the current scheme's default
   5852     port.</p>
   5853    </dd>
   5854 
   5855    <dt><var title="">o</var> . <code title=dom-uda-hostname><a href=#dom-uda-hostname>hostname</a></code> [ = <var title="">value</var> ]</dt>
   5856    <dd>
   5857     <p>Returns the current host in the underlying URL.</p>
   5858     <p>Can be set, to change the underlying URL's host.</p>
   5859    </dd>
   5860 
   5861    <dt><var title="">o</var> . <code title=dom-uda-port><a href=#dom-uda-port>port</a></code> [ = <var title="">value</var> ]</dt>
   5862    <dd>
   5863     <p>Returns the current port in the underlying URL.</p>
   5864     <p>Can be set, to change the underlying URL's port.</p>
   5865    </dd>
   5866 
   5867    <dt><var title="">o</var> . <code title=dom-uda-pathname><a href=#dom-uda-pathname>pathname</a></code> [ = <var title="">value</var> ]</dt>
   5868    <dd>
   5869     <p>Returns the current path in the underlying URL.</p>
   5870     <p>Can be set, to change the underlying URL's path.</p>
   5871    </dd>
   5872 
   5873    <dt><var title="">o</var> . <code title=dom-uda-search><a href=#dom-uda-search>search</a></code> [ = <var title="">value</var> ]</dt>
   5874    <dd>
   5875     <p>Returns the current query component in the underlying URL.</p>
   5876     <p>Can be set, to change the underlying URL's query component.</p>
   5877    </dd>
   5878 
   5879    <dt><var title="">o</var> . <code title=dom-uda-hash><a href=#dom-uda-hash>hash</a></code> [ = <var title="">value</var> ]</dt>
   5880    <dd>
   5881     <p>Returns the current fragment identifier in the underlying URL.</p>
   5882     <p>Can be set, to change the underlying URL's fragment identifier.</p>
   5883    </dd>
   5884 
   5885   </dl><div class=impl>
   5886 
   5887   <hr><p>The attributes defined to be URL decomposition IDL attributes must
   5888   act as described for the attributes with the same corresponding
   5889   names in this section.</p>
   5890 
   5891   <p>In addition, an interface with a complement of URL decomposition IDL
   5892   attributes will define an <dfn id=concept-uda-input title=concept-uda-input>input</dfn>, which is a <a href=#url>URL</a>
   5893   that the attributes act on, and a <dfn id=concept-uda-setter title=concept-uda-setter>common setter action</dfn>, which is a
   5894   set of steps invoked when any of the attributes' setters are
   5895   invoked.</p>
   5896 
   5897   <p>The seven URL decomposition IDL attributes have similar
   5898   requirements.</p>
   5899 
   5900   <p>On getting, if the <a href=#concept-uda-input title=concept-uda-input>input</a>
   5901   is an <a href=#absolute-url>absolute URL</a> that fulfills the condition given in
   5902   the "getter condition" column corresponding to the attribute in the
   5903   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"
   5904   column, with any prefixes specified in the "prefix" column
   5905   appropriately added to the start of the string and any suffixes
   5906   specified in the "suffix" column appropriately added to the end of
   5907   the string. Otherwise, the attribute must return the empty
   5908   string.</p>
   5909 
   5910   <p>On setting, the new value must first be mutated as described by
   5911   the "setter preprocessor" column, then mutated by %-escaping any
   5912   characters in the new value that are not valid in the relevant
   5913   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
   5914   URL</a> and the resulting new value fulfills the condition given
   5915   in the "setter condition" column, the user agent must make a new
   5916   string <var title="">output</var> by replacing the component of the
   5917   URL given by the "component" column in the <a href=#concept-uda-input title=concept-uda-input>input</a> URL with the new value;
   5918   otherwise, the user agent must let <var title="">output</var> be
   5919   equal to the <a href=#concept-uda-input title=concept-uda-input>input</a>. Finally,
   5920   the user agent must invoke the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> with the
   5921   value of <var title="">output</var>.</p>
   5922 
   5923   <p>When replacing a component in the URL, if the component is part
   5924   of an optional group in the URL syntax consisting of a character
   5925   followed by the component, the component (including its prefix
   5926   character) must be included even if the new value is the empty
   5927   string.</p>
   5928 
   5929   <p class=note>The previous paragraph applies in particular to the
   5930   "<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>
   5931 
   5932   <p>For the purposes of the above definitions, URLs must be parsed
   5933   using the <a href=#parse-a-url title="parse a URL">URL parsing rules</a> defined
   5934   in this specification.</p>
   5935 
   5936   <table><thead><tr><th>Attribute
   5937      <th>Component
   5938      <th>Getter Condition
   5939      <th>Prefix
   5940      <th>Suffix
   5941      <th>Setter Preprocessor
   5942      <th>Setter Condition
   5943    <tbody><tr><td><dfn id=dom-uda-protocol title=dom-uda-protocol><code>protocol</code></dfn>
   5944      <td><a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
   5945      <td>&mdash;
   5946      <td>&mdash;
   5947      <td>U+003A COLON (:)
   5948      <td>Remove all trailing U+003A COLON characters (:)
   5949      <td>The new value is not the empty string
   5950     <tr><td><dfn id=dom-uda-host title=dom-uda-host><code>host</code></dfn>
   5951      <td><a href=#url-hostport title=url-hostport>&lt;hostport&gt;</a>
   5952      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
   5953      <td>&mdash;
   5954      <td>&mdash;
   5955      <td>&mdash;
   5956      <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>
   5957     <tr><td><dfn id=dom-uda-hostname title=dom-uda-hostname><code>hostname</code></dfn>
   5958      <td><a href=#url-host title=url-host>&lt;host&gt;</a>
   5959      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>
   5960      <td>&mdash;
   5961      <td>&mdash;
   5962      <td>Remove all leading U+002F SOLIDUS characters (/)
   5963      <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>
   5964     <tr><td><dfn id=dom-uda-port title=dom-uda-port><code>port</code></dfn>
   5965      <td><a href=#url-port title=url-port>&lt;port&gt;</a>
   5966      <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)
   5967      <td>&mdash;
   5968      <td>&mdash;
   5969      <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.
   5970          Remove any leading U+0030 DIGIT ZERO characters (0) in the new value.
   5971          If the resulting string is empty, set it to a single U+0030 DIGIT ZERO character (0).
   5972      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is an <a href=#authority-based-url>authority-based URL</a>,
   5973          and the new value, when interpretted as a base-ten integer, is less than or equal to 65535
   5974     <tr><td><dfn id=dom-uda-pathname title=dom-uda-pathname><code>pathname</code></dfn>
   5975      <td><a href=#url-path title=url-path>&lt;path&gt;</a>
   5976      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is a <a href=#hierarchical-url>hierarchical URL</a>
   5977      <td>&mdash;
   5978      <td>&mdash;
   5979      <td>If it has no leading U+002F SOLIDUS character (/), prepend a U+002F SOLIDUS character (/) to the new value
   5980      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is hierarchical
   5981     <tr><td><dfn id=dom-uda-search title=dom-uda-search><code>search</code></dfn>
   5982      <td><a href=#url-query title=url-query>&lt;query&gt;</a>
   5983      <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)
   5984      <td>U+003F QUESTION MARK (?)
   5985      <td>&mdash;
   5986      <td>Remove one leading U+003F QUESTION MARK character (?), if any
   5987      <td><a href=#concept-uda-input title=concept-uda-input>input</a> is a <a href=#hierarchical-url>hierarchical URL</a>
   5988     <tr><td><dfn id=dom-uda-hash title=dom-uda-hash><code>hash</code></dfn>
   5989      <td><a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   5990      <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
   5991      <td>U+0023 NUMBER SIGN (#)
   5992      <td>&mdash;
   5993      <td>Remove one leading U+0023 NUMBER SIGN character (#), if any
   5994      <td>&mdash;
   5995   </table><!--
   5996   http://www.hixie.ch/tests/adhoc/dom/level0/location/components/
   5997   http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsLocation.cpp
   5998   http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ref_h-l.htm#84722
   5999 --></div>
   6000 
   6001   <div class=example>
   6002 
   6003    <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
   6004    depending on the exact original syntax of the URL:</p>
   6005 
   6006    <table><thead><tr><th> Input URL
   6007       <th> <code title=dom-uda-search><a href=#dom-uda-search>search</a></code> value
   6008       <th> Explanation
   6009     <tbody><tr><td> <code title="">http://example.com/</code>
   6010       <td> <i>empty string</i>
   6011       <td> No <a href=#url-query title=url-query>&lt;query&gt;</a> component in input URL.
   6012      <tr><td> <code title="">http://example.com/?</code>
   6013       <td> <code title="">?</code>
   6014       <td> There is a <a href=#url-query title=url-query>&lt;query&gt;</a> component, but it is empty.
   6015            <span class=impl>The question mark in the resulting value is the prefix.</span>
   6016      <tr><td> <code title="">http://example.com/?test</code>
   6017       <td> <code title="">?test</code>
   6018       <td> The <a href=#url-query title=url-query>&lt;query&gt;</a> component has the value "<code title="">test</code>".
   6019      <tr><td> <code title="">http://example.com/?test#</code>
   6020       <td> <code title="">?test</code>
   6021       <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.
   6022    </table></div>
   6023 
   6024 
   6025   <div class=impl>
   6026 
   6027   <h3 id=fetching-resources><span class=secno>2.6 </span>Fetching resources</h3>
   6028 
   6029   <p>When a user agent is to <dfn id=fetch>fetch</dfn> a resource or
   6030   <a href=#url>URL</a>, optionally from an origin <i title="">origin</i>,
   6031   and optionally with a <i>synchronous flag</i> and/or a <i>manual
   6032   redirect flag</i>, the following steps must be run. (When a
   6033   <em>URL</em> is to be fetched, the URL identifies a resource to be
   6034   obtained.)</p>
   6035 
   6036   <!-- if invoked with the synchronous flag, make sure to release the
   6037   storage mutex first -->
   6038 
   6039   <!-- synchronous flag is only used by sync-XHR, for legacy reasons;
   6040   don't use it in new features! -->
   6041 
   6042   <ol><li>
   6043 
   6044     <p>Generate the <i>address of the resource from which Request-URIs
   6045     are obtained</i> as required by HTTP for the <code title=http-referer>Referer</code> (sic) header from <a href="#the-document's-current-address">the
   6046     document's current address</a> of the appropriate
   6047     <code><a href=#document>Document</a></code> as given by the following list. <a href=#refsHTTP>[HTTP]</a></p>
   6048 
   6049     <dl class=switch><dt>When <a href=#navigate title=navigate>navigating</a></dt>
   6050 
   6051      <dd>The <a href=#active-document>active document</a> of the <a href=#source-browsing-context>source browsing
   6052      context</a>.</dd>
   6053 
   6054      <dt>When fetching resources for an element</dt>
   6055 
   6056      <dd>The element's <code><a href=#document>Document</a></code>.</dd>
   6057 
   6058      <dt>When fetching resources in response to a call to an API</dt>
   6059 
   6060      <dd>The <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
   6061      document">document</a>.</dd>
   6062 
   6063     </dl><p>Remove any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   6064     component from the generated <i>address of the resource from which
   6065     Request-URIs are obtained</i>.</p> <!-- RFC2616 says "The URI MUST
   6066     NOT include a fragment." (section 14.36) -->
   6067 
   6068     <p>If the <a href=#origin>origin</a> of the appropriate
   6069     <code><a href=#document>Document</a></code> is not a scheme/host/port tuple, then the
   6070     <code title=http-referer>Referer</code> (sic) header must be
   6071     omitted, regardless of its value.</p>
   6072 
   6073    </li>
   6074 
   6075    <li><p>If the algorithm was not invoked with the <i>synchronous
   6076    flag</i>, perform the remaining steps asynchronously.</li>
   6077 
   6078    <li>
   6079 
   6080     <p>This is the <i>main step</i>.</p>
   6081 
   6082     <p>If the resource is identified by an <a href=#absolute-url>absolute URL</a>,
   6083     and the resource is to be obtained using an idempotent action
   6084     (such as an HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   6085     equivalent</a>), and it is already being downloaded for other
   6086     reasons (e.g. another invocation of this algorithm), and this
   6087     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
   6088     configured such that it is to reuse the data from the existing
   6089     download instead of initiating a new one, then use the results of
   6090     the existing download instead of starting a new one.</p>
   6091 
   6092     <p>Otherwise, at a time convenient to the user and the user agent,
   6093     download (or otherwise obtain) the resource, applying the
   6094     semantics of the relevant specifications (e.g. performing an HTTP
   6095     GET or POST operation, or reading the file from disk, <a href=#concept-js-deref title=concept-js-deref>dereferencing <span title="javascript
   6096     protocol"><code title="">javascript:</code> URLs</span></a>,
   6097     etc).</p>
   6098 
   6099     <p>For the purposes of the <code title=http-referer>Referer</code> (sic) header, use the
   6100     <i>address of the resource from which Request-URIs are
   6101     obtained</i> generated in the earlier step.</p>
   6102 
   6103     <p>For the purposes of the <code title=http-origin>Origin</code>
   6104     header, if the <a href=#fetch title=fetch>fetching algorithm</a> was
   6105     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
   6106     a "privacy-sensitive" context</i>. <a href=#refsORIGIN>[ORIGIN]</a></p>
   6107 
   6108     <p>If the resource is identified by the <a href=#url>URL</a>
   6109     <dfn id=about:blank><code>about:blank</code></dfn>, then the resource is
   6110     immediately available and consists of the empty string, with no
   6111     metadata.</p>
   6112 
   6113    </li>
   6114 
   6115    <li>
   6116 
   6117     <p>If there are cookies to be set, then the user agent must run
   6118     the following substeps:</p>
   6119 
   6120     <ol><li><p>Wait until ownership of the <a href=#storage-mutex>storage mutex</a> can
   6121      be taken by this instance of the <a href=#fetch title=fetch>fetching</a> algorithm.</li>
   6122 
   6123      <li><p>Take ownership of the <a href=#storage-mutex>storage mutex</a>.</li>
   6124 
   6125      <li><p>Update the cookies. <a href=#refsCOOKIES>[COOKIES]</a></li>
   6126 
   6127      <li><p>Release the <a href=#storage-mutex>storage mutex</a> so that it is once
   6128      again free.</li>
   6129 
   6130     </ol></li>
   6131 
   6132    <li>
   6133 
   6134     <p>If the fetched resource is an HTTP redirect <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>,
   6135     then:</p>
   6136 
   6137     <dl class=switch><dt>If the <i>manual redirect flag</i> is set</dt>
   6138 
   6139      <dd>
   6140 
   6141       <p>Continue, using the fetched resource (the redirect) as the
   6142       result of the algorithm.</p>
   6143 
   6144      </dd>
   6145 
   6146      <dt>Otherwise</dt>
   6147 
   6148      <dd>
   6149 
   6150       <p>First, apply any relevant requirements for redirects (such as
   6151       showing any appropriate prompts). Then, redo <i>main step</i>,
   6152       but using the target of the redirect as the resource to fetch,
   6153       rather than the original resource.</p>
   6154 
   6155       <p class=note>The HTTP specification requires that 301, 302,
   6156       and 307 redirects, when applied to methods other than the safe
   6157       methods, not be followed without user confirmation. That would
   6158       be an appropriate prompt for the purposes of the requirement in
   6159       the paragraph above. <a href=#refsHTTP>[HTTP]</a></p>
   6160 
   6161      </dd>
   6162 
   6163     </dl></li>
   6164 
   6165    <li>
   6166 
   6167     <p>If the algorithm was not invoked with the <i>synchronous
   6168     flag</i>: When the resource is available, or if there is an error
   6169     of some description, <a href=#queue-a-task>queue a task</a> that uses the
   6170     resource as appropriate. If the resource can be processed
   6171     incrementally, as, for instance, with a progressively interlaced
   6172     JPEG or an HTML file, additional tasks may be queued to process
   6173     the data as it is downloaded. The <a href=#task-source>task source</a> for
   6174     these <a href=#concept-task title=concept-task>tasks</a> is the
   6175     <a href=#networking-task-source>networking task source</a>.</p>
   6176 
   6177     <p>Otherwise, return the resource or error information to the
   6178     calling algorithm.</p>
   6179 
   6180    </li>
   6181 
   6182   </ol><p>If the user agent can determine the actual length of the resource
   6183   being <a href=#fetch title=fetch>fetched</a> for an instance of this
   6184   algorithm, and if that length is finite, then that length is the
   6185   file's <dfn id=concept-fetch-total title=concept-fetch-total>size</dfn>. Otherwise, the
   6186   subject of the algorithm (that is, the resource being fetched) has
   6187   no known <a href=#concept-fetch-total title=concept-fetch-total>size</a>. (For
   6188   example, the HTTP <code title=http-content-length>Content-Length</code> header might
   6189   provide this information.)</p>
   6190 
   6191   <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
   6192   each instance of this algorithm. This number must exclude any
   6193   out-of-band metadata, such as HTTP headers.</p>
   6194 
   6195   <p class=note>The <a href=#application-cache>application cache</a> processing model
   6196   introduces some <a href=#changesToNetworkingModel>changes to the
   6197   networking model</a> to handle the returning of cached
   6198   resources.</p>
   6199 
   6200   <p class=note>The <a href=#navigate title=navigate>navigation</a>
   6201   processing model handles redirects itself, overriding the
   6202   redirection handling that would be done by the fetching
   6203   algorithm.</p>
   6204 
   6205   <p class=note>Whether the <a href=#content-type-sniffing>type
   6206   sniffing rules</a> apply to the fetched resource depends on the
   6207   algorithm that invokes the rules &mdash; they are not always
   6208   applicable.</p>
   6209 
   6210 
   6211   <h4 id=concept-http-equivalent><span class=secno>2.6.1 </span>Protocol concepts</h4>
   6212 
   6213   <p>User agents can implement a variety of transfer protocols, but
   6214   this specification mostly defines behavior in terms of HTTP. <a href=#refsHTTP>[HTTP]</a></p>
   6215 
   6216   <p>The <dfn id=concept-http-equivalent-get title=concept-http-equivalent-get>HTTP GET
   6217   method</dfn> is equivalent to the default retrieval action of the
   6218   protocol. For example, RETR in FTP. Such actions are idempotent and
   6219   safe, in HTTP terms.</p>
   6220 
   6221   <p>The <dfn id=concept-http-equivalent-codes title=concept-http-equivalent-codes>HTTP response
   6222   codes</dfn> are equivalent to statuses in other protocols that have
   6223   the same basic meanings. For example, a "file not found" error is
   6224   equivalent to a 404 code, a server error is equivalent to a 5xx
   6225   code, and so on.</p>
   6226 
   6227   <p>The <dfn id=concept-http-equivalent-headers title=concept-http-equivalent-headers>HTTP
   6228   headers</dfn> are equivalent to fields in other protocols that have
   6229   the same basic meaning. For example, the HTTP authentication
   6230   headers are equivalent to the authentication aspects of the FTP
   6231   protocol.</p>
   6232 
   6233 
   6234   <h4 id=encrypted-http-and-related-security-concerns><span class=secno>2.6.2 </span>Encrypted HTTP and related security concerns</h4>
   6235 
   6236   <p>Anything in this specification that refers to HTTP also applies
   6237   to HTTP-over-TLS, as represented by <a href=#url title=url>URLs</a>
   6238   representing the <code title="">https</code> scheme.</p>
   6239 
   6240   <p class=warning>User agents should report certificate errors to
   6241   the user and must either refuse to download resources sent with
   6242   erroneous certificates or must act as if such resources were in fact
   6243   served with no encryption.</p>
   6244 
   6245   <p>User agents should warn the user that there is a potential
   6246   problem whenever the user visits a page that the user has previously
   6247   visited, if the page uses less secure encryption on the second
   6248   visit.</p>
   6249 
   6250   <p>Not doing so can result in users not noticing man-in-the-middle
   6251   attacks.</p>
   6252 
   6253   <div class=example>
   6254 
   6255    <p>If a user connects to a server with a self-signed certificate,
   6256    the user agent could allow the connection but just act as if there
   6257    had been no encryption. If the user agent instead allowed the user
   6258    to override the problem and then displayed the page as if it was
   6259    fully and safely encrypted, the user could be easily tricked into
   6260    accepting man-in-the-middle connections.</p>
   6261 
   6262    <p>If a user connects to a server with full encryption, but the
   6263    page then refers to an external resource that has an expired
   6264    certificate, then the user agent will act as if the resource was
   6265    unavailable, possibly also reporting the problem to the user. If
   6266    the user agent instead allowed the resource to be used, then an
   6267    attacker could just look for "secure" sites that used resources
   6268    from a different host and only apply man-in-the-middle attacks to
   6269    that host, for example taking over scripts in the page.</p>
   6270 
   6271    <p>If a user bookmarks a site that uses a CA-signed certificate,
   6272    and then later revisits that site directly but the site has started
   6273    using a self-signed certificate, the user agent could warn the user
   6274    that a man-in-the-middle attack is likely underway, instead of
   6275    simply acting as if the page was not encrypted.</p>
   6276 
   6277   </div>
   6278 
   6279 
   6280   <h4 id=content-type-sniffing><span class=secno>2.6.3 </span>Determining the type of a resource</h4>
   6281 
   6282   <p>The <dfn id=content-type title=Content-Type>Content-Type metadata</dfn> of a
   6283   resource must be obtained and interpreted in a manner consistent
   6284   with the requirements of the Content-Type Processing Model
   6285   specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>
   6286 
   6287   <p>The <dfn id=content-type-sniffing-0 title="Content-Type sniffing">sniffed type of a
   6288   resource</dfn> must be found in a manner consistent with the
   6289   requirements given in the Content-Type Processing Model
   6290   specification for finding the <i>sniffed-type</i> of the relevant
   6291   sequence of octets. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>
   6292 
   6293   <p>The <dfn id=content-type-sniffing:-image title="Content-Type sniffing: image">rules for sniffing
   6294   images specifically</dfn> and the <dfn id=content-type-sniffing:-text-or-binary title="Content-Type sniffing:
   6295   text or binary">rules for distingushing if a resource is text or
   6296   binary</dfn> are also defined in the Content-Type Processing Model
   6297   specification. Both sets of rules return a <a href=#mime-type>MIME type</a> as
   6298   their result. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>
   6299 
   6300   <p class=warning>It is imperative that the rules in the
   6301   Content-Type Processing Model specification be followed
   6302   exactly. When a user agent uses different heuristics for content
   6303   type detection than the server expects, security problems can
   6304   occur. For more details, see the Content-Type Processing Model
   6305   specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></p>
   6306 
   6307   <p>The <dfn id=algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
   6308   Content-Type</dfn>, given a string <var title="">s</var>, is as
   6309   follows. It either returns an encoding or nothing.</p>
   6310 
   6311   <ol><li><p>Find the first seven characters in <var title="">s</var>
   6312    that are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the word
   6313    "<code title="">charset</code>".  If no such match is found, return
   6314    nothing.</li>
   6315 
   6316    <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   6317    characters that immediately follow the word "<code title="">charset</code>" (there might not be any).</li>
   6318 
   6319    <li><p>If the next character is not a U+003D EQUALS SIGN ('='),
   6320    return nothing and abort these steps.</li>
   6321 
   6322    <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   6323    characters that immediately follow the equals sign (there might not
   6324    be any).</li>
   6325 
   6326    <li>
   6327 
   6328     <p>Process the next character as follows:</p>
   6329 
   6330     <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>
   6331      <dt>If it is a U+0027 APOSTROPHE ("'") and there is a later U+0027 APOSTROPHE ("'") in <var title="">s</var></dt>
   6332      <dd>Return the encoding corresponding to the string between this character and the next earliest occurrence of this character.</dd>
   6333 
   6334      <dt>If it is an unmatched U+0022 QUOTATION MARK ('"')</dt>
   6335      <dt>If it is an unmatched U+0027 APOSTROPHE ("'")</dt>
   6336      <dt>If there is no next character</dt>
   6337      <dd>Return nothing.</dd>
   6338 
   6339      <dt>Otherwise</dt>
   6340      <dd>Return the encoding corresponding to the string from this
   6341      character to the first U+0009, U+000A, U+000C, U+000D, U+0020, or
   6342      U+003B character or the end of <var title="">s</var>, whichever
   6343      comes first.</dd>
   6344 
   6345     </dl></li>
   6346 
   6347   </ol><p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
   6348   of the HTTP specification, motivated by the need for backwards
   6349   compatibility with legacy content. <a href=#refsHTTP>[HTTP]</a></p>
   6350 
   6351   </div>
   6352 
   6353 
   6354 
   6355   <h3 id=common-dom-interfaces><span class=secno>2.7 </span>Common DOM interfaces</h3>
   6356 
   6357   <h4 id=reflecting-content-attributes-in-idl-attributes><span class=secno>2.7.1 </span>Reflecting content attributes in IDL attributes</h4>
   6358 
   6359   <p>Some IDL attributes are defined to <dfn id=reflect>reflect</dfn> a
   6360   particular content attribute. This means that on getting, the IDL
   6361   attribute returns the current value of the content attribute, and on
   6362   setting, the IDL attribute changes the value of the content
   6363   attribute to the given value.</p>
   6364 
   6365 <!-- v2 for completeness: (also search for REFLECTIDL)
   6366   <p class="note">A list of <span>reflecting IDL attributes</span> and
   6367   their corresponding content attributes is given in the index.</p>
   6368 -->
   6369 
   6370   <div class=impl>
   6371 
   6372   <p>In general, on getting, if the content attribute is not present,
   6373   the IDL attribute must act as if the content attribute's value is
   6374   the empty string; and on setting, if the content attribute is not
   6375   present, it must first be added.</p>
   6376 
   6377   <p>If a reflecting IDL attribute is a <code>DOMString</code>
   6378   attribute whose content attribute is defined to contain a
   6379   <a href=#url>URL</a>, then on getting, the IDL attribute must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of the content
   6380   attribute relative to the element and return the resulting
   6381   <a href=#absolute-url>absolute URL</a> if that was successful, or the empty
   6382   string otherwise; and on setting, must set the content attribute to
   6383   the specified literal value. If the content attribute is absent, the
   6384   IDL attribute must return the default value, if the content
   6385   attribute has one, or else the empty string.</p>
   6386 
   6387   <p>If a reflecting IDL attribute is a <code>DOMString</code>
   6388   attribute whose content attribute is defined to contain one or more
   6389   <a href=#url title=URL>URLs</a>, then on getting, the IDL attribute
   6390   must <a href=#split-a-string-on-spaces title="split a string on spaces">split the content
   6391   attribute on spaces</a> and return the concatenation of <a href=#resolve-a-url title="resolve a URL">resolving</a> each token URL to an
   6392   <a href=#absolute-url>absolute URL</a> relative to the element, with a single
   6393   U+0020 SPACE character between each URL, ignoring any tokens that
   6394   did not resolve successfully. If the content attribute is absent,
   6395   the IDL attribute must return the default value, if the content
   6396   attribute has one, or else the empty string. On setting, the IDL
   6397   attribute must set the content attribute to the specified literal
   6398   value.</p>
   6399 
   6400   <p>If a reflecting IDL attribute is a <code>DOMString</code> whose
   6401   content attribute is an <a href=#enumerated-attribute>enumerated attribute</a>, and the
   6402   IDL attribute is <dfn id=limited-to-only-known-values>limited to only known values</dfn>, then, on
   6403   getting, the IDL attribute must return the conforming value
   6404   associated with the state the attribute is in (in its canonical
   6405   case), or the empty string if the attribute is in a state that has
   6406   no associated keyword value; and on setting, if the new value is an
   6407   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the keywords
   6408   given for that attribute, then the content attribute must be set to
   6409   the conforming value associated with the state that the attribute
   6410   would be in if set to the given new value, otherwise, if the new
   6411   value is the empty string, then the content attribute must be
   6412   removed, otherwise, the content attribute must be set to the given
   6413   new value.</p>
   6414 
   6415   <p>If a reflecting IDL attribute is a <code>DOMString</code> but
   6416   doesn't fall into any of the above categories, then the getting and
   6417   setting must be done in a transparent, case-preserving manner.</p>
   6418 
   6419   <p>If a reflecting IDL attribute is a <code title="">boolean</code>
   6420   attribute, then on getting the IDL attribute must return true if the
   6421   content attribute is set, and false if it is absent. On setting, the
   6422   content attribute must be removed if the IDL attribute is set to
   6423   false, and must be set to the empty string if the IDL attribute is
   6424   set to true. (This corresponds to the rules for <a href=#boolean-attribute title="boolean
   6425   attribute">boolean content attributes</a>.)</p>
   6426 
   6427   <p>If a reflecting IDL attribute is a signed integer type
   6428   (<code>long</code>) then, on getting, the content attribute must be
   6429   parsed according to the <a href=#rules-for-parsing-integers title="rules for parsing
   6430   integers">rules for parsing signed integers</a>, and if that is
   6431   successful, and the value is in the range of the IDL attribute's
   6432   type, the resulting value must be returned. If, on the other hand,
   6433   it fails or returns an out of range value, or if the attribute is
   6434   absent, then the default value must be returned instead, or 0 if
   6435   there is no default value. On setting, the given value must be
   6436   converted to the shortest possible string representing the number as
   6437   a <a href=#valid-integer>valid integer</a> and then that string must be used as
   6438   the new content attribute value.</p>
   6439 
   6440   <p>If a reflecting IDL attribute is a signed integer type
   6441   (<code>long</code>) that is <dfn id=limited-to-only-non-negative-numbers>limited to only non-negative
   6442   numbers</dfn> then, on getting, the content attribute must be parsed
   6443   according to the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   6444   integers</a>, and if that is successful, and the value is in the
   6445   range of the IDL attribute's type, the resulting value must be
   6446   returned. If, on the other hand, it fails or returns an out of range
   6447   value, or if the attribute is absent, the default value must be
   6448   returned instead, or &minus;1 if there is no default value. On
   6449   setting, if the value is negative, the user agent must fire an
   6450   <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. Otherwise, the given value
   6451   must be converted to the shortest possible string representing the
   6452   number as a <a href=#valid-non-negative-integer>valid non-negative integer</a> and then that
   6453   string must be used as the new content attribute value.</p>
   6454 
   6455   <p>If a reflecting IDL attribute is an <em>unsigned</em> integer
   6456   type (<code>unsigned long</code>) then, on getting, the content
   6457   attribute must be parsed according to the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
   6458   non-negative integers</a>, and if that is successful, and the
   6459   value is in the range of the IDL attribute's type, the resulting
   6460   value must be returned. If, on the other hand, it fails or returns
   6461   an out of range value, or if the attribute is absent, the default
   6462   value must be returned instead, or 0 if there is no default
   6463   value. On setting, the given value must be converted to the shortest
   6464   possible string representing the number as a <a href=#valid-non-negative-integer>valid
   6465   non-negative integer</a> and then that string must be used as the
   6466   new content attribute value.</p>
   6467 
   6468   <p>If a reflecting IDL attribute is an unsigned integer type
   6469   (<code>unsigned long</code>) that is <dfn id=limited-to-only-non-negative-numbers-greater-than-zero>limited to only
   6470   non-negative numbers greater than zero</dfn>, then the behavior is
   6471   similar to the previous case, but zero is not allowed. On getting,
   6472   the content attribute must first be parsed according to the
   6473   <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>, and if that is
   6474   successful, and the value is in the range of the IDL attribute's
   6475   type, the resulting value must be returned. If, on the other hand,
   6476   it fails or returns an out of range value, or if the attribute is
   6477   absent, the default value must be returned instead, or 1 if there is
   6478   no default value. On setting, if the value is zero, the user agent
   6479   must fire an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. Otherwise, the
   6480   given value must be converted to the shortest possible string
   6481   representing the number as a <a href=#valid-non-negative-integer>valid non-negative integer</a>
   6482   and then that string must be used as the new content attribute
   6483   value.</p>
   6484 
   6485   <p>If a reflecting IDL attribute is a floating point number type
   6486   (<code>float</code>), then, on getting, the content attribute must
   6487   be parsed according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
   6488   number values</a>, and if that is successful, the resulting value
   6489   must be returned. If, on the other hand, it fails, or if the
   6490   attribute is absent, the default value must be returned instead, or
   6491   0.0 if there is no default value. On setting, the given value must
   6492   be converted to the <a href=#best-representation-of-the-number-as-a-floating-point-number>best representation of the number as a
   6493   floating point number</a> and then that string must be used as
   6494   the new content attribute value.</p>
   6495 
   6496   <p class=note>The values Infinity and Not-a-Number (NaN) values
   6497   throw an exception on setting, as <a href=#float-nan>defined
   6498   earlier</a>.</p>
   6499 
   6500   <p>If a reflecting IDL attribute is of the type
   6501   <code><a href=#domtokenlist>DOMTokenList</a></code> or <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code>, then
   6502   on getting it must return a <code><a href=#domtokenlist>DOMTokenList</a></code> or
   6503   <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> object (as appropriate) whose
   6504   underlying string is the element's corresponding content
   6505   attribute. When the object mutates its underlying string, the
   6506   content attribute must itself be immediately mutated. When the
   6507   attribute is absent, then the string represented by the object is
   6508   the empty string; when the object mutates this empty string, the
   6509   user agent must add the corresponding content attribute, with its
   6510   value set to the value it would have been set to after mutating the
   6511   empty string. The same <code><a href=#domtokenlist>DOMTokenList</a></code> or
   6512   <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> object must be returned every time
   6513   for each attribute.</p>
   6514 
   6515   <div class=example>
   6516 
   6517    <p>If an element with no attributes has its <code title=dom-tokenlist-remove><a href=#dom-tokenlist-remove>element.classList.remove()</a></code>
   6518    method invoked, the underlying string won't be changed, since the
   6519    result of removing any token from the empty string is still the
   6520    empty string. However, if the <code title=dom-tokenlist-add><a href=#dom-tokenlist-add>element.classList.add()</a></code> method is
   6521    then invoked, a <code title=attr-class><a href=#classes>class</a></code> attribute
   6522    will be added to the element with the value of the token to be
   6523    added.</p>
   6524 
   6525   </div>
   6526 
   6527   <p>If a reflecting IDL attribute has the type
   6528   <code><a href=#htmlelement>HTMLElement</a></code>, or an interface that descends from
   6529   <code><a href=#htmlelement>HTMLElement</a></code>, then, on getting, it must run the
   6530   following algorithm (stopping at the first point where a value is
   6531   returned):</p>
   6532 
   6533   <ol><li>If the corresponding content attribute is absent, then the
   6534    IDL attribute must return null.</li>
   6535 
   6536    <li>Let <var title="">candidate</var> be the element that the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>document.getElementById()</a></code> method
   6537    would find when called on the content attribute's document if it
   6538    was passed as its argument the current value of the corresponding
   6539    content attribute.</li>
   6540 
   6541    <li>If <var title="">candidate</var> is null, or if it is not
   6542    type-compatible with the IDL attribute, then the IDL attribute must
   6543    return null.</li>
   6544 
   6545    <li>Otherwise, it must return <var title="">candidate</var>.</li>
   6546 
   6547   </ol><p>On setting, if the given element has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute, then the content attribute must
   6548   be set to the value of that <code title=attr-id><a href=#the-id-attribute>id</a></code>
   6549   attribute. Otherwise, the IDL attribute must be set to the empty
   6550   string.</p>
   6551 
   6552   </div>
   6553 
   6554 
   6555   <h4 id=collections-0><span class=secno>2.7.2 </span>Collections</h4>
   6556 
   6557   <p>The <code><a href=#htmlcollection>HTMLCollection</a></code>, <code><a href=#htmlallcollection>HTMLAllCollection</a></code>,
   6558   <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>,
   6559   <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code>, and
   6560   <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> interfaces represent various
   6561   lists of DOM nodes. Collectively, objects implementing these
   6562   interfaces are called <dfn id=collections>collections</dfn>.</p>
   6563 
   6564   <p>When a <a href=#collections title=collections>collection</a> is created, a
   6565   filter and a root are associated with the collection.</p>
   6566 
   6567   <p class=example>For example, when the <code><a href=#htmlcollection>HTMLCollection</a></code>
   6568   object for the <code title=dom-document-images><a href=#dom-document-images>document.images</a></code> attribute is
   6569   created, it is associated with a filter that selects only
   6570   <code><a href=#the-img-element>img</a></code> elements, and rooted at the root of the
   6571   document.</p>
   6572 
   6573   <p>The <a href=#collections title=collections>collection</a> then <dfn id=represented-by-the-collection title="represented by the collection">represents</dfn> a
   6574   <a href=#live>live</a> view of the subtree rooted at the collection's
   6575   root, containing only nodes that match the given filter. The view is
   6576   linear. <span class=impl>In the absence of specific requirements
   6577   to the contrary, the nodes within the collection must be sorted in
   6578   <a href=#tree-order>tree order</a>.</span></p>
   6579 
   6580   <div class=impl>
   6581 
   6582   <p class=note>The <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> list is
   6583   not in tree order.</p>
   6584 
   6585   <p>An attribute that returns a collection must return the same
   6586   object every time it is retrieved.</p>
   6587 
   6588   </div>
   6589 
   6590 
   6591   <h5 id=htmlcollection-0><span class=secno>2.7.2.1 </span>HTMLCollection</h5>
   6592 
   6593   <p>The <code><a href=#htmlcollection>HTMLCollection</a></code> interface represents a generic
   6594   <a href=#collections title=collections>collection</a> of elements.</p>
   6595 
   6596   <pre class=idl>interface <dfn id=htmlcollection>HTMLCollection</dfn> {
   6597   readonly attribute unsigned long <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a>;
   6598   caller getter object <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>(in unsigned long index); // only returns Element
   6599   caller getter object <a href=#dom-htmlcollection-nameditem title=dom-HTMLCollection-namedItem>namedItem</a>(in DOMString name); // only returns Element
   6600 };</pre>
   6601 
   6602   <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   6603    <dd>
   6604     <p>Returns the number of elements in the collection.</p>
   6605    </dd>
   6606 
   6607    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   6608    <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   6609    <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   6610    <dd>
   6611     <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   6612     <p>Returns null if <var title="">index</var> is out of range.</p>
   6613    </dd>
   6614 
   6615    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>namedItem</a></code>(<var title="">name</var>)</dt>
   6616    <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   6617    <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   6618    <dd>
   6619     <p>Returns the first item with <a href=#concept-id title=concept-id>ID</a> or name <var title="">name</var>
   6620     from the collection.</p>
   6621     <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or name could be found.</p>
   6622     <p>Only <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   6623     <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   6624     <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   6625     <code><a href=#the-object-element>object</a></code> elements can have a name for the purpose of
   6626     this method; their name is given by the value of their <code title="">name</code> attribute.</p>
   6627    </dd>
   6628   </dl><div class=impl>
   6629 
   6630   <p>The object's <span>indices of the supported indexed
   6631   properties</span> are the numbers in the range zero to one less than
   6632   the number of nodes <a href=#represented-by-the-collection>represented by the collection</a>. If
   6633   there are no such elements, then there are no <span>supported
   6634   indexed properties</span>.</p>
   6635 
   6636   <p>The <dfn id=dom-htmlcollection-length title=dom-HTMLCollection-length><code>length</code></dfn>
   6637   attribute must return the number of nodes <a href=#represented-by-the-collection>represented by the
   6638   collection</a>.</p>
   6639 
   6640   <p>The <dfn id=dom-htmlcollection-item title=dom-HTMLCollection-item><code>item(<var title="">index</var>)</code></dfn> method must return the <var title="">index</var>th node in the collection. If there is no <var title="">index</var>th node in the collection, then the method must
   6641   return null.</p>
   6642 
   6643   <p>The <span>names of the supported named properties</span> consist
   6644   of the values of the <code title="">name</code> attributes of each
   6645   <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   6646   <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   6647   <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   6648   <code><a href=#the-object-element>object</a></code> element <a href=#represented-by-the-collection>represented by the
   6649   collection</a> with a <code title="">name</code> attribute, plus
   6650   the list of IDs that the elements <a href=#represented-by-the-collection>represented by the
   6651   collection</a> have.</p>
   6652 
   6653   <p>The <dfn id=dom-htmlcollection-nameditem title=dom-HTMLCollection-namedItem><code>namedItem(<var title="">key</var>)</code></dfn> method must return the first node
   6654   in the collection that matches the following requirements:</p>
   6655 
   6656   <ul><li>It is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>,
   6657    <code><a href=#the-area-element>area</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>,
   6658    <code><a href=#frame>frame</a></code>, <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
   6659    <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> element with a <code title="">name</code> attribute equal to <var title="">key</var>,
   6660    or,</li>
   6661 
   6662    <li>It is an element with an <a href=#concept-id title=concept-id>ID</a>
   6663    equal to <var title="">key</var>.</li>
   6664 
   6665   </ul><p>If no such elements are found, then the method must return
   6666   null.</p>
   6667 
   6668   </div>
   6669 
   6670 
   6671   <h5 id=htmlallcollection-0><span class=secno>2.7.2.2 </span>HTMLAllCollection</h5>
   6672 
   6673   <p>The <code><a href=#htmlallcollection>HTMLAllCollection</a></code> interface represents a generic
   6674   <a href=#collections title=collections>collection</a> of elements just like
   6675   <code><a href=#htmlcollection>HTMLCollection</a></code>, with the exception that its <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem()</a></code> method
   6676   returns an <code><a href=#htmlcollection>HTMLCollection</a></code> object when there are
   6677   multiple matching elements.</p>
   6678 
   6679   <pre class=idl>interface <dfn id=htmlallcollection>HTMLAllCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
   6680   // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
   6681   caller getter object <a href=#dom-htmlallcollection-nameditem title=dom-HTMLAllCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
   6682   <a href=#htmlallcollection>HTMLAllCollection</a> <a href=#dom-htmlallcollection-tags title=dom-HTMLAllCollection-tags>tags</a>(in DOMString tagName);
   6683 };</pre>
   6684 
   6685   <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   6686    <dd>
   6687     <p>Returns the number of elements in the collection.</p>
   6688    </dd>
   6689 
   6690    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   6691    <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   6692    <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   6693    <dd>
   6694     <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   6695     <p>Returns null if <var title="">index</var> is out of range.</p>
   6696    </dd>
   6697 
   6698    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6699    <dt><var title="">collection</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-namedItem><a href=#dom-htmlallcollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6700    <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   6701    <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   6702    <dd>
   6703     <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or name <var title="">name</var> from the collection.</p>
   6704     <p>If there are multiple matching items, then an <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object containing all those elements is returned.</p>
   6705     <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or name could be found.</p>
   6706     <p>Only <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   6707     <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   6708     <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   6709     <code><a href=#the-object-element>object</a></code> elements can have a name for the purpose of
   6710     this method; their name is given by the value of their <code title="">name</code> attribute.</p>
   6711    </dd>
   6712 
   6713    <dt><var title="">collection</var> = <var title="">collection</var> . <code title=dom-HTMLAllCollection-tags><a href=#dom-htmlallcollection-tags>tags</a></code>(<var title="">tagName</var>)</dt>
   6714    <dd>
   6715     <p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p>
   6716    </dd>
   6717 
   6718   </dl><div class=impl>
   6719 
   6720   <p>The object's <span>indices of the supported indexed
   6721   properties</span> and <span>names of the supported named
   6722   properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
   6723   objects.</p>
   6724 
   6725   <p>The <dfn id=dom-htmlallcollection-nameditem title=dom-HTMLAllCollection-namedItem><code>namedItem(<var title="">key</var>)</code></dfn> method must act according to the
   6726   following algorithm:</p>
   6727 
   6728   <ol><li>
   6729 
   6730     <p>Let <var title="">collection</var> be an
   6731     <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object rooted at the same node as
   6732     the <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on which the method was
   6733     invoked, whose filter matches only only elements that already
   6734     match the filter of the <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on
   6735     which the method was invoked and that are either:</p>
   6736 
   6737     <ul><li><code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   6738      <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   6739      <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
   6740      <code><a href=#the-object-element>object</a></code> elements with a <code title="">name</code>
   6741      attribute equal to <var title="">key</var>, or,</li>
   6742 
   6743      <li>elements with an <a href=#concept-id title=concept-id>ID</a> equal to
   6744      <var title="">key</var>.</li>
   6745 
   6746     </ul></li>
   6747 
   6748    <li>If, at the time the method is called, there is exactly one node
   6749    in <var title="">collection</var>, then return that node and stop
   6750    the algorithm.</li>
   6751 
   6752    <li>Otherwise, if, at the time the method is called, <var title="">collection</var> is empty, return null and stop the
   6753    algorithm.</li>
   6754 
   6755    <li>Otherwise, return <var title="">collection</var>.</li>
   6756 
   6757   </ol><p>The <dfn id=dom-htmlallcollection-tags title=dom-HTMLAllCollection-tags><code>tags(<var title="">tagName</var>)</code></dfn> method must return an
   6758   <code><a href=#htmlallcollection>HTMLAllCollection</a></code> rooted at the same node as the
   6759   <code><a href=#htmlallcollection>HTMLAllCollection</a></code> object on which the method was
   6760   invoked, whose filter matches only <a href=#html-elements>HTML elements</a> whose
   6761   local name is the <var title="">tagName</var> argument and that
   6762   already match the filter of the <code><a href=#htmlallcollection>HTMLAllCollection</a></code>
   6763   object on which the method was invoked. In <a href=#html-documents>HTML
   6764   documents</a>, the argument must first be <a href=#converted-to-ascii-lowercase>converted to
   6765   ASCII lowercase</a>.</p>
   6766 
   6767   </div>
   6768 
   6769 
   6770   <h5 id=htmlformcontrolscollection-0><span class=secno>2.7.2.3 </span>HTMLFormControlsCollection</h5>
   6771 
   6772   <p>The <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> interface represents
   6773   a <a href=#collections title=collections>collection</a> of <a href=#category-listed title=category-listed>listed elements</a> in <code><a href=#the-form-element>form</a></code>
   6774   and <code><a href=#the-fieldset-element>fieldset</a></code> elements.</p>
   6775 
   6776   <pre class=idl>interface <dfn id=htmlformcontrolscollection>HTMLFormControlsCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
   6777   // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
   6778   caller getter object <a href=#dom-htmlformcontrolscollection-nameditem title=dom-HTMLFormControlsCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
   6779 };
   6780 
   6781 interface <dfn id=radionodelist>RadioNodeList</dfn> : <a href=#nodelist>NodeList</a> {
   6782           attribute DOMString <a href=#dom-radionodelist-value title=dom-RadioNodeList-value>value</a>;
   6783 };</pre>
   6784 
   6785   <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   6786    <dd>
   6787     <p>Returns the number of elements in the collection.</p>
   6788    </dd>
   6789 
   6790    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   6791    <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   6792    <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   6793    <dd>
   6794     <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   6795     <p>Returns null if <var title="">index</var> is out of range.</p>
   6796    </dd>
   6797 
   6798    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6799    <dt><var title="">radioNodeList</var> = <var title="">collection</var> . <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6800    <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   6801    <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   6802    <dd>
   6803     <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> <var title="">name</var> from the collection.</p>
   6804     <p>If there are multiple matching items, then a <code><a href=#radionodelist>RadioNodeList</a></code> object containing all those elements is returned.</p>
   6805     <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> could be found.</p>
   6806    </dd>
   6807 
   6808    <dt><var title="">radioNodeList</var> . <var title="">value</var> [ = <var title="">value</var> ]</dt>
   6809    <dd>
   6810     <p>Returns the value of the first checked radio button represented by the object.</p>
   6811     <p>Can be set, to check the first radio button with the given value represented by the object.</p>
   6812    </dd>
   6813 
   6814   </dl><div class=impl>
   6815 
   6816   <p>The object's <span>indices of the supported indexed
   6817   properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
   6818   objects.</p>
   6819 
   6820   <p>The <span>names of the supported named properties</span> consist
   6821   of the values of all the <code title=attr-id><a href=#the-id-attribute>id</a></code> and <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attributes of all the elements
   6822   <a href=#represented-by-the-collection>represented by the collection</a>.</p>
   6823 
   6824   <p>The <dfn id=dom-htmlformcontrolscollection-nameditem title=dom-HTMLFormControlsCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must act according to the
   6825   following algorithm:</p>
   6826 
   6827   <ol><li>If, at the time the method is called, there is exactly one node
   6828    in the collection that has either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>, then return that node and stop the
   6829    algorithm.</li>
   6830 
   6831    <li>Otherwise, if there are no nodes in the collection that have
   6832    either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>, then return null and stop the algorithm.</li>
   6833 
   6834    <li>Otherwise, create a new <code><a href=#radionodelist>RadioNodeList</a></code> object
   6835    representing a <a href=#live>live</a> view of the
   6836    <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> object, further filtered so
   6837    that the only nodes in the <code><a href=#radionodelist>RadioNodeList</a></code> object are
   6838    those that have either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute
   6839    or a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute equal to <var title="">name</var>. The nodes in the <code><a href=#radionodelist>RadioNodeList</a></code>
   6840    object must be sorted in <a href=#tree-order>tree order</a>.</li>
   6841 
   6842    <li>Return that <code><a href=#radionodelist>RadioNodeList</a></code> object.</li>
   6843 
   6844   </ol><hr><p>Members of the <code><a href=#radionodelist>RadioNodeList</a></code> interface inherited
   6845   from the <code><a href=#nodelist>NodeList</a></code> interface must behave as they would
   6846   on a <code><a href=#nodelist>NodeList</a></code> object.</p>
   6847 
   6848   <p>The <dfn id=dom-radionodelist-value title=dom-RadioNodeList-value><code>value</code></dfn>
   6849   IDL attribute on the <code><a href=#radionodelist>RadioNodeList</a></code> object, on getting,
   6850   must return the value returned by running the following steps:</p>
   6851 
   6852   <ol><li><p>Let <var title="">element</var> be the first element in
   6853    <a href=#tree-order>tree order</a> represented by the
   6854    <code><a href=#radionodelist>RadioNodeList</a></code> object that is an <code><a href=#the-input-element>input</a></code>
   6855    element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute
   6856    is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
   6857    state and whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>
   6858    is true. Otherwise, let it be null.</li>
   6859 
   6860    <li><p>If <var title="">element</var> is null, or if it is an
   6861    element with no <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   6862    attribute, return the empty string.</li>
   6863 
   6864    <li><p>Otherwise, return the value of <var title="">element</var>'s
   6865    <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</li>
   6866 
   6867   </ol><p>On setting, the <code title=dom-RadioNodeList-value><a href=#dom-radionodelist-value>value</a></code> IDL attribute must run
   6868   the following steps:</p>
   6869 
   6870   <ol><li><p>Let <var title="">element</var> be the first element in
   6871    <a href=#tree-order>tree order</a> represented by the
   6872    <code><a href=#radionodelist>RadioNodeList</a></code> object that is an <code><a href=#the-input-element>input</a></code>
   6873    element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute
   6874    is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
   6875    state and whose <code title=attr-input-value><a href=#attr-input-value>value</a></code> content
   6876    attribute is present and equal to the new value, if any. Otherwise,
   6877    let it be null.</li>
   6878 
   6879    <li><p>If <var title="">element</var> is not null, then set its
   6880    <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to true.</p>
   6881 
   6882   </ol><!--
   6883 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E...%0A%3Cform%20name%3D%22a%22%3E%3Cinput%20id%3D%22x%22%20name%3D%22y%22%3E%3Cinput%20name%3D%22x%22%20id%3D%22y%22%3E%3C/form%3E%0A%3Cscript%3E%0A%20%20var%20x%3B%0A%20%20w%28x%20%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20x%5B0%5D.parentNode.removeChild%28x%5B0%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20w%28x%20%3D%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%3C/script%3E%0A
   6884 --></div>
   6885 
   6886 
   6887   <h5 id=htmloptionscollection-0><span class=secno>2.7.2.4 </span>HTMLOptionsCollection</h5>
   6888 
   6889   <p>The <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> interface represents a
   6890   list of <code><a href=#the-option-element>option</a></code> elements. It is always rooted on a
   6891   <code><a href=#the-select-element>select</a></code> element and has attributes and methods that
   6892   manipulate that element's descendants.</p>
   6893 
   6894   <pre class=idl>interface <dfn id=htmloptionscollection>HTMLOptionsCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
   6895   // inherits <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
   6896            attribute unsigned long <a href=#dom-htmloptionscollection-length title=dom-HTMLOptionsCollection-length>length</a>; // overrides inherited length
   6897   caller getter object <a href=#dom-htmloptionscollection-nameditem title=dom-HTMLOptionsCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
   6898   void <a href=#dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in optional <a href=#htmlelement>HTMLElement</a> before);
   6899   void <a href=#dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in long before);
   6900   void <a href=#dom-htmloptionscollection-remove title=dom-HTMLOptionsCollection-remove>remove</a>(in long index);
   6901 };</pre>
   6902 
   6903   <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLOptionsCollection-length><a href=#dom-htmloptionscollection-length>length</a></code> [ = <var title="">value</var> ]</dt>
   6904    <dd>
   6905     <p>Returns the number of elements in the collection.</p>
   6906     <p>When set to a smaller number, truncates the number of <code><a href=#the-option-element>option</a></code> elements in the corresponding container.</p>
   6907     <p>When set to a greater number, adds new blank <code><a href=#the-option-element>option</a></code> elements to that container.</p>
   6908    </dd>
   6909 
   6910    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   6911    <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   6912    <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   6913    <dd>
   6914     <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   6915     <p>Returns null if <var title="">index</var> is out of range.</p>
   6916    </dd>
   6917 
   6918    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLOptionsCollection-namedItem><a href=#dom-htmloptionscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6919    <dt><var title="">nodeList</var> = <var title="">collection</var> . <code title=dom-HTMLOptionsCollection-namedItem><a href=#dom-htmloptionscollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   6920    <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   6921    <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   6922    <dd>
   6923     <p>Returns the item with <a href=#concept-id title=concept-id>ID</a> or <code title=attr-option-name><a href=#attr-option-name>name</a></code> <var title="">name</var> from the collection.</p>
   6924     <p>If there are multiple matching items, then a <code><a href=#nodelist>NodeList</a></code> object containing all those elements is returned.</p>
   6925     <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> could be found.</p>
   6926    </dd>
   6927 
   6928    <dt><var title="">collection</var> . <code title=dom-HTMLOptionsCollection-add><a href=#dom-htmloptionscollection-add>add</a></code>(<var title="">element</var> [, <var title="">before</var> ] )</dt>
   6929    <dd>
   6930     <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
   6931     <p>The <var title="">before</var> argument can be a number, in
   6932     which case <var title="">element</var> is inserted before the item
   6933     with that number, or an element from the collection, in which case
   6934     <var title="">element</var> is inserted before that element.</p>
   6935     <p>If <var title="">before</var> is omitted, null, or a number out
   6936     of range, then <var title="">element</var> will be added at the
   6937     end of the list.</p>
   6938     <p>This method will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code>
   6939     exception if <var title="">element</var> is an ancestor of the
   6940     element into which it is to be inserted. If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code> or
   6941     <code><a href=#the-optgroup-element>optgroup</a></code> element, then the method does nothing.</p>
   6942    </dd>
   6943 
   6944   </dl><div class=impl>
   6945 
   6946   <p>The object's <span>indices of the supported indexed
   6947   properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
   6948   objects.</p>
   6949 
   6950   <p>On getting, the <dfn id=dom-htmloptionscollection-length title=dom-HTMLOptionsCollection-length><code>length</code></dfn>
   6951   attribute must return the number of nodes <a href=#represented-by-the-collection>represented by the
   6952   collection</a>.</p>
   6953 
   6954   <p>On setting, the behavior depends on whether the new value is
   6955   equal to, greater than, or less than the number of nodes
   6956   <a href=#represented-by-the-collection>represented by the collection</a> at that time. If the
   6957   number is the same, then setting the attribute must do nothing. If
   6958   the new value is greater, then <var title="">n</var> new
   6959   <code><a href=#the-option-element>option</a></code> elements with no attributes and no child nodes
   6960   must be appended to the <code><a href=#the-select-element>select</a></code> element on which the
   6961   <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, where <var title="">n</var> is the difference between the two numbers (new
   6962   value minus old value). Mutation events must be fired as if a
   6963   <code><a href=#documentfragment>DocumentFragment</a></code> containing the new <code><a href=#the-option-element>option</a></code>
   6964   elements had been inserted.  If the new value is lower, then the
   6965   last <var title="">n</var> nodes in the collection must be removed
   6966   from their parent nodes, where <var title="">n</var> is the
   6967   difference between the two numbers (old value minus new value).</p>
   6968 
   6969   <p class=note>Setting <code title=dom-HTMLOptionsCollection-length><a href=#dom-htmloptionscollection-length>length</a></code> never removes
   6970   or adds any <code><a href=#the-optgroup-element>optgroup</a></code> elements, and never adds new
   6971   children to existing <code><a href=#the-optgroup-element>optgroup</a></code> elements (though it can
   6972   remove children from them).</p>
   6973 
   6974   <p>The <span>names of the supported named properties</span> consist
   6975   of the values of all the <code title=attr-id><a href=#the-id-attribute>id</a></code> and <code title=attr-option-name><a href=#attr-option-name>name</a></code> attributes of all the elements
   6976   <a href=#represented-by-the-collection>represented by the collection</a>.</p>
   6977 
   6978   <p>The <dfn id=dom-htmloptionscollection-nameditem title=dom-HTMLOptionsCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must act according to the
   6979   following algorithm:</p>
   6980 
   6981   <ol><li>If, at the time the method is called, there is exactly one node
   6982    in the collection that has either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>, then return that node and stop the
   6983    algorithm.</li>
   6984 
   6985    <li>Otherwise, if there are no nodes in the collection that have
   6986    either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>, then return null and stop the algorithm.</li>
   6987 
   6988    <!-- IE returns an HTMLCollection instead; we may need to change to that for compat -->
   6989    <li>Otherwise, create a new <code><a href=#nodelist>NodeList</a></code> object
   6990    representing a <a href=#live>live</a> view of the
   6991    <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> object, further filtered so that
   6992    the only nodes in the <code><a href=#nodelist>NodeList</a></code> object are those that
   6993    have either an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute or a <code title=attr-option-name><a href=#attr-option-name>name</a></code> attribute equal to <var title="">name</var>. The nodes in the <code><a href=#nodelist>NodeList</a></code> object
   6994    must be sorted in <a href=#tree-order>tree order</a>.</li>
   6995 
   6996    <li>Return that <code><a href=#nodelist>NodeList</a></code> object.</li>
   6997 
   6998   </ol><p>The <dfn id=dom-htmloptionscollection-add title=dom-HTMLOptionsCollection-add><code>add(<var title="">element</var>, <var title="">before</var>)</code></dfn>
   6999   method must act according to the following algorithm:</p>
   7000 
   7001   <ol><li><p>If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code>
   7002    or <code><a href=#the-optgroup-element>optgroup</a></code> element, then return and abort these
   7003    steps.</li>
   7004 
   7005    <li><p>If <var title="">element</var> is an ancestor of the
   7006    <code><a href=#the-select-element>select</a></code> element on which the
   7007    <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw a
   7008    <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</li>
   7009 
   7010    <li><p>If <var title="">before</var> is an element, but that
   7011    element isn't a descendant of the <code><a href=#the-select-element>select</a></code> element on
   7012    which the <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw
   7013    a <code><a href=#not_found_err>NOT_FOUND_ERR</a></code> exception.</li>
   7014 
   7015    <li><p>If <var title="">element</var> and <var title="">before</var> are the same element, then return and abort
   7016    these steps.</li>
   7017 
   7018    <li><p>If <var title="">before</var> is a node, then let <var title="">reference</var> be that node. Otherwise, if <var title="">before</var> is an integer, and there is a <var title="">before</var>th node in the collection, let <var title="">reference</var> be that node. Otherwise, let <var title="">reference</var> be null.</li>
   7019 
   7020    <li><p>If <var title="">reference</var> is not null, let <var title="">parent</var> be the parent node of <var title="">reference</var>. Otherwise, let <var title="">parent</var>
   7021    be the <code><a href=#the-select-element>select</a></code> element on which the
   7022    <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted.</li>
   7023 
   7024    <li><p>Act as if the DOM Core <code title=dom-Node-insertBefore><a href=#dom-node-insertbefore>insertBefore()</a></code> method was
   7025    invoked on the <var title="">parent</var> node, with <var title="">element</var> as the first argument and <var title="">reference</var> as the second argument.</p>
   7026 
   7027   </ol><p>The <dfn id=dom-htmloptionscollection-remove title=dom-HTMLOptionsCollection-remove><code>remove(<var title="">index</var>)</code></dfn> method must act according to
   7028   the following algorithm:</p>
   7029 
   7030   <ol><li><p>If the number of nodes <a href=#represented-by-the-collection>represented by the
   7031    collection</a> is zero, abort these steps.</li>
   7032 
   7033    <li><p>If <var title="">index</var> is not a number greater than or
   7034    equal to 0 and less than the number of nodes <a href=#represented-by-the-collection>represented by
   7035    the collection</a>, let <var title="">element</var> be the first
   7036    element in the collection. Otherwise, let <var title="">element</var> be the <var title="">index</var>th element
   7037    in the collection.</li>
   7038 
   7039    <li><p>Remove <var title="">element</var> from its parent
   7040    node.</li>
   7041 
   7042   </ol><!-- see also http://ln.hixie.ch/?start=1161042744&count=1 --></div>
   7043 
   7044 
   7045   <div data-component="HTML Microdata (editor: Ian Hickson)">
   7046 
   7047 <!--FIXUP microdata -1-->
   7048   <h5 id=htmlpropertiescollection-0><span class=secno>2.7.2.5 </span>HTMLPropertiesCollection</h5>
   7049 <!--FIXUP microdata +1-->
   7050 
   7051   <p>The <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> interface represents a
   7052   <a href=#collections title=collections>collection</a> of elements that add
   7053   name-value pairs to a particular <a href=#concept-item title=concept-item>item</a> in the <a href=#microdata>microdata</a>
   7054   model.</p>
   7055 
   7056   <pre class=idl>interface <dfn id=htmlpropertiescollection>HTMLPropertiesCollection</dfn> : <a href=#htmlcollection>HTMLCollection</a> {
   7057   // inherits <a href=#dom-htmlcollection-length title=dom-HTMLCollection-length>length</a> and <a href=#dom-htmlcollection-item title=dom-HTMLCollection-item>item</a>()
   7058   caller getter <a href=#propertynodelist>PropertyNodeList</a> <a href=#dom-htmlpropertiescollection-nameditem title=dom-HTMLPropertiesCollection-namedItem>namedItem</a>(in DOMString name); // overrides inherited namedItem()
   7059   readonly attribute <span>DOMStringList</span> <a href=#dom-htmlpropertiescollection-names title=dom-HTMLPropertiesCollection-names>names</a>;
   7060 };
   7061 
   7062 typedef sequence&lt;any&gt; <dfn id=propertyvaluearray>PropertyValueArray</dfn>;
   7063 
   7064 interface <dfn id=propertynodelist>PropertyNodeList</dfn> : <a href=#nodelist>NodeList</a> {
   7065   readonly attribute <a href=#propertyvaluearray>PropertyValueArray</a> <a href=#dom-propertynodelist-values title=dom-PropertyNodeList-values>values</a>;
   7066 };</pre>
   7067 
   7068   <dl class=domintro><dt><var title="">collection</var> . <code title=dom-HTMLCollection-length><a href=#dom-htmlcollection-length>length</a></code></dt>
   7069    <dd>
   7070     <p>Returns the number of elements in the collection.</p>
   7071    </dd>
   7072 
   7073    <dt><var title="">element</var> = <var title="">collection</var> . <code title=dom-HTMLCollection-item><a href=#dom-htmlcollection-item>item</a></code>(<var title="">index</var>)</dt>
   7074    <dt><var title="">collection</var>[<var title="">index</var>]</dt>
   7075    <dt><var title="">collection</var>(<var title="">index</var>)</dt>
   7076    <dd>
   7077     <p>Returns the element with index <var title="">index</var> from the collection. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   7078     <p>Returns null if <var title="">index</var> is out of range.</p>
   7079    </dd>
   7080 
   7081    <dt><var title="">propertyNodeList</var> = <var title="">collection</var> . <code title=dom-HTMLPropertiesCollection-namedItem><a href=#dom-htmlpropertiescollection-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   7082    <dt><var title="">collection</var>[<var title="">name</var>]</dt>
   7083    <dt><var title="">collection</var>(<var title="">name</var>)</dt>
   7084    <dd>
   7085     <p>Returns a <code><a href=#propertynodelist>PropertyNodeList</a></code> object containing any elements that add a property named <var title="">name</var>.</p>
   7086    </dd>
   7087 
   7088    <dt><var title="">collection</var> . <code title=dom-HTMLPropertiesCollection-names><a href=#dom-htmlpropertiescollection-names>names</a></code></dt>
   7089    <dd>
   7090     <p>Returns a <code>DOMStringList</code> with the <a href=#property-names>property names</a> of the elements in the collection.</p>
   7091    </dd>
   7092 
   7093    <dt><var title="">propertyNodeList</var> . <code title=dom-PropertyNodeList-values><a href=#dom-propertynodelist-values>values</a></code></dt>
   7094    <dd>
   7095     <p>Returns an array of the various values that the relevant elements have.</p>
   7096    </dd>
   7097 
   7098   </dl><div class=impl>
   7099 
   7100   <p>The object's <span>indices of the supported indexed
   7101   properties</span> are as defined for <code><a href=#htmlcollection>HTMLCollection</a></code>
   7102   objects.</p>
   7103 
   7104   <p>The <span>names of the supported named properties</span> consist
   7105   of the <a href=#property-names>property names</a> of all the elements
   7106   <a href=#represented-by-the-collection>represented by the collection</a>.</p>
   7107 
   7108   <p>The <dfn id=dom-htmlpropertiescollection-names title=dom-HTMLPropertiesCollection-names><code>names</code></dfn>
   7109   attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
   7110   object giving the <a href=#property-names>property names</a> of all the elements
   7111   <a href=#represented-by-the-collection>represented by the collection</a>, listed in <a href=#tree-order>tree
   7112   order</a>, but with duplicates removed, leaving only the first
   7113   occurrence of each name. The same object must be returned each
   7114   time.</p>
   7115 
   7116   <p>The <dfn id=dom-htmlpropertiescollection-nameditem title=dom-HTMLPropertiesCollection-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must return a
   7117   <code><a href=#propertynodelist>PropertyNodeList</a></code> object representing a
   7118   <a href=#live>live</a> view of the <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>
   7119   object, further filtered so that the only nodes in the
   7120   <code><a href=#propertynodelist>PropertyNodeList</a></code> object are those that have a <a href=#property-names title="property names">property name</a> equal to <var title="">name</var>. The nodes in the <code><a href=#propertynodelist>PropertyNodeList</a></code>
   7121   object must be sorted in <a href=#tree-order>tree order</a>, and the same
   7122   object must be returned each time a particular <var title="">name</var> is queried.</p>
   7123 
   7124   <hr><p>Members of the <code><a href=#propertynodelist>PropertyNodeList</a></code> interface inherited
   7125   from the <code><a href=#nodelist>NodeList</a></code> interface must behave as they would
   7126   on a <code><a href=#nodelist>NodeList</a></code> object.</p>
   7127 
   7128   <p>The <dfn id=dom-propertynodelist-values title=dom-PropertyNodeList-values><code>values</code></dfn>
   7129   IDL attribute on the <code><a href=#propertynodelist>PropertyNodeList</a></code> object, on
   7130   getting, must return a newly constructed array whose values are the
   7131   values obtained from the <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> DOM property of each of the
   7132   elements represented by the object, in <a href=#tree-order>tree order</a>.</p>
   7133 
   7134   </div>
   7135 
   7136   </div><!--data-component-->
   7137 
   7138 
   7139 
   7140   <h4 id=domtokenlist-0><span class=secno>2.7.3 </span>DOMTokenList</h4>
   7141 
   7142   <p>The <code><a href=#domtokenlist>DOMTokenList</a></code> interface represents an interface
   7143   to an underlying string that consists of a <a href=#set-of-space-separated-tokens>set of
   7144   space-separated tokens</a>.</p>
   7145 
   7146   <p class=note><code><a href=#domtokenlist>DOMTokenList</a></code> objects are always
   7147   <a href=#case-sensitive>case-sensitive</a>, even when the underlying string might
   7148   ordinarily be treated in a case-insensitive manner.</p>
   7149 
   7150   <pre class=idl>interface <dfn id=domtokenlist>DOMTokenList</dfn> {
   7151   readonly attribute unsigned long <a href=#dom-tokenlist-length title=dom-tokenlist-length>length</a>;
   7152   getter DOMString <a href=#dom-tokenlist-item title=dom-tokenlist-item>item</a>(in unsigned long index);
   7153   boolean <a href=#dom-tokenlist-contains title=dom-tokenlist-contains>contains</a>(in DOMString token);
   7154   void <a href=#dom-tokenlist-add title=dom-tokenlist-add>add</a>(in DOMString token);
   7155   void <a href=#dom-tokenlist-remove title=dom-tokenlist-remove>remove</a>(in DOMString token);
   7156   boolean <a href=#dom-tokenlist-toggle title=dom-tokenlist-toggle>toggle</a>(in DOMString token);
   7157   <a href=#dom-tokenlist-tostring title=dom-tokenlist-toString>stringifier</a> DOMString ();
   7158 };</pre>
   7159 
   7160   <dl class=domintro><dt><var title="">tokenlist</var> . <code title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></code></dt>
   7161    <dd>
   7162     <p>Returns the number of tokens in the string.</p>
   7163    </dd>
   7164 
   7165    <dt><var title="">element</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-item><a href=#dom-tokenlist-item>item</a></code>(<var title="">index</var>)</dt>
   7166    <dt><var title="">tokenlist</var>[<var title="">index</var>]</dt>
   7167    <dd>
   7168     <p>Returns the token with index <var title="">index</var>. The tokens are returned in the order they are found in the underlying string.</p>
   7169     <p>Returns null if <var title="">index</var> is out of range.</p>
   7170    </dd>
   7171 
   7172    <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-contains><a href=#dom-tokenlist-contains>contains</a></code>(<var title="">token</var>)</dt>
   7173    <dd>
   7174     <p>Returns true if the <var title="">token</var> is present; false otherwise.</p>
   7175     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
   7176     <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   7177    </dd>
   7178 
   7179    <dt><var title="">tokenlist</var> . <code title=dom-tokenlist-add><a href=#dom-tokenlist-add>add</a></code>(<var title="">token</var>)</dt>
   7180    <dd>
   7181     <p>Adds <var title="">token</var>, unless it is already present.</p>
   7182     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
   7183     <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   7184    </dd>
   7185 
   7186    <dt><var title="">tokenlist</var> . <code title=dom-tokenlist-remove><a href=#dom-tokenlist-remove>remove</a></code>(<var title="">token</var>)</dt>
   7187    <dd>
   7188     <p>Removes <var title="">token</var> if it is present.</p>
   7189     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
   7190     <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   7191    </dd>
   7192 
   7193    <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title=dom-tokenlist-toggle><a href=#dom-tokenlist-toggle>toggle</a></code>(<var title="">token</var>)</dt>
   7194    <dd>
   7195     <p>Adds <var title="">token</var> if it is not present, or removes
   7196     it if it is. Returns true if <var title="">token</var> is now
   7197     present (it was added); returns false if it is not (it was
   7198     removed).</p>
   7199     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
   7200     <p>Throws an <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
   7201    </dd>
   7202 
   7203   </dl><div class=impl>
   7204 
   7205   <p>The <dfn id=dom-tokenlist-length title=dom-tokenlist-length><code>length</code></dfn>
   7206   attribute must return the number of tokens that result from <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the underlying string on
   7207   spaces</a>. This is the <var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var>.</p>
   7208 
   7209   <p>The object's <span>indices of the supported indexed
   7210   properties</span> are the numbers in the range zero to <span title=""><var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var>-1</span>, unless the <var title=dom-tokenlist-length><a href=#dom-tokenlist-length>length</a></var> is zero, in which case
   7211   there are no <span>supported indexed properties</span>.</p>
   7212 
   7213   <p>The <dfn id=dom-tokenlist-item title=dom-tokenlist-item><code>item(<var title="">index</var>)</code></dfn> method must <a href=#split-a-string-on-spaces title="split a
   7214   string on spaces">split the underlying string on spaces</a>,
   7215   preserving the order of the tokens as found in the underlying
   7216   string, and then return the <var title="">index</var>th item in this
   7217   list. If <var title="">index</var> is equal to or greater than the
   7218   number of tokens, then the method must return null.</p>
   7219 
   7220   <p class=example>For example, if the string is "<code title="">a b
   7221   a c</code>" then there are four tokens: the token with index 0 is
   7222   "<code title="">a</code>", the token with index 1 is "<code title="">b</code>", the token with index 2 is "<code title="">a</code>", and the token with index 3 is "<code title="">c</code>".</p>
   7223 
   7224   <p>The <dfn id=dom-tokenlist-contains title=dom-tokenlist-contains><code>contains(<var title="">token</var>)</code></dfn> method must run the following
   7225   algorithm:</p>
   7226 
   7227   <ol><li>If the <var title="">token</var> argument is the empty string,
   7228    then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   7229    algorithm.</li>
   7230 
   7231    <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   7232    <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   7233    algorithm.</li>
   7234 
   7235    <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   7236    underlying string on spaces</a> to get the list of tokens in the
   7237    object's underlying string.</li>
   7238 
   7239    <li>If the token indicated by <var title="">token</var> is a
   7240    <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   7241    object's underlying string then return true and stop this
   7242    algorithm.</li>
   7243 
   7244    <li>Otherwise, return false.</li>
   7245 
   7246   </ol><p>The <dfn id=dom-tokenlist-add title=dom-tokenlist-add><code>add(<var title="">token</var>)</code></dfn> method must run the following
   7247   algorithm:</p>
   7248 
   7249   <ol><li>If the <var title="">token</var> argument is the empty string,
   7250    then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   7251    algorithm.</li>
   7252 
   7253    <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   7254    <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   7255    algorithm.</li>
   7256 
   7257    <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   7258    underlying string on spaces</a> to get the list of tokens in the
   7259    object's underlying string.</li>
   7260 
   7261    <li>If the given <var title="">token</var> is a
   7262    <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   7263    <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string then stop the
   7264    algorithm.</li>
   7265 
   7266    <li>Otherwise, if the <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying
   7267    string is not the empty string and the last character of that
   7268    string is not a <a href=#space-character>space character</a>, then append a U+0020
   7269    SPACE character to the end of that string.</li>
   7270 
   7271    <li>Append the value of <var title="">token</var> to the end of the
   7272    <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string.</li>
   7273 
   7274   </ol><p>The <dfn id=dom-tokenlist-remove title=dom-tokenlist-remove><code>remove(<var title="">token</var>)</code></dfn> method must run the following
   7275   algorithm:</p>
   7276 
   7277   <ol><li>If the <var title="">token</var> argument is the empty string,
   7278    then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   7279    algorithm.</li>
   7280 
   7281    <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   7282    <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   7283    algorithm.</li>
   7284 
   7285    <li>Otherwise, <a href=#remove-a-token-from-a-string title="remove a token from a string">remove
   7286    the given <var title="">token</var> from the underlying
   7287    string</a>.</li>
   7288 
   7289   </ol><p>The <dfn id=dom-tokenlist-toggle title=dom-tokenlist-toggle><code>toggle(<var title="">token</var>)</code></dfn> method must run the following
   7290   algorithm:</p>
   7291 
   7292   <ol><li>If the <var title="">token</var> argument is the empty string,
   7293    then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and stop the
   7294    algorithm.</li>
   7295 
   7296    <li>If the <var title="">token</var> argument contains any <a href=#space-character title="space character">space characters</a>, then raise an
   7297    <code><a href=#invalid_character_err>INVALID_CHARACTER_ERR</a></code> exception and stop the
   7298    algorithm.</li>
   7299 
   7300    <li>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split the
   7301    underlying string on spaces</a> to get the list of tokens in the
   7302    object's underlying string.</li>
   7303 
   7304    <li>If the given <var title="">token</var> is a
   7305    <a href=#case-sensitive>case-sensitive</a> match for one of the tokens in the
   7306    <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string then <a href=#remove-a-token-from-a-string title="remove a token from a string">remove the given <var title="">token</var> from the underlying string</a> and stop the
   7307    algorithm, returning false.</li>
   7308 
   7309    <li>Otherwise, if the <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying
   7310    string is not the empty string and the last character of that
   7311    string is not a <a href=#space-character>space character</a>, then append a U+0020
   7312    SPACE character to the end of that string.</li>
   7313 
   7314    <li>Append the value of <var title="">token</var> to the end of the
   7315    <code><a href=#domtokenlist>DOMTokenList</a></code> object's underlying string.</li>
   7316 
   7317    <li>Return true.</li>
   7318 
   7319   </ol><p>Objects implementing the <code><a href=#domtokenlist>DOMTokenList</a></code> interface must
   7320   <dfn id=dom-tokenlist-tostring title=dom-tokenlist-toString>stringify</dfn> to the object's
   7321   underlying string representation.</p>
   7322 
   7323   </div>
   7324 
   7325 
   7326   <h4 id=domsettabletokenlist-0><span class=secno>2.7.4 </span>DOMSettableTokenList</h4>
   7327 
   7328   <p>The <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code> interface is the same as the
   7329   <code><a href=#domtokenlist>DOMTokenList</a></code> interface, except that it allows the
   7330   underlying string to be directly changed.</p>
   7331 
   7332   <pre class=idl>interface <dfn id=domsettabletokenlist>DOMSettableTokenList</dfn> : <a href=#domtokenlist>DOMTokenList</a> {
   7333             attribute DOMString <a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>;
   7334 };</pre>
   7335 
   7336   <dl class=domintro><dt><var title="">tokenlist</var> . <code title=dom-DOMSettableTokenList-value><a href=#dom-domsettabletokenlist-value>value</a></code></dt>
   7337    <dd>
   7338     <p>Returns the underlying string.</p>
   7339     <p>Can be set, to change the underlying string.</p>
   7340    </dd>
   7341 
   7342   </dl><div class=impl>
   7343 
   7344   <p>An object implementing the <code><a href=#domsettabletokenlist>DOMSettableTokenList</a></code>
   7345   interface must act as defined for the <code><a href=#domtokenlist>DOMTokenList</a></code>
   7346   interface, except for the <code title=dom-DOMSettableTokenList-value><a href=#dom-domsettabletokenlist-value>value</a></code> attribute defined
   7347   here.</p>
   7348 
   7349   <p>The <dfn id=dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value><code>value</code></dfn>
   7350   attribute must return the underlying string on getting, and must
   7351   replace the underlying string with the new value on setting.</p>
   7352 
   7353   </div>
   7354 
   7355 
   7356   <div class=impl>
   7357 
   7358   <h4 id=safe-passing-of-structured-data><span class=secno>2.7.5 </span>Safe passing of structured data</h4>
   7359 
   7360   <p>When a user agent is required to obtain a <dfn id=structured-clone>structured
   7361   clone</dfn> of an object, it must run the following algorithm, which
   7362   either returns a separate object, or throws an exception.</p>
   7363 
   7364   <ol><li><p>Let <var title="">input</var> be the object being
   7365    cloned.</li>
   7366 
   7367    <li><p>Let <var title="">memory</var> be a list of objects,
   7368    initially empty. (This is used to catch cycles.)</li>
   7369 
   7370    <li><p>Let <var title="">output</var> be the object resulting from
   7371    calling the <a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a> with
   7372    <var title="">input</var> and <var title="">memory</var>.</li>
   7373 
   7374    <li><p>Return <var title="">output</var>.</li>
   7375 
   7376   </ol><p>The <dfn id=internal-structured-cloning-algorithm>internal structured cloning algorithm</dfn> is always
   7377   called with two arguments, <var title="">input</var> and <var title="">memory</var>, and its behavior depends on the type of <var title="">input</var>, as follows:</p>
   7378 
   7379   <dl class=switch><dt>If <var title="">input</var> is the undefined value</dt>
   7380 
   7381    <dd><p>Return the undefined value.</dd>
   7382 
   7383    <dt>If <var title="">input</var> is the null value</dt>
   7384 
   7385    <dd><p>Return the null value.</dd>
   7386 
   7387    <dt>If <var title="">input</var> is the false value</dt>
   7388 
   7389    <dd><p>Return the false value.</dd>
   7390 
   7391    <dt>If <var title="">input</var> is the true value</dt>
   7392 
   7393    <dd><p>Return the true value.</dd>
   7394 
   7395    <dt>If <var title="">input</var> is a Number object</dt>
   7396 
   7397    <dd><p>Return a newly constructed Number object with the same value as <var title="">input</var>.</dd>
   7398 
   7399    <dt>If <var title="">input</var> is a String object</dt>
   7400 
   7401    <dd><p>Return a newly constructed String object with the same value as <var title="">input</var>.</dd>
   7402 
   7403    <dt>If <var title="">input</var> is a <code>Date</code> object</dt>
   7404 
   7405    <dd><p>Return a newly constructed <code>Date</code> object with the same value as <var title="">input</var>.</dd>
   7406 
   7407    <dt>If <var title="">input</var> is a <code>RegExp</code> object</dt>
   7408 
   7409    <dd>
   7410 
   7411     <p>Return a newly constructed <code>RegExp</code> object with the same pattern and flags as <var title="">input</var>.</p>
   7412 
   7413     <p class=note>The value of the <code title="">lastIndex</code> property is not copied.</p>
   7414 
   7415    </dd>
   7416 
   7417    <dt>If <var title="">input</var> is a <code><a href=#imagedata>ImageData</a></code> object</dt>
   7418 
   7419    <dd><p>Return a newly constructed <code><a href=#imagedata>ImageData</a></code> object
   7420    with the same <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> and
   7421    <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> as <var title="">input</var>, and with a newly constructed
   7422    <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> for its <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute, with the same
   7423    <code title=dom-canvaspixelarray-length><a href=#dom-canvaspixelarray-length>length</a></code> and pixel
   7424    values as the <var title="">input</var>'s.</dd>
   7425 
   7426    <dt>If <var title="">input</var> is a <code>File</code> object</dt>
   7427 
   7428    <dd><p>Return a newly constructed <code>File</code> object corresponding to the same underlying data.</dd>
   7429 
   7430    <dt>If <var title="">input</var> is a <code>Blob</code> object</dt>
   7431 
   7432    <dd><p>Return a newly constructed <code>Blob</code> object corresponding to the same underlying data.</dd>
   7433 
   7434    <dt>If <var title="">input</var> is a <code>FileList</code> object</dt>
   7435 
   7436    <dd><p>Return a newly constructed <code>FileList</code> object containing a list of newly constructed <code>File</code> objects corresponding to the same underlying data as those in <var title="">input</var>, maintaining their relative order.</dd>
   7437 
   7438    <dt>If <var title="">input</var> is an Array object</dt>
   7439    <dt>If <var title="">input</var> is an Object object</dt>
   7440 
   7441    <dd>
   7442 
   7443     <ol><li><p>If <var title="">input</var> is in <var title="">memory</var>, then throw a
   7444      <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception and abort the overall
   7445      <a href=#structured-clone>structured clone</a> algorithm.</li>
   7446 
   7447      <li><p>Otherwise, let <var title="">new memory</var> be a list
   7448      consisting of the items in <var title="">memory</var> with the
   7449      addition of <var title="">input</var>.</li>
   7450 
   7451      <li><p>Create a new object, <var title="">output</var>, of the
   7452      same type as <var title="">input</var>: either an Array or an
   7453      Object.</li>
   7454 
   7455      <li>
   7456 
   7457       <p>For each enumerable property in <var title="">input</var>,
   7458       add a corresponding property to <var title="">output</var>
   7459       having the same name, and having a value created from invoking
   7460       the <a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a>
   7461       recursively with the value of the property as the "<var title="">input</var>" argument and <var title="">new
   7462       memory</var> as the "<var title="">memory</var>" argument. The
   7463       order of the properties in the <var title="">input</var> and
   7464       <var title="">output</var> objects must be the same.</p>
   7465 
   7466       <p class=note>This does not walk the prototype chain.</p>
   7467 
   7468      </li>
   7469 
   7470      <li><p>Return <var title="">output</var>.</li>
   7471 
   7472     </ol></dd>
   7473 
   7474    <dt>If <var title="">input</var> is another native object type (e.g. <code>Error</code>)</dt>
   7475    <dt>If <var title="">input</var> is a host object (e.g. a DOM node)</dt>
   7476 
   7477    <dd><p>Throw a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception and abort
   7478    the overall <a href=#structured-clone>structured clone</a> algorithm.</dd>
   7479 
   7480   </dl></div>
   7481 
   7482 
   7483   <h4 id=domstringmap-0><span class=secno>2.7.6 </span>DOMStringMap</h4>
   7484 
   7485   <p>The <code><a href=#domstringmap>DOMStringMap</a></code> interface represents a set of
   7486   name-value pairs. It exposes these using the scripting language's
   7487   native mechanisms for property access.</p>
   7488 
   7489   <div class=impl>
   7490 
   7491   <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is instantiated, it is
   7492   associated with three algorithms, one for getting the list of
   7493   name-value pairs, one for setting names to certain values, and one
   7494   for deleting names.</p>
   7495 
   7496   <pre class=idl>interface <dfn id=domstringmap>DOMStringMap</dfn> {
   7497   getter DOMString (in DOMString name);
   7498   setter void (in DOMString name, in DOMString value);
   7499   creator void (in DOMString name, in DOMString value);
   7500   deleter void (in DOMString name);
   7501 };</pre>
   7502 
   7503   <p>The <span>names of the supported named properties</span> on a
   7504   <code><a href=#domstringmap>DOMStringMap</a></code> object at any instant are the names of
   7505   each pair returned from the algorithm for getting the list of
   7506   name-value pairs at that instant.</p>
   7507 
   7508   <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to retrieve a
   7509   named property <var title="">name</var>, the value returned must be
   7510   the value component of the name-value pair whose name component is
   7511   <var title="">name</var> in the list returned by the algorithm for
   7512   getting the list of name-value pairs.</p>
   7513 
   7514   <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to create or
   7515   modify a named property <var title="">name</var> with value <var title="">value</var>, the algorithm for setting names to certain
   7516   values must be run, passing <var title="">name</var> as the name and
   7517   the result of converting <var title="">value</var> to a
   7518   <code>DOMString</code> as the value.</p>
   7519 
   7520   <p>When a <code><a href=#domstringmap>DOMStringMap</a></code> object is indexed to delete a
   7521   named property named <var title="">name</var>, the algorithm for
   7522   deleting names must be run, passing <var title="">name</var> as the
   7523   name.</p>
   7524 
   7525   <p class=note>The <code><a href=#domstringmap>DOMStringMap</a></code> interface definition
   7526   here is only intended for JavaScript environments. Other language
   7527   bindings will need to define how <code><a href=#domstringmap>DOMStringMap</a></code> is to be
   7528   implemented for those languages.</p>
   7529 
   7530   </div>
   7531 
   7532   <div class=example>
   7533 
   7534    <p>The <code title=dom-dataset><a href=#dom-dataset>dataset</a></code> attribute on
   7535    elements exposes the <code title=attr-data-*><a href=#attr-data-*>data-*</a></code>
   7536    attributes on the element.</p>
   7537 
   7538    <p>Given the following fragment and elements with similar
   7539    constructions:</p>
   7540 
   7541    <pre>&lt;img class="tower" id="tower5" data-x="12" data-y="5"
   7542      data-ai="robotarget" data-hp="46" data-ability="flames"
   7543      src="towers/rocket.png alt="Rocket Tower"&gt;</pre>
   7544 
   7545    <p>...one could imagine a function <code title="">splashDamage()</code> that takes some arguments, the first
   7546    of which is the element to process:</p>
   7547 
   7548    <pre>function splashDamage(node, x, y, damage) {
   7549   if (node.classList.contains('tower') &amp;&amp; // checking the 'class' attribute
   7550       node.dataset.x == x &amp;&amp; // reading the 'data-x' attribute
   7551       node.dataset.y == y) { // reading the 'data-y' attribute
   7552     var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
   7553     hp = hp - damage;
   7554     if (hp &lt; 0) {
   7555       hp = 0;
   7556       node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
   7557       delete node.dataset.ability; // removing the 'data-ability' attribute
   7558     }
   7559     node.dataset.hp = hp; // setting the 'data-hp' attribute
   7560   }
   7561 }</pre>
   7562 
   7563   </div>
   7564 
   7565 
   7566   <h4 id=dom-feature-strings><span class=secno>2.7.7 </span>DOM feature strings</h4>
   7567 
   7568   <p>DOM3 Core defines mechanisms for checking for interface support,
   7569   and for obtaining implementations of interfaces, using <a href=http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures>feature
   7570   strings</a>. <a href=#refsDOMCORE>[DOMCORE]</a></p>
   7571 
   7572   <p>Authors are strongly discouraged from using these, as they are
   7573   notoriously unreliable and imprecise. Authors are encouraged to rely
   7574   on explicit feature testing or the graceful degradation behavior
   7575   intrinsic to some of the features in this specification.</p>
   7576 
   7577   <div class=impl>
   7578 
   7579   <p>For historical reasons, user agents should return the true value
   7580   when the <dfn id=hasfeature title=hasFeature><code>hasFeature(<var title="">feature</var>, <var title="">version</var>)</code></dfn>
   7581   method of the <code><a href=#domimplementation>DOMImplementation</a></code> interface is invoked
   7582   with <var title="">feature</var> set to either "<code title="">HTML</code>" or "<code title="">XHTML</code>" and <var title="">version</var> set to either "<code>1.0</code>" or
   7583   "<code>2.0</code>".</p>
   7584 
   7585   </div>
   7586 
   7587 
   7588   <h4 id=exceptions><span class=secno>2.7.8 </span>Exceptions</h4>
   7589 
   7590   <p>The following are <code><a href=#domexception>DOMException</a></code> codes. <a href=#refsDOMCORE>[DOMCORE]</a></p>
   7591 
   7592   <ol class=brief><li value=1><dfn id=index_size_err><code>INDEX_SIZE_ERR</code></dfn></li>
   7593    <li value=2><dfn id=domstring_size_err><code>DOMSTRING_SIZE_ERR</code></dfn></li>
   7594    <li value=3><dfn id=hierarchy_request_err><code>HIERARCHY_REQUEST_ERR</code></dfn></li>
   7595    <li value=4><dfn id=wrong_document_err><code>WRONG_DOCUMENT_ERR</code></dfn></li>
   7596    <li value=5><dfn id=invalid_character_err><code>INVALID_CHARACTER_ERR</code></dfn></li>
   7597    <li value=6><dfn id=no_data_allowed_err><code>NO_DATA_ALLOWED_ERR</code></dfn></li>
   7598    <li value=7><dfn id=no_modification_allowed_err><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn></li>
   7599    <li value=8><dfn id=not_found_err><code>NOT_FOUND_ERR</code></dfn></li>
   7600    <li value=9><dfn id=not_supported_err><code>NOT_SUPPORTED_ERR</code></dfn></li>
   7601    <li value=10><dfn id=inuse_attribute_err><code>INUSE_ATTRIBUTE_ERR</code></dfn></li>
   7602    <li value=11><dfn id=invalid_state_err><code>INVALID_STATE_ERR</code></dfn></li>
   7603    <li value=12><dfn id=syntax_err><code>SYNTAX_ERR</code></dfn></li>
   7604    <li value=13><dfn id=invalid_modification_err><code>INVALID_MODIFICATION_ERR</code></dfn></li>
   7605    <li value=14><dfn id=namespace_err><code>NAMESPACE_ERR</code></dfn></li>
   7606    <li value=15><dfn id=invalid_access_err><code>INVALID_ACCESS_ERR</code></dfn></li>
   7607    <li value=16><dfn id=validation_err><code>VALIDATION_ERR</code></dfn></li>
   7608    <li value=17><dfn id=type_mismatch_err><code>TYPE_MISMATCH_ERR</code></dfn></li>
   7609    <li value=18><dfn id=security_err><code>SECURITY_ERR</code></dfn></li> <!-- actually in XHR for now -->
   7610    <li value=19><dfn id=network_err><code>NETWORK_ERR</code></dfn></li> <!-- actually in XHR for now -->
   7611    <li value=20><dfn id=abort_err><code>ABORT_ERR</code></dfn></li> <!-- actually in XHR for now -->
   7612    <li value=21><dfn id=url_mismatch_err><code>URL_MISMATCH_ERR</code></dfn></li> <!-- actually in workers for now -->
   7613    <li value=22><dfn id=quota_exceeded_err><code>QUOTA_EXCEEDED_ERR</code></dfn></li> <!-- actually defined right here for now -->
   7614 <!--v2DATAGRID   <li value="23"><dfn><code>DATAGRID_MODEL_ERR</code></dfn></li> --> <!-- actually defined right here for now -->
   7615    <li value=81><dfn id=parse_err><code>PARSE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
   7616    <li value=82><dfn id=serialize_err><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
   7617   </ol><div class=impl>
   7618 
   7619   <h4 id=garbage-collection><span class=secno>2.7.9 </span>Garbage collection</h4>
   7620 
   7621   <p>There is an <dfn id=implied-strong-reference>implied strong reference</dfn> from any IDL
   7622   attribute that returns a pre-existing object to that object.</p>
   7623 
   7624   <div class=example>
   7625 
   7626    <p>For example, the <code>document.location</code> attribute means
   7627    that there is a strong reference from a <code><a href=#document>Document</a></code>
   7628    object to its <code><a href=#location>Location</a></code> object. Similarly, there is
   7629    always a strong reference from a <code><a href=#document>Document</a></code> to any
   7630    descendant nodes, and from any node to its owner
   7631    <code><a href=#document>Document</a></code>.</p>
   7632 
   7633   </div>
   7634 
   7635   </div>
   7636 
   7637 
   7638   <h3 id=namespaces><span class=secno>2.8 </span>Namespaces</h3>
   7639 
   7640   <p>The <dfn id=html-namespace-0>HTML namespace</dfn> is: <code>http://www.w3.org/1999/xhtml</code></p>
   7641 
   7642   <p>The <dfn id=mathml-namespace>MathML namespace</dfn> is: <code>http://www.w3.org/1998/Math/MathML</code></p>
   7643 
   7644   <p>The <dfn id=svg-namespace>SVG namespace</dfn> is: <code>http://www.w3.org/2000/svg</code></p>
   7645 
   7646   <p>The <dfn id=xlink-namespace>XLink namespace</dfn> is: <code>http://www.w3.org/1999/xlink</code></p>
   7647 
   7648   <p>The <dfn id=xml-namespace>XML namespace</dfn> is: <code>http://www.w3.org/XML/1998/namespace</code></p>
   7649 
   7650   <p>The <dfn id=xmlns-namespace>XMLNS namespace</dfn> is: <code>http://www.w3.org/2000/xmlns/</code></p>
   7651 
   7652   <hr><p>Data mining tools and other user agents that perform operations
   7653   on content without running scripts, evaluating CSS or XPath
   7654   expressions, or otherwise exposing the resulting DOM to arbitrary
   7655   content, may "support namespaces" by just asserting that their DOM
   7656   node analogues are in certain namespaces, without actually exposing
   7657   the above strings.</p>
   7658 
   7659 
   7660   <h2 id=dom><span class=secno>3 </span>Semantics, structure, and APIs of HTML documents</h2>
   7661 
   7662   <h3 id=documents><span class=secno>3.1 </span>Documents</h3>
   7663 
   7664   <p>Every XML and HTML document in an HTML UA is represented by a
   7665   <code><a href=#document>Document</a></code> object. <a href=#refsDOMCORE>[DOMCORE]</a></p>
   7666 
   7667   <p><dfn id="the-document's-address">The document's address</dfn> is an <a href=#absolute-url>absolute URL</a>
   7668   that is set when the <code><a href=#document>Document</a></code> is created. <dfn id="the-document's-current-address">The
   7669   document's current address</dfn> is an <a href=#absolute-url>absolute URL</a>
   7670   that can change during the lifetime of the <code><a href=#document>Document</a></code>,
   7671   for example when the user <a href=#navigate title=navigate>navigates</a> to
   7672   a <a href=#scroll-to-fragid title=navigate-fragid>fragment identifier</a> on the
   7673   page or when the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method is called
   7674   with a new <a href=#url>URL</a>. <span class=impl><a href="#the-document's-current-address">The document's
   7675   current address</a> must be set to <a href="#the-document's-address">the document's
   7676   address</a> when the <code><a href=#document>Document</a></code> is created.</span></p>
   7677 
   7678   <p class=note>Interactive user agents typically expose <a href="#the-document's-current-address">the
   7679   document's current address</a> in their user interface.</p>
   7680 
   7681   <p>When a <code><a href=#document>Document</a></code> is created by a <a href=#concept-script title=concept-script>script</a> using the <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
   7682   or <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
   7683   APIs, <a href="#the-document's-address">the document's address</a> is the same as <a href="#the-document's-address">the
   7684   document's address</a> of the <a href="#script's-document">script's document</a>.</p>
   7685 
   7686   <p><code><a href=#document>Document</a></code> objects are assumed to be <dfn id=xml-documents>XML
   7687   documents</dfn> unless they are flagged as being <dfn id=html-documents>HTML
   7688   documents</dfn> when they are created. Whether a document is an
   7689   <a href=#html-documents title="HTML documents">HTML document</a> or an <a href=#xml-documents title="XML documents">XML document</a> affects the behavior of
   7690   certain APIs and the case-sensitivity of some selectors.</p>
   7691 
   7692 
   7693 
   7694   <h4 id=documents-in-the-dom><span class=secno>3.1.1 </span>Documents in the DOM</h4>
   7695 
   7696   <p>All <code><a href=#document>Document</a></code> objects (in user agents implementing
   7697   this specification) <span class=impl>must</span> also implement
   7698   the <code><a href=#htmldocument>HTMLDocument</a></code> interface, available using
   7699   binding-specific methods. (This is the case whether or not the
   7700   document in question is an <a href=#html-documents title="HTML documents">HTML
   7701   document</a> or indeed whether it contains any <a href=#html-elements>HTML
   7702   elements</a> at all.) <code><a href=#document>Document</a></code> objects <span class=impl>must</span> also implement the document-level interface
   7703   of any other namespaces that the UA supports.</p>
   7704 
   7705   <p class=example>For example, if an HTML implementation also
   7706   supports SVG, then the <code><a href=#document>Document</a></code> object implements both
   7707   <code><a href=#htmldocument>HTMLDocument</a></code> and <code>SVGDocument</code>.</p>
   7708 
   7709   <p class=note>Because the <code><a href=#htmldocument>HTMLDocument</a></code> interface is
   7710   now obtained using binding-specific casting methods instead of
   7711   simply being the primary interface of the document object, it is no
   7712   longer defined as inheriting from <code><a href=#document>Document</a></code>.</p>
   7713 
   7714   <pre class=idl>[OverrideBuiltins]
   7715 interface <dfn id=htmldocument>HTMLDocument</dfn> {
   7716   // <a href=#resource-metadata-management>resource metadata management</a>
   7717   [PutForwards=<a href=#dom-location-href title=dom-location-href>href</a>] readonly attribute <a href=#location>Location</a> <a href=#dom-document-location title=dom-document-location>location</a>;
   7718   readonly attribute DOMString <a href=#dom-document-url title=dom-document-URL>URL</a>;
   7719            attribute DOMString <a href=#dom-document-domain title=dom-document-domain>domain</a>;
   7720   readonly attribute DOMString <a href=#dom-document-referrer title=dom-document-referrer>referrer</a>;
   7721            attribute DOMString <a href=#dom-document-cookie title=dom-document-cookie>cookie</a>;
   7722   readonly attribute DOMString <a href=#dom-document-lastmodified title=dom-document-lastModified>lastModified</a>;
   7723   readonly attribute DOMString <a href=#dom-document-compatmode title=dom-document-compatMode>compatMode</a>;
   7724            attribute DOMString <a href=#dom-document-charset title=dom-document-charset>charset</a>;
   7725   readonly attribute DOMString <a href=#dom-document-characterset title=dom-document-characterSet>characterSet</a>;
   7726   readonly attribute DOMString <a href=#dom-document-defaultcharset title=dom-document-defaultCharset>defaultCharset</a>;
   7727   readonly attribute DOMString <a href=#dom-document-readystate title=dom-document-readyState>readyState</a>;
   7728 
   7729   // <a href=#dom-tree-accessors>DOM tree accessors</a>
   7730   <a href=#dom-document-nameditem title=dom-document-namedItem>getter</a> any (in DOMString name);
   7731            attribute DOMString <a href=#document.title title=dom-document-title>title</a>;
   7732            attribute DOMString <a href=#dom-document-dir title=dom-document-dir>dir</a>;
   7733            attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-document-body title=dom-document-body>body</a>;
   7734   readonly attribute <a href=#htmlheadelement>HTMLHeadElement</a> <a href=#dom-document-head title=dom-document-head>head</a>;
   7735   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-images title=dom-document-images>images</a>;
   7736   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-embeds title=dom-document-embeds>embeds</a>;
   7737   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-plugins title=dom-document-plugins>plugins</a>;
   7738   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-links title=dom-document-links>links</a>;
   7739   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-forms title=dom-document-forms>forms</a>;
   7740   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-scripts title=dom-document-scripts>scripts</a>;
   7741   NodeList <a href=#dom-document-getelementsbyname title=dom-document-getElementsByName>getElementsByName</a>(in DOMString elementName);
   7742   NodeList <a href=#dom-document-getelementsbyclassname title=dom-document-getElementsByClassName>getElementsByClassName</a>(in DOMString classNames);
   7743   NodeList <a href=#dom-document-getitems title=dom-document-getItems>getItems</a>(in optional DOMString typeNames); // <a href=#microdata>microdata</a> <!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION-->
   7744 
   7745   // <a href=#dynamic-markup-insertion>dynamic markup insertion</a>
   7746            attribute DOMString <a href=#dom-innerhtml title=dom-innerHTML>innerHTML</a>;
   7747   <a href=#htmldocument>HTMLDocument</a> <a href=#dom-document-open title=dom-document-open>open</a>(in optional DOMString type, in optional DOMString replace);
   7748   <a href=#windowproxy>WindowProxy</a> <a href=#dom-document-open title=dom-document-open>open</a>(in DOMString url, in DOMString name, in DOMString features, in optional boolean replace);
   7749   void <a href=#dom-document-close title=dom-document-close>close</a>();
   7750   void <a href=#dom-document-write title=dom-document-write>write</a>(in DOMString... text);
   7751   void <a href=#dom-document-writeln title=dom-document-writeln>writeln</a>(in DOMString... text);
   7752 
   7753   // <a href=#editing>user interaction</a>
   7754   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-document-defaultview title=dom-document-defaultView>defaultView</a>;
   7755   <a href=#selection-0>Selection</a> <a href=#dom-document-getselection title=dom-document-getSelection>getSelection</a>();
   7756   readonly attribute <a href=#element>Element</a> <a href=#dom-document-activeelement title=dom-document-activeElement>activeElement</a>;
   7757   boolean <a href=#dom-document-hasfocus title=dom-document-hasFocus>hasFocus</a>();
   7758            attribute DOMString <a href=#designMode title=dom-document-designMode>designMode</a>;
   7759   boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId);
   7760   boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId, in boolean showUI);
   7761   boolean <a href=#execCommand title=dom-document-execCommand>execCommand</a>(in DOMString commandId, in boolean showUI, in DOMString value);
   7762   boolean <a href=#dom-document-querycommandenabled title=dom-document-queryCommandEnabled>queryCommandEnabled</a>(in DOMString commandId);
   7763   boolean <a href=#dom-document-querycommandindeterm title=dom-document-queryCommandIndeterm>queryCommandIndeterm</a>(in DOMString commandId);
   7764   boolean <a href=#dom-document-querycommandstate title=dom-document-queryCommandState>queryCommandState</a>(in DOMString commandId);
   7765   boolean <a href=#dom-document-querycommandsupported title=dom-document-queryCommandSupported>queryCommandSupported</a>(in DOMString commandId);
   7766   DOMString <a href=#dom-document-querycommandvalue title=dom-document-queryCommandValue>queryCommandValue</a>(in DOMString commandId);
   7767   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-commands title=dom-document-commands>commands</a>;
   7768 
   7769   // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
   7770            attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
   7771            attribute <a href=#function>Function</a> <a href=#handler-onblur title=handler-onblur>onblur</a>;
   7772            attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
   7773            attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
   7774            attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
   7775            attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
   7776            attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
   7777            attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
   7778            attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
   7779            attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
   7780            attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
   7781            attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
   7782            attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
   7783            attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
   7784            attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
   7785            attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
   7786            attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
   7787            attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
   7788            attribute <a href=#function>Function</a> <a href=#handler-onerror title=handler-onerror>onerror</a>;
   7789            attribute <a href=#function>Function</a> <a href=#handler-onfocus title=handler-onfocus>onfocus</a>;
   7790            attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
   7791            attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
   7792            attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
   7793            attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
   7794            attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
   7795            attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
   7796            attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
   7797            attribute <a href=#function>Function</a> <a href=#handler-onload title=handler-onload>onload</a>;
   7798            attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
   7799            attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
   7800            attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
   7801            attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
   7802            attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
   7803            attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
   7804            attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
   7805            attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
   7806            attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
   7807            attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
   7808            attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
   7809            attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
   7810            attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
   7811            attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
   7812            attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
   7813            attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
   7814            attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
   7815            attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
   7816            attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
   7817            attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
   7818            attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
   7819            attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
   7820            attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
   7821            attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
   7822            attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
   7823            attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
   7824 };
   7825 <a href=#document>Document</a> implements <a href=#htmldocument>HTMLDocument</a>;</pre>
   7826 
   7827   <p>Since the <code><a href=#htmldocument>HTMLDocument</a></code> interface holds methods and
   7828   attributes related to a number of disparate features, the members of
   7829   this interface are described in various different sections.</p>
   7830 
   7831 
   7832   <h4 id=security-document><span class=secno>3.1.2 </span>Security</h4>
   7833 
   7834   <p id=security>User agents <span class=impl>must</span> raise a
   7835   <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of
   7836   an <code><a href=#htmldocument>HTMLDocument</a></code> object are accessed by scripts whose
   7837   <a href=#effective-script-origin>effective script origin</a> is not the <a href=#same-origin title="same
   7838   origin">same</a> as the <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective
   7839   script origin</a>.</p>
   7840 
   7841 
   7842 
   7843   <h4 id=resource-metadata-management><span class=secno>3.1.3 </span><dfn>Resource metadata management</dfn></h4>
   7844 
   7845   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-URL><a href=#dom-document-url>URL</a></code></dt>
   7846    <dd>
   7847     <p>Returns <a href="#the-document's-address">the document's address</a>.</p>
   7848    </dd>
   7849 
   7850    <dt><var title="">document</var> . <code title=dom-document-referrer><a href=#dom-document-referrer>referrer</a></code></dt>
   7851    <dd>
   7852     <p>Returns <a href="#the-document's-current-address" title="the document's current address">the
   7853     address</a> of the <code><a href=#document>Document</a></code> from which the user
   7854     navigated to this one, unless it was blocked or there was no such
   7855     document, in which case it returns the empty string.</p>
   7856     <p>The <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> link
   7857     type can be used to block the referrer.</p>
   7858    </dd>
   7859 
   7860   </dl><div class=impl>
   7861 
   7862   <p>The <dfn id=dom-document-url title=dom-document-URL><code>URL</code></dfn>
   7863   attribute must return <a href="#the-document's-address">the document's address</a>.</p>
   7864 
   7865   <p>The <dfn id=dom-document-referrer title=dom-document-referrer><code>referrer</code></dfn> attribute
   7866   must return either the <a href="#the-document's-current-address" title="the document's current
   7867   address">current address</a> of the <a href=#active-document>active document</a>
   7868   of the <a href=#source-browsing-context>source browsing context</a> <em>at the time the
   7869   navigation was started</em> (that is, the page which <a href=#navigate title=navigate>navigated</a> the <a href=#browsing-context>browsing context</a>
   7870   to the current document), with any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component removed; or
   7871   the empty string if there is no such originating page, or if the UA
   7872   has been configured not to report referrers in this case, or if the
   7873   navigation was initiated for a <a href=#hyperlink>hyperlink</a> with a <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword.</p>
   7874 
   7875   </div>
   7876 
   7877   <p class=note>In the case of HTTP, the <code title=dom-document-referrer><a href=#dom-document-referrer>referrer</a></code> IDL attribute will
   7878   match the <code title=http-referer>Referer</code> (sic) header
   7879   that was sent when <a href=#fetch title=fetch>fetching</a> the current
   7880   page.</p>
   7881 
   7882   <p class=note>Typically user agents are configured to not report
   7883   referrers in the case where the referrer uses an encrypted protocol
   7884   and the current page does not (e.g. when navigating from an <code title="">https:</code> page to an <code title="">http:</code>
   7885   page).</p>
   7886 
   7887   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-cookie><a href=#dom-document-cookie>cookie</a></code> [ = <var title="">value</var> ]</dt>
   7888    <dd>
   7889     <p>Returns the HTTP cookies that apply to the
   7890     <code><a href=#document>Document</a></code>. If there are no cookies or cookies can't be
   7891     applied to this resource, the empty string will be returned.</p>
   7892     <p>Can be set, to add a new cookie to the element's set of HTTP
   7893     cookies.</p>
   7894     <p>If the contents are <a href=#sandboxed-origin-browsing-context-flag title="sandboxed origin browsing
   7895     context flag">sandboxed into a unique origin</a> (in an
   7896     <code><a href=#the-iframe-element>iframe</a></code> with the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute) or the
   7897     resource was labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>, a
   7898     <code><a href=#security_err>SECURITY_ERR</a></code> exception will be thrown on getting and
   7899     setting.</p>
   7900    </dd>
   7901 
   7902   </dl><div class=impl>
   7903 
   7904   <p>The <dfn id=dom-document-cookie title=dom-document-cookie><code>cookie</code></dfn>
   7905   attribute represents the cookies of the resource from which the
   7906   <code><a href=#document>Document</a></code> was created.</p>
   7907 
   7908   <p>Some <code><a href=#document>Document</a></code> objects are <dfn id=cookie-free-document-object title="cookie-free
   7909   Document object">cookie-free <code>Document</code>
   7910   objects</dfn>. Any <code><a href=#document>Document</a></code> object created by the <code title="">createDocument()</code> or <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
   7911   factory methods is a <a href=#cookie-free-document-object>cookie-free <code>Document</code>
   7912   object</a>. Any <code><a href=#document>Document</a></code> whose <a href="#the-document's-address" title="the
   7913   document's address">address</a> does not use a server-based
   7914   naming authority is a <a href=#cookie-free-document-object>cookie-free <code>Document</code>
   7915   object</a>. Other specifications can also define
   7916   <code><a href=#document>Document</a></code> objects as being <a href=#cookie-free-document-object title="cookie-free
   7917   Document object">cookie-free <code>Document</code>
   7918   objects</a>.</p>
   7919 
   7920   <p id=sandboxCookies>On getting, if the document is a
   7921   <a href=#cookie-free-document-object>cookie-free <code>Document</code> object</a>, then the user
   7922   agent must return the empty string. Otherwise, if the
   7923   <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a> is not a
   7924   scheme/host/port tuple, the user agent must raise a
   7925   <code><a href=#security_err>SECURITY_ERR</a></code> exception. Otherwise, the user agent must
   7926   first <a href=#obtain-the-storage-mutex>obtain the storage mutex</a> and then return the
   7927   cookie-string for <a href="#the-document's-address">the document's address</a> for a
   7928   "non-HTTP" API. <a href=#refsCOOKIES>[COOKIES]</a></p>
   7929 
   7930   <p>On setting, if the document is a <a href=#cookie-free-document-object>cookie-free
   7931   <code>Document</code> object</a>, then the user agent must do
   7932   nothing. Otherwise, if the <code><a href=#document>Document</a></code>'s
   7933   <a href=#origin>origin</a> is not a scheme/host/port tuple, the user agent
   7934   must raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception. Otherwise, the
   7935   user agent must <a href=#obtain-the-storage-mutex>obtain the storage mutex</a> and then act
   7936   as it would when <span title="receives a
   7937   set-cookie-string">receiving a set-cookie-string</span> for
   7938   <a href="#the-document's-address">the document's address</a> via a "non-HTTP" API, consisting
   7939   of the new value. <a href=#refsCOOKIES>[COOKIES]</a></p>
   7940 
   7941   <p class=note>Since the <code title=dom-document-cookie><a href=#dom-document-cookie>cookie</a></code> attribute is accessible
   7942   across frames, the path restrictions on cookies are only a tool to
   7943   help manage which cookies are sent to which parts of the site, and
   7944   are not in any way a security feature.</p>
   7945 
   7946   <hr></div>
   7947 
   7948   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-lastmodified><a href=#dom-document-lastmodified>lastModified</a></code></dt>
   7949    <dd>
   7950     <p>Returns the date of the last modification to the document, as
   7951     reported by the server, in the form "<code title="">MM/DD/YYYY&nbsp;hh:mm:ss</code>", in the user's local
   7952     time zone.</p>
   7953     <p>If the last modification date is not known, the current time is
   7954     returned instead.</p>
   7955    </dd>
   7956 
   7957   </dl><div class=impl>
   7958 
   7959   <p>The <dfn id=dom-document-lastmodified title=dom-document-lastModified><code>lastModified</code></dfn>
   7960   attribute, on getting, must return the date and time of the
   7961   <code><a href=#document>Document</a></code>'s source file's last modification, in the
   7962   user's local time zone, in the following format:</p>
   7963 
   7964   <ol><li> The month component of the date. </li>
   7965 
   7966    <li> A U+002F SOLIDUS character (/). </li>
   7967 
   7968    <li> The day component of the date. </li>
   7969 
   7970    <li> A U+002F SOLIDUS character (/). </li>
   7971 
   7972    <li> The year component of the date. </li>
   7973 
   7974    <li> A U+0020 SPACE character. </li>
   7975 
   7976    <li> The hours component of the time. </li>
   7977 
   7978    <li> A U+003A COLON character (:). </li>
   7979 
   7980    <li> The minutes component of the time. </li>
   7981 
   7982    <li> A U+003A COLON character (:). </li>
   7983 
   7984    <li> The seconds component of the time. </li>
   7985 
   7986   </ol><p>All the numeric components above, other than the year, must be
   7987   given as two digits in the range U+0030 DIGIT ZERO (0) to U+0039
   7988   DIGIT NINE (9) representing the number in base ten, zero-padded if
   7989   necessary. The year must be given as the shortest possible string of
   7990   four or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
   7991   DIGIT NINE (9) representing the number in base ten, zero-padded if
   7992   necessary.</p>
   7993 
   7994   <p>The <code><a href=#document>Document</a></code>'s source file's last modification date
   7995   and time must be derived from relevant features of the networking
   7996   protocols used, e.g. from the value of the HTTP <code title=http-last-modified>Last-Modified</code> header of the
   7997   document, or from metadata in the file system for local files. If
   7998   the last modification date and time are not known, the attribute
   7999   must return the current date and time in the above format.</p>
   8000 
   8001   <hr></div>
   8002 
   8003   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-compatmode><a href=#dom-document-compatmode>compatMode</a></code></dt>
   8004    <dd>
   8005     <p>In a conforming document, returns the string "<code title="">CSS1Compat</code>". (In <a href=#quirks-mode>quirks mode</a>
   8006     documents, returns the string "<code title="">BackCompat</code>",
   8007     but a conforming document can never trigger <a href=#quirks-mode>quirks
   8008     mode</a>.)</p>
   8009    </dd>
   8010 
   8011   </dl><div class=impl>
   8012 
   8013   <p>A <code><a href=#document>Document</a></code> is always set to one of three modes:
   8014   <dfn id=no-quirks-mode>no-quirks mode</dfn>, the default; <dfn id=quirks-mode>quirks mode</dfn>, used
   8015   typically for legacy documents; and <dfn id=limited-quirks-mode>limited-quirks mode</dfn>,
   8016   also known as "almost standards" mode. The mode is only ever changed
   8017   from the default by the <a href=#html-parser>HTML parser</a>, based on the
   8018   presence, absence, or value of the DOCTYPE string.</p>
   8019 
   8020   <p>The <dfn id=dom-document-compatmode title=dom-document-compatMode><code>compatMode</code></dfn> IDL
   8021   attribute must return the literal string "<code title="">CSS1Compat</code>" unless the document has been set to
   8022   <a href=#quirks-mode>quirks mode</a> by the <a href=#html-parser>HTML parser</a>, in which
   8023   case it must instead return the literal string "<code title="">BackCompat</code>".</p>
   8024 
   8025   <hr></div>
   8026 
   8027   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-charset><a href=#dom-document-charset>charset</a></code> [ = <var title="">value</var> ]</dt>
   8028    <dd>
   8029     <p>Returns the <a href="#document's-character-encoding">document's character encoding</a>.</p>
   8030     <p>Can be set, to dynamically change the <a href="#document's-character-encoding">document's
   8031     character encoding</a>.</p>
   8032     <p>New values that are not IANA-registered aliases supported by the user agent are ignored.</p>
   8033    </dd>
   8034 
   8035    <dt><var title="">document</var> . <code title=dom-document-characterSet><a href=#dom-document-characterset>characterSet</a></code></dt>
   8036    <dd>
   8037     <p>Returns the <a href="#document's-character-encoding">document's character encoding</a>.</p>
   8038    </dd>
   8039 
   8040    <dt><var title="">document</var> . <code title=dom-document-defaultCharset><a href=#dom-document-defaultcharset>defaultCharset</a></code></dt>
   8041    <dd>
   8042     <p>Returns what might be the user agent's default character
   8043     encoding. (The user agent might return another character encoding
   8044     altogether, e.g. to protect the user's privacy, or if the user
   8045     agent doesn't use a single default encoding.)</p>
   8046    </dd>
   8047 
   8048   </dl><div class=impl>
   8049 
   8050   <p>Documents have an associated <dfn id="document's-character-encoding" title="document's character
   8051   encoding">character encoding</dfn>. When a <code><a href=#document>Document</a></code>
   8052   object is created, the <a href="#document's-character-encoding">document's character encoding</a>
   8053   must be initialized to UTF-16. Various algorithms during page
   8054   loading affect this value, as does the <code title=dom-document-charset><a href=#dom-document-charset>charset</a></code> setter. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   8055 
   8056   <p>The <dfn id=dom-document-charset title=dom-document-charset><code>charset</code></dfn>
   8057   IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
   8058   name</a> of the <a href="#document's-character-encoding">document's character encoding</a>. On
   8059   setting, if the new value is an IANA-registered alias for a
   8060   character encoding supported by the user agent, the <a href="#document's-character-encoding">document's
   8061   character encoding</a> must be set to that character
   8062   encoding. (Otherwise, nothing happens.)</p>
   8063 
   8064   <p>The <dfn id=dom-document-characterset title=dom-document-characterSet><code>characterSet</code></dfn>
   8065   IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
   8066   name</a> of the <a href="#document's-character-encoding">document's character encoding</a>.</p>
   8067 
   8068   <p>The <dfn id=dom-document-defaultcharset title=dom-document-defaultCharset><code>defaultCharset</code></dfn>
   8069   IDL attribute must, on getting, return the <a href=#preferred-mime-name>preferred MIME
   8070   name</a> of a character encoding, possibly the user's default
   8071   encoding, or an encoding associated with the user's current
   8072   geographical location, or any arbitrary encoding name.</p>
   8073 
   8074   <hr></div>
   8075 
   8076   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-readyState><a href=#dom-document-readystate>readyState</a></code></dt>
   8077    <dd>
   8078     <p>Returns "loading" while the <code><a href=#document>Document</a></code> is loading, and "complete" once it has loaded.</p>
   8079     <p>The <code title=event-readystatechange>readystatechange</code> event fires on the <code><a href=#document>Document</a></code> object when this value changes.</p>
   8080    </dd>
   8081 
   8082   </dl><div class=impl>
   8083 
   8084   <p>Each document has a <dfn id=current-document-readiness>current document readiness</dfn>. When a
   8085   <code><a href=#document>Document</a></code> object is created, it must have its
   8086   <a href=#current-document-readiness>current document readiness</a> set to the string "loading"
   8087   if the document is associated with an <a href=#html-parser>HTML parser</a> or an
   8088   <a href=#xml-parser>XML parser</a>, or to the string "complete"
   8089   otherwise. Various algorithms during page loading affect this
   8090   value. When the value is set, the user agent must <a href=#fire-a-simple-event>fire a
   8091   simple event</a> named <code title=event-readystatechange>readystatechange</code> at the
   8092   <code><a href=#document>Document</a></code> object.</p>
   8093 
   8094   <p>A <code><a href=#document>Document</a></code> is said to have an <dfn id=active-parser>active
   8095   parser</dfn> if it is associated with an <a href=#html-parser>HTML parser</a> or
   8096   an <a href=#xml-parser>XML parser</a> that has not yet been <a href=#stop-parsing title="stop
   8097   parsing">stopped</a> or aborted.</p>
   8098 
   8099   <p>The <dfn id=dom-document-readystate title=dom-document-readyState><code>readyState</code></dfn> IDL
   8100   attribute must, on getting, return the <a href=#current-document-readiness>current document
   8101   readiness</a>.</p>
   8102 
   8103   </div>
   8104 
   8105 
   8106 
   8107   <h4 id=dom-tree-accessors><span class=secno>3.1.4 </span><dfn>DOM tree accessors</dfn></h4>
   8108 
   8109   <p><dfn id=the-html-element>The <code>html</code> element</dfn> of a document is the
   8110   document's root element, if there is one and it's an
   8111   <code><a href=#the-html-element-0>html</a></code> element, or null otherwise.</p>
   8112 
   8113   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-head><a href=#dom-document-head>head</a></code></dt>
   8114    <dd>
   8115     <p>Returns <a href=#the-head-element>the <code>head</code> element</a>.</p>
   8116    </dd>
   8117 
   8118   </dl><p><dfn id=the-head-element>The <code>head</code> element</dfn> of a document is the
   8119   first <code><a href=#the-head-element-0>head</a></code> element that is a child of <a href=#the-html-element>the
   8120   <code>html</code> element</a>, if there is one, or null
   8121   otherwise.</p>
   8122 
   8123   <div class=impl>
   8124 
   8125   <p>The <dfn id=dom-document-head title=dom-document-head><code>head</code></dfn>
   8126   attribute, on getting, must return <a href=#the-head-element>the <code>head</code>
   8127   element</a> of the document (a <code><a href=#the-head-element-0>head</a></code> element or
   8128   null).</p>
   8129 
   8130   </div>
   8131 
   8132   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-title><a href=#document.title>title</a></code> [ = <var title="">value</var> ]</dt>
   8133    <dd>
   8134     <p>Returns the document's title, as given by <a href=#the-title-element>the
   8135     <code>title</code> element</a>.</p>
   8136     <p>Can be set, to update the document's title. If there is no
   8137     <a href=#the-head-element title="the head element"><code>head</code> element</a>,
   8138     the new value is ignored.</p>
   8139     <p>In SVG documents, the <code>SVGDocument</code> interface's
   8140     <code title=dom-svg-title>title</code> attribute takes
   8141     precedence.</p>
   8142    </dd>
   8143 
   8144   </dl><p><dfn id=the-title-element>The <code>title</code> element</dfn> of a document is the
   8145   first <code><a href=#the-title-element-0>title</a></code> element in the document (in tree order), if
   8146   there is one, or null otherwise.</p>
   8147 
   8148   <div class=impl>
   8149 
   8150   <p>The <dfn id=document.title title=dom-document-title><code>title</code></dfn> attribute must,
   8151   on getting, run the following algorithm:</p>
   8152 
   8153   <ol><li><p>If the <a href=#root-element>root element</a> is an <code><a href=#svg>svg</a></code>
   8154    element in the "<code title="">http://www.w3.org/2000/svg</code>"
   8155    namespace, and the user agent supports SVG, then return the value
   8156    that would have been returned by the IDL attribute of the same name
   8157    on the <code>SVGDocument</code> interface. <a href=#refsSVG>[SVG]</a></li>
   8158 
   8159    <li><p>Otherwise, let <var title="">value</var> be a concatenation
   8160    of the data of all the child <a href=#text-node title="text node">text
   8161    nodes</a> of <a href=#the-title-element>the <code>title</code> element</a>, in
   8162    <a href=#tree-order>tree order</a>, or the empty string if <a href=#the-title-element>the
   8163    <code>title</code> element</a> is null.</li>
   8164 
   8165    <li><p>Replace any sequence of one or more consecutive <a href=#space-character title="space character">space characters</a> in <var title="">value</var> with a single U+0020 SPACE character.</li>
   8166 
   8167    <li><p>Remove any leading or trailing <a href=#space-character title="space
   8168    character">space characters</a> in <var title="">value</var>.</li>
   8169 
   8170    <li><p>Return <var title="">value</var>.</li>
   8171 
   8172   </ol><p>On setting, the following algorithm must be run. Mutation events
   8173   must be fired as appropriate.</p>
   8174 
   8175   <ol><li><p>If the <a href=#root-element>root element</a> is an <code><a href=#svg>svg</a></code>
   8176    element in the "<code title="">http://www.w3.org/2000/svg</code>"
   8177    namespace, and the user agent supports SVG, then the setter must
   8178    defer to the setter for the IDL attribute of the same name on the
   8179    <code>SVGDocument</code> interface (if it is readonly, then this
   8180    will raise an exception). Stop the algorithm here. <a href=#refsSVG>[SVG]</a></li>
   8181 
   8182    <li>If <a href=#the-title-element>the <code>title</code> element</a> is null and
   8183    <a href=#the-head-element>the <code>head</code> element</a> is null, then the
   8184    attribute must do nothing. Stop the algorithm here.</li>
   8185 
   8186    <li>If <a href=#the-title-element>the <code>title</code> element</a> is null, then a
   8187    new <code><a href=#the-title-element-0>title</a></code> element must be created and appended to
   8188    <a href=#the-head-element>the <code>head</code> element</a>. Let <var title="">element</var> be that element. Otherwise, let <var title="">element</var> be <a href=#the-title-element>the <code>title</code>
   8189    element</a>.</li>
   8190 
   8191    <li>The children of <var title="">element</var> (if any) must all
   8192    be removed.</li>
   8193 
   8194    <li>A single <code><a href=#text>Text</a></code> node whose data is the new value
   8195    being assigned must be appended to <var title="">element</var>.</li>
   8196 
   8197   </ol><p>The <code title=dom-document-title><a href=#document.title>title</a></code> attribute on
   8198   the <code><a href=#htmldocument>HTMLDocument</a></code> interface should shadow the attribute
   8199   of the same name on the <code>SVGDocument</code> interface when the
   8200   user agent supports both HTML and SVG. <a href=#refsSVG>[SVG]</a></p>
   8201 
   8202   </div>
   8203 
   8204   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-body><a href=#dom-document-body>body</a></code> [ = <var title="">value</var> ]</dt>
   8205    <dd>
   8206     <p>Returns <a href=#the-body-element>the body element</a>.</p>
   8207     <p>Can be set, to replace <a href=#the-body-element>the body element</a>.</p>
   8208     <p>If the new value is not a <code><a href=#the-body-element-0>body</a></code> or <code><a href=#frameset>frameset</a></code> element, this will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   8209    </dd>
   8210 
   8211   </dl><p><dfn id=the-body-element>The body element</dfn> of a document is the first child of
   8212   <a href=#the-html-element>the <code>html</code> element</a> that is either a
   8213   <code><a href=#the-body-element-0>body</a></code> element or a <code><a href=#frameset>frameset</a></code> element. If
   8214   there is no such element, it is null. <span class=impl>If the body
   8215   element is null, then when the specification requires that events be
   8216   fired at "the body element", they must instead be fired at the
   8217   <code><a href=#document>Document</a></code> object.</span></p>
   8218 
   8219   <div class=impl>
   8220 
   8221   <p>The <dfn id=dom-document-body title=dom-document-body><code>body</code></dfn>
   8222   attribute, on getting, must return <a href=#the-body-element>the body element</a> of
   8223   the document (either a <code><a href=#the-body-element-0>body</a></code> element, a
   8224   <code><a href=#frameset>frameset</a></code> element, or null). On setting, the following
   8225   algorithm must be run:</p>
   8226 
   8227   <ol><!-- if changes are requested:
   8228     http://lxr.mozilla.org/seamonkey/source/content/html/document/src/nsHTMLDocument.cpp
   8229     search for ::GetBody ::SetBody
   8230     http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLDocument.cpp
   8231     search for ::setBody
   8232     http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/dom/Document.cpp
   8233     search for ::body
   8234    --><li>If the new value is not a <code><a href=#the-body-element-0>body</a></code> or
   8235    <code><a href=#frameset>frameset</a></code> element, then raise a
   8236    <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception and abort these
   8237    steps.</li>
   8238 
   8239    <li>Otherwise, if the new value is the same as <a href=#the-body-element>the body
   8240    element</a>, do nothing. Abort these steps.</li>
   8241 
   8242    <li>Otherwise, if <a href=#the-body-element>the body element</a> is not null, then
   8243    replace that element with the new value in the DOM, as if the root
   8244    element's <code title="">replaceChild()</code> method had been
   8245    called with the new value and <a href=#the-body-element title="the body element">the
   8246    incumbent body element</a> as its two arguments respectively,
   8247    then abort these steps.</li>
   8248 
   8249    <li>Otherwise, <a href=#the-body-element>the body element</a> is null. Append
   8250    the new value to the root element.</li>
   8251 
   8252   </ol></div>
   8253 
   8254   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-images><a href=#dom-document-images>images</a></code></dt>
   8255    <dd>
   8256     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-img-element>img</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   8257    </dd>
   8258 
   8259    <dt><var title="">document</var> . <code title=dom-document-embeds><a href=#dom-document-embeds>embeds</a></code></dt>
   8260    <dt><var title="">document</var> . <code title=dom-document-plugins><a href=#dom-document-plugins>plugins</a></code></dt>
   8261    <dd>
   8262     <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-embed-element>embed</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   8263    </dd>
   8264 
   8265    <dt><var title="">document</var> . <code title=dom-document-links><a href=#dom-document-links>links</a></code></dt>
   8266    <dd>
   8267     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements in the <code><a href=#document>Document</a></code> that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes.</p>
   8268    </dd>
   8269 
   8270    <dt><var title="">document</var> . <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code></dt>
   8271    <dd>
   8272     <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-form-element>form</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   8273    </dd>
   8274 
   8275    <dt><var title="">document</var> . <code title=dom-document-scripts><a href=#dom-document-scripts>scripts</a></code></dt>
   8276    <dd>
   8277     <p>Return an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#script>script</a></code> elements in the <code><a href=#document>Document</a></code>.</p>
   8278    </dd>
   8279 
   8280   </dl><div class=impl>
   8281 
   8282   <!-- these all return the same object each time because of a rule in
   8283   the collection section -->
   8284 
   8285   <p>The <dfn id=dom-document-images title=dom-document-images><code>images</code></dfn>
   8286   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8287   <code><a href=#document>Document</a></code> node, whose filter matches only
   8288   <code><a href=#the-img-element>img</a></code> elements.</p>
   8289 
   8290   <p>The <dfn id=dom-document-embeds title=dom-document-embeds><code>embeds</code></dfn>
   8291   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8292   <code><a href=#document>Document</a></code> node, whose filter matches only
   8293   <code><a href=#the-embed-element>embed</a></code> elements.</p>
   8294 
   8295   <p>The <dfn id=dom-document-plugins title=dom-document-plugins><code>plugins</code></dfn>
   8296   attribute must return the same object as that returned by the <code title=dom-document-embeds><a href=#dom-document-embeds>embeds</a></code> attribute.</p>
   8297 
   8298   <p>The <dfn id=dom-document-links title=dom-document-links><code>links</code></dfn>
   8299   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8300   <code><a href=#document>Document</a></code> node, whose filter matches only <code><a href=#the-a-element>a</a></code>
   8301   elements with <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   8302   attributes and <code><a href=#the-area-element>area</a></code> elements with <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes.</p>
   8303 
   8304   <p>The <dfn id=dom-document-forms title=dom-document-forms><code>forms</code></dfn>
   8305   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8306   <code><a href=#document>Document</a></code> node, whose filter matches only
   8307   <code><a href=#the-form-element>form</a></code> elements.</p>
   8308 
   8309   <p>The <dfn id=dom-document-scripts title=dom-document-scripts><code>scripts</code></dfn>
   8310   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8311   <code><a href=#document>Document</a></code> node, whose filter matches only
   8312   <code><a href=#script>script</a></code> elements.</p>
   8313 
   8314   <hr></div>
   8315 
   8316   <dl class=domintro><dt><var title="">collection</var> = <var title="">document</var> . <code title=dom-document-getElementsByName><a href=#dom-document-getelementsbyname>getElementsByName</a></code>(<var title="">name</var>)</dt>
   8317    <dd>
   8318     <p>Returns a <code><a href=#nodelist>NodeList</a></code> of elements in the
   8319     <code><a href=#document>Document</a></code> that have a <code title="">name</code>
   8320     attribute with the value <var title="">name</var>.</p>
   8321    </dd>
   8322 
   8323    <dt><var title="">collection</var> = <var title="">document</var> . <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName(<var title="">classes</var>)</a></code></dt>
   8324    <dt><var title="">collection</var> = <var title="">element</var> . <code title=dom-getElementsByClassName><a href=#dom-getelementsbyclassname>getElementsByClassName(<var title="">classes</var>)</a></code></dt>
   8325    <dd>
   8326     <p>Returns a <code><a href=#nodelist>NodeList</a></code> of the elements in the object
   8327     on which the method was invoked (a <code><a href=#document>Document</a></code> or an
   8328     <code><a href=#element>Element</a></code>) that have all the classes given by <var title="">classes</var>.</p>
   8329     <p>The <var title="">classes</var> argument is interpreted as a
   8330     space-separated list of classes.</p>
   8331    </dd>
   8332 
   8333   </dl><div class=impl>
   8334 
   8335   <p>The <dfn id=dom-document-getelementsbyname title=dom-document-getElementsByName><code>getElementsByName(<var title="">name</var>)</code></dfn> method takes a string <var title="">name</var>, and must return a <a href=#live>live</a>
   8336   <code><a href=#nodelist>NodeList</a></code> containing all the <a href=#html-elements>HTML elements</a>
   8337   in that document that have a <code title="">name</code> attribute
   8338   whose value is equal to the <var title="">name</var> argument (in a
   8339   <a href=#case-sensitive>case-sensitive</a> manner), in <a href=#tree-order>tree order</a>.
   8340   When the method is invoked on a <code><a href=#document>Document</a></code> object again
   8341   with the same argument, the user agent may return the same as the
   8342   object returned by the earlier call. In other cases, a new
   8343   <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>
   8344 
   8345   <p>The <dfn id=dom-document-getelementsbyclassname title=dom-document-getElementsByClassName><code>getElementsByClassName(<var title="">classNames</var>)</code></dfn> method takes a string that
   8346   contains a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> representing
   8347   classes. When called, the method must return a <a href=#live>live</a>
   8348   <code><a href=#nodelist>NodeList</a></code> object containing all the elements in the
   8349   document, in <a href=#tree-order>tree order</a>, that have all the classes
   8350   specified in that argument, having obtained the classes by <a href=#split-a-string-on-spaces title="split a string on spaces">splitting a string on
   8351   spaces</a>. (Duplicates are ignored.) If there are no tokens
   8352   specified in the argument, then the method must return an empty
   8353   <code><a href=#nodelist>NodeList</a></code>. If the document is in <a href=#quirks-mode>quirks
   8354   mode</a>, then the comparisons for the classes must be done in an
   8355   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner, otherwise, the
   8356   comparisons must be done in a <a href=#case-sensitive>case-sensitive</a> manner.
   8357   When the method is invoked on a <code><a href=#document>Document</a></code> object again
   8358   with the same argument, the user agent may return the same object as
   8359   the object returned by the earlier call. In other cases, a new
   8360   <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>
   8361 
   8362   <p>The <dfn id=dom-getelementsbyclassname title=dom-getElementsByClassName><code>getElementsByClassName(<var title="">classNames</var>)</code></dfn> method on the
   8363   <code><a href=#htmlelement>HTMLElement</a></code> interface must return a <a href=#live>live</a>
   8364   <code><a href=#nodelist>NodeList</a></code> with the nodes that the
   8365   <code><a href=#htmldocument>HTMLDocument</a></code> <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName()</a></code>
   8366   method would return when passed the same argument(s), excluding any
   8367   elements that are not descendants of the <code><a href=#htmlelement>HTMLElement</a></code>
   8368   object on which the method was invoked.
   8369   When the method is invoked on an <code><a href=#htmlelement>HTMLElement</a></code> object
   8370   again with the same argument, the user agent may return the same
   8371   object as the object returned by the earlier call. In other cases, a
   8372   new <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>
   8373 
   8374   </div>
   8375 
   8376   <p>HTML, SVG, and MathML elements define which classes they are in
   8377   by having an attribute with no namespace with the name <code title="">class</code> containing a space-separated list of classes
   8378   to which the element belongs. Other specifications may also allow
   8379   elements in their namespaces to be labeled as being in specific
   8380   classes.</p>
   8381 
   8382   <div class=example>
   8383 
   8384    <p>Given the following XHTML fragment:</p>
   8385 
   8386    <pre>&lt;div id="example"&gt;
   8387  &lt;p id="p1" class="aaa bbb"/&gt;
   8388  &lt;p id="p2" class="aaa ccc"/&gt;
   8389  &lt;p id="p3" class="bbb ccc"/&gt;
   8390 &lt;/div&gt;</pre>
   8391 
   8392    <p>A call to <code title="">document.getElementById('example').getElementsByClassName('aaa')</code>
   8393    would return a <code><a href=#nodelist>NodeList</a></code> with the two paragraphs <code title="">p1</code> and <code title="">p2</code> in it.</p>
   8394 
   8395    <p>A call to <code title="">getElementsByClassName('ccc&nbsp;bbb')</code> would only
   8396    return one node, however, namely <code title="">p3</code>. A call
   8397    to <code title="">document.getElementById('example').getElementsByClassName('bbb&nbsp;&nbsp;ccc&nbsp;')</code>
   8398    would return the same thing.</p>
   8399 
   8400    <p>A call to <code title="">getElementsByClassName('aaa,bbb')</code> would return no
   8401    nodes; none of the elements above are in the "aaa,bbb" class.</p>
   8402 
   8403   </div>
   8404 
   8405 <!-- v2:
   8406 >         * xGetParentElementByClassName(rootElement, className, tagName) -
   8407 > Navigates upwards until we hit a parent element with the given class name and
   8408 > optional tag name.
   8409 -->
   8410 
   8411   <div class=impl>
   8412 
   8413   <hr><p>The <code><a href=#htmldocument>HTMLDocument</a></code> interface <span title="support
   8414   named properties">supports named properties</span>. The <span>names
   8415   of the supported named properties</span> at any moment consist of
   8416   the values of the <code title=attr-name>name</code> content
   8417   attributes of all the <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   8418   <code><a href=#the-form-element>form</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   8419   <a href=#fallback-free>fallback-free</a> <code><a href=#the-object-element>object</a></code> elements in the
   8420   <code><a href=#document>Document</a></code> that have <code title=attr-name>name</code>
   8421   content attributes, and the values of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes of all the
   8422   <code><a href=#the-applet-element>applet</a></code> and <a href=#fallback-free>fallback-free</a>
   8423   <code><a href=#the-object-element>object</a></code> elements in the <code><a href=#document>Document</a></code> that have
   8424   <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes, and the values
   8425   of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes of all the
   8426   <code><a href=#the-img-element>img</a></code> elements in the <code><a href=#document>Document</a></code> that have
   8427   both <code title=attr-name>name</code> content attributes and
   8428   <code title=attr-id><a href=#the-id-attribute>id</a></code> content attributes.</p>
   8429 
   8430   <p>When <dfn id=dom-document-nameditem title=dom-document-namedItem>the
   8431   <code>HTMLDocument</code> object is indexed for property
   8432   retrieval</dfn> using a name <var title="">name</var>, then the user
   8433   agent must return the value obtained using the following steps:</p>
   8434 
   8435   <ol><li>
   8436 
   8437     <p>Let <var title="">elements</var> be the list of <a href=#dom-document-nameditem-filter title=dom-document-namedItem-filter>named elements</a> with
   8438     the name <var title="">name</var> in the <code><a href=#document>Document</a></code>.
   8439 
   8440     <p class=note>There will be at least one such element, by
   8441     definition.<!-- (If there wasn't, then this algorithm wouldn't
   8442     have been invoked by Web IDL.) --></p>
   8443 
   8444    </li>
   8445 
   8446    <li>
   8447 
   8448     <p>If <var title="">elements</var> has only one element, and that
   8449     element is an <code><a href=#the-iframe-element>iframe</a></code> element, then return the
   8450     <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#nested-browsing-context>nested browsing
   8451     context</a> represented by that <code><a href=#the-iframe-element>iframe</a></code> element,
   8452     and abort these steps.</p>
   8453 
   8454    </li>
   8455 
   8456    <li>
   8457 
   8458     <p>Otherwise, if <var title="">elements</var> has only one
   8459     element, return that element and abort these steps.</p>
   8460 
   8461    </li>
   8462 
   8463    <li>
   8464 
   8465     <p>Otherwise return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   8466     <code><a href=#document>Document</a></code> node, whose filter matches only <a href=#dom-document-nameditem-filter title=dom-document-namedItem-filter>named elements</a> with
   8467     the name <var title="">name</var>.</p> <!-- the same one each time
   8468     is returned, because of the rule under collections -->
   8469 
   8470    </li>
   8471 
   8472   <!--
   8473   Note that this named getter overrides built-in properties, as in:
   8474      http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A...%3Ciframe%20name%3Dbody%3E%3C%2Fiframe%3E%3Cscript%3Ew(document.body)%3C%2Fscript%3E
   8475   This is what the "OverrideBuiltins" bit means in the IDL.
   8476   -->
   8477 
   8478   </ol><p><dfn id=dom-document-nameditem-filter title=dom-document-nameditem-filter>Named elements</dfn>
   8479   with the name <var title="">name</var>, for the purposes of the
   8480   above algorithm, are those that are either:</p>
   8481 
   8482   <ul><li><code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>,
   8483    <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
   8484    <a href=#fallback-free>fallback-free</a> <code><a href=#the-object-element>object</a></code> elements that have a
   8485    <code title=attr-name>name</code> content attribute whose value
   8486    is <var title="">name</var>, or</li>
   8487 
   8488    <li><code><a href=#the-applet-element>applet</a></code> or <a href=#fallback-free>fallback-free</a>
   8489    <code><a href=#the-object-element>object</a></code> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>, or</li>
   8490 
   8491    <li><code><a href=#the-img-element>img</a></code> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>, and that have a <code title=attr-name>name</code> content attribute present also.</li>
   8492 
   8493   </ul><p>An <code><a href=#the-object-element>object</a></code> element is said to be
   8494   <dfn id=fallback-free>fallback-free</dfn> if it has no <code><a href=#the-object-element>object</a></code> or
   8495   <code><a href=#the-embed-element>embed</a></code> descendants.</p>
   8496 
   8497   </div>
   8498 
   8499   <hr><p class=note>The <code title=dom-document-dir><a href=#dom-document-dir>dir</a></code>
   8500   attribute on the <code><a href=#htmldocument>HTMLDocument</a></code> interface is defined
   8501   along with the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content
   8502   attribute.</p>
   8503 
   8504 
   8505 
   8506   <h4 id=creating-documents><span class=secno>3.1.5 </span>Creating documents</h4>
   8507 
   8508   <p><a href=#xml-documents>XML documents</a> can be created from script using the
   8509   <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
   8510   method on the <code><a href=#domimplementation>DOMImplementation</a></code> interface.</p>
   8511 
   8512   <p><a href=#html-documents>HTML documents</a> can be created using the <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument()</a></code>
   8513   method:</p>
   8514 
   8515   <pre class=idl>[Supplemental, NoInterfaceObject]
   8516 interface <dfn id=domhtmlimplementation>DOMHTMLImplementation</dfn> {
   8517   <a href=#document>Document</a> <a href=#dom-domhtmlimplementation-createhtmldocument title=dom-DOMHTMLImplementation-createHTMLDocument>createHTMLDocument</a>(in DOMString title);
   8518 };
   8519 <a href=#domimplementation>DOMImplementation</a> implements <a href=#domhtmlimplementation>DOMHTMLImplementation</a>;</pre>
   8520 
   8521   <dl class=domintro><dt><var title="">document</var> = <var title="">document</var> . <code title=dom-document-implementation>implementation</code> . <code title=dom-DOMHTMLImplementation-createHTMLDocument><a href=#dom-domhtmlimplementation-createhtmldocument>createHTMLDocument</a></code>( <var title="">title</var> )</dt>
   8522    <dd>
   8523 
   8524     <p>Returns a new <code><a href=#document>Document</a></code>, with a basic DOM already
   8525     constructed with an appropriate <code><a href=#the-title-element-0>title</a></code> element.</p>
   8526 
   8527    </dd>
   8528 
   8529   </dl><div class=impl>
   8530 
   8531   <p>The <dfn id=dom-domhtmlimplementation-createhtmldocument title=dom-DOMHTMLImplementation-createHTMLDocument><code>createHTMLDocument(<var title="">title</var>)</code></dfn> method, when invoked, must run the
   8532   following steps:</p>
   8533 
   8534   <ol><li><p>Let <var title="">doc</var> be a newly created
   8535    <code><a href=#document>Document</a></code> object.</li>
   8536 
   8537    <li><p>Mark <var title="">doc</var> as being an <a href=#html-documents title="HTML
   8538    documents">HTML document</a>.</li>
   8539 
   8540    <li><p>Create a <code><a href=#documenttype>DocumentType</a></code> node with the <code title="">name</code> attribute set to the string "<code title="">html</code>", and the other attributes specific to
   8541    <code><a href=#documenttype>DocumentType</a></code> objects set to the empty string, null,
   8542    and empty lists, as appropriate. Append the newly created node to
   8543    <var title="">doc</var>.</li>
   8544 
   8545    <li><p>Create an <code><a href=#the-html-element-0>html</a></code> element, and append it to <var title="">doc</var>.</li>
   8546 
   8547    <li><p>Create a <code><a href=#the-head-element-0>head</a></code> element, and append it to the
   8548    <code><a href=#the-html-element-0>html</a></code> element created in the previous step.</p>
   8549 
   8550    <li><p>Create a <code><a href=#the-title-element-0>title</a></code> element, and append it to the
   8551    <code><a href=#the-head-element-0>head</a></code> element created in the previous step.</p>
   8552 
   8553    <li><p>Create a <code><a href=#text>Text</a></code> node, and set its <code title="">data</code> attribute to the string given by the method's
   8554    argument (which could be the empty string). Append it to the
   8555    <code><a href=#the-title-element-0>title</a></code> element created in the previous step.</p>
   8556 
   8557    <li><p>Create a <code><a href=#the-body-element-0>body</a></code> element, and append it to the
   8558    <code><a href=#the-html-element-0>html</a></code> element created in the earlier step.</p>
   8559 
   8560    <li><p>Return <var title="">doc</var>.</li>
   8561 
   8562   </ol></div>
   8563 
   8564 
   8565 
   8566   <h3 id=elements><span class=secno>3.2 </span>Elements</h3>
   8567 
   8568   <h4 id=semantics-0><span class=secno>3.2.1 </span>Semantics</h4>
   8569 
   8570   <p>Elements, attributes, and attribute values in HTML are defined
   8571   (by this specification) to have certain meanings (semantics). For
   8572   example, the <code><a href=#the-ol-element>ol</a></code> element represents an ordered list, and
   8573   the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute represents the
   8574   language of the content.</p>
   8575 
   8576   <p>Authors must not use elements, attributes, or attribute values
   8577   for purposes other than their appropriate intended semantic
   8578   purpose. Authors must not use elements, attributes, or attribute
   8579   values that are not permitted by this specification or <a href=#other-applicable-specifications>other
   8580   applicable specifications</a>.</p>
   8581 
   8582   <div class=example>
   8583    <p>For example, the following document is non-conforming, despite
   8584    being syntactically correct:</p>
   8585 
   8586    <pre class=bad>&lt;!DOCTYPE HTML&gt;
   8587 &lt;html lang="en-GB"&gt;
   8588  &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
   8589  &lt;body&gt;
   8590   &lt;table&gt;
   8591    &lt;tr&gt; &lt;td&gt; My favourite animal is the cat. &lt;/td&gt; &lt;/tr&gt;
   8592    &lt;tr&gt;
   8593     &lt;td&gt;
   8594      &mdash;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
   8595      in an essay from 1992
   8596     &lt;/td&gt;
   8597    &lt;/tr&gt;
   8598   &lt;/table&gt;
   8599  &lt;/body&gt;
   8600 &lt;/html&gt;</pre>
   8601 
   8602    <p>...because the data placed in the cells is clearly not tabular
   8603    data (and the <code><a href=#the-cite-element>cite</a></code> element mis-used). A corrected
   8604    version of this document might be:</p>
   8605 
   8606    <pre>&lt;!DOCTYPE HTML&gt;
   8607 &lt;html lang="en-GB"&gt;
   8608  &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
   8609  &lt;body&gt;
   8610   &lt;blockquote&gt;
   8611    &lt;p&gt; My favourite animal is the cat. &lt;/p&gt;
   8612   &lt;/blockquote&gt;
   8613   &lt;p&gt;
   8614    &mdash;&lt;a href="http://example.org/~ernest/"&gt;Ernest&lt;/a&gt;,
   8615    in an essay from 1992
   8616   &lt;/p&gt;
   8617  &lt;/body&gt;
   8618 &lt;/html&gt;</pre>
   8619 
   8620    <p>This next document fragment, intended to represent the heading
   8621    of a corporate site, is similarly non-conforming because the second
   8622    line is not intended to be a heading of a subsection, but merely a
   8623    subheading or subtitle (a subordinate heading for the same
   8624    section).</p>
   8625 
   8626    <pre class=bad>&lt;body&gt;
   8627  &lt;h1&gt;ABC Company&lt;/h1&gt;
   8628  &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
   8629  ...</pre>
   8630 
   8631    <p>The <code><a href=#the-hgroup-element>hgroup</a></code> element is intended for these kinds of
   8632    situations:</p>
   8633 
   8634    <pre>&lt;body&gt;
   8635  &lt;hgroup&gt;
   8636   &lt;h1&gt;ABC Company&lt;/h1&gt;
   8637   &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
   8638  &lt;/hgroup&gt;
   8639  ...</pre>
   8640 
   8641    <p>In the next example, there is a non-conforming attribute value
   8642    ("carpet") and a non-conforming attribute ("texture"), which
   8643    is not permitted by this specification:</p>
   8644 
   8645    <pre class=bad>&lt;label&gt;Carpet: &lt;input type="carpet" name="c" texture="deep pile"&gt;&lt;/label&gt;</pre>
   8646 
   8647    <p>Here would be an alternative and correct way to mark this up:</p>
   8648 
   8649    <pre>&lt;label&gt;Carpet: &lt;input type="text" class="carpet" name="c" data-texture="deep pile"&gt;&lt;/label&gt;</pre>
   8650 
   8651   </div>
   8652 
   8653   <p>Through scripting and using other mechanisms, the values of
   8654   attributes, text, and indeed the entire structure of the document
   8655   may change dynamically while a user agent is processing it. The
   8656   semantics of a document at an instant in time are those represented
   8657   by the state of the document at that instant in time, and the
   8658   semantics of a document can therefore change over time. User agents
   8659   <span class=impl>must</span> update their presentation of the
   8660   document as this occurs.</p>
   8661 
   8662   <p class=example>HTML has a <code><a href=#the-progress-element>progress</a></code> element that
   8663   describes a progress bar. If its "value" attribute is dynamically
   8664   updated by a script, the UA would update the rendering to show the
   8665   progress changing.</p>
   8666 
   8667 
   8668 
   8669   <h4 id=elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</h4>
   8670 
   8671   <p>The nodes representing <a href=#html-elements>HTML elements</a> in the DOM
   8672   <span class=impl>must</span> implement, and expose to scripts, the
   8673   interfaces listed for them in the relevant sections of this
   8674   specification. This includes <a href=#html-elements>HTML elements</a> in <a href=#xml-documents>XML
   8675   documents</a>, even when those documents are in another context
   8676   (e.g. inside an XSLT transform).</p>
   8677 
   8678   <p>Elements in the DOM <a href=#represents title=represents>represent</a>
   8679   things; that is, they have intrinsic <em>meaning</em>, also known as
   8680   semantics.</p>
   8681 
   8682   <p class=example>For example, an <code><a href=#the-ol-element>ol</a></code> element
   8683   represents an ordered list.</p>
   8684 
   8685   <p>The basic interface, from which all the <a href=#html-elements>HTML
   8686   elements</a>' interfaces inherit, <span class=impl>and which
   8687   must be used by elements that have no additional
   8688   requirements,</span> is the <code><a href=#htmlelement>HTMLElement</a></code> interface.</p>
   8689 
   8690   <pre class=idl>interface <dfn id=htmlelement>HTMLElement</dfn> : <a href=#element>Element</a> {
   8691   // <a href=#dom-tree-accessors>DOM tree accessors</a>
   8692   NodeList <a href=#dom-getelementsbyclassname title=dom-getElementsByClassName>getElementsByClassName</a>(in DOMString classNames);
   8693 
   8694   // <a href=#dynamic-markup-insertion>dynamic markup insertion</a>
   8695            attribute DOMString <a href=#dom-innerhtml title=dom-innerHTML>innerHTML</a>;
   8696            attribute DOMString <a href=#dom-outerhtml title=dom-outerHTML>outerHTML</a>;
   8697   void <a href=#dom-insertadjacenthtml title=dom-insertAdjacentHTML>insertAdjacentHTML</a>(in DOMString position, in DOMString text);
   8698 
   8699   // <span>metadata attributes</span>
   8700            attribute DOMString <a href=#dom-id title=dom-id>id</a>;
   8701            attribute DOMString <a href=#dom-title title=dom-title>title</a>;
   8702            attribute DOMString <a href=#dom-lang title=dom-lang>lang</a>;
   8703            attribute DOMString <a href=#dom-dir title=dom-dir>dir</a>;
   8704            attribute <span>DOMString</span> <a href=#dom-classname title=dom-className>className</a>;
   8705   readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-classlist title=dom-classList>classList</a>;
   8706   readonly attribute <a href=#domstringmap>DOMStringMap</a> <a href=#dom-dataset title=dom-dataset>dataset</a>;
   8707 
   8708   // <a href=#microdata>microdata</a> <!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION-->
   8709            attribute boolean <a href=#dom-itemscope title=dom-itemScope>itemScope</a>;
   8710            attribute DOMString <a href=#dom-itemtype title=dom-itemType>itemType</a>;
   8711            attribute DOMString <a href=#dom-itemid title=dom-itemId>itemId</a>;
   8712   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-itemref title=dom-itemRef>itemRef</a>;
   8713   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-itemprop title=dom-itemProp>itemProp</a>;
   8714   readonly attribute <a href=#htmlpropertiescollection>HTMLPropertiesCollection</a> <a href=#dom-properties title=dom-properties>properties</a>;
   8715            attribute any <a href=#dom-itemvalue title=dom-itemValue>itemValue</a>;
   8716 
   8717   // <a href=#editing>user interaction</a>
   8718            attribute boolean <a href=#dom-hidden title=dom-hidden>hidden</a>;
   8719   void <a href=#dom-click title=dom-click>click</a>();
   8720   void <a href=#dom-scrollintoview title=dom-scrollIntoView>scrollIntoView</a>();
   8721   void <a href=#dom-scrollintoview title=dom-scrollIntoView>scrollIntoView</a>(in boolean top);
   8722            attribute long <a href=#dom-tabindex title=dom-tabindex>tabIndex</a>;
   8723   void <a href=#dom-focus title=dom-focus>focus</a>();
   8724   void <a href=#dom-blur title=dom-blur>blur</a>();
   8725            attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
   8726   readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
   8727            attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
   8728            attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
   8729   readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
   8730            attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
   8731            attribute DOMString <a href=#dom-spellcheck title=dom-spellcheck>spellcheck</a>;
   8732 
   8733   // <a href=#command-api>command API</a>
   8734   readonly attribute DOMString <a href=#dom-command-ro-commandtype title=dom-command-ro-commandType>commandType</a>;
   8735   readonly attribute DOMString <a href=#dom-command-ro-label title=dom-command-ro-label>label</a>;
   8736   readonly attribute DOMString <a href=#dom-command-ro-icon title=dom-command-ro-icon>icon</a>;
   8737   readonly attribute boolean <a href=#dom-command-ro-disabled title=dom-command-ro-disabled>disabled</a>;
   8738   readonly attribute boolean <a href=#dom-command-ro-checked title=dom-command-ro-checked>checked</a>;<!-- v2COMMAND
   8739   readonly attribute <span>HTMLCollection</span> <span title="dom-command-ro-triggers">triggers</span>;-->
   8740 
   8741   // <span>styling</span>
   8742   readonly attribute <span>CSSStyleDeclaration</span> <a href=#dom-style title=dom-style>style</a>;
   8743 
   8744   // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
   8745            attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
   8746            attribute <a href=#function>Function</a> <a href=#handler-onblur title=handler-onblur>onblur</a>;
   8747            attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
   8748            attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
   8749            attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
   8750            attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
   8751            attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
   8752            attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
   8753            attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
   8754            attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
   8755            attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
   8756            attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
   8757            attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
   8758            attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
   8759            attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
   8760            attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
   8761            attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
   8762            attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
   8763            attribute <a href=#function>Function</a> <a href=#handler-onerror title=handler-onerror>onerror</a>;
   8764            attribute <a href=#function>Function</a> <a href=#handler-onfocus title=handler-onfocus>onfocus</a>;
   8765            attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
   8766            attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
   8767            attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
   8768            attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
   8769            attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
   8770            attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
   8771            attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
   8772            attribute <a href=#function>Function</a> <a href=#handler-onload title=handler-onload>onload</a>;
   8773            attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
   8774            attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
   8775            attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
   8776            attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
   8777            attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
   8778            attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
   8779            attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
   8780            attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
   8781            attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
   8782            attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
   8783            attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
   8784            attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
   8785            attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
   8786            attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
   8787            attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
   8788            attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
   8789            attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
   8790            attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
   8791            attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
   8792            attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
   8793            attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
   8794            attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
   8795            attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
   8796            attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
   8797            attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
   8798            attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
   8799 };
   8800 
   8801 interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlelement>HTMLElement</a> { };</pre>
   8802 
   8803   <p>The <code><a href=#htmlelement>HTMLElement</a></code> interface holds methods and
   8804   attributes related to a number of disparate features, and the
   8805   members of this interface are therefore described in various
   8806   different sections of this specification.</p>
   8807 
   8808   <div class=impl>
   8809 
   8810   <p>The <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code> interface must be used for
   8811   <a href=#html-elements>HTML elements</a> that are not defined by this
   8812   specification (or <a href=#other-applicable-specifications>other applicable specifications</a>).</p>
   8813 
   8814   </div>
   8815 
   8816 
   8817 
   8818   <h4 id=global-attributes><span class=secno>3.2.3 </span><dfn>Global attributes</dfn></h4>
   8819 
   8820   <p>The following attributes are common to and may be specified on
   8821   all <a href=#html-elements>HTML elements</a><span class=impl> (even those not
   8822   defined in this specification)</span>:</p>
   8823 
   8824   <ul class=brief><li><code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code></li>
   8825    <li><code title=attr-class><a href=#classes>class</a></code></li>
   8826    <li><code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code></li>
   8827    <li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
   8828    <li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
   8829    <li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
   8830    <li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
   8831    <li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
   8832 <!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
   8833    <li><code title=attr-itemid><a href=#attr-itemid>itemid</a></code></li>
   8834    <li><code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code></li>
   8835    <li><code title=attr-itemref><a href=#attr-itemref>itemref</a></code></li>
   8836    <li><code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code></li>
   8837    <li><code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code></li>
   8838 
   8839    <li><code title=attr-lang><a href=#attr-lang>lang</a></code></li>
   8840    <li><code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code></li>
   8841    <li><code title=attr-style><a href=#the-style-attribute>style</a></code></li>
   8842    <li><code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code></li>
   8843    <li><code title=attr-title><a href=#the-title-attribute>title</a></code></li>
   8844   </ul><hr><p>The following <a href=#event-handler-content-attributes>event handler content attributes</a> may
   8845   be specified on any <a href=#html-elements title="HTML elements">HTML
   8846   element</a>:</p>
   8847 
   8848   <ul class=brief><li><code title=handler-onabort><a href=#handler-onabort>onabort</a></code></li>
   8849    <li><code title=handler-onblur><a href=#handler-onblur>onblur</a></code>*</li>
   8850    <li><code title=handler-oncanplay><a href=#handler-oncanplay>oncanplay</a></code></li>
   8851    <li><code title=handler-oncanplaythrough><a href=#handler-oncanplaythrough>oncanplaythrough</a></code></li>
   8852    <li><code title=handler-onchange><a href=#handler-onchange>onchange</a></code></li>
   8853    <li><code title=handler-onclick><a href=#handler-onclick>onclick</a></code></li>
   8854    <li><code title=handler-oncontextmenu><a href=#handler-oncontextmenu>oncontextmenu</a></code></li>
   8855    <li><code title=handler-ondblclick><a href=#handler-ondblclick>ondblclick</a></code></li>
   8856    <li><code title=handler-ondrag><a href=#handler-ondrag>ondrag</a></code></li>
   8857    <li><code title=handler-ondragend><a href=#handler-ondragend>ondragend</a></code></li>
   8858    <li><code title=handler-ondragenter><a href=#handler-ondragenter>ondragenter</a></code></li>
   8859    <li><code title=handler-ondragleave><a href=#handler-ondragleave>ondragleave</a></code></li>
   8860    <li><code title=handler-ondragover><a href=#handler-ondragover>ondragover</a></code></li>
   8861    <li><code title=handler-ondragstart><a href=#handler-ondragstart>ondragstart</a></code></li>
   8862    <li><code title=handler-ondrop><a href=#handler-ondrop>ondrop</a></code></li>
   8863    <li><code title=handler-ondurationchange><a href=#handler-ondurationchange>ondurationchange</a></code></li>
   8864    <li><code title=handler-onemptied><a href=#handler-onemptied>onemptied</a></code></li>
   8865    <li><code title=handler-onended><a href=#handler-onended>onended</a></code></li>
   8866    <li><code title=handler-onerror><a href=#handler-onerror>onerror</a></code>*</li>
   8867    <li><code title=handler-onfocus><a href=#handler-onfocus>onfocus</a></code>*</li>
   8868    <li><code title=handler-onformchange><a href=#handler-onformchange>onformchange</a></code></li>
   8869    <li><code title=handler-onforminput><a href=#handler-onforminput>onforminput</a></code></li>
   8870    <li><code title=handler-oninput><a href=#handler-oninput>oninput</a></code></li>
   8871    <li><code title=handler-oninvalid><a href=#handler-oninvalid>oninvalid</a></code></li>
   8872    <li><code title=handler-onkeydown><a href=#handler-onkeydown>onkeydown</a></code></li>
   8873    <li><code title=handler-onkeypress><a href=#handler-onkeypress>onkeypress</a></code></li>
   8874    <li><code title=handler-onkeyup><a href=#handler-onkeyup>onkeyup</a></code></li>
   8875    <li><code title=handler-onload><a href=#handler-onload>onload</a></code>*</li>
   8876    <li><code title=handler-onloadeddata><a href=#handler-onloadeddata>onloadeddata</a></code></li>
   8877    <li><code title=handler-onloadedmetadata><a href=#handler-onloadedmetadata>onloadedmetadata</a></code></li>
   8878    <li><code title=handler-onloadstart><a href=#handler-onloadstart>onloadstart</a></code></li>
   8879    <li><code title=handler-onmousedown><a href=#handler-onmousedown>onmousedown</a></code></li>
   8880    <li><code title=handler-onmousemove><a href=#handler-onmousemove>onmousemove</a></code></li>
   8881    <li><code title=handler-onmouseout><a href=#handler-onmouseout>onmouseout</a></code></li>
   8882    <li><code title=handler-onmouseover><a href=#handler-onmouseover>onmouseover</a></code></li>
   8883    <li><code title=handler-onmouseup><a href=#handler-onmouseup>onmouseup</a></code></li>
   8884    <li><code title=handler-onmousewheel><a href=#handler-onmousewheel>onmousewheel</a></code></li>
   8885    <li><code title=handler-onpause><a href=#handler-onpause>onpause</a></code></li>
   8886    <li><code title=handler-onplay><a href=#handler-onplay>onplay</a></code></li>
   8887    <li><code title=handler-onplaying><a href=#handler-onplaying>onplaying</a></code></li>
   8888    <li><code title=handler-onprogress><a href=#handler-onprogress>onprogress</a></code></li>
   8889    <li><code title=handler-onratechange><a href=#handler-onratechange>onratechange</a></code></li>
   8890    <li><code title=handler-onreadystatechange><a href=#handler-onreadystatechange>onreadystatechange</a></code></li>
   8891    <li><code title=handler-onscroll><a href=#handler-onscroll>onscroll</a></code></li>
   8892    <li><code title=handler-onseeked><a href=#handler-onseeked>onseeked</a></code></li>
   8893    <li><code title=handler-onseeking><a href=#handler-onseeking>onseeking</a></code></li>
   8894    <li><code title=handler-onselect><a href=#handler-onselect>onselect</a></code></li>
   8895    <li><code title=handler-onshow><a href=#handler-onshow>onshow</a></code></li>
   8896    <li><code title=handler-onstalled><a href=#handler-onstalled>onstalled</a></code></li>
   8897    <li><code title=handler-onsubmit><a href=#handler-onsubmit>onsubmit</a></code></li>
   8898    <li><code title=handler-onsuspend><a href=#handler-onsuspend>onsuspend</a></code></li>
   8899    <li><code title=handler-ontimeupdate><a href=#handler-ontimeupdate>ontimeupdate</a></code></li>
   8900    <li><code title=handler-onvolumechange><a href=#handler-onvolumechange>onvolumechange</a></code></li>
   8901    <li><code title=handler-onwaiting><a href=#handler-onwaiting>onwaiting</a></code></li>
   8902   </ul><p class=note>The attributes marked with an asterisk have a
   8903   different meaning when specified on <code><a href=#the-body-element-0>body</a></code> elements as
   8904   those elements expose <a href=#event-handlers>event handlers</a> of the
   8905   <code><a href=#window>Window</a></code> object with the same names.</p>
   8906 
   8907   <p class=note>While these attributes apply to all elements, they
   8908   are not useful on all elements. For example, only <a href=#media-element title="media
   8909   element">media elements</a> will ever receive a <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> event fired by
   8910   the user agent.</p>
   8911 
   8912   <hr><p><a href=#custom-data-attribute title="custom data attribute">Custom data attributes</a>
   8913   (e.g. <code title="">data-foldername</code> or <code title="">data-msgid</code>) can be specified on any <a href=#html-elements title="HTML elements">HTML element</a>, to store custom data
   8914   specific to the page.</p>
   8915 
   8916   <hr><p>In <a href=#html-documents>HTML documents</a>, elements in the <a href=#html-namespace-0>HTML
   8917   namespace</a> may have an <code title="">xmlns</code> attribute
   8918   specified, if, and only if, it has the exact value
   8919   "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to
   8920   <a href=#xml-documents>XML documents</a>.</p>
   8921 
   8922   <p class=note>In HTML, the <code title="">xmlns</code> attribute
   8923   has absolutely no effect. It is basically a talisman. It is allowed
   8924   merely to make migration to and from XHTML mildly easier. When
   8925   parsed by an <a href=#html-parser>HTML parser</a>, the attribute ends up in no
   8926   namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>"
   8927   namespace like namespace declaration attributes in XML do.</p>
   8928 
   8929   <p class=note>In XML, an <code title="">xmlns</code> attribute is
   8930   part of the namespace declaration mechanism, and an element cannot
   8931   actually have an <code title="">xmlns</code> attribute in no
   8932   namespace specified.</p>
   8933 
   8934   <hr><p>To enable assistive technology products to expose a more
   8935   fine-grained interface than is otherwise possible with HTML elements
   8936   and attributes, a set of <a href=#annotations-for-assistive-technology-products-(aria)>annotations for assistive technology
   8937   products</a> can be specified (the ARIA <code title=attr-aria-role>role</code> and <code title=attr-aria-*>aria-*</code> attributes).</p>
   8938 
   8939 
   8940   <h5 id=the-id-attribute><span class=secno>3.2.3.1 </span>The <dfn title=attr-id><code>id</code></dfn> attribute</h5>
   8941 
   8942   <p>The <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute specifies its
   8943   element's <dfn id=concept-id title=concept-id>unique identifier (ID)</dfn>. The
   8944   value must be unique amongst all the IDs in the element's <a href=#home-subtree>home
   8945   subtree</a> and must contain at least one character. The value
   8946   must not contain any <a href=#space-character title="space character">space
   8947   characters</a>.</p>
   8948 
   8949   <!-- space characters are disallowed because space-separated lists
   8950   of IDs otherwise would not be able to reach all valid IDs -->
   8951 
   8952   <p class=note>An element's <a href=#concept-id title=concept-id>unique
   8953   identifier</a> can be used for a variety of purposes, most
   8954   notably as a way to link to specific parts of a document using
   8955   fragment identifiers, as a way to target an element when scripting,
   8956   and as a way to style a specific element from CSS.</p>
   8957 
   8958   <div class=impl>
   8959 
   8960   <p>If the value is not the empty string, user agents must associate
   8961   the element with the given value (exactly, including any space
   8962   characters) for the purposes of ID matching within the element's
   8963   <a href=#home-subtree>home subtree</a> (e.g. for selectors in CSS or for the
   8964   <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code>
   8965   method in the DOM).</p>
   8966 
   8967   <p>Identifiers are opaque strings. Particular meanings should not be
   8968   derived from the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code>
   8969   attribute.</p>
   8970 
   8971   <p>This specification doesn't preclude an element having multiple
   8972   IDs, if other mechanisms (e.g. DOM Core methods) can set an
   8973   element's ID in a way that doesn't conflict with the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute.</p>
   8974 
   8975   <p>The <dfn id=dom-id title=dom-id><code>id</code></dfn> IDL attribute must
   8976   <a href=#reflect>reflect</a> the <code title=attr-id><a href=#the-id-attribute>id</a></code> content
   8977   attribute.</p>
   8978 
   8979   </div>
   8980 
   8981 
   8982   <h5 id=the-title-attribute><span class=secno>3.2.3.2 </span>The <dfn title=attr-title><code>title</code></dfn> attribute</h5>
   8983 
   8984   <p>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   8985   <a href=#represents>represents</a> advisory information for the element, such
   8986   as would be appropriate for a tooltip. On a link, this could be the
   8987   title or a description of the target resource; on an image, it could
   8988   be the image credit or a description of the image; on a paragraph,
   8989   it could be a footnote or commentary on the text; on a citation, it
   8990   could be further information about the source; and so forth. The
   8991   value is text.</p>
   8992 
   8993   <p>If this attribute is omitted from an element, then it implies
   8994   that the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of the
   8995   nearest ancestor <a href=#html-elements title="HTML elements">HTML element</a>
   8996   with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute set is also
   8997   relevant to this element. Setting the attribute overrides this,
   8998   explicitly stating that the advisory information of any ancestors is
   8999   not relevant to this element. Setting the attribute to the empty
   9000   string indicates that the element has no advisory information.</p>
   9001 
   9002   <p>If the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute's value
   9003   contains U+000A LINE FEED (LF) characters, the content is split into
   9004   multiple lines. Each U+000A LINE FEED (LF) character represents a
   9005   line break.</p>
   9006 
   9007   <div class=example>
   9008 
   9009    <p>Caution is advised with respect to the use of newlines in <code title=attr-title><a href=#the-title-attribute>title</a></code> attributes.</p>
   9010 
   9011    <p>For instance, the following snippet actually defines an
   9012    abbreviation's expansion <em>with a line break in it</em>:</p>
   9013 
   9014    <pre class=bad>&lt;p&gt;My logs show that there was some interest in &lt;abbr title="Hypertext
   9015 Transport Protocol"&gt;HTTP&lt;/abbr&gt; today.&lt;/p&gt;</pre>
   9016 
   9017   </div>
   9018 
   9019   <p>Some elements, such as <code><a href=#the-link-element>link</a></code>, <code><a href=#the-abbr-element>abbr</a></code>, and
   9020   <code><a href=#the-input-element>input</a></code>, define additional semantics for the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute beyond the semantics
   9021   described above.</p>
   9022 
   9023   <div class=impl>
   9024 
   9025   <hr><p>The <dfn id=dom-title title=dom-title><code>title</code></dfn> IDL attribute
   9026   must <a href=#reflect>reflect</a> the <code title=attr-title><a href=#the-title-attribute>title</a></code>
   9027   content attribute.</p>
   9028 
   9029   </div>
   9030 
   9031 
   9032 
   9033   <h5 id=the-lang-and-xml:lang-attributes><span class=secno>3.2.3.3 </span>The <code title=attr-lang><a href=#attr-lang>lang</a></code> and <code title=attr-xml-lang><a href=#attr-xml-lang>xml:lang</a></code> attributes</h5>
   9034 
   9035   <p>The <dfn id=attr-lang title=attr-lang><code>lang</code></dfn> attribute (in
   9036   no namespace) specifies the primary language for the element's
   9037   contents and for any of the element's attributes that contain
   9038   text. Its value must be a valid BCP 47 language tag, or the empty
   9039   string. Setting the attribute to the empty string indicates that the
   9040   primary language is unknown<!-- UA conformance requirements for this
   9041   are below -->. <a href=#refsBCP47>[BCP47]</a></p>
   9042 
   9043   <p>The <dfn id=attr-xml-lang title=attr-xml-lang><code title="">lang</code></dfn>
   9044   attribute in the <a href=#xml-namespace>XML namespace</a> is defined in XML. <a href=#refsXML>[XML]</a></p>
   9045 
   9046   <p>If these attributes are omitted from an element, then the
   9047   language of this element is the same as the language of its parent
   9048   element, if any.</p>
   9049 
   9050   <p>The <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no namespace
   9051   may be used on any <a href=#html-elements title="HTML elements">HTML
   9052   element</a>.</p>
   9053 
   9054   <p>The <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
   9055   attribute in the <span>XML namespace</span></a> may be used on
   9056   <a href=#html-elements>HTML elements</a> in <a href=#xml-documents>XML documents</a>, as well as
   9057   elements in other namespaces if the relevant specifications allow it
   9058   (in particular, MathML and SVG allow <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attributes in the
   9059   <span>XML namespace</span></a> to be specified on their
   9060   elements). If both the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute
   9061   in no namespace and the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
   9062   namespace</span></a> are specified on the same element, they must
   9063   have exactly the same value when compared in an <a href=#ascii-case-insensitive>ASCII
   9064   case-insensitive</a> manner.</p>
   9065 
   9066   <p>Authors must not use the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
   9067   namespace</span></a> on <a href=#html-elements>HTML elements</a> in <a href=#html-documents>HTML
   9068   documents</a>. To ease migration to and from XHTML, authors may
   9069   specify an attribute in no namespace with no prefix and with the
   9070   literal localname "<code title="">xml:lang</code>" on <a href=#html-elements>HTML
   9071   elements</a> in <a href=#html-documents>HTML documents</a>, but such attributes
   9072   must only be specified if a <code title=attr-lang><a href=#attr-lang>lang</a></code>
   9073   attribute in no namespace is also specified, and both attributes
   9074   must have the same value when compared in an <a href=#ascii-case-insensitive>ASCII
   9075   case-insensitive</a> manner.</p>
   9076 
   9077   <p class=note>The attribute in no namespace with no prefix and
   9078   with the literal localname "<code title="">xml:lang</code>" has no
   9079   effect on language processing.</p>
   9080 
   9081   <div class=impl>
   9082 
   9083   <hr><p>To determine the <dfn id=language>language</dfn> of a node, user agents must
   9084   look at the nearest ancestor element (including the element itself
   9085   if the node is an element) that has a <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the
   9086   <span>XML namespace</span></a> set or is an <a href=#html-elements title="HTML
   9087   elements">HTML element</a> and has a <code title=attr-lang><a href=#attr-lang>lang</a></code> in no namespace attribute set. That
   9088   attribute specifies the language of the node (regardless of its
   9089   value).</p>
   9090 
   9091   <p>If both the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no
   9092   namespace and the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute in the <span>XML
   9093   namespace</span></a> are set on an element, user agents must use
   9094   the <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attribute
   9095   in the <span>XML namespace</span></a>, and the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute in no namespace must be
   9096   <a href=#ignore title=ignore>ignored</a> for the purposes of determining
   9097   the element's language.</p>
   9098 
   9099   <p>If none of the node's ancestors, including the <a href=#root-element>root
   9100   element</a>, have either attribute set, but there is a
   9101   <a href=#pragma-set-default-language>pragma-set default language</a> set, then that is the
   9102   language of the node. If there is no <a href=#pragma-set-default-language>pragma-set default
   9103   language</a> set, then language information from a higher-level
   9104   protocol (such as HTTP), if any, must be used as the final fallback
   9105   language instead. In the absence of any such language information,
   9106   and in cases where the higher-level protocol reports multiple
   9107   languages, the language of the node is unknown, and the
   9108   corresponding language tag is the empty string.</p>
   9109 
   9110   <p>If the resulting value is not a recognized language tag, then it
   9111   must be treated as an unknown language having the given language
   9112   tag, distinct from all other languages. For the purposes of
   9113   round-tripping or communicating with other services that expect
   9114   language tags, user agents should pass unknown language tags
   9115   through unmodified.</p>
   9116 
   9117   <p class=example>Thus, for instance, an element with <code title="">lang="xyzzy"</code> would be matched by the selector <code title="">:lang(xyzzy)</code> (e.g. in CSS), but it would not be
   9118   matched by <code title="">:lang(abcde)</code>, even though both are
   9119   equally invalid. Similarly, if a Web browser and screen reader
   9120   working in unison communicated about the language of the element,
   9121   the browser would tell the screen reader that the language was
   9122   "xyzzy", even if it knew it was invalid, just in case the screen
   9123   reader actually supported a language with that tag after all.</p>
   9124 
   9125   <p>If the resulting value is the empty string, then it must be
   9126   interpreted as meaning that the language of the node is explicitly
   9127   unknown.</p>
   9128 
   9129   <hr><p>User agents may use the element's language to determine proper
   9130   processing or rendering (e.g. in the selection of appropriate
   9131   fonts or pronunciations, or for dictionary selection). <!--User
   9132   agents must not use the element's language to determine text
   9133   directionality. (commented out because text directionality is a
   9134   rendering-level concern.)--></p>
   9135 
   9136   <hr><p>The <dfn id=dom-lang title=dom-lang><code>lang</code></dfn> IDL attribute
   9137   must <a href=#reflect>reflect</a> the <code title=attr-lang><a href=#attr-lang>lang</a></code>
   9138   content attribute in no namespace.</p>
   9139 
   9140   </div>
   9141 
   9142 
   9143 
   9144   <h5 id=the-xml:base-attribute-(xml-only)><span class=secno>3.2.3.4 </span>The <dfn title=attr-xml-base><code>xml:base</code></dfn>
   9145   attribute (XML only)</h5>
   9146 
   9147   <p>The <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute is
   9148   defined in XML Base. <a href=#refsXMLBASE>[XMLBASE]</a></p>
   9149 
   9150   <p>The <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute may be
   9151   used on elements of <a href=#xml-documents>XML documents</a>. Authors must not
   9152   use the <code title=attr-xml-base><a href=#the-xml:base-attribute-(xml-only)>xml:base</a></code> attribute in
   9153   <a href=#html-documents>HTML documents</a>.</p>
   9154 
   9155 
   9156   <h5 id=the-dir-attribute><span class=secno>3.2.3.5 </span>The <dfn title=attr-dir><code>dir</code></dfn> attribute</h5>
   9157 
   9158   <p>The <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute specifies the
   9159   element's text directionality. The attribute is an <a href=#enumerated-attribute>enumerated
   9160   attribute</a> with the keyword <code title="">ltr</code> mapping
   9161   to the state <i>ltr</i>, and the keyword <code title="">rtl</code>
   9162   mapping to the state <i>rtl</i>. The attribute has no <i>invalid
   9163   value default</i> and no <i>missing value default</i>.</p>
   9164 
   9165   <div class=impl>
   9166 
   9167   <p>The processing of this attribute is primarily performed by the
   9168   presentation layer. For example, the rendering section in this
   9169   specification defines a mapping from this attribute to the CSS
   9170   'direction' and 'unicode-bidi' properties, and CSS defines rendering
   9171   in terms of those properties.</p>
   9172 
   9173   </div>
   9174 
   9175   <p><dfn id=the-directionality>The directionality</dfn> of an element, which is used in
   9176   particular by the <code><a href=#the-canvas-element>canvas</a></code> element's text rendering API,
   9177   is either 'ltr' or 'rtl'. If the user agent supports CSS and the
   9178   'direction' property on this element has a computed value of either
   9179   'ltr' or 'rtl', then that is <a href=#the-directionality>the directionality</a> of the
   9180   element. Otherwise, if the element is <a href=#being-rendered>being rendered</a>,
   9181   then <a href=#the-directionality>the directionality</a> of the element is the
   9182   directionality used by the presentation layer, potentially
   9183   determined from the value of the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
   9184   attribute on the element. Otherwise, if the element's <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute has the state <i>ltr</i>, the
   9185   element's directionality is 'ltr' (left-to-right); if the attribute
   9186   has the state <i>rtl</i>, the element's directionality is 'rtl'
   9187   (right-to-left); and otherwise, the element's directionality is the
   9188   same as its parent element, or 'ltr' if there is no parent
   9189   element.</p>
   9190 
   9191   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-dir><a href=#dom-dir>dir</a></code> [ = <var title="">value</var> ]</dt>
   9192    <dd>
   9193     <p>Returns <a href=#the-html-element>the <code>html</code> element</a>'s <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute's value, if any.</p>
   9194     <p>Can be set, to either "<code title="">ltr</code>" or "<code title="">rtl</code>", to replace <a href=#the-html-element>the <code>html</code> element</a>'s <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute's value.</p>
   9195     <p>If there is no <a href=#the-html-element title="the html element"><code>html</code> element</a>, returns the empty string and ignores new values.</p>
   9196    </dd>
   9197 
   9198   </dl><div class=impl>
   9199 
   9200   <p>The <dfn id=dom-dir title=dom-dir><code>dir</code></dfn> IDL attribute on
   9201   an element must <a href=#reflect>reflect</a> the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content attribute of that element,
   9202   <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
   9203 
   9204   <p>The <dfn id=dom-document-dir title=dom-document-dir><code>dir</code></dfn> IDL
   9205   attribute on <code><a href=#htmldocument>HTMLDocument</a></code> objects must
   9206   <a href=#reflect>reflect</a> the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> content
   9207   attribute of <a href=#the-html-element>the <code>html</code> element</a>, if any,
   9208   <a href=#limited-to-only-known-values>limited to only known values</a>. If there is no such
   9209   element, then the attribute must return the empty string and do
   9210   nothing on setting.</p>
   9211 
   9212   </div>
   9213 
   9214   <p class=note>Authors are strongly encouraged to use the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> attribute to indicate text direction
   9215   rather than using CSS, since that way their documents will continue
   9216   to render correctly even in the absence of CSS (e.g. as interpreted
   9217   by search engines).</p>
   9218 
   9219 
   9220   <h5 id=classes><span class=secno>3.2.3.6 </span>The <dfn title=attr-class><code>class</code></dfn> attribute</h5>
   9221 
   9222   <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have a
   9223   <code title=attr-class><a href=#classes>class</a></code> attribute specified.</p>
   9224 
   9225   <p>The attribute, if specified, must have a value that is a
   9226   <a href=#set-of-space-separated-tokens>set of space-separated tokens</a> representing the various
   9227   classes that the element belongs to.</p>
   9228 
   9229   <div class=impl>
   9230 
   9231   <p>The classes that an <a href=#html-elements title="HTML elements">HTML
   9232   element</a> has assigned to it consists of all the classes
   9233   returned when the value of the <code title=attr-class><a href=#classes>class</a></code>
   9234   attribute is <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   9235   spaces</a>. (Duplicates are ignored.)</p>
   9236 
   9237   </div>
   9238 
   9239   <p class=note>Assigning classes to an element affects class
   9240   matching in selectors in CSS, the <code title=dom-document-getElementsByClassName><a href=#dom-document-getelementsbyclassname>getElementsByClassName()</a></code>
   9241   method in the DOM, and other such features.</p>
   9242 
   9243   <p>There are no additional restrictions on the tokens authors can
   9244   use in the <code title=attr-class><a href=#classes>class</a></code> attribute, but
   9245   authors are encouraged to use values that describe the nature of the
   9246   content, rather than values that describe the desired presentation
   9247   of the content.</p>
   9248 
   9249   <div class=impl>
   9250 
   9251   <hr><p>The <dfn id=dom-classname title=dom-className><code>className</code></dfn> and
   9252   <dfn id=dom-classlist title=dom-classList><code>classList</code></dfn> IDL
   9253   attributes must both <a href=#reflect>reflect</a> the <code title=attr-class><a href=#classes>class</a></code> content attribute.</p>
   9254 
   9255   </div>
   9256 
   9257 
   9258 
   9259   <h5 id=the-style-attribute><span class=secno>3.2.3.7 </span>The <dfn title=attr-style><code>style</code></dfn> attribute</h5>
   9260 
   9261   <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-style><a href=#the-style-attribute>style</a></code> content attribute set. This is a
   9262   <span>CSS styling attribute</span> as defined by the CSS Styling
   9263   Attribute Syntax specification. <a href=#refsCSSATTR>[CSSATTR]</a></p>
   9264 
   9265   <div class=impl>
   9266 
   9267   <p>In user agents that support CSS, the attribute's value must be
   9268   parsed when the attribute is added or has its value changed<!-- so
   9269   dynamic changes to the base URL don't affect the CSS -->, according
   9270   to the rules given for <span>CSS styling attributes</span>. <a href=#refsCSSATTR>[CSSATTR]</a></p>
   9271 
   9272   </div>
   9273 
   9274   <p>Documents that use <code title=attr-style><a href=#the-style-attribute>style</a></code>
   9275   attributes on any of their elements must still be comprehensible and
   9276   usable if those attributes were removed.</p>
   9277 
   9278   <p class=note>In particular, using the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute to hide and show content,
   9279   or to convey meaning that is otherwise not included in the document,
   9280   is non-conforming. (To hide and show content, use the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute.)</p>
   9281 
   9282   <hr><dl class=domintro><dt><var title="">element</var> . <code title=dom-style><a href=#dom-style>style</a></code></dt>
   9283    <dd>
   9284     <p>Returns a <code>CSSStyleDeclaration</code> object for the element's <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute.</p>
   9285    </dd>
   9286 
   9287   </dl><div class=impl>
   9288 
   9289   <p>The <dfn id=dom-style title=dom-style><code>style</code></dfn> IDL attribute
   9290   must return a <code>CSSStyleDeclaration</code> whose value
   9291   represents the declarations specified in the attribute, if
   9292   present. Mutating the <code>CSSStyleDeclaration</code> object must
   9293   create a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute on the
   9294   element (if there isn't one already) and then change its value to be
   9295   a value representing the serialized form of the
   9296   <code>CSSStyleDeclaration</code> object. The same object must be
   9297   returned each time. <a href=#refsCSSOM>[CSSOM]</a></p>
   9298 
   9299   </div>
   9300 
   9301   <div class=example>
   9302 
   9303    <p>In the following example, the words that refer to colors are
   9304    marked up using the <code><a href=#the-span-element>span</a></code> element and the <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute to make those words show
   9305    up in the relevant colors in visual media.</p>
   9306 
   9307    <pre>&lt;p&gt;My sweat suit is &lt;span style="color: green; background:
   9308 transparent"&gt;green&lt;/span&gt; and my eyes are &lt;span style="color: blue;
   9309 background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>
   9310 
   9311   </div>
   9312 
   9313 
   9314 
   9315   <h5 id=embedding-custom-non-visible-data><span class=secno>3.2.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5>
   9316 
   9317   <p>A <dfn id=custom-data-attribute>custom data attribute</dfn> is an attribute in no
   9318   namespace whose name starts with the string "<dfn id=attr-data-* title=attr-data-*><code>data-</code></dfn>", has at least one
   9319   character after the hyphen, is <a href=#xml-compatible>XML-compatible</a>, and
   9320   contains no characters in the range U+0041 to U+005A (LATIN CAPITAL
   9321   LETTER A to LATIN CAPITAL LETTER Z).</p>
   9322 
   9323   <p class=note>All attributes on <a href=#html-elements>HTML elements</a> in
   9324   <a href=#html-documents>HTML documents</a> get ASCII-lowercased automatically, so
   9325   the restriction on ASCII uppercase letters doesn't affect such
   9326   documents.</p>
   9327 
   9328   <p><a href=#custom-data-attribute title="custom data attribute">Custom data attributes</a>
   9329   are intended to store custom data private to the page or
   9330   application, for which there are no more appropriate attributes or
   9331   elements.</p>
   9332 
   9333   <p>These attributes are not intended for use by software that is
   9334   independent of the site that uses the attributes.</p>
   9335 
   9336   <div class=example>
   9337 
   9338    <p>For instance, a site about music could annotate list items
   9339    representing tracks in an album with custom data attributes
   9340    containing the length of each track. This information could then be
   9341    used by the site itself to allow the user to sort the list by track
   9342    length, or to filter the list for tracks of certain lengths.</p>
   9343 
   9344    <pre>&lt;ol&gt;
   9345  &lt;li data-length="2m11s"&gt;Beyond The Sea&lt;/li&gt;
   9346  ...
   9347 &lt;/ol&gt;</pre>
   9348 
   9349    <p>It would be inappropriate, however, for the user to use generic
   9350    software not associated with that music site to search for tracks
   9351    of a certain length by looking at this data.</p>
   9352 
   9353    <p>This is because these attributes are intended for use by the
   9354    site's own scripts, and are not a generic extension mechanism for
   9355    publicly-usable metadata.</p>
   9356 
   9357   </div>
   9358 
   9359   <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have
   9360   any number of <a href=#custom-data-attribute title="custom data attribute">custom data
   9361   attributes</a> specified, with any value.</p>
   9362 
   9363   <hr><dl class=domintro><dt><var title="">element</var> . <code title=dom-dataset><a href=#dom-dataset>dataset</a></code></dt>
   9364    <dd>
   9365 
   9366     <p>Returns a <code><a href=#domstringmap>DOMStringMap</a></code> object for the element's <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes.</p>
   9367 
   9368     <p>Hyphenated names become camel-cased. For example, <code title="">data-foo-bar=""</code> becomes <code title="">element.dataset.fooBar</code>.</p>
   9369 
   9370    </dd>
   9371 
   9372   </dl><div class=impl>
   9373 
   9374   <p>The <dfn id=dom-dataset title=dom-dataset><code>dataset</code></dfn> IDL
   9375   attribute provides convenient accessors for all the <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes on an element. On
   9376   getting, the <code title=dom-dataset><a href=#dom-dataset>dataset</a></code> IDL attribute
   9377   must return a <code><a href=#domstringmap>DOMStringMap</a></code> object, associated with the
   9378   following algorithms, which expose these attributes on their
   9379   element:</p>
   9380 
   9381   <dl><dt>The algorithm for getting the list of name-value pairs</dt>
   9382 
   9383    <dd>
   9384     <ol><li>Let <var title="">list</var> be an empty list of name-value
   9385      pairs.</li>
   9386 
   9387      <li>For each content attribute on the element whose first five
   9388      characters are the string "<code title="">data-</code>" and whose
   9389      remaining characters (if any) do not include any characters in
   9390      the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN
   9391      CAPITAL LETTER Z), add a name-value pair to <var title="">list</var> whose name is the attribute's name with the
   9392      first five characters removed and whose value is the attribute's
   9393      value.</li>
   9394 
   9395      <li>For each name on the list, for each U+002D HYPHEN-MINUS
   9396      character (-) in the name that is followed by a character in the
   9397      range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A
   9398      LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character
   9399      (-) and replace the character that followed it by the same
   9400      character <a href=#converted-to-ascii-uppercase>converted to ASCII uppercase</a>.</li>
   9401 
   9402      <li>Return <var title="">list</var>.</li>
   9403 
   9404     </ol></dd>
   9405 
   9406    <dt>The algorithm for setting names to certain values</dt>
   9407 
   9408    <dd>
   9409     <ol><li>Let <var title="">name</var> be the name passed to the
   9410      algorithm.</li>
   9411 
   9412      <li>Let <var title="">value</var> be the value passed to the
   9413      algorithm.</li>
   9414 
   9415      <li>If <var title="">name</var> contains a U+002D HYPHEN-MINUS
   9416      character (-) followed by a character in the range U+0061 to
   9417      U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
   9418      Z), throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and abort these
   9419      steps.</li>
   9420 
   9421      <li>For each character in the range U+0041 to U+005A (U+0041
   9422      LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in <var title="">name</var>, insert a U+002D HYPHEN-MINUS character (-)
   9423      before the character and replace the character with the same
   9424      character <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
   9425 
   9426      <li>Insert the string <code title="">data-</code> at the front of
   9427      <var title="">name</var>.</li>
   9428 
   9429      <li>Set the value of the attribute with the name <var title="">name</var>, to the value <var title="">value</var>,
   9430      replacing any previous value if the attribute already existed. If
   9431      <code title="">setAttribute()</code> would have raised an
   9432      exception when setting an attribute with the name <var title="">name</var>, then this must raise the same
   9433      exception.</li>
   9434 
   9435     </ol></dd>
   9436 
   9437    <dt>The algorithm for deleting names</dt>
   9438 
   9439    <dd>
   9440     <ol><li>Let <var title="">name</var> be the name passed to the
   9441      algorithm.</li>
   9442 
   9443      <li>If <var title="">name</var> contains a U+002D HYPHEN-MINUS
   9444      character (-) followed by a character in the range U+0061 to
   9445      U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
   9446      Z), throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and abort these
   9447      steps.</li>
   9448 
   9449      <li>For each character in the range U+0041 to U+005A (U+0041
   9450      LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in <var title="">name</var>, insert a U+002D HYPHEN-MINUS character (-)
   9451      before the character and replace the character with the same
   9452      character <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
   9453 
   9454      <li>Insert the string <code title="">data-</code> at the front of
   9455      <var title="">name</var>.</li>
   9456 
   9457      <li>Remove the attribute with the name <var title="">name</var>,
   9458      if such an attribute exists. Do nothing otherwise.</li>
   9459 
   9460     </ol></dd>
   9461 
   9462   </dl><p>The same object must be returned each time.</p>
   9463 
   9464   </div>
   9465 
   9466   <div class=example>
   9467 
   9468    <p>If a Web page wanted an element to represent a space ship,
   9469    e.g. as part of a game, it would have to use the <code title=attr-class><a href=#classes>class</a></code> attribute along with <code title=attr-data-*><a href=#attr-data-*>data-*</a></code> attributes:</p>
   9470 
   9471    <pre>&lt;div class="spaceship" data-ship-id="92432"
   9472      data-weapons="laser 2" data-shields="50%"
   9473      data-x="30" data-y="10" data-z="90"&gt;
   9474  &lt;button class="fire"
   9475          onclick="spaceships[this.parentNode.dataset.shipId].fire()"&gt;
   9476   Fire
   9477  &lt;/button&gt;
   9478 &lt;/div&gt;</pre>
   9479 
   9480    <p>Notice how the hyphenated attribute name becomes capitalized in
   9481    the API.</p>
   9482 
   9483   </div>
   9484 
   9485   <p>Authors should carefully design such extensions so that when the
   9486   attributes are ignored and any associated CSS dropped, the page is
   9487   still usable.</p>
   9488 
   9489   <div class=impl>
   9490 
   9491   <p>User agents must not derive any implementation behavior from
   9492   these attributes or values. Specifications intended for user agents
   9493   must not define these attributes to have any meaningful values.</p>
   9494 
   9495   </div>
   9496 
   9497   <p>JavaScript libraries may use the <a href=#custom-data-attribute title="custom data
   9498   attribute">custom data attributes</a>, as they are considered to
   9499   be part of the page on which they are used. Authors of libraries
   9500   that are reused by many authors are encouraged to include their name
   9501   in the attribute names, to reduce the risk of clashes.</p>
   9502 
   9503   <div class=example>
   9504 
   9505    <p>For example, a library called "DoQuery" could use attribute
   9506    names like <code title="">data-doquery-range</code>, and a library
   9507    called "jJo" could use attributes names like <code title="">data-jjo-range</code>.</p>
   9508 
   9509   </div>
   9510 
   9511 
   9512   <h4 id=element-definitions><span class=secno>3.2.4 </span>Element definitions</h4>
   9513 
   9514   <p>Each element in this specification has a definition that includes
   9515   the following information:</p>
   9516 
   9517   <dl><dt>Categories</dt>
   9518 
   9519    <dd>A list of <a href=#content-categories title="content categories">categories</a> to
   9520    which the element belongs. These are used when defining the
   9521    <a href=#content-models>content models</a> for each element.</dd>
   9522 
   9523 
   9524    <dt>Contexts in which this element may be used</dt>
   9525 
   9526    <dd>A <em>non-normative</em> description of where the element can
   9527    be used. This information is redundant with the content models of
   9528    elements that allow this one as a child, and is provided only as a
   9529    convenience.</dd>
   9530 
   9531 
   9532    <dt>Content model</dt>
   9533 
   9534    <dd>A normative description of what content must be included as
   9535    children and descendants of the element.</dd>
   9536 
   9537 
   9538    <dt>Content attributes</dt>
   9539 
   9540    <dd>A normative list of attributes that may be specified on the
   9541    element (except where otherwise disallowed).</dd>
   9542 
   9543 
   9544    <dt>DOM interface</dt>
   9545 
   9546    <dd>A normative definition of a DOM interface that such elements
   9547    must implement.</dd>
   9548 
   9549   </dl><p>This is then followed by a description of what the element
   9550   <a href=#represents>represents</a>, along with any additional normative
   9551   conformance criteria that may apply to authors<span class=impl title=""> and implementations</span>. Examples are sometimes
   9552   also included.</p>
   9553 
   9554 
   9555   <h5 id=attributes><span class=secno>3.2.4.1 </span>Attributes</h5>
   9556 
   9557   <p id=attribute-text>Except where otherwise specified, attributes
   9558   on <a href=#html-elements>HTML elements</a> may have any string value, including
   9559   the empty string. Except where explicitly stated, there is no
   9560   restriction on what text can be specified in such attributes.</p>
   9561 
   9562 
   9563 
   9564   <h4 id=content-models><span class=secno>3.2.5 </span><dfn>Content models</dfn></h4>
   9565 
   9566   <p>Each element defined in this specification has a content model: a
   9567   description of the element's expected contents. An <a href=#html-elements title="HTML
   9568   elements">HTML element</a> must have contents that match the
   9569   requirements described in the element's content model.</p>
   9570 
   9571   <p class=note>As noted in the conformance and terminology
   9572   sections, for the purposes of determining if an element matches its
   9573   content model or not, <a href=#text-node title="text
   9574   node"><code>CDATASection</code> nodes in the DOM are treated as
   9575   equivalent to <code>Text</code> nodes</a>, and <a href=#entity-references>entity reference nodes are treated as if
   9576   they were expanded in place</a>.</p>
   9577 
   9578   <p>The <a href=#space-character title="space character">space characters</a> are
   9579   always allowed between elements. User agents represent these
   9580   characters between elements in the source markup as text nodes in
   9581   the DOM.<!-- not a conf criteria since the parser now requires this
   9582   --> Empty <a href=#text-node title="text node">text nodes</a> and <a href=#text-node title="text node">text nodes</a> consisting of just sequences of
   9583   those characters are considered <dfn id=inter-element-whitespace>inter-element
   9584   whitespace</dfn>.</p>
   9585 
   9586   <p><a href=#inter-element-whitespace>Inter-element whitespace</a>, comment nodes, and
   9587   processing instruction nodes must be ignored when establishing
   9588   whether an element's contents match the element's content model or
   9589   not, and must be ignored when following algorithms that define
   9590   document and element semantics.</p>
   9591 
   9592   <p>An element <var title="">A</var> is said to be <dfn id=preceded-or-followed>preceded or
   9593   followed</dfn> by a second element <var title="">B</var> if <var title="">A</var> and <var title="">B</var> have the same parent node
   9594   and there are no other element nodes or text nodes (other than
   9595   <a href=#inter-element-whitespace>inter-element whitespace</a>) between them.</p>
   9596 
   9597   <p>Authors must not use <a href=#html-elements>HTML elements</a> anywhere except
   9598   where they are explicitly allowed, as defined for each element, or
   9599   as explicitly required by other specifications. For XML compound
   9600   documents, these contexts could be inside elements from other
   9601   namespaces, if those elements are defined as providing the relevant
   9602   contexts.</p>
   9603 
   9604   <div class=example>
   9605    <p>For example, the Atom specification defines a <code title="">content</code> element. When its <code title="">type</code> attribute has the value <code title="">xhtml</code>, the Atom specification requires that it
   9606    contain a single HTML <code><a href=#the-div-element>div</a></code> element. Thus, a
   9607    <code><a href=#the-div-element>div</a></code> element is allowed in that context, even though
   9608    this is not explicitly normatively stated by this specification. <a href=#refsATOM>[ATOM]</a></p>
   9609   </div>
   9610 
   9611   <p>In addition, <a href=#html-elements>HTML elements</a> may be orphan nodes
   9612   (i.e. without a parent node).</p>
   9613 
   9614   <div class=example>
   9615 
   9616    <p>For example, creating a <code><a href=#the-td-element>td</a></code> element and storing it
   9617    in a global variable in a script is conforming, even though
   9618    <code><a href=#the-td-element>td</a></code> elements are otherwise only supposed to be used
   9619    inside <code><a href=#the-tr-element>tr</a></code> elements.</p>
   9620 
   9621    <pre>var data = {
   9622   name: "Banana",
   9623   cell: document.createElement('td'),
   9624 };</pre>
   9625 
   9626   </div>
   9627 
   9628 
   9629   <h5 id=kinds-of-content><span class=secno>3.2.5.1 </span>Kinds of content</h5>
   9630 
   9631   <p>Each element in HTML falls into zero or more <dfn id=content-categories title="content
   9632   categories">categories</dfn> that group elements with similar
   9633   characteristics together. The following broad categories are used in
   9634   this specification:</p>
   9635 
   9636   <ul class=brief><li><a href=#metadata-content>Metadata content</a></li>
   9637    <li><a href=#flow-content>Flow content</a></li>
   9638    <li><a href=#sectioning-content>Sectioning content</a></li>
   9639    <li><a href=#heading-content>Heading content</a></li>
   9640    <li><a href=#phrasing-content>Phrasing content</a></li>
   9641    <li><a href=#embedded-content>Embedded content</a></li>
   9642    <li><a href=#interactive-content>Interactive content</a></li>
   9643   </ul><p class=note>Some elements also fall into other categories, which
   9644   are defined in other parts of this specification.</p>
   9645 
   9646   <p>These categories are related as follows:</p>
   9647 
   9648   <p><object data=images/content-venn.svg height=288 width=1000><img alt="Sectioning content, heading content, phrasing content, and
   9649   embedded content are all types of flow content. Embedded content is
   9650   also a type of phrasing content." src=images/content-venn.png></object></p>
   9651 
   9652   <p>In addition, certain elements are categorized as <a href=#form-associated-element title="form-associated element">form-associated elements</a> and
   9653   further subcategorized to define their role in various form-related
   9654   processing models.</p>
   9655 
   9656   <p>Some elements have unique requirements and do not fit into any
   9657   particular category.</p>
   9658 
   9659 
   9660   <h6 id=metadata-content-0><span class=secno>3.2.5.1.1 </span>Metadata content</h6>
   9661 
   9662   <p><dfn id=metadata-content>Metadata content</dfn> is content that sets up the
   9663   presentation or behavior of the rest of the content, or that sets
   9664   up the relationship of the document with other documents, or that
   9665   conveys other "out of band" information.</p>
   9666 
   9667   <!-- when updating this also update the category index -->
   9668   <ul class="brief category-list"><li><code><a href=#the-base-element>base</a></code></li>
   9669    <li><code><a href=#the-command>command</a></code></li>
   9670    <li><code><a href=#the-link-element>link</a></code></li>
   9671    <li><code><a href=#meta>meta</a></code></li>
   9672    <li><code><a href=#the-noscript-element>noscript</a></code></li>
   9673    <li><code><a href=#script>script</a></code></li>
   9674    <li><code><a href=#the-style-element>style</a></code></li>
   9675    <li><code><a href=#the-title-element-0>title</a></code></li>
   9676   </ul><p>Elements from other namespaces whose semantics are primarily
   9677   metadata-related (e.g. RDF) are also <a href=#metadata-content>metadata
   9678   content</a>.</p>
   9679 
   9680   <div class=example>
   9681 
   9682    <p>Thus, in the XML serialization, one can use RDF, like this:</p>
   9683 
   9684    <pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"
   9685       xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
   9686  &lt;head&gt;
   9687   &lt;title&gt;Hedral's Home Page&lt;/title&gt;
   9688   &lt;r:RDF&gt;
   9689    &lt;Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
   9690            r:about="http://hedral.example.com/#"&gt;
   9691     &lt;fullName&gt;Cat Hedral&lt;/fullName&gt;
   9692     &lt;mailbox r:resource="mailto:hedral (a] damowmow.com"/&gt;
   9693     &lt;personalTitle&gt;Sir&lt;/personalTitle&gt;
   9694    &lt;/Person&gt;
   9695   &lt;/r:RDF&gt;
   9696  &lt;/head&gt;
   9697  &lt;body&gt;
   9698   &lt;h1&gt;My home page&lt;/h1&gt;
   9699   &lt;p&gt;I like playing with string, I guess. Sister says squirrels are fun
   9700   too so sometimes I follow her to play with them.&lt;/p&gt;
   9701  &lt;/body&gt;
   9702 &lt;/html&gt;</pre>
   9703 
   9704    <p>This isn't possible in the HTML serialization, however.</p>
   9705 
   9706   </div>
   9707 
   9708 
   9709   <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>
   9710 
   9711   <p>Most elements that are used in the body of documents and
   9712   applications are categorized as <dfn id=flow-content>flow content</dfn>.</p>
   9713 
   9714   <!-- when updating this also update the category index -->
   9715   <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code></li>
   9716    <li><code><a href=#the-abbr-element>abbr</a></code></li>
   9717    <li><code><a href=#the-address-element>address</a></code></li>
   9718    <li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
   9719    <li><code><a href=#the-article-element>article</a></code></li>
   9720    <li><code><a href=#the-aside-element>aside</a></code></li>
   9721    <li><code><a href=#audio>audio</a></code></li>
   9722    <li><code><a href=#the-b-element>b</a></code></li>
   9723    <li><code><a href=#the-bdo-element>bdo</a></code></li>
   9724    <li><code><a href=#the-blockquote-element>blockquote</a></code></li>
   9725    <li><code><a href=#the-br-element>br</a></code></li>
   9726    <li><code><a href=#the-button-element>button</a></code></li>
   9727    <li><code><a href=#the-canvas-element>canvas</a></code></li>
   9728    <li><code><a href=#the-cite-element>cite</a></code></li>
   9729    <li><code><a href=#the-code-element>code</a></code></li>
   9730    <li><code><a href=#the-command>command</a></code></li>
   9731 <!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   9732    <li><code><a href=#the-datalist-element>datalist</a></code></li>
   9733    <li><code><a href=#the-del-element>del</a></code></li>
   9734    <li><code><a href=#the-details-element>details</a></code></li>
   9735    <li><code><a href=#the-dfn-element>dfn</a></code></li>
   9736    <li><code><a href=#the-div-element>div</a></code></li>
   9737    <li><code><a href=#the-dl-element>dl</a></code></li>
   9738    <li><code><a href=#the-em-element>em</a></code></li>
   9739    <li><code><a href=#the-embed-element>embed</a></code></li>
   9740    <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   9741    <li><code><a href=#the-figure-element>figure</a></code></li>
   9742    <li><code><a href=#the-footer-element>footer</a></code></li>
   9743    <li><code><a href=#the-form-element>form</a></code></li>
   9744    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code></li>
   9745    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code></li>
   9746    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code></li>
   9747    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code></li>
   9748    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code></li>
   9749    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></li>
   9750    <li><code><a href=#the-header-element>header</a></code></li>
   9751    <li><code><a href=#the-hgroup-element>hgroup</a></code></li>
   9752    <li><code><a href=#the-hr-element>hr</a></code></li>
   9753    <li><code><a href=#the-i-element>i</a></code></li>
   9754    <li><code><a href=#the-iframe-element>iframe</a></code></li>
   9755    <li><code><a href=#the-img-element>img</a></code></li>
   9756    <li><code><a href=#the-input-element>input</a></code></li>
   9757    <li><code><a href=#the-ins-element>ins</a></code></li>
   9758    <li><code><a href=#the-kbd-element>kbd</a></code></li>
   9759    <li><code><a href=#the-keygen-element>keygen</a></code></li>
   9760    <li><code><a href=#the-label-element>label</a></code></li>
   9761 
   9762    <li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
   9763 
   9764    <li><code><a href=#the-map-element>map</a></code></li>
   9765    <li><code><a href=#the-mark-element>mark</a></code></li>
   9766    <li><code><a href=#math>math</a></code></li>
   9767    <li><code><a href=#menus>menu</a></code></li>
   9768 
   9769    <li><code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
   9770 
   9771    <li><code><a href=#the-meter-element>meter</a></code></li>
   9772    <li><code><a href=#the-nav-element>nav</a></code></li>
   9773    <li><code><a href=#the-noscript-element>noscript</a></code></li>
   9774    <li><code><a href=#the-object-element>object</a></code></li>
   9775    <li><code><a href=#the-ol-element>ol</a></code></li>
   9776    <li><code><a href=#the-output-element>output</a></code></li>
   9777    <li><code><a href=#the-p-element>p</a></code></li>
   9778    <li><code><a href=#the-pre-element>pre</a></code></li>
   9779    <li><code><a href=#the-progress-element>progress</a></code></li>
   9780    <li><code><a href=#the-q-element>q</a></code></li>
   9781    <li><code><a href=#the-ruby-element>ruby</a></code></li>
   9782    <li><code><a href=#the-samp-element>samp</a></code></li>
   9783    <li><code><a href=#script>script</a></code></li>
   9784    <li><code><a href=#the-section-element>section</a></code></li>
   9785    <li><code><a href=#the-select-element>select</a></code></li>
   9786    <li><code><a href=#the-small-element>small</a></code></li>
   9787    <li><code><a href=#the-span-element>span</a></code></li>
   9788    <li><code><a href=#the-strong-element>strong</a></code></li>
   9789    <li><code><a href=#the-style-element>style</a></code> (if the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present)</li>
   9790    <li><code><a href=#the-sub-and-sup-elements>sub</a></code></li>
   9791    <li><code><a href=#the-sub-and-sup-elements>sup</a></code></li>
   9792    <li><code><a href=#svg>svg</a></code></li>
   9793    <li><code><a href=#the-table-element>table</a></code></li>
   9794    <li><code><a href=#the-textarea-element>textarea</a></code></li>
   9795    <li><code><a href=#the-time-element>time</a></code></li>
   9796    <li><code><a href=#the-ul-element>ul</a></code></li>
   9797    <li><code><a href=#the-var-element>var</a></code></li>
   9798    <li><code><a href=#video>video</a></code></li>
   9799    <li><code><a href=#the-wbr-element>wbr</a></code></li>
   9800    <li><a href=#text-content title="text content">Text</a></li>
   9801   </ul><p>As a general rule, elements whose content model allows any
   9802   <a href=#flow-content>flow content</a> should have either at least one descendant
   9803   <a href=#text-node>text node</a> that is not <a href=#inter-element-whitespace>inter-element
   9804   whitespace</a>, or at least one descendant element node that is
   9805   <a href=#embedded-content>embedded content</a>. For the purposes of this requirement,
   9806   <code><a href=#the-del-element>del</a></code> elements and their descendants must not be counted
   9807   as contributing to the ancestors of the <code><a href=#the-del-element>del</a></code>
   9808   element.</p>
   9809 
   9810   <p>This requirement is not a hard requirement, however, as there are
   9811   many cases where an element can be empty legitimately, for example
   9812   when it is used as a placeholder which will later be filled in by a
   9813   script, or when the element is part of a template and would on most
   9814   pages be filled in but on some pages is not relevant.</p>
   9815 
   9816 
   9817   <h6 id=sectioning-content-0><span class=secno>3.2.5.1.3 </span>Sectioning content</h6>
   9818 
   9819   <p><dfn id=sectioning-content>Sectioning content</dfn> is content that defines the scope
   9820   of <a href=#heading-content title="heading content">headings</a> and <a href=#the-footer-element title=footer>footers</a>.</p>
   9821 
   9822   <!-- when updating this also update the category index -->
   9823   <ul class="brief category-list"><li><code><a href=#the-article-element>article</a></code></li>
   9824    <li><code><a href=#the-aside-element>aside</a></code></li>
   9825    <li><code><a href=#the-nav-element>nav</a></code></li>
   9826    <li><code><a href=#the-section-element>section</a></code></li>
   9827   </ul><p>Each <a href=#sectioning-content>sectioning content</a> element potentially has a
   9828   heading and an <a href=#outline>outline</a>. See the section on
   9829   <a href=#headings-and-sections>headings and sections</a> for further details.</p>
   9830 
   9831   <p class=note>There are also certain elements that are <a href=#sectioning-root title="sectioning root">sectioning roots</a>. These are distinct
   9832   from <a href=#sectioning-content>sectioning content</a>, but they can also have an
   9833   <a href=#outline>outline</a>.</p>
   9834 
   9835 
   9836   <h6 id=heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</h6>
   9837 
   9838   <p><dfn id=heading-content>Heading content</dfn> defines the header of a section
   9839   (whether explicitly marked up using <a href=#sectioning-content>sectioning content</a>
   9840   elements, or implied by the heading content itself).</p>
   9841 
   9842   <!-- when updating this also update the category index -->
   9843   <ul class="brief category-list"><li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code></li>
   9844    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code></li>
   9845    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code></li>
   9846    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code></li>
   9847    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code></li>
   9848    <li><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></li>
   9849    <li><code><a href=#the-hgroup-element>hgroup</a></code></li>
   9850   </ul><h6 id=phrasing-content-0><span class=secno>3.2.5.1.5 </span>Phrasing content</h6>
   9851 
   9852   <p><dfn id=phrasing-content>Phrasing content</dfn> is the text of the document, as well
   9853   as elements that mark up that text at the intra-paragraph
   9854   level. Runs of <a href=#phrasing-content>phrasing content</a> form <a href=#paragraph title=paragraph>paragraphs</a>.</p>
   9855 
   9856   <!-- when updating this also update the category index -->
   9857   <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   9858    <li><code><a href=#the-abbr-element>abbr</a></code></li>
   9859    <li><code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element)</li>
   9860    <li><code><a href=#audio>audio</a></code></li>
   9861    <li><code><a href=#the-b-element>b</a></code></li>
   9862    <li><code><a href=#the-bdo-element>bdo</a></code></li>
   9863    <li><code><a href=#the-br-element>br</a></code></li>
   9864    <li><code><a href=#the-button-element>button</a></code></li>
   9865    <li><code><a href=#the-canvas-element>canvas</a></code></li>
   9866    <li><code><a href=#the-cite-element>cite</a></code></li>
   9867    <li><code><a href=#the-code-element>code</a></code></li>
   9868    <li><code><a href=#the-command>command</a></code></li>
   9869    <li><code><a href=#the-datalist-element>datalist</a></code></li>
   9870    <li><code><a href=#the-del-element>del</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   9871    <li><code><a href=#the-dfn-element>dfn</a></code></li>
   9872    <li><code><a href=#the-em-element>em</a></code></li>
   9873    <li><code><a href=#the-embed-element>embed</a></code></li>
   9874    <li><code><a href=#the-i-element>i</a></code></li>
   9875    <li><code><a href=#the-iframe-element>iframe</a></code></li>
   9876    <li><code><a href=#the-img-element>img</a></code></li>
   9877    <li><code><a href=#the-input-element>input</a></code></li>
   9878    <li><code><a href=#the-ins-element>ins</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   9879    <li><code><a href=#the-kbd-element>kbd</a></code></li>
   9880    <li><code><a href=#the-keygen-element>keygen</a></code></li>
   9881    <li><code><a href=#the-label-element>label</a></code></li>
   9882 
   9883    <li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
   9884 
   9885    <li><code><a href=#the-map-element>map</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)</li>
   9886    <li><code><a href=#the-mark-element>mark</a></code></li>
   9887    <li><code><a href=#math>math</a></code></li>
   9888 
   9889    <li><code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
   9890 
   9891    <li><code><a href=#the-meter-element>meter</a></code></li>
   9892    <li><code><a href=#the-noscript-element>noscript</a></code></li>
   9893    <li><code><a href=#the-object-element>object</a></code></li>
   9894    <li><code><a href=#the-output-element>output</a></code></li>
   9895    <li><code><a href=#the-progress-element>progress</a></code></li>
   9896    <li><code><a href=#the-q-element>q</a></code></li>
   9897    <li><code><a href=#the-ruby-element>ruby</a></code></li>
   9898    <li><code><a href=#the-samp-element>samp</a></code></li>
   9899    <li><code><a href=#script>script</a></code></li>
   9900    <li><code><a href=#the-select-element>select</a></code></li>
   9901    <li><code><a href=#the-small-element>small</a></code></li>
   9902    <li><code><a href=#the-span-element>span</a></code></li>
   9903    <li><code><a href=#the-strong-element>strong</a></code></li>
   9904    <li><code><a href=#the-sub-and-sup-elements>sub</a></code></li>
   9905    <li><code><a href=#the-sub-and-sup-elements>sup</a></code></li>
   9906    <li><code><a href=#svg>svg</a></code></li>
   9907    <li><code><a href=#the-textarea-element>textarea</a></code></li>
   9908    <li><code><a href=#the-time-element>time</a></code></li>
   9909    <li><code><a href=#the-var-element>var</a></code></li>
   9910    <li><code><a href=#video>video</a></code></li>
   9911    <li><code><a href=#the-wbr-element>wbr</a></code></li>
   9912    <li><a href=#text-content title="text content">Text</a></li>
   9913   </ul><p>As a general rule, elements whose content model allows any
   9914   <a href=#phrasing-content>phrasing content</a> should have either at least one
   9915   descendant <a href=#text-node>text node</a> that is not <a href=#inter-element-whitespace>inter-element
   9916   whitespace</a>, or at least one descendant element node that is
   9917   <a href=#embedded-content>embedded content</a>. For the purposes of this requirement,
   9918   nodes that are descendants of <code><a href=#the-del-element>del</a></code> elements must not be
   9919   counted as contributing to the ancestors of the <code><a href=#the-del-element>del</a></code>
   9920   element.</p>
   9921 
   9922   <p class=note>Most elements that are categorized as phrasing
   9923   content can only contain elements that are themselves categorized as
   9924   phrasing content, not any flow content.</p>
   9925 
   9926   <p><dfn id=text-content title="text content">Text</dfn>, in the context of content
   9927   models, means <a href=#text-node title="text node">text nodes</a>. <a href=#text-content title="text content">Text</a> is sometimes used as a content
   9928   model on its own, but is also <a href=#phrasing-content>phrasing content</a>, and can
   9929   be <a href=#inter-element-whitespace>inter-element whitespace</a> (if the <a href=#text-node title="text
   9930   node">text nodes</a> are empty or contain just <a href=#space-character title="space
   9931   character">space characters</a>).</p>
   9932 
   9933 
   9934   <h6 id=embedded-content-0><span class=secno>3.2.5.1.6 </span>Embedded content</h6>
   9935 
   9936   <p><dfn id=embedded-content>Embedded content</dfn> is content that imports another
   9937   resource into the document, or content from another vocabulary that
   9938   is inserted into the document.</p>
   9939 
   9940   <!-- when updating this also update the category index -->
   9941   <ul class="brief category-list"><li><code><a href=#audio>audio</a></code></li>
   9942    <li><code><a href=#the-canvas-element>canvas</a></code></li>
   9943    <li><code><a href=#the-embed-element>embed</a></code></li>
   9944    <li><code><a href=#the-iframe-element>iframe</a></code></li>
   9945    <li><code><a href=#the-img-element>img</a></code></li>
   9946    <li><code><a href=#math>math</a></code></li>
   9947    <li><code><a href=#the-object-element>object</a></code></li>
   9948    <li><code><a href=#svg>svg</a></code></li>
   9949    <li><code><a href=#video>video</a></code></li>
   9950   </ul><p>Elements that are from namespaces other than the <a href=#html-namespace-0>HTML
   9951   namespace</a> and that convey content but not metadata, are
   9952   <a href=#embedded-content>embedded content</a> for the purposes of the content models
   9953   defined in this specification. (For example, MathML, or SVG.)</p>
   9954 
   9955   <p>Some embedded content elements can have <dfn id=fallback-content>fallback
   9956   content</dfn>: content that is to be used when the external resource
   9957   cannot be used (e.g. because it is of an unsupported format). The
   9958   element definitions state what the fallback is, if any.</p>
   9959 
   9960 
   9961   <h6 id=interactive-content-0><span class=secno>3.2.5.1.7 </span>Interactive content</h6>
   9962 
   9963 <!--
   9964 TESTS:
   9965 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cp%20tabindex%3D1%3Etest%20%3Ca%20href%3D%22%22%3E%20%3Cem%3Etest%3C/em%3E%20%3C/a%3E%0A%3Cscript%3E%0A%20function%20test%20%28e%29%20%7B%20w%28e.type%20+%20%27%20on%20%27%20+%20e.target.tagName%20+%20%27%20through%20%27%20+%20e.currentTarget.tagName%29%3B%20%7D%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%3C/script%3E%0A
   9966 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Ca%20href%3Dhttp%3A//google.com/%20target%3Da%3EA%3C/a%3E%3Ca%20href%3Dhttp%3A//yahoo.com/%20target%3Db%3EB%3C/a%3E%3Cbr%3E%0A%3Ciframe%20name%3Da%3E%3C/iframe%3E%3Ciframe%20name%3Db%3E%3C/iframe%3E%0A%3Cscript%3E%0A%20var%20a%20%3D%20document.getElementsByTagName%28%27a%27%29%5B0%5D%3B%0A%20var%20b%20%3D%20document.getElementsByTagName%28%27a%27%29%5B1%5D%3B%0A%20a.appendChild%28b%29%3B%0A%3C/script%3E
   9967 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%20onsubmit%3D%22w%28%27onsubmit%27%29%22%3E%3Cem%3EA%3C/em%3E%3C/form%3E%0A%3Cscript%3E%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.attachEvent%28%27onsubmit%27%2C%20function%20%28%29%20%7B%20w%28%27submit%20fired%27%29%20%7D%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.fireEvent%28%27onsubmit%27%29%3B%0A%3C/script%3E
   9968 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%3EX%3C/form%3E%0A%3Cscript%3E%0Avar%20evt%20%3D%20document.createEvent%28%22Events%22%29%3B%0Aevt.initEvent%28%22submit%22%2C%20true%2C%20true%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.dispatchEvent%28evt%29%3B%0A%3C/script%3E
   9969 -->
   9970 
   9971   <p><dfn id=interactive-content>Interactive content</dfn> is content that is specifically
   9972   intended for user interaction.</p>
   9973 
   9974   <!-- when updating this also update the category index -->
   9975   <ul class="brief category-list"><li><code><a href=#the-a-element>a</a></code></li>
   9976    <li><code><a href=#audio>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)</li>
   9977    <li><code><a href=#the-button-element>button</a></code></li>
   9978 <!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   9979    <li><code><a href=#the-details-element>details</a></code></li>
   9980    <li><code><a href=#the-embed-element>embed</a></code></li>
   9981    <li><code><a href=#the-iframe-element>iframe</a></code></li>
   9982    <li><code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)</li>
   9983    <li><code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state)</li>
   9984    <li><code><a href=#the-keygen-element>keygen</a></code></li>
   9985    <li><code><a href=#the-label-element>label</a></code></li>
   9986    <li><code><a href=#menus>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
   9987    <li><code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li>
   9988    <li><code><a href=#the-select-element>select</a></code></li>
   9989    <li><code><a href=#the-textarea-element>textarea</a></code></li>
   9990    <li><code><a href=#video>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)</li>
   9991   </ul><p>Certain elements in HTML have an <a href=#activation-behavior>activation
   9992   behavior</a>, which means that the user can activate them. This
   9993   triggers a sequence of events dependent on the activation mechanism,
   9994   and normally culminating in a <code title=event-click><a href=#event-click>click</a></code>
   9995   event followed by a <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> event<span class=impl>, as described below</span>.</p>
   9996 
   9997   <div class=impl>
   9998 
   9999   <p>The user agent should allow the user to manually trigger elements
   10000   that have an <a href=#activation-behavior>activation behavior</a>, for instance using
   10001   keyboard or voice input, or through mouse clicks. When the user
   10002   triggers an element with a defined <a href=#activation-behavior>activation behavior</a>
   10003   in a manner other than clicking it, the default action of the
   10004   interaction event must be to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
   10005   steps</a> on the element.</p> <!-- interaction event spec point -->
   10006 
   10007   <p>When a user agent is to <dfn id=run-synthetic-click-activation-steps>run synthetic click activation
   10008   steps</dfn> on an element, the user agent must <a href=#run-pre-click-activation-steps>run pre-click
   10009   activation steps</a> on the element, then <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the element. The
   10010   default action of this <code title=event-click><a href=#event-click>click</a></code> event
   10011   must be to <a href=#run-post-click-activation-steps>run post-click activation steps</a> on the
   10012   element. If the event is canceled, the user agent must <a href=#run-canceled-activation-steps>run
   10013   canceled activation steps</a> on the element instead.</p>
   10014 
   10015   <p>Given an element <var title="">target</var>, the <dfn id=nearest-activatable-element>nearest
   10016   activatable element</dfn> is the element returned by the following
   10017   algorithm:</p>
   10018 
   10019   <ol><li><p>If <var title="">target</var> has a defined <a href=#activation-behavior>activation
   10020    behavior</a>, then return <var title="">target</var> and abort
   10021    these steps.</li>
   10022 
   10023    <li><p>If <var title="">target</var> has a parent element, then set
   10024    <var title="">target</var> to that parent element and return to the
   10025    first step.</li>
   10026 
   10027    <li><p>Otherwise, there is no <a href=#nearest-activatable-element>nearest activatable
   10028    element</a>.</li>
   10029 
   10030   </ol><p>When a pointing device is clicked, the user agent must run these
   10031   steps:</p>
   10032 
   10033   <ol><li><p>Let <var title="">e</var> be the <span title="">nearest
   10034    activatable element</span> of the element designated by the user,
   10035    if any.</li>
   10036 
   10037    <li><p>If there is an element <var title="">e</var>, <a href=#run-pre-click-activation-steps>run
   10038    pre-click activation steps</a> on it.</li>
   10039 
   10040    <li>
   10041 
   10042     <p>Dispatch the required <code title=event-click><a href=#event-click>click</a></code>
   10043     event.</p> <!-- interaction event spec point -->
   10044 
   10045     <p>If there is an element <var title="">e</var>, then the default
   10046     action of the <code title=event-click><a href=#event-click>click</a></code> event must be
   10047     to <a href=#run-post-click-activation-steps>run post-click activation steps</a> on element <var title="">e</var>.</p>
   10048 
   10049     <p>If there is an element <var title="">e</var> but the event is
   10050     canceled, the user agent must <a href=#run-canceled-activation-steps>run canceled activation
   10051     steps</a> on element <var title="">e</var>.</p>
   10052 
   10053    </li>
   10054 
   10055   </ol><p class=note>The above doesn't happen for arbitrary synthetic
   10056   events dispatched by author script. However, the <code title=dom-click><a href=#dom-click>click()</a></code> method can be used to make it
   10057   happen programmatically.</p>
   10058 
   10059   <p>When a user agent is to <dfn id=run-pre-click-activation-steps>run pre-click activation steps</dfn>
   10060   on an element, it must run the <dfn id=pre-click-activation-steps>pre-click activation steps</dfn>
   10061   defined for that element, if any.</p>
   10062 
   10063   <p>When a user agent is to <dfn id=run-post-click-activation-steps>run post-click activation
   10064   steps</dfn> on an element, the user agent must <a href=#fire-a-simple-event>fire a simple
   10065   event</a> named <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> that is cancelable at
   10066   that element. The default action of this event must be to <a href=#run-final-activation-steps>run
   10067   final activation steps</a> on that element. If the event is
   10068   canceled, the user agent must <a href=#run-canceled-activation-steps>run canceled activation
   10069   steps</a> on the element instead.</p>
   10070 
   10071   <p>When a user agent is to <dfn id=run-canceled-activation-steps>run canceled activation steps</dfn>
   10072   on an element, it must run the <dfn id=canceled-activation-steps>canceled activation steps</dfn>
   10073   defined for that element, if any.</p>
   10074 
   10075   <p>When a user agent is to <dfn id=run-final-activation-steps>run final activation steps</dfn> on
   10076   an element, it must run the <dfn id=activation-behavior>activation behavior</dfn> defined
   10077   for that element. Activation behaviors can refer to the <code title=event-click><a href=#event-click>click</a></code> and <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code> events that were fired
   10078   by the steps above leading up to this point.</p>
   10079 
   10080   </div>
   10081 
   10082 
   10083   <h5 id=transparent-content-models><span class=secno>3.2.5.2 </span>Transparent content models</h5>
   10084 
   10085   <p>Some elements are described as <dfn id=transparent>transparent</dfn>; they have
   10086   "transparent" in the description of their content model.</p>
   10087 
   10088   <p>When a content model includes a part that is "transparent", those
   10089   parts must not contain content that would not be conformant if all
   10090   transparent elements in the tree were replaced, in their parent
   10091   element, by the children in the "transparent" part of their content
   10092   model, retaining order.</p>
   10093 
   10094   <div class=example>
   10095 
   10096    <p>Consider the following markup fragment:</p>
   10097 
   10098    <pre>&lt;p&gt;Hello &lt;a href="world.html"&gt;&lt;em&gt;wonderful&lt;/em&gt; world&lt;/a&gt;!&lt;/p&gt;</pre>
   10099 
   10100    <p>Its DOM looks like the following:</p>
   10101 
   10102    <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">Hello </span><li class=t1><code><a href=#the-a-element>a</a></code> <span class=t2 title=""><code class="attribute name">href</code>="<code class="attribute value">world.html</code>"</span><ul><li class=t1><code><a href=#the-em-element>em</a></code><ul><li class=t3><code>#text</code>: <span title="">wonderful</span></ul><li class=t3><code>#text</code>: <span title=""> world</span></ul><li class=t3><code>#text</code>: <span title="">!</span></ul></ul><p>The content model of the <code><a href=#the-a-element>a</a></code> element is
   10103    <a href=#transparent>transparent</a>. To see if its contents are conforming,
   10104    therefore, the element is replaced by its contents:</p>
   10105 
   10106    <ul class=domTree><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">Hello </span><li class=t1><code><a href=#the-em-element>em</a></code><ul><li class=t3><code>#text</code>: <span title="">wonderful</span></ul><li class=t3><code>#text</code>: <span title=""> world</span><li class=t3><code>#text</code>: <span title="">!</span></ul></ul><p>Since that is conforming, the contents of the <code><a href=#the-a-element>a</a></code> are
   10107    conforming in the original fragment.</p>
   10108 
   10109   </div>
   10110 
   10111   <p>When a transparent element has no parent, then the part of its
   10112   content model that is "transparent" must instead be treated as
   10113   accepting any <a href=#flow-content>flow content</a>.</p>
   10114 
   10115 
   10116   <h5 id=paragraphs><span class=secno>3.2.5.3 </span>Paragraphs</h5>
   10117 
   10118   <p class=note>The term <a href=#paragraph>paragraph</a> as defined in this
   10119   section is distinct from (though related to) the <code><a href=#the-p-element>p</a></code>
   10120   element defined later. The <a href=#paragraph>paragraph</a> concept defined
   10121   here is used to describe how to interpret documents.</p>
   10122 
   10123   <p>A <dfn id=paragraph>paragraph</dfn> is typically a run of <a href=#phrasing-content>phrasing
   10124   content</a> that forms a block of text with one or more sentences
   10125   that discuss a particular topic, as in typography, but can also be
   10126   used for more general thematic grouping. For instance, an address is
   10127   also a paragraph, as is a part of a form, a byline, or a stanza in a
   10128   poem.</p>
   10129 
   10130   <div class=example>
   10131 
   10132    <p>In the following example, there are two paragraphs in a
   10133    section. There is also a heading, which contains phrasing content
   10134    that is not a paragraph. Note how the comments and
   10135    <a href=#inter-element-whitespace>inter-element whitespace</a> do not form paragraphs.</p>
   10136 
   10137    <pre>&lt;section&gt;
   10138   &lt;h1&gt;Example of paragraphs&lt;/h1&gt;
   10139   This is the &lt;em&gt;first&lt;/em&gt; paragraph in this example.
   10140   &lt;p&gt;This is the second.&lt;/p&gt;
   10141   &lt;!-- This is not a paragraph. --&gt;
   10142 &lt;/section&gt;</pre>
   10143 
   10144   </div>
   10145 
   10146   <p>Paragraphs in <a href=#flow-content>flow content</a> are defined relative to
   10147   what the document looks like without the <code><a href=#the-a-element>a</a></code>,
   10148   <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and <code><a href=#the-map-element>map</a></code> elements
   10149   complicating matters, since those elements, with their hybrid
   10150   content models, can straddle paragraph boundaries, as shown in the
   10151   first two examples below.</p>
   10152 
   10153   <p class=note>Generally, having elements straddle paragraph
   10154   boundaries is best avoided. Maintaining such markup can be
   10155   difficult.</p>
   10156 
   10157   <div class=example>
   10158 
   10159    <p>The following example takes the markup from the earlier example
   10160    and puts <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements around some
   10161    of the markup to show that the text was changed (though in this
   10162    case, the changes admittedly don't make much sense). Notice how
   10163    this example has exactly the same paragraphs as the previous one,
   10164    despite the <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements &mdash;
   10165    the <code><a href=#the-ins-element>ins</a></code> element straddles the heading and the first
   10166    paragraph, and the <code><a href=#the-del-element>del</a></code> element straddles the boundary
   10167    between the two paragraphs.</p>
   10168 
   10169    <pre>&lt;section&gt;
   10170   &lt;ins&gt;&lt;h1&gt;Example of paragraphs&lt;/h1&gt;
   10171   This is the &lt;em&gt;first&lt;/em&gt; paragraph in&lt;/ins&gt; this example&lt;del&gt;.
   10172   &lt;p&gt;This is the second.&lt;/p&gt;&lt;/del&gt;
   10173   &lt;!-- This is not a paragraph. --&gt;
   10174 &lt;/section&gt;</pre>
   10175 
   10176   </div>
   10177 
   10178   <div class=impl>
   10179 
   10180   <p>Let <var title="">view</var> be a view of the DOM that replaces
   10181   all <code><a href=#the-a-element>a</a></code>, <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and
   10182   <code><a href=#the-map-element>map</a></code> elements in the document with their contents. Then,
   10183   in <var title="">view</var>, for each run of sibling <a href=#phrasing-content>phrasing
   10184   content</a> nodes uninterrupted by other types of content, in an
   10185   element that accepts content other than <a href=#phrasing-content>phrasing
   10186   content</a> as well as <a href=#phrasing-content>phrasing content</a>, let <var title="">first</var> be the first node of the run, and let <var title="">last</var> be the last node of the run. For each such run
   10187   that consists of at least one node that is neither <a href=#embedded-content>embedded
   10188   content</a> nor <a href=#inter-element-whitespace>inter-element whitespace</a>, a
   10189   paragraph exists in the original DOM from immediately before <var title="">first</var> to immediately after <var title="">last</var>. (Paragraphs can thus span across
   10190   <code><a href=#the-a-element>a</a></code>, <code><a href=#the-ins-element>ins</a></code>, <code><a href=#the-del-element>del</a></code>, and
   10191   <code><a href=#the-map-element>map</a></code> elements.)</p>
   10192 
   10193   <p>Conformance checkers may warn authors of cases where they have
   10194   paragraphs that overlap each other (this can happen with
   10195   <code><a href=#the-object-element>object</a></code>, <code><a href=#video>video</a></code>, <code><a href=#audio>audio</a></code>, and
   10196   <code><a href=#the-canvas-element>canvas</a></code> elements, and indirectly through elements in
   10197   other namespaces that allow HTML to be further embedded therein,
   10198   like <code><a href=#svg>svg</a></code> or <code><a href=#math>math</a></code>).</p> <!-- example below
   10199   -->
   10200 
   10201   </div>
   10202 
   10203   <p>A <a href=#paragraph>paragraph</a> is also formed explicitly by
   10204   <code><a href=#the-p-element>p</a></code> elements.</p>
   10205 
   10206   <p class=note>The <code><a href=#the-p-element>p</a></code> element can be used to wrap
   10207   individual paragraphs when there would otherwise not be any content
   10208   other than phrasing content to separate the paragraphs from each
   10209   other.</p>
   10210 
   10211   <div class=example>
   10212 
   10213    <p>In the following example, the link spans half of the first
   10214    paragraph, all of the heading separating the two paragraphs, and
   10215    half of the second paragraph. It straddles the paragraphs and the
   10216    heading.</p>
   10217 
   10218    <pre>&lt;aside&gt;
   10219  Welcome!
   10220  &lt;a href="about.html"&gt;
   10221   This is home of...
   10222   &lt;h1&gt;The Falcons!&lt;/h1&gt;
   10223   The Lockheed Martin multirole jet fighter aircraft!
   10224  &lt;/a&gt;
   10225  This page discusses the F-16 Fighting Falcon's innermost secrets.
   10226 &lt;/aside&gt;</pre>
   10227 
   10228    <p>Here is another way of marking this up, this time showing the
   10229    paragraphs explicitly, and splitting the one link element into
   10230    three:</p>
   10231 
   10232    <pre>&lt;aside&gt;
   10233  &lt;p&gt;Welcome! &lt;a href="about.html"&gt;This is home of...&lt;/a&gt;&lt;/p&gt;
   10234  &lt;h1&gt;&lt;a href="about.html"&gt;The Falcons!&lt;/a&gt;&lt;/h1&gt;
   10235  &lt;p&gt;&lt;a href="about.html"&gt;The Lockheed Martin multirole jet
   10236  fighter aircraft!&lt;/a&gt; This page discusses the F-16 Fighting
   10237  Falcon's innermost secrets.&lt;/p&gt;
   10238 &lt;/aside&gt;</pre>
   10239 
   10240   </div>
   10241 
   10242   <div class=example>
   10243 
   10244    <!-- I don't know if there's a better way to deal with this, but if
   10245    there is, let me know... -->
   10246 
   10247    <p>It is possible for paragraphs to overlap when using certain
   10248    elements that define fallback content. For example, in the
   10249    following section:</p>
   10250 
   10251    <pre>&lt;section&gt;
   10252  &lt;h1&gt;My Cats&lt;/h1&gt;
   10253  You can play with my cat simulator.
   10254  &lt;object data="cats.sim"&gt;
   10255   To see the cat simulator, use one of the following links:
   10256   &lt;ul&gt;
   10257    &lt;li&gt;&lt;a href="cats.sim"&gt;Download simulator file&lt;/a&gt;
   10258    &lt;li&gt;&lt;a href="http://sims.example.com/watch?v=LYds5xY4INU"&gt;Use online simulator&lt;/a&gt;
   10259   &lt;/ul&gt;
   10260   Alternatively, upgrade to the Mellblom Browser.
   10261  &lt;/object&gt;
   10262  I'm quite proud of it.
   10263 &lt;/section&gt;</pre>
   10264 
   10265    <p>There are five paragraphs:</p>
   10266 
   10267    <ol class=brief><li>The paragraph that says "You can play with my cat
   10268     simulator. <i title="">object</i> I'm quite proud of it.", where
   10269     <i title="">object</i> is the <code><a href=#the-object-element>object</a></code> element.</li>
   10270 
   10271     <li>The paragraph that says "To see the cat simulator, use one of
   10272     the following links:".</li>
   10273 
   10274     <li>The paragraph that says "Download simulator file".</li>
   10275 
   10276     <li>The paragraph that says "Use online simulator".</li>
   10277 
   10278     <li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li>
   10279 
   10280    </ol><p>The first paragraph is overlapped by the other four. A user
   10281    agent that supports the "cats.sim" resource will only show the
   10282    first one, but a user agent that shows the fallback will
   10283    confusingly show the first sentence of the first paragraph as
   10284    if it was in the same paragraph as the second one, and will show
   10285    the last paragraph as if it was at the start of the second sentence
   10286    of the first paragraph.</p>
   10287 
   10288    <p>To avoid this confusion, explicit <code><a href=#the-p-element>p</a></code> elements can be
   10289    used.</p>
   10290 
   10291   </div>
   10292 
   10293 
   10294 
   10295   <h4 id=annotations-for-assistive-technology-products-(aria)><span class=secno>3.2.6 </span><dfn>Annotations for assistive technology products</dfn> (ARIA)</h4>
   10296 
   10297   <p>Authors may use the ARIA <code title=attr-aria-role>role</code>
   10298   and <code title=attr-aria-*>aria-*</code> attributes on <a href=#html-elements>HTML
   10299   elements</a>, in accordance with the requirements described in
   10300   the ARIA specifications, except where these conflict with the
   10301   <span>strong native semantics</span> described below. These
   10302   exceptions are intended to prevent authors from making assistive
   10303   technology products report nonsensical states that do not represent
   10304   the actual state of the document. <a href=#refsARIA>[ARIA]</a></p>
   10305 
   10306   <div class=impl>
   10307 
   10308   <p>User agents are required to implement ARIA semantics on all
   10309   <a href=#html-elements>HTML elements</a>, as defined in the ARIA
   10310   specifications. The <span>implicit ARIA semantics</span> defined
   10311   below must be recognized by implementations. <a href=#refsARIAIMPL>[ARIAIMPL]</a></p>
   10312 
   10313   </div>
   10314 
   10315   <p>The following table defines the <span>strong native
   10316   semantics</span> <span class=impl>and corresponding <span>implicit
   10317   ARIA semantics</span></span> that apply to <a href=#html-elements>HTML
   10318   elements</a>. Each language feature (element or attribute) in a
   10319   cell in the first column implies the ARIA semantics (role, states,
   10320   and/or properties) given in the cell in the second column of the
   10321   same row. Authors must not set the ARIA <code title=attr-aria-role>role</code> and <code title=attr-aria-*>aria-*</code> attributes in a manner that
   10322   conflicts with the semantics described in the following table. <span class=impl>When multiple rows apply to an element, the role from
   10323   the last row to define a role must be applied, and the states and
   10324   properties from all the rows must be combined.</span></p>
   10325 
   10326   <table><thead><tr><th>Language feature
   10327      <th>Strong native semantics <span class=impl>and implied ARIA semantics</span>
   10328 
   10329    <tbody><tr><td><code><a href=#the-a-element>a</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
   10330      <td><code title=attr-aria-role-link>link</code> role
   10331 
   10332     <tr><td><code><a href=#the-area-element>area</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
   10333      <td><code title=attr-aria-role-link>link</code> role
   10334 
   10335     <tr><td><code><a href=#the-button-element>button</a></code> element
   10336      <td><code title=attr-aria-role-button>button</code> role
   10337 
   10338     <tr><td><code><a href=#the-datalist-element>datalist</a></code> element
   10339      <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"
   10340 
   10341     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10342      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10343 
   10344     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10345      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10346 
   10347     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10348      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10349 
   10350     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10351      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10352 
   10353     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10354      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10355 
   10356     <tr><td><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element that does not have an <code><a href=#the-hgroup-element>hgroup</a></code> ancestor
   10357      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10358 
   10359     <tr><td><code><a href=#the-hgroup-element>hgroup</a></code> element
   10360      <td><code title=attr-aria-role-heading>heading</code> role, with the <code title=attr-aria-level>aria-level</code> property set to the element's <a href=#outline-depth>outline depth</a>
   10361 
   10362     <tr><td><code><a href=#the-hr-element>hr</a></code> element
   10363      <td><code title=attr-aria-role-separator>separator</code> role
   10364 
   10365     <tr><td><code><a href=#the-img-element>img</a></code> element whose <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value is empty
   10366      <td><code title=attr-aria-role-presentation>presentation</code> role
   10367 
   10368     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#button-state title=attr-input-type-button>Button</a> state
   10369      <td><code title=attr-aria-role-button>button</code> role
   10370 
   10371     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state
   10372      <td><code title=attr-aria-role-checkbox>checkbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "mixed" if the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is true, or "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise
   10373 
   10374     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#color-state title=attr-input-type-color>Color</a> state
   10375      <td>No role
   10376 
   10377     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-state title=attr-input-type-date>Date</a> state
   10378      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10379 
   10380     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state
   10381      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10382 
   10383     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> state
   10384      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10385 
   10386     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10387      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10388 
   10389     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state
   10390      <td><code title=attr-aria-role-button>button</code> role
   10391 
   10392     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state
   10393      <td>No role
   10394 
   10395     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
   10396      <td><code title=attr-aria-role-button>button</code> role
   10397 
   10398     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#month-state title=attr-input-type-month>Month</a> state
   10399      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10400 
   10401     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#number-state title=attr-input-type-number>Number</a> state
   10402      <td><code title=attr-aria-role-spinbutton>spinbutton</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and, if the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, with the <code title=attr-aria-valuenow>aria-valuenow</code> property set to that number
   10403 
   10404     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#password-state title=attr-input-type-password>Password</a> state
   10405      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10406 
   10407     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state
   10408      <td><code title=attr-aria-role-radio>radio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is true, or "false" otherwise
   10409 
   10410     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#range-state title=attr-input-type-range>Range</a> state
   10411      <td><code title=attr-aria-role-slider>slider</code> role, with the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the element's <a href=#concept-input-max title=concept-input-max>maximum</a>, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to the element's <a href=#concept-input-min title=concept-input-min>minimum</a>, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the result of applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a> to the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, if that that results in a number, or the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a> otherwise
   10412 
   10413     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a> state
   10414      <td><code title=attr-aria-role-button>button</code> role
   10415 
   10416     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10417      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10418 
   10419     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state
   10420      <td><code title=attr-aria-role-button>button</code> role
   10421 
   10422     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10423      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10424 
   10425     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10426      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10427 
   10428     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#telephone-state title=attr-input-type-tel>Telephone</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> states with a <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10429      <td><code title=attr-aria-role-combobox>combobox</code> role, with the <code title=attr-aria-owns>aria-owns</code> property set to the same value as the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10430 
   10431     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#time-state title=attr-input-type-time>Time</a> state
   10432      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10433 
   10434     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#url-state title=attr-input-type-url>URL</a> state with no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>
   10435      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10436 
   10437     <tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#week-state title=attr-input-type-week>Week</a> state
   10438      <td>No role, with the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute
   10439 
   10440     <tr><td><code><a href=#the-link-element>link</a></code> element that represents a <a href=#hyperlink>hyperlink</a>
   10441      <td><code title=attr-aria-role-link>link</code> role
   10442 
   10443     <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#context-menu-state title="context menu state">context menu</a> state
   10444      <td>No role
   10445 
   10446     <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
   10447      <td><code title=attr-aria-role-menu>menu</code> role
   10448 
   10449     <tr><td><code><a href=#menus>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
   10450      <td><code title=attr-aria-role-toolbar>toolbar</code> role
   10451 
   10452     <tr><td><code><a href=#the-nav-element>nav</a></code> element
   10453      <td><code title=attr-aria-role-navigation>navigation</code> role
   10454 
   10455     <tr><td><code><a href=#the-option-element>option</a></code> element that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> or that represents a suggestion in a <code><a href=#the-datalist-element>datalist</a></code> element
   10456      <td><code title=attr-aria-role-option>option</code> role, with the <code title=attr-aria-selected>aria-selected</code> state set to "true" if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, or "false" otherwise.
   10457 
   10458     <tr><td><code><a href=#the-progress-element>progress</a></code> element
   10459      <td><code title=attr-aria-role-progressbar>progressbar</code> role, with, if the progress bar is determinate, the <code title=attr-aria-valuemax>aria-valuemax</code> property set to the maximum value of the progress bar, the <code title=attr-aria-valuemin>aria-valuemin</code> property set to zero, and the <code title=attr-aria-valuenow>aria-valuenow</code> property set to the current value of the progress bar
   10460 
   10461     <tr><td><code><a href=#the-select-element>select</a></code> element with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
   10462      <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "true"
   10463 
   10464     <tr><td><code><a href=#the-select-element>select</a></code> element with no <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute
   10465      <td><code title=attr-aria-role-listbox>listbox</code> role, with the <code title=attr-aria-multiselectable>aria-multiselectable</code> property set to "false"
   10466 
   10467     <tr><td><code><a href=#the-td-element>td</a></code> element
   10468      <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
   10469 
   10470     <tr><td><code><a href=#the-textarea-element>textarea</a></code> element
   10471      <td><code title=attr-aria-role-textbox>textbox</code> role, with the <code title=attr-aria-multiline>aria-multiline</code> property set to "true", and the <code title=title-aria-readonly>aria-readonly</code> state set to "true" if the element has a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute
   10472 
   10473     <tr><td><code><a href=#the-th-element>th</a></code> element that is neither a <a href=#column-header>column header</a> nor a <a href=#row-header>row header</a>
   10474      <td><code title=attr-aria-role-gridcell>gridcell</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
   10475 
   10476     <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#column-header>column header</a>
   10477      <td><code title=attr-aria-role-columnheader>columnheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
   10478 
   10479     <tr><td><code><a href=#the-th-element>th</a></code> element that is a <a href=#row-header>row header</a>
   10480      <td><code title=attr-aria-role-rowheader>rowheader</code> role, with the <code title=attr-aria-labelledby>aria-labelledby</code> property set to the value of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if any
   10481 
   10482     <tr><td><code><a href=#the-tr-element>tr</a></code> element
   10483      <td><code title=attr-aria-role-row>row</code> role
   10484 
   10485     <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "checkbox", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
   10486      <td><code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
   10487 
   10488     <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "command", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
   10489      <td><code title=attr-aria-role-menuitem>menuitem</code> role
   10490 
   10491     <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "radio", and that is a descendant of a <code><a href=#menus>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
   10492      <td><code title=attr-aria-role-menuitemradio>menuitemradio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
   10493 
   10494     <tr><td>Elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
   10495      <td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
   10496 
   10497     <tr><td>Elements that are <a href=#concept-input-required title=concept-input-required>required</a>
   10498      <td>The <code title=title-aria-required>aria-required</code> state set to "true"
   10499 
   10500   </table><p>Some <a href=#html-elements>HTML elements</a> have native semantics that can be
   10501   overridden. The following table lists these elements<span class=impl> and their <span>implicit ARIA semantics</span></span>,
   10502   along with the restrictions that apply to those elements. Each
   10503   language feature (element or attribute) in a cell in the first
   10504   column implies, unless otherwise overriden, the ARIA semantic (role,
   10505   state, or property) given in the cell in the second column of the
   10506   same row, but this semantic may be overridden under the conditions
   10507   listed in the cell in the third column of that row.</p>
   10508 
   10509   <table><thead><tr><th>Language feature
   10510      <th>Default implied ARIA semantic
   10511      <th>Restrictions
   10512 
   10513    <tbody><tr><td><code><a href=#the-address-element>address</a></code> element
   10514      <td>No role
   10515      <td>If specified, role must be <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page)
   10516 
   10517     <tr><td><code><a href=#the-article-element>article</a></code> element
   10518      <td><code title=attr-aria-role-article>article</code> role
   10519      <td>Role must be either <code title=attr-aria-role-article>article</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, or <code title=attr-aria-role-main>main</code> (ARIA restricts usage of this role to one per page)
   10520 
   10521     <tr><td><code><a href=#the-aside-element>aside</a></code> element
   10522      <td><code title=attr-aria-role-note>note</code> role
   10523      <td>Role must be either <code title=attr-aria-role-note>note</code>, <code title=attr-aria-role-complementary>complementary</code>, or <code title=attr-aria-role-search>search</code>
   10524 
   10525     <tr><td><code><a href=#the-footer-element>footer</a></code> element
   10526      <td>No role
   10527      <td>If specified, role must be <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page)
   10528 
   10529     <tr><td><code><a href=#the-header-element>header</a></code> element
   10530      <td>No role
   10531      <td>If specified, role must be <code title=attr-aria-role-banner>banner</code> (ARIA restricts usage of this role to one per page)
   10532 
   10533     <tr><td><code><a href=#the-li-element>li</a></code> element whose parent is an <code><a href=#the-ol-element>ol</a></code> or <code><a href=#the-ul-element>ul</a></code> element
   10534      <td><code title=attr-aria-role-listitem>listitem</code> role
   10535      <td>Role must be either <code title=attr-aria-role-listitem>listitem</code> or <code title=attr-aria-role-treeitem>treeitem</code>
   10536 
   10537     <tr><td><code><a href=#the-ol-element>ol</a></code> element
   10538      <td><code title=attr-aria-role-list>list</code> role
   10539      <td>Role must be either <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>
   10540 
   10541     <tr><td><code><a href=#the-output-element>output</a></code> element
   10542      <td><code title=attr-aria-role-status>status</code> role
   10543      <td>No restrictions
   10544 
   10545     <tr><td><code><a href=#the-section-element>section</a></code> element
   10546      <td><code title=attr-aria-role-region>region</code> role
   10547      <td>Role must be either <code title=attr-aria-role-region>region</code>, <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, <code title=attr-aria-role-contentinfo>contentinfo</code> (ARIA restricts usage of this role to one per page), <code title=attr-aria-role-main>main</code> (ARIA restricts usage of this role to one per page), <code title=attr-aria-role-search>search</code>, <code title=attr-aria-role-alert>alert</code>, <code title=attr-aria-role-dialog>dialog</code>, <code title=attr-aria-role-alertdialog>alertdialog</code>, <code title=attr-aria-role-status>status</code>, or <code title=attr-aria-role-log>log</code>
   10548 
   10549     <tr><td><code><a href=#the-table-element>table</a></code> element
   10550      <td><code title=attr-aria-role-grid>grid</code> role
   10551      <td>Role must be either <code title=attr-aria-role-grid>grid</code> or <code title=attr-aria-role-treegrid>treegrid</code>
   10552 
   10553     <tr><td><code><a href=#the-ul-element>ul</a></code> element
   10554      <td><code title=attr-aria-role-list>list</code> role
   10555      <td>Role must be either <code title=attr-aria-role-list>list</code> or <code title=attr-aria-role-tree>tree</code>, or <code title=attr-aria-role-directory>directory</code>
   10556 
   10557     <tr><td><a href=#the-body-element>The body element</a>
   10558      <td><code title=attr-aria-role-document>document</code> role
   10559      <td>Role must be either <code title=attr-aria-role-document>document</code> or <code title=attr-aria-role-application>application</code>
   10560 
   10561   </table><div class=impl>
   10562 
   10563   <p>User agents may apply different defaults than those described in
   10564   this section in order to expose the semantics of <a href=#html-elements>HTML
   10565   elements</a> in a manner more fine-grained than possible with the
   10566   above definitions.</p>
   10567 
   10568   <p>Conformance checkers are encouraged to phrase errors such that
   10569   authors are encouraged to use more appropriate elements rather than
   10570   remove accessibility annotations. For example, if an <code><a href=#the-a-element>a</a></code>
   10571   element is marked as having the <code title=attr-aria-role-button>button</code> role, a conformance
   10572   checker could say "Either a <code><a href=#the-button-element>button</a></code> element or an
   10573   <code><a href=#the-input-element>input</a></code> element is required when using the <code title=attr-aria-role-button>button</code> role" rather than "The
   10574   <code title=attr-aria-role-button>button</code> role cannot be
   10575   used with <code><a href=#the-a-element>a</a></code> elements".</p>
   10576 
   10577   </div>
   10578 
   10579 
   10580   <h3 id=apis-in-html-documents><span class=secno>3.3 </span>APIs in HTML documents</h3>
   10581 
   10582   <p>For <a href=#html-documents>HTML documents</a>, and for <a href=#html-elements>HTML
   10583   elements</a> in <a href=#html-documents>HTML documents</a>, certain APIs defined
   10584   in DOM Core become case-insensitive or case-changing, as sometimes
   10585   defined in DOM Core, and as summarized <span class=impl>or
   10586   required</span> below. <a href=#refsDOMCORE>[DOMCORE]</a></p>
   10587 
   10588   <p>This does not apply to <a href=#xml-documents>XML documents</a> or to elements
   10589   that are not in the <a href=#html-namespace-0>HTML namespace</a> despite being in
   10590   <a href=#html-documents>HTML documents</a>.</p>
   10591 
   10592   <dl><dt><code title=dom-Element-tagName><a href=#dom-element-tagname>Element.tagName</a></code> and <code title=dom-Node-nodeName>Node.nodeName</code></dt>
   10593 
   10594    <dd>
   10595 
   10596     <p>These attributes <span class=impl>must</span> return element
   10597     names <a href=#converted-to-ascii-uppercase>converted to ASCII uppercase</a>, regardless of the case
   10598     with which they were created.</p>
   10599 
   10600    </dd>
   10601 
   10602 
   10603    <dt><code title=dom-Document-createElement>Document.createElement()</code></dt>
   10604 
   10605    <dd>
   10606 
   10607     <p>The canonical form of HTML markup is all-lowercase; thus, this
   10608     method will <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">lowercase</a>
   10609     the argument before creating the requisite element. <span class=impl>Also, the element created must be in the <a href=#html-namespace-0>HTML
   10610     namespace</a></span>.</p>
   10611 
   10612     <p class=note>This doesn't apply to <code title="">Document.createElementNS()</code>. Thus, it is possible,
   10613     by passing this last method a tag name in the wrong case, to
   10614     create an element that appears to have the same tag name as that
   10615     of an element defined in this specification when its <code title=dom-Element-tagName><a href=#dom-element-tagname>tagName</a></code> attribute is examined, but that
   10616     doesn't support the corresponding interfaces. The "real" element
   10617     name (unaffected by case conversions) can be obtained from the
   10618     <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> attribute.</p>
   10619 
   10620    </dd>
   10621 
   10622 
   10623    <dt><code title=dom-Element-setAttribute>Element.setAttribute()</code></dt>
   10624    <dt><code title=dom-Element-setAttributeNode>Element.setAttributeNode()</code></dt>
   10625 
   10626    <dd>
   10627 
   10628     <p>Attribute names are <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>
   10629 
   10630     <div class=impl>
   10631 
   10632      <p>Specifically: when an attribute is set on an <a href=#html-elements title="HTML
   10633      elements">HTML element</a> using <code title="">Element.setAttribute()</code>, the name argument must be
   10634      <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the element is
   10635      affected; and when an <code><a href=#attr>Attr</a></code> node is set on an <a href=#html-elements title="HTML elements">HTML element</a> using <code title="">Element.setAttributeNode()</code>, it must have its name
   10636      <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the element is
   10637      affected.</p>
   10638 
   10639     </div>
   10640 
   10641     <p class=note>This doesn't apply to <code title="">Element.setAttributeNS()</code> and <code title="">Element.setAttributeNodeNS()</code>.</p>
   10642 
   10643    </dd>
   10644 
   10645 
   10646    <dt><code title=dom-Element-getAttribute>Element.getAttribute()</code></dt>
   10647    <dt><code title=dom-Element-getAttributeNode>Element.getAttributeNode()</code></dt>
   10648 
   10649    <dd>
   10650 
   10651     <p>Attribute names are <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>
   10652 
   10653     <div class=impl>
   10654 
   10655      <p>Specifically: When the <code title="">Element.getAttribute()</code> method or the <code title="">Element.getAttributeNode()</code> method is invoked on
   10656      an <a href=#html-elements title="HTML elements">HTML element</a>, the name
   10657      argument must be <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> before the
   10658      element's attributes are examined.</p>
   10659 
   10660     </div>
   10661 
   10662     <p class=note>This doesn't apply to <code title="">Element.getAttributeNS()</code> and <code title="">Element.getAttributeNodeNS()</code>.</p>
   10663 
   10664    </dd>
   10665 
   10666 
   10667    <dt><code title=dom-Document-getElementsByTagName>Document.getElementsByTagName()</code></dt>
   10668    <dt><code title=dom-Element-getElementsByTagName>Element.getElementsByTagName()</code></dt>
   10669 
   10670    <dd>
   10671 
   10672     <p>HTML elements match by lower-casing the argument before
   10673     comparison, elements from other namespaces are treated as in XML
   10674     (case-sensitively).</p>
   10675 
   10676     <div class=impl>
   10677 
   10678     <p>Specifically, these methods (but not their namespaced
   10679     counterparts) must compare the given argument in a
   10680     <a href=#case-sensitive>case-sensitive</a> manner, but when looking at <a href=#html-elements title="HTML elements">HTML elements</a>, the argument must
   10681     first be <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</p>
   10682 
   10683     </div>
   10684 
   10685     <p class=note>Thus, in an <a href=#html-documents title="HTML documents">HTML
   10686     document</a> with nodes in multiple namespaces, these methods
   10687     will effectively be both case-sensitive and case-insensitive at
   10688     the same time.</p>
   10689 
   10690    </dd>
   10691 
   10692 
   10693   </dl><div class=impl>
   10694 
   10695   <h3 id=interactions-with-xpath-and-xslt><span class=secno>3.4 </span>Interactions with XPath and XSLT</h3>
   10696 
   10697   <p id=xpath-1.0-processors>Implementations of XPath 1.0 that
   10698   operate on HTML documents parsed or created in the manners described
   10699   in this specification (e.g. as part of the <code title="">document.evaluate()</code> API) must act as if the
   10700   following edit was applied to the XPath 1.0 specification.</p>
   10701 
   10702   <p>First, remove this paragraph:</p>
   10703 
   10704   <blockquote cite=http://www.w3.org/TR/1999/REC-xpath-19991116#node-tests>
   10705 
   10706    <p>A <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> in the
   10707    node test is expanded into an <a href=http://www.w3.org/TR/1999/REC-xpath-19991116#dt-expanded-name>expanded-name</a>
   10708    using the namespace declarations from the expression context.  This
   10709    is the same way expansion is done for element type names in start
   10710    and end-tags except that the default namespace declared with <code title="">xmlns</code> is not used: if the <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> does
   10711    not have a prefix, then the namespace URI is null (this is the same
   10712    way attribute names are expanded).  It is an error if the <a href=http://www.w3.org/TR/REC-xml-names#NT-QName>QName</a> has a
   10713    prefix for which there is no namespace declaration in the
   10714    expression context.</p>
   10715 
   10716   </blockquote>
   10717 
   10718   <p>Then, insert in its place the following:</p>
   10719 
   10720   <blockquote cite="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7059#c37">
   10721 
   10722    <p>A QName in the node test is expanded into an expanded-name using
   10723    the namespace declarations from the expression context. If the
   10724    QName has a prefix, then there must be a<!-- added 2009-10-27 -
   10725    http://www.w3.org/Bugs/Public/show_bug.cgi?id=8062 --> namespace
   10726    declaration for this prefix in the expression context, and the
   10727    corresponding<!-- typo fixed 2009-10-27 -
   10728    http://www.w3.org/Bugs/Public/show_bug.cgi?id=8063 --> namespace
   10729    URI is the one that is associated with this prefix.  It is an error
   10730    if the QName has a prefix for which there is no namespace
   10731    declaration in the expression context. </p>
   10732 
   10733    <p>If the QName has no prefix and the principal node type of the
   10734    axis is element, then the default element namespace is
   10735    used. Otherwise if the QName has no prefix, the namespace URI is
   10736    null. The default element namespace is a member of the context for
   10737    the XPath expression. The value of the default element namespace
   10738    when executing an XPath expression through the DOM3 XPath API is
   10739    determined in the following way:</p>
   10740 
   10741    <ol><li>If the context node is from an HTML DOM, the default element
   10742     namespace is "http://www.w3.org/1999/xhtml".</li>
   10743 
   10744     <li>Otherwise, the default element namespace URI is null.</li>
   10745 
   10746    </ol><p class=note>This is equivalent to adding the default element
   10747    namespace feature of XPath 2.0 to XPath 1.0, and using the HTML
   10748    namespace as the default element namespace for HTML documents. It
   10749    is motivated by the desire to have implementations be compatible
   10750    with legacy HTML content while still supporting the changes that
   10751    this specification introduces to HTML regarding the namespace used
   10752    for HTML elements, and by the desire to use XPath 1.0 rather than
   10753    XPath 2.0.</p>
   10754 
   10755   </blockquote>
   10756 
   10757   <p class=note>This change is a <a href=#willful-violation>willful violation</a> of
   10758   the XPath 1.0 specification, motivated by desire to have
   10759   implementations be compatible with legacy content while still
   10760   supporting the changes that this specification introduces to HTML
   10761   regarding which namespace is used for HTML elements. <a href=#refsXPATH10>[XPATH10]</a></p> <!-- note: version matters for
   10762   this ref -->
   10763 
   10764   <hr><p id=dom-based-xslt-1.0-processors>XSLT 1.0 processors outputting
   10765   to a DOM when the output method is "html" (either explicitly or via
   10766   the defaulting rule in XSLT 1.0) are affected as follows:</p>
   10767 
   10768   <p>If the transformation program outputs an element in no namespace,
   10769   the processor must, prior to constructing the corresponding DOM
   10770   element node, change the namespace of the element to the <a href=#html-namespace-0>HTML
   10771   namespace</a>, <a href=#converted-to-ascii-lowercase title="converted to ASCII
   10772   lowercase">ASCII-lowercase</a> the element's local name, and
   10773   <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">ASCII-lowercase</a>
   10774   the names of any non-namespaced attributes on the element.</p>
   10775 
   10776   <p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
   10777   of the XSLT 1.0 specification, required because this specification
   10778   changes the namespaces and case-sensitivity rules of HTML in a
   10779   manner that would otherwise be incompatible with DOM-based XSLT
   10780   transformations. (Processors that serialize the output are
   10781   unaffected.) <a href=#refsXSLT10>[XSLT10]</a></p> <!-- note:
   10782   version matters for this ref -->
   10783 
   10784   </div>
   10785 
   10786 
   10787 
   10788   <h3 id=dynamic-markup-insertion><span class=secno>3.5 </span><dfn>Dynamic markup insertion</dfn></h3>
   10789 
   10790   <p class=note>APIs for dynamically inserting markup into the
   10791   document interact with the parser, and thus their behavior varies
   10792   depending on whether they are used with <a href=#html-documents>HTML documents</a>
   10793   (and the <a href=#html-parser>HTML parser</a>) or XHTML in <a href=#xml-documents>XML
   10794   documents</a> (and the <a href=#xml-parser>XML parser</a>).</p>
   10795 
   10796 
   10797 
   10798   <h4 id=opening-the-input-stream><span class=secno>3.5.1 </span>Opening the input stream</h4>
   10799 
   10800   <p>The <dfn id=dom-document-open title=dom-document-open><code>open()</code></dfn>
   10801   method comes in several variants with different numbers of
   10802   arguments.</p>
   10803 
   10804   <dl class=domintro><dt><var title="">document</var> = <var title="">document</var> . <code title=dom-document-open><a href=#dom-document-open>open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>
   10805 
   10806    <dd>
   10807 
   10808     <p>Causes the <code><a href=#document>Document</a></code> to be replaced in-place, as if
   10809     it was a new <code><a href=#document>Document</a></code> object, but reusing the
   10810     previous object, which is then returned.</p>
   10811 
   10812     <p>If the <var title="">type</var> argument is omitted or has the
   10813     value "<code><a href=#text/html>text/html</a></code>", then the resulting
   10814     <code><a href=#document>Document</a></code> has an HTML parser associated with it, which
   10815     can be given data to parse using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>. Otherwise, all
   10816     content passed to <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> will be parsed
   10817     as plain text.</p>
   10818 
   10819     <p>If the <var title="">replace</var> argument is present and has
   10820     the value "<code title="">replace</code>", the existing entries in
   10821     the session history for the <code><a href=#document>Document</a></code> object are
   10822     removed.</p>
   10823 
   10824     <p>The method has no effect if the <code><a href=#document>Document</a></code> is still
   10825     being parsed.</p>
   10826 
   10827     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
   10828     <code><a href=#document>Document</a></code> is an <a href=#xml-documents title="XML documents">XML
   10829     document</a>.</p>
   10830 
   10831    </dd>
   10832 
   10833    <dt><var title="">window</var> = <var title="">document</var> . <code title=dom-document-open><a href=#dom-document-open>open</a></code>( <var title="">url</var>, <var title="">name</var>, <var title="">features</var> [, <var title="">replace</var> ] )</dt>
   10834 
   10835    <dd>
   10836 
   10837     <p>Works like the <code title=dom-open><a href=#dom-open>window.open()</a></code>
   10838     method.</p>
   10839 
   10840    </dd>
   10841 
   10842   </dl><div class=impl>
   10843 
   10844   <p>When called with two or fewer arguments, the method must act as
   10845   follows:</p>
   10846 
   10847   <ol><li>If the <code><a href=#document>Document</a></code> object is not flagged as an <a href=#html-documents title="HTML documents">HTML document</a>, throw an
   10848    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   10849    steps.</li>
   10850 
   10851    <li><p>Let <var title="">type</var> be the value of the first
   10852    argument, if there is one, or "<code><a href=#text/html>text/html</a></code>"
   10853    otherwise.</li>
   10854 
   10855    <li><p>Let <var title="">replace</var> be true if there is a second
   10856    argument and it is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   10857    the value "replace", and false otherwise.</li>
   10858 
   10859    <li>
   10860 
   10861     <p>If the document has an <a href=#active-parser>active parser</a> that isn't a
   10862     <a href=#script-created-parser>script-created parser</a>, and the <a href=#insertion-point>insertion
   10863     point</a> associated with that parser's <a href=#the-input-stream>input
   10864     stream</a> is not undefined (that is, it <em>does</em> point to
   10865     somewhere in the input stream), then the method does
   10866     nothing. Abort these steps and return the <code><a href=#document>Document</a></code>
   10867     object on which the method was invoked.</p>
   10868 
   10869     <p class=note>This basically causes <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> to be ignored
   10870     when it's called in an inline script found during the parsing of
   10871     data sent over the network, while still letting it have an effect
   10872     when called asynchronously or on a document that is itself being
   10873     spoon-fed using these APIs.</p>
   10874 
   10875    </li>
   10876 
   10877    <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>
   10878 
   10879    <li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
   10880    unload</a> the <code><a href=#document>Document</a></code> object. If the user
   10881    <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
   10882    these steps must be aborted.</li>
   10883 
   10884    <li><p><a href=#unload-a-document title="unload a document">Unload</a> the
   10885    <code><a href=#document>Document</a></code> object, with the <var title="">recycle</var>
   10886    parameter set to true.</li>
   10887 
   10888    <li><p>If the document has an <a href=#active-parser>active parser</a>, then
   10889    <a href=#abort-an-html-parser title="abort an HTML parser">abort that
   10890    parser</a>.</li>
   10891 
   10892    <li><p>Unregister all event listeners registered on the
   10893    <code><a href=#document>Document</a></code> node and its descendants.</p>
   10894 
   10895    <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
   10896    associated with the <code><a href=#document>Document</a></code> in any <a href=#task-source>task
   10897    source</a>.</li> <!-- removes callbacks that fired between
   10898    this algorithm starting and the times and databases being aborted
   10899    in the "unload" step above -->
   10900 
   10901    <li><p>Remove all child nodes of the document, without firing any
   10902    mutation events.</li> <!-- as of 2009-03-30, only WebKit fired
   10903    mutation events here. -->
   10904 
   10905    <li><p>Replace the <code><a href=#document>Document</a></code>'s singleton objects with
   10906    new instances of those objects. (This includes in particular the
   10907    <code><a href=#window>Window</a></code>, <code><a href=#location>Location</a></code>, <code><a href=#history-0>History</a></code>,
   10908    <code><a href=#applicationcache>ApplicationCache</a></code>, <code><a href=#undomanager>UndoManager</a></code>,
   10909    <code><a href=#navigator>Navigator</a></code>, and <code><a href=#selection-0>Selection</a></code> objects, the
   10910    various <code><a href=#barprop>BarProp</a></code> objects, the two <code>Storage</code>
   10911    objects, and the various <code><a href=#htmlcollection>HTMLCollection</a></code> objects. It
   10912    also includes all the Web IDL prototypes in the JavaScript binding,
   10913    including the <code><a href=#document>Document</a></code> object's prototype.)</li>
   10914 
   10915    <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%20src%3D%22document%22%3E%3C%2Fiframe%3E%0A%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20f%20%3D%20document.getElementsByTagName('iframe')%5B0%5D%3B%20d%20%3D%20f.contentWindow.document%3B%20%7D%3C%2Fscript%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22w(d.documentElement.innerHTML)%22%20value%3D%22dump%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cscript%3Evar%20x%20%3D%20new%20XMLHttpRequest()%3Bx.open(%26quot%3BGET%26quot%3B%2C%20%26quot%3BGET%26quot%3B)%3Bx.onreadystatechange%3Dfunction()%20%7B%20alert(x.readyState)%3B%20%7D%3Bx.send(null)%3B%3C%2Fscript%3E')%3Bd.close()%3B%20setTimeout(function()%20%7B%20d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%20%7D%2C%200)%3B%22%20value%3D%22xhr%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.onclick%20%3D%20function()%20%7B%20w('click')%20%7D%22%20value%3D%22add%20click%20handler%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cp%3Etest%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%22%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22d.open()%3B%20d.write('%3Cp%3E%3Cscript%3Ei%20%3D%200%3B%20setTimeout(%26quot%3Bparent.w(i%2B%2B)%26quot%3B%2C%202000)%3C%2Fscript%3E%3C%2Fp%3E')%3B%20d.close()%22%20value%3D%22replace%20with%20timer%22%3E -->
   10916    <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A...%3Ciframe%3E%3C%2Fiframe%3E%0D%0A%3Cscript%3E%0D%0Aonload%20%3D%20function%20()%20%7B%0D%0A%20frames%5B0%5D.test%20%3D%201%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20var%20a%20%3D%20frames%5B0%5D.document.location.assign%3B%0D%0A%20w(a)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%20frames%5B0%5D.document.open()%3B%0D%0A%20frames%5B0%5D.document.write('%3Cscript%3Edocument.write(test)%3C%5C%2Fscript%3E')%3B%0D%0A%20frames%5B0%5D.document.close()%3B%0D%0A%20w(frames%5B0%5D.test)%3B%0D%0A%20w(frames%5B0%5D.document.location.assign%20%3D%3D%3D%20a)%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E -->
   10917 
   10918    <li><p>Change the <a href="#document's-character-encoding">document's character encoding</a> to
   10919    UTF-16.</li>
   10920 
   10921    <li><p>Change <a href="#the-document's-address">the document's address</a> to the
   10922    <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
   10923    document">document</a>'s <a href="#the-document's-address" title="the document's
   10924    address">address</a>.</li>
   10925 
   10926    <li><p>Create a new <a href=#html-parser>HTML parser</a> and associate it with
   10927    the document. This is a <dfn id=script-created-parser>script-created parser</dfn> (meaning
   10928    that it can be closed by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> and <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> methods, and
   10929    that the tokenizer will wait for an explicit call to <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> before emitting
   10930    an end-of-file token). The encoding <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
   10931    <i>irrelevant</i>.</li>
   10932 
   10933    <li>
   10934 
   10935     <!-- text/plain handling -->
   10936 
   10937     <p>If the <var title="">type</var> string contains a U+003B
   10938     SEMICOLON character (;), remove the first such character and all
   10939     characters from it up to the end of the string.</p>
   10940 
   10941     <p>Strip all leading and trailing <a href=#space-character title="space
   10942     character">space characters</a> from <var title="">type</var>.</p>
   10943 
   10944     <p>If <var title="">type</var> is <em>not</em> now an <a href=#ascii-case-insensitive>ASCII
   10945     case-insensitive</a> match for the string
   10946     "<code><a href=#text/html>text/html</a></code>", then act as if the tokenizer had emitted
   10947     a start tag token with the tag name "pre", then switch the
   10948     <a href=#html-parser>HTML parser</a>'s tokenizer to the <a href=#plaintext-state>PLAINTEXT
   10949     state</a>.</p>
   10950 
   10951     <!--
   10952  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fsvg%2Bxml')%3B%0D%0A%20%20d.write(%22%3Cinput%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%20value%3D'(x)html'%2F%3E%22)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
   10953  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20%7B%20%0D%0A%20%20var%20d%20%3D%20document.getElementsByTagName('iframe')%5B0%5D.contentDocument%3B%0D%0A%20%20d.open('image%2Fgif')%3B%0D%0A%20%20var%20a%20%3D%20%5B%200x47%2C%200x49%2C%200x46%2C%200x38%2C%200x39%2C%200x61%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x80%2C%200xff%2C%200x00%2C%200xc0%2C%200xc0%2C%200xc0%2C%200x00%2C%200x00%2C%200x00%2C%200x21%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200xf9%2C%200x04%2C%200x01%2C%200x00%2C%200x00%2C%200x00%2C%200x00%2C%200x2c%2C%200x00%2C%200x00%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x00%2C%200x00%2C%200x01%2C%200x00%2C%200x01%2C%200x00%2C%200x00%2C%200x02%2C%200x02%2C%200x44%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%200x01%2C%200x00%2C%200x3b%20%5D%3B%0D%0A%20%20var%20s%20%3D%20%22%22%3B%0D%0A%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20a.length%3B%20i%20%2B%3D%201)%0D%0A%20%20%20%20s%20%2B%3D%20String.fromCharCode(a%5Bi%5D)%3B%0D%0A%20%20d.write(s)%3B%0D%0A%20%20d.close()%3B%0D%0A%7D%3B%3C%2Fscript%3E
   10954  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27Text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
   10955  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27%20text%2Fplain%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
   10956  http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Ciframe%3E%3C%2Fiframe%3E%3Cscript%3Eonload%20%3D%20function%20()%20{%20%0A%20%20var%20d%20%3D%20document.getElementsByTagName(%27iframe%27)[0].contentDocument%3B%0A%20%20d.open(%27text%2Fplain%3B%27)%3B%0A%20%20d.write(%27%3Cb%3Etest%27)%3B%0A%20%20d.close()%3B%0A}%3B%3C%2Fscript%3E
   10957     -->
   10958 
   10959    </li>
   10960 
   10961    <li>
   10962 
   10963     <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
   10964     <a href=#session-history>session history</a> after the <a href=#current-entry>current
   10965     entry</a>. If the <a href=#current-entry>current entry</a> is the last entry
   10966     in the session history, then no entries are removed.</p>
   10967 
   10968     <p class=note>This <a href=#history-notes>doesn't necessarily
   10969     have to affect</a> the user agent's user interface.</p>
   10970 
   10971    </li>
   10972 
   10973    <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued by
   10974    the <a href=#history-traversal-task-source>history traversal task source</a>.</li>
   10975 
   10976    <li>Remove any earlier entries that share the same
   10977    <code><a href=#document>Document</a></code>.</li>
   10978 
   10979    <li><p>If <var title="">replace</var> is false, then add a new
   10980    entry, just before the last entry, and associate with the new entry
   10981    the text that was parsed by the previous parser associated with the
   10982    <code><a href=#document>Document</a></code> object, as well as the state of the document
   10983    at the start of these steps. (This allows the user to step
   10984    backwards in the session history to see the page before it was
   10985    blown away by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> call.)</li>
   10986 
   10987    <li><p>Finally, set the <a href=#insertion-point>insertion point</a> to point at
   10988    just before the end of the <a href=#the-input-stream>input stream</a> (which at this
   10989    point will be empty).</li>
   10990 
   10991    <li><p>Return the <code><a href=#document>Document</a></code> on which the method was
   10992    invoked.</li>
   10993 
   10994   </ol><p>When called with three or more arguments, the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method on the
   10995   <code><a href=#htmldocument>HTMLDocument</a></code> object must call the <code title=dom-open><a href=#dom-open>open()</a></code> method on the <code><a href=#window>Window</a></code>
   10996   object of the <code><a href=#htmldocument>HTMLDocument</a></code> object, with the same
   10997   arguments as the original call to the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method, and return whatever
   10998   that method returned. If the <code><a href=#htmldocument>HTMLDocument</a></code> object has no
   10999   <code><a href=#window>Window</a></code> object, then the method must raise an
   11000   <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>
   11001 
   11002   </div>
   11003 
   11004 
   11005 
   11006   <h4 id=closing-the-input-stream><span class=secno>3.5.2 </span>Closing the input stream</h4>
   11007 
   11008   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-close><a href=#dom-document-close>close</a></code>()</dt>
   11009 
   11010    <dd>
   11011 
   11012     <p>Closes the input stream that was opened by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> method.</p>
   11013 
   11014     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
   11015     <code><a href=#document>Document</a></code> is an <a href=#xml-documents title="XML documents">XML
   11016     document</a>.</p>
   11017 
   11018    </dd>
   11019 
   11020   </dl><div class=impl>
   11021 
   11022   <p>The <dfn id=dom-document-close title=dom-document-close><code>close()</code></dfn>
   11023   method must run the following steps:</p>
   11024 
   11025   <ol><li><p>If the <code><a href=#document>Document</a></code> object is not flagged as an
   11026    <a href=#html-documents title="HTML documents">HTML document</a>, throw an
   11027    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   11028    steps.</li>
   11029 
   11030    <li><p>If there is no <a href=#script-created-parser>script-created parser</a> associated
   11031    with the document, then abort these steps.</li>
   11032 
   11033    <li><p>Insert an <a href=#explicit-eof-character>explicit "EOF" character</a> at the end
   11034    of the parser's <a href=#the-input-stream>input stream</a>.</li>
   11035 
   11036    <li><p>If there is a <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>,
   11037    then abort these steps.</li>
   11038 
   11039    <li><p>Run the tokenizer, processing resulting tokens as they are
   11040    emitted, and stopping when the tokenizer reaches the <a href=#explicit-eof-character>explicit
   11041    "EOF" character</a> or <a href=#spin-the-event-loop title="spin the event loop">spins
   11042    the event loop</a>.</li>
   11043 
   11044   </ol></div>
   11045 
   11046 
   11047 
   11048   <h4 id=document.write()><span class=secno>3.5.3 </span><code title=dom-document-write><a href=#dom-document-write>document.write()</a></code></h4>
   11049 
   11050   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-write><a href=#dom-document-write>write</a></code>(<var title="">text</var>...)</dt>
   11051 
   11052    <dd>
   11053 
   11054     <p>Adds the given string(s) to the <code><a href=#document>Document</a></code>'s input
   11055     stream. If necessary, calls the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method implicitly
   11056     first.</p>
   11057 
   11058     <p>This method throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception
   11059     when invoked on <a href=#xml-documents>XML documents</a>.</p>
   11060 
   11061     <p>Unless called from the body of a <code><a href=#script>script</a></code> element
   11062     while the document is being parsed, or called on a script-created
   11063     document, calling this method will clear the current page first,
   11064     as if <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> had
   11065     been called.</p>
   11066 
   11067    </dd>
   11068 
   11069   </dl><div class=impl>
   11070 
   11071   <p>The <dfn id=dom-document-write title=dom-document-write><code>document.write(...)</code></dfn>
   11072   method must act as follows:</p>
   11073 
   11074   <ol><li>
   11075 
   11076     <p>If the method was invoked on an <a href=#xml-documents title="XML documents">XML
   11077     document</a>, throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   11078     exception and abort these steps.</p>
   11079 
   11080     <!--
   11081     Where would document.write() insert?
   11082     Consider: data:text/xml,<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ document.write('<foo>Test</foo>'); ]]></script>
   11083     -->
   11084 
   11085    </li>
   11086 
   11087    <li>
   11088 
   11089     <p>If the <a href=#insertion-point>insertion point</a> is undefined, the <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method must be called
   11090     (with no arguments) on the <code title=Document><a href=#document>document</a></code>
   11091     object. If the user <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be
   11092     unloaded</a>, then these steps must be aborted. Otherwise, the
   11093     <a href=#insertion-point>insertion point</a> will point at just before the end of
   11094     the (empty) <a href=#the-input-stream>input stream</a>.</p>
   11095 
   11096    </li>
   11097 
   11098    <li>
   11099 
   11100     <p>The string consisting of the concatenation of all the arguments
   11101     to the method must be inserted into the <a href=#the-input-stream>input stream</a>
   11102     just before the <a href=#insertion-point>insertion point</a>.</p>
   11103 
   11104    </li>
   11105 
   11106    <li>
   11107 
   11108     <p>If there is a <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>, then the
   11109     method must now return without further processing of the
   11110     <a href=#the-input-stream>input stream</a>.</p>
   11111 
   11112    </li>
   11113 
   11114    <li>
   11115 
   11116     <p>Otherwise, the tokenizer must process the characters that were
   11117     inserted, one at a time, processing resulting tokens as they are
   11118     emitted, and stopping when the tokenizer reaches the insertion
   11119     point or when the processing of the tokenizer is aborted by the
   11120     tree construction stage (this can happen if a <code><a href=#script>script</a></code>
   11121     end tag token is emitted by the tokenizer).
   11122 
   11123     <p class=note>If the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method was
   11124     called from script executing inline (i.e. executing because the
   11125     parser parsed a set of <code><a href=#script>script</a></code> tags), then this is a
   11126     <a href=#nestedParsing>reentrant invocation of the
   11127     parser</a>.</p>
   11128 
   11129    </li>
   11130 
   11131    <li>
   11132 
   11133     <p>Finally, the method must return.</p>
   11134 
   11135    </li>
   11136 
   11137   </ol></div>
   11138 
   11139 
   11140   <h4 id=document.writeln()><span class=secno>3.5.4 </span><code title=dom-document-writeln><a href=#dom-document-writeln>document.writeln()</a></code></h4>
   11141 
   11142   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-writeln><a href=#dom-document-writeln>writeln</a></code>(<var title="">text</var>...)</dt>
   11143 
   11144    <dd>
   11145 
   11146     <p>Adds the given string(s) to the <code><a href=#document>Document</a></code>'s input
   11147     stream, followed by a newline character. If necessary, calls the
   11148     <code title=dom-document-open><a href=#dom-document-open>open()</a></code> method implicitly
   11149     first.</p>
   11150 
   11151     <p>This method throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception
   11152     when invoked on <a href=#xml-documents>XML documents</a>.</p>
   11153 
   11154    </dd>
   11155 
   11156   </dl><div class=impl>
   11157 
   11158   <p>The <dfn id=dom-document-writeln title=dom-document-writeln><code>document.writeln(...)</code></dfn>
   11159   method, when invoked, must act as if the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method had been
   11160   invoked with the same argument(s), plus an extra argument consisting
   11161   of a string containing a single line feed character (U+000A).</p>
   11162 
   11163   </div>
   11164 
   11165 
   11166 
   11167   <h4 id=innerhtml><span class=secno>3.5.5 </span><code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code></h4>
   11168 
   11169   <p>The <dfn id=dom-innerhtml title=dom-innerHTML><code>innerHTML</code></dfn> IDL
   11170   attribute represents the markup of the node's contents.</p>
   11171 
   11172   <dl class=domintro><dt><var title="">document</var> . <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> [ = <var title="">value</var> ]</dt>
   11173 
   11174    <dd>
   11175 
   11176     <p>Returns a fragment of HTML or XML that represents the
   11177     <code><a href=#document>Document</a></code>.</p>
   11178 
   11179     <p>Can be set, to replace the <code><a href=#document>Document</a></code>'s contents
   11180     with the result of parsing the given string.</p>
   11181 
   11182     <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
   11183     <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <code><a href=#document>Document</a></code> cannot
   11184     be serialized to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given
   11185     string is not well-formed.</p>
   11186 
   11187    </dd>
   11188 
   11189    <dt><var title="">element</var> . <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> [ = <var title="">value</var> ]</dt>
   11190 
   11191    <dd>
   11192 
   11193     <p>Returns a fragment of HTML or XML that represents the element's
   11194     contents.</p>
   11195 
   11196     <p>Can be set, to replace the contents of the element with nodes
   11197     parsed from the given string.</p>
   11198 
   11199     <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
   11200     <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the element cannot be serialized
   11201     to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given string is not
   11202     well-formed.</p>
   11203 
   11204    </dd>
   11205 
   11206   </dl><div class=impl>
   11207 
   11208   <p>On getting, if the node's document is an <a href=#html-documents title="HTML
   11209   documents">HTML document</a>, then the attribute must return the
   11210   result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
   11211   algorithm</a> on the node; otherwise, the node's document is an
   11212   <a href=#xml-documents title="XML documents">XML document</a>, and the attribute
   11213   must return the result of running the <a href=#xml-fragment-serialization-algorithm>XML fragment
   11214   serialization algorithm</a> on the node instead (this might raise
   11215   an exception instead of returning a string).</p>
   11216 
   11217   <p>On setting, the following steps must be run:</p>
   11218 
   11219   <ol><li>
   11220 
   11221     <p>If the node's document is an <a href=#html-documents title="HTML documents">HTML
   11222     document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing
   11223     algorithm</a>.</p>
   11224 
   11225     <p>If the node's document is an <a href=#xml-documents title="XML documents">XML
   11226     document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment parsing
   11227     algorithm</a>.</p>
   11228 
   11229     <p>In either case, the algorithm must be invoked with the string
   11230     being assigned into the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute as the <var title="">input</var>. If the node is an <code><a href=#element>Element</a></code>
   11231     node, then, in addition, that element must be passed as the <var title="">context</var> element.</p>
   11232 
   11233     <p>If this raises an exception, then abort these steps.</p>
   11234 
   11235     <p>Otherwise, let <var title="">new children</var> be the nodes
   11236     returned.</p>
   11237 
   11238    </li>
   11239 
   11240    <li>
   11241 
   11242     <p>If the attribute is being set on a <code><a href=#document>Document</a></code> node,
   11243     and that document has an <a href=#active-parser>active parser</a>, then abort
   11244     that parser.</p>
   11245 
   11246    </li>
   11247 
   11248    <li>
   11249 
   11250     <p>Remove the child nodes of the node whose <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute is being set,
   11251     firing appropriate mutation events.</p>
   11252 
   11253    </li>
   11254 
   11255    <li>
   11256 
   11257     <p>If the attribute is being set on a <code><a href=#document>Document</a></code>
   11258     node, let <var title="">target document</var> be that
   11259     <code><a href=#document>Document</a></code> node. Otherwise, the attribute is being
   11260     set on an <code><a href=#element>Element</a></code> node; let <var title="">target
   11261     document</var> be the <code title="">ownerDocument</code> of
   11262     that <code><a href=#element>Element</a></code>.</p>
   11263 
   11264    </li>
   11265 
   11266    <li>
   11267 
   11268     <p>Set the <code title="">ownerDocument</code> of all the nodes in
   11269     <var title="">new children</var> to the <var title="">target
   11270     document</var>.</p>
   11271 
   11272    </li>
   11273 
   11274    <li>
   11275 
   11276     <p>Append all the <var title="">new children</var> nodes to the
   11277     node whose <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> attribute
   11278     is being set, preserving their order, and firing mutation events
   11279     as if a <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new children</var> had been inserted.</p>
   11280 
   11281    </li>
   11282 
   11283   </ol></div>
   11284 
   11285 
   11286 
   11287   <h4 id=outerhtml><span class=secno>3.5.6 </span><code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code></h4>
   11288 
   11289   <p>The <dfn id=dom-outerhtml title=dom-outerHTML><code>outerHTML</code></dfn> IDL
   11290   attribute represents the markup of the element and its contents.</p>
   11291 
   11292   <dl class=domintro><dt><var title="">element</var> . <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> [ = <var title="">value</var> ]</dt>
   11293 
   11294    <dd>
   11295 
   11296     <p>Returns a fragment of HTML or XML that represents the element
   11297     and its contents.</p>
   11298 
   11299     <p>Can be set, to replace the element with nodes parsed from the
   11300     given string.</p>
   11301 
   11302     <p>In the case of <a href=#xml-documents>XML documents</a>, will throw an
   11303     <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the element cannot be serialized
   11304     to XML, and a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the given string is not
   11305     well-formed.</p>
   11306 
   11307     <p>Throws a <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
   11308     the parent of the element is the <code><a href=#document>Document</a></code>
   11309     node.</p>
   11310 
   11311    </dd>
   11312 
   11313   </dl><div class=impl>
   11314 
   11315   <p>On getting, if the node's document is an <a href=#html-documents title="HTML
   11316   documents">HTML document</a>, then the attribute must return the
   11317   result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
   11318   algorithm</a> on a fictional node whose only child is the node on
   11319   which the attribute was invoked; otherwise, the node's document is
   11320   an <a href=#xml-documents title="XML documents">XML document</a>, and the
   11321   attribute must return the result of running the <a href=#xml-fragment-serialization-algorithm>XML fragment
   11322   serialization algorithm</a> on that fictional node instead (this
   11323   might raise an exception instead of returning a string).</p>
   11324 
   11325   <p>On setting, the following steps must be run:</p>
   11326 
   11327   <ol><li>
   11328 
   11329     <p>Let <var title="">target</var> be the element whose <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attribute is being
   11330     set.</p>
   11331 
   11332    </li>
   11333 
   11334    <li>
   11335 
   11336     <p>If <var title="">target</var> has no parent node, then abort
   11337     these steps. There would be no way to obtain a reference to the
   11338     nodes created even if the remaining steps were run.</p>
   11339 
   11340    </li>
   11341 
   11342    <li>
   11343 
   11344     <p>If <var title="">target</var>'s parent node is a
   11345     <code><a href=#document>Document</a></code> object, throw a
   11346     <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception and abort these
   11347     steps.</p>
   11348 
   11349    </li>
   11350 
   11351    <li>
   11352 
   11353     <p>Let <var title="">parent</var> be <var title="">target</var>'s
   11354     parent node, unless that is a <code><a href=#documentfragment>DocumentFragment</a></code> node,
   11355     in which case let <var title="">parent</var> be an arbitrary
   11356     <code><a href=#the-body-element-0>body</a></code> element.</p>
   11357 
   11358    </li>
   11359 
   11360    <li>
   11361 
   11362     <p>If <var title="">target</var>'s document is an <a href=#html-documents title="HTML documents">HTML document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML
   11363     fragment parsing algorithm</a>.</p>
   11364 
   11365     <p>If <var title="">target</var>'s document is an <a href=#xml-documents title="XML
   11366     documents">XML document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment
   11367     parsing algorithm</a>.</p>
   11368 
   11369     <p>In either case, the algorithm must be invoked with the string
   11370     being assigned into the <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attribute as the <var title="">input</var>, and <var title="">parent</var> as the <var title="">context</var> element.</p>
   11371 
   11372     <p>If this raises an exception, then abort these steps.</p>
   11373 
   11374     <p>Otherwise, let <var title="">new children</var> be the nodes
   11375     returned.</p>
   11376 
   11377    </li>
   11378 
   11379    <li>
   11380 
   11381     <p>Set the <code title="">ownerDocument</code> of all the nodes in
   11382     <var title="">new children</var> to <var title="">target</var>'s
   11383     document.</p>
   11384 
   11385    </li>
   11386 
   11387    <li>
   11388 
   11389     <p>Remove <var title="">target</var> from its parent node, firing
   11390     mutation events as appropriate, and then insert in its place all
   11391     the <var title="">new children</var> nodes, preserving their
   11392     order, and again firing mutation events as if a
   11393     <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new
   11394     children</var> had been inserted.</p>
   11395 
   11396    </li>
   11397 
   11398   </ol></div>
   11399 
   11400 
   11401 
   11402   <h4 id=insertadjacenthtml()><span class=secno>3.5.7 </span><code title=dom-insertAdjacentHTML><a href=#dom-insertadjacenthtml>insertAdjacentHTML()</a></code></h4>
   11403 
   11404   <dl class=domintro><dt><var title="">element</var> . <code title=dom-insertAdjacentHTML><a href=#dom-insertadjacenthtml>insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt>
   11405 
   11406    <dd>
   11407 
   11408     <p>Parses the given string <var title="">text</var> as HTML or XML
   11409     and inserts the resulting nodes into the tree in the position
   11410     given by the <var title="">position</var> argument, as
   11411     follows:</p>
   11412 
   11413     <dl><dt>"beforebegin"</dt>
   11414      <dd>Before the element itself.</dd>
   11415      <dt>"afterbegin"</dt>
   11416      <dd>Just inside the element, before its first child.</dd>
   11417      <dt>"beforeend"</dt>
   11418      <dd>Just inside the element, after its last child.</dd>
   11419      <dt>"afterend"</dt>
   11420      <dd>After the element itself.</dd>
   11421     </dl><p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the arguments
   11422     have invalid values (e.g., in the case of <a href=#xml-documents>XML
   11423     documents</a>, if the given string is not well-formed).</p>
   11424 
   11425     <p>Throws a <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
   11426     the given position isn't possible (e.g. inserting elements after
   11427     the root element of a <code><a href=#document>Document</a></code>).</p>
   11428 
   11429    </dd>
   11430 
   11431   </dl><div class=impl>
   11432 
   11433   <p>The <dfn id=dom-insertadjacenthtml title=dom-insertAdjacentHTML><code>insertAdjacentHTML(<var title="">position</var>, <var title="">text</var>)</code></dfn>
   11434   method, when invoked, must run the following algorithm:</p>
   11435 
   11436   <ol><li>
   11437 
   11438     <p>Let <var title="">position</var> and <var title="">text</var>
   11439     be the method's first and second arguments, respectively.</p>
   11440 
   11441    </li>
   11442 
   11443    <li>
   11444 
   11445     <p>Let <var title="">target</var> be the element on which the
   11446     method was invoked.</p>
   11447 
   11448    </li>
   11449 
   11450    <li>
   11451 
   11452     <p>Use the first matching item from this list:</p>
   11453 
   11454     <dl><dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11455      case-insensitive</a> match for the string "beforebegin"</dt>
   11456      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11457      case-insensitive</a> match for the string "afterend"</dt>
   11458 
   11459      <dd>
   11460 
   11461       <p>If <var title="">target</var> has no parent node, then abort
   11462       these steps.</p>
   11463 
   11464       <p>If <var title="">target</var>'s parent node is a
   11465       <code><a href=#document>Document</a></code> object, then throw a
   11466       <code><a href=#no_modification_allowed_err>NO_MODIFICATION_ALLOWED_ERR</a></code> exception and abort
   11467       these steps.
   11468 
   11469       <p>Otherwise, let <var title="">context</var> be the parent node
   11470       of <var title="">target</var>.</p>
   11471 
   11472      </dd>
   11473 
   11474      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11475      case-insensitive</a> match for the string "afterbegin"</dt>
   11476      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11477      case-insensitive</a> match for the string "beforeend"</dt>
   11478 
   11479      <dd>
   11480 
   11481       <p>Let <var title="">context</var> be the same as <var title="">target</var>.</p>
   11482 
   11483      </dd>
   11484 
   11485      <dt>Otherwise</dt>
   11486 
   11487      <dd>
   11488 
   11489       <p>Throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>
   11490 
   11491      </dd>
   11492 
   11493     </dl></li>
   11494 
   11495    <li>
   11496 
   11497     <p>If <var title="">target</var>'s document is an <a href=#html-documents title="HTML documents">HTML document</a>: Invoke the <a href=#html-fragment-parsing-algorithm>HTML
   11498     fragment parsing algorithm</a>.</p>
   11499 
   11500     <p>If <var title="">target</var>'s document is an <a href=#xml-documents title="XML
   11501     documents">XML document</a>: Invoke the <a href=#xml-fragment-parsing-algorithm>XML fragment
   11502     parsing algorithm</a>.</p>
   11503 
   11504     <p>In either case, the algorithm must be invoked with <var title="">text</var> as the <var title="">input</var>, and the
   11505     element selected in by the previous step as the <var title="">context</var> element.</p>
   11506 
   11507     <p>If this raises an exception, then abort these steps.</p>
   11508 
   11509     <p>Otherwise, let <var title="">new children</var> be the nodes
   11510     returned.</p>
   11511 
   11512    </li>
   11513 
   11514    <li>
   11515 
   11516     <p>Set the <code title="">ownerDocument</code> of all the nodes in
   11517     <var title="">new children</var> to <var title="">target</var>'s
   11518     document.</p>
   11519 
   11520    </li>
   11521 
   11522    <li>
   11523 
   11524     <p>Use the first matching item from this list:</p>
   11525 
   11526     <dl><dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11527      case-insensitive</a> match for the string "beforebegin"</dt>
   11528 
   11529      <dd>
   11530 
   11531       <p>Insert all the <var title="">new children</var> nodes
   11532       immediately before <var title="">target</var>.</p>
   11533 
   11534      </dd>
   11535 
   11536      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11537      case-insensitive</a> match for the string "afterbegin"</dt>
   11538 
   11539      <dd>
   11540 
   11541       <p>Insert all the <var title="">new children</var> nodes before
   11542       the first child of <var title="">target</var>, if there is
   11543       one. If there is no such child, append them all to <var title="">target</var>.</p>
   11544 
   11545      </dd>
   11546 
   11547      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11548      case-insensitive</a> match for the string "beforeend"</dt>
   11549 
   11550      <dd>
   11551 
   11552       <p>Append all the <var title="">new children</var> nodes to <var title="">target</var>.</p>
   11553 
   11554      </dd>
   11555 
   11556      <dt>If <var title="">position</var> is an <a href=#ascii-case-insensitive>ASCII
   11557      case-insensitive</a> match for the string "afterend"</dt>
   11558 
   11559      <dd>
   11560 
   11561       <p>Insert all the <var title="">new children</var> nodes
   11562       immediately after <var title="">target</var>.</p>
   11563 
   11564      </dd>
   11565 
   11566     </dl><p>The <var title="">new children</var> nodes must be inserted in
   11567     a manner that preserves their order and fires mutation events as
   11568     if a <code><a href=#documentfragment>DocumentFragment</a></code> containing the <var title="">new children</var> had been inserted.</p>
   11569 
   11570    </li>
   11571 
   11572   </ol></div>
   11573 
   11574 
   11575 
   11576   <h2 id=semantics><span class=secno>4 </span>The elements of HTML</h2>
   11577 
   11578   <h3 id=the-root-element><span class=secno>4.1 </span>The root element</h3>
   11579 
   11580   <h4 id=the-html-element-0><span class=secno>4.1.1 </span>The <dfn><code>html</code></dfn> element</h4>
   11581 
   11582   <dl class=element><dt>Categories</dt>
   11583    <dd>None.</dd>
   11584    <dt>Contexts in which this element may be used:</dt>
   11585    <dd>As the root element of a document.</dd>
   11586    <dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
   11587    <dt>Content model:</dt>
   11588    <dd>A <code><a href=#the-head-element-0>head</a></code> element followed by a <code><a href=#the-body-element-0>body</a></code> element.</dd>
   11589    <dt>Content attributes:</dt>
   11590    <dd><a href=#global-attributes>Global attributes</a></dd>
   11591    <dd><code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code></dd>
   11592    <dt>DOM interface:</dt>
   11593    <dd>
   11594     <pre class=idl>interface <dfn id=htmlhtmlelement>HTMLHtmlElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   11595    </dd>
   11596   </dl><p>The <code><a href=#the-html-element-0>html</a></code> element <a href=#represents>represents</a> the root of
   11597   an HTML document.</p>
   11598 
   11599   <p>The <dfn id=attr-html-manifest title=attr-html-manifest><code>manifest</code></dfn>
   11600   attribute gives the address of the document's <a href=#application-cache>application
   11601   cache</a> <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, if there is
   11602   one. If the attribute is present, the attribute's value must be a
   11603   <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   11604   spaces</a>.</p>
   11605 
   11606   <p>The <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
   11607   only <a href=#concept-appcache-init title=concept-appcache-init>has an effect</a> during
   11608   the early stages of document load. Changing the attribute
   11609   dynamically thus has no effect (and thus, no DOM API is provided for
   11610   this attribute).</p>
   11611 
   11612   <p class=note>For the purposes of <a href=#concept-appcache-init title=concept-appcache-init>application cache selection</a>,
   11613   later <code><a href=#the-base-element>base</a></code> elements cannot affect the <a href=#resolve-a-url title="resolve a url">resolving of relative URLs</a> in <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attributes, as the
   11614   attributes are processed before those elements are seen.</p>
   11615 
   11616   <p class=note>The <code title=dom-applicationCache><a href=#dom-applicationcache>window.applicationCache</a></code> IDL
   11617   attribute provides scripted access to the offline <a href=#application-cache>application
   11618   cache</a> mechanism.</p>
   11619 
   11620   <div class=example>
   11621 
   11622    <p>The <code><a href=#the-html-element-0>html</a></code> element in the following example declares
   11623    that the document's language is English.</p>
   11624 
   11625    <pre>&lt;!DOCTYPE html&gt;
   11626 <strong>&lt;html lang="en"&gt;</strong>
   11627 &lt;head&gt;
   11628 &lt;title&gt;Swapping Songs&lt;/title&gt;
   11629 &lt;/head&gt;
   11630 &lt;body&gt;
   11631 &lt;h1&gt;Swapping Songs&lt;/h1&gt;
   11632 &lt;p&gt;Tonight I swapped some of the songs I wrote with some friends, who
   11633 gave me some of the songs they wrote. I love sharing my music.&lt;/p&gt;
   11634 &lt;/body&gt;
   11635 <strong>&lt;/html&gt;</strong></pre>
   11636 
   11637   </div>
   11638 
   11639 
   11640 
   11641 
   11642   <h3 id=document-metadata><span class=secno>4.2 </span>Document metadata</h3>
   11643 
   11644   <h4 id=the-head-element-0><span class=secno>4.2.1 </span>The <dfn><code>head</code></dfn> element</h4>
   11645 
   11646   <dl class=element><dt>Categories</dt>
   11647    <dd>None.</dd>
   11648    <dt>Contexts in which this element may be used:</dt>
   11649    <dd>As the first element in an <code><a href=#the-html-element-0>html</a></code> element.</dd>
   11650    <dt>Content model:</dt>
   11651    <dd>If the document is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a href=#metadata-content>metadata content</a>.</dd>
   11652    <dd>Otherwise: One or more elements of <a href=#metadata-content>metadata content</a>, of which exactly one is a <code><a href=#the-title-element-0>title</a></code> element.</dd>
   11653    <dt>Content attributes:</dt>
   11654    <dd><a href=#global-attributes>Global attributes</a></dd>
   11655    <dt>DOM interface:</dt>
   11656    <dd>
   11657     <pre class=idl>interface <dfn id=htmlheadelement>HTMLHeadElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   11658    </dd>
   11659   </dl><p>The <code><a href=#the-head-element-0>head</a></code> element <a href=#represents>represents</a> a
   11660   collection of metadata for the <code><a href=#document>Document</a></code>.</p>
   11661 
   11662   <div class=example>
   11663 
   11664    <p>The collection of metadata in a <code><a href=#the-head-element-0>head</a></code> element can be
   11665    large or small. Here is an example of a very short one:</p>
   11666 
   11667    <pre>&lt;!doctype html&gt;
   11668 &lt;html&gt;
   11669  &lt;head&gt;
   11670   &lt;title&gt;A document with a short head&lt;/title&gt;
   11671  &lt;/head&gt;
   11672  &lt;body&gt;
   11673  ...</pre>
   11674 
   11675    <p>Here is an example of a longer one:</p>
   11676 
   11677    <pre>&lt;!DOCTYPE HTML&gt;
   11678 &lt;HTML&gt;
   11679  &lt;HEAD&gt;
   11680   &lt;META CHARSET="UTF-8"&gt;
   11681   &lt;BASE HREF="http://www.example.com/"&gt;
   11682   &lt;TITLE&gt;An application with a long head&lt;/TITLE&gt;
   11683   &lt;LINK REL="STYLESHEET" HREF="default.css"&gt;
   11684   &lt;LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"&gt;
   11685   &lt;SCRIPT SRC="support.js"&gt;&lt;/SCRIPT&gt;
   11686   &lt;META NAME="APPLICATION-NAME" CONTENT="Long headed application"&gt;
   11687  &lt;/HEAD&gt;
   11688  &lt;BODY&gt;
   11689  ...</pre>
   11690 
   11691   </div>
   11692 
   11693   <p class=note>The <code><a href=#the-title-element-0>title</a></code> element is a required child
   11694   in most situations, but when a higher-level protocol provides title
   11695   information, e.g. in the Subject line of an e-mail when HTML is used
   11696   as an e-mail authoring format, the <code><a href=#the-title-element-0>title</a></code> element can be
   11697   omitted.</p>
   11698 
   11699 
   11700 
   11701   <h4 id=the-title-element-0><span class=secno>4.2.2 </span>The <dfn><code>title</code></dfn> element</h4>
   11702 
   11703   <dl class=element><dt>Categories</dt>
   11704    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   11705    <dt>Contexts in which this element may be used:</dt>
   11706    <dd>In a <code><a href=#the-head-element-0>head</a></code> element containing no other <code><a href=#the-title-element-0>title</a></code> elements.</dd>
   11707    <dt>Content model:</dt>
   11708    <dd><a href=#text-content title="text content">Text</a>.</dd>
   11709    <dt>Content attributes:</dt>
   11710    <dd><a href=#global-attributes>Global attributes</a></dd>
   11711    <dt>DOM interface:</dt>
   11712    <dd>
   11713     <pre class=idl>interface <dfn id=htmltitleelement>HTMLTitleElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   11714            attribute DOMString <a href=#dom-title-text title=dom-title-text>text</a>;
   11715 };</pre>
   11716    </dd>
   11717   </dl><p>The <code><a href=#the-title-element-0>title</a></code> element <a href=#represents>represents</a> the
   11718   document's title or name. Authors should use titles that identify
   11719   their documents even when they are used out of context, for example
   11720   in a user's history or bookmarks, or in search results. The
   11721   document's title is often different from its first heading, since the
   11722   first heading does not have to stand alone when taken out of
   11723   context.</p>
   11724 
   11725   <p>There must be no more than one <code><a href=#the-title-element-0>title</a></code> element per
   11726   document.</p>
   11727 
   11728   <dl class=domintro><dt><var title="">title</var> . <code title=dom-title-text><a href=#dom-title-text>text</a></code> [ = <var title="">value</var> ]</dt>
   11729 
   11730    <dd>
   11731 
   11732     <p>Returns the contents of the element, ignoring child nodes that
   11733     aren't <a href=#text-node title="text node">text nodes</a>.</p>
   11734 
   11735     <p>Can be set, to replace the element's children with the given
   11736     value.</p>
   11737 
   11738    </dd>
   11739 
   11740   </dl><div class=impl>
   11741 
   11742   <p>The IDL attribute <dfn id=dom-title-text title=dom-title-text><code>text</code></dfn> must return a
   11743   concatenation of the contents of all the <a href=#text-node title="text
   11744   node">text nodes</a> that are direct children of the
   11745   <code><a href=#the-title-element-0>title</a></code> element (ignoring any other nodes such as
   11746   comments or elements), in tree order. On setting, it must act the
   11747   same way as the <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>
   11748 
   11749   </div>
   11750 
   11751   <div class=example>
   11752 
   11753    <p>Here are some examples of appropriate titles, contrasted with
   11754    the top-level headings that might be used on those same pages.</p>
   11755 
   11756    <pre>  &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
   11757     ...
   11758   &lt;h1&gt;Introduction&lt;/h1&gt;
   11759   &lt;p&gt;This companion guide to the highly successful
   11760   &lt;cite&gt;Introduction to Medieval Bee-Keeping&lt;/cite&gt; book is...</pre>
   11761 
   11762    <p>The next page might be a part of the same site. Note how the
   11763    title describes the subject matter unambiguously, while the first
   11764    heading assumes the reader knows what the context is and therefore
   11765    won't wonder if the dances are Salsa or Waltz:</p>
   11766 
   11767    <pre>  &lt;title&gt;Dances used during bee mating rituals&lt;/title&gt;
   11768     ...
   11769   &lt;h1&gt;The Dances&lt;/h1&gt;</pre>
   11770 
   11771   </div>
   11772 
   11773   <p>The string to use as the document's title is given by the <code title=dom-document-title><a href=#document.title>document.title</a></code> IDL
   11774   attribute. <span class=impl>User agents should use the document's
   11775   title when referring to the document in their user
   11776   interface.</span></p>
   11777 
   11778 
   11779   <h4 id=the-base-element><span class=secno>4.2.3 </span>The <dfn><code>base</code></dfn> element</h4>
   11780 
   11781   <dl class=element><dt>Categories</dt>
   11782    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   11783    <dt>Contexts in which this element may be used:</dt>
   11784    <dd>In a <code><a href=#the-head-element-0>head</a></code> element containing no other <code><a href=#the-base-element>base</a></code> elements.</dd>
   11785    <dt>Content model:</dt>
   11786    <dd>Empty.</dd>
   11787    <dt>Content attributes:</dt>
   11788    <dd><a href=#global-attributes>Global attributes</a></dd>
   11789    <dd><code title=attr-base-href><a href=#attr-base-href>href</a></code></dd>
   11790    <dd><code title=attr-base-target><a href=#attr-base-target>target</a></code></dd>
   11791    <dt>DOM interface:</dt>
   11792    <dd>
   11793 <pre class=idl>interface <dfn id=htmlbaseelement>HTMLBaseElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   11794            attribute DOMString <a href=#dom-base-href title=dom-base-href>href</a>;
   11795            attribute DOMString <a href=#dom-base-target title=dom-base-target>target</a>;
   11796 };</pre>
   11797    </dd>
   11798   </dl><p>The <code><a href=#the-base-element>base</a></code> element allows authors to specify the
   11799   <a href=#document-base-url>document base URL</a> for the purposes of <a href=#resolve-a-url title="resolve a url">resolving relative URLs</a>, and the name
   11800   of the default <a href=#browsing-context>browsing context</a> for the purposes of
   11801   <a href=#following-hyperlinks>following hyperlinks</a>. The element does not <a href=#represents title=represents>represent</a> any content beyond this
   11802   information.</p>
   11803 
   11804   <p>There must be no more than one <code><a href=#the-base-element>base</a></code> element per
   11805   document.</p>
   11806 
   11807   <p>A <code><a href=#the-base-element>base</a></code> element must have either an <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, or both.</p>
   11808 
   11809   <p>The <dfn id=attr-base-href title=attr-base-href><code>href</code></dfn> content
   11810   attribute, if specified, must contain a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
   11811   surrounded by spaces</a>.</p>
   11812 
   11813   <p>A <code><a href=#the-base-element>base</a></code> element, if it has an <code title=attr-base-href><a href=#attr-base-href>href</a></code> attribute, must come before any
   11814   other elements in the tree that have attributes defined as taking
   11815   <a href=#url title=URL>URLs</a>, except the <code><a href=#the-html-element-0>html</a></code> element
   11816   (its <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
   11817   isn't affected by <code><a href=#the-base-element>base</a></code> elements).</p>
   11818 
   11819   <div class=impl>
   11820 
   11821   <p class=note>If there are multiple <code><a href=#the-base-element>base</a></code> elements
   11822   with <code title=attr-base-href><a href=#attr-base-href>href</a></code> attributes, all but the
   11823   first are ignored.</p>
   11824 
   11825   </div>
   11826 
   11827   <p>The <dfn id=attr-base-target title=attr-base-target><code>target</code></dfn>
   11828   attribute, if specified, must contain a <a href=#valid-browsing-context-name-or-keyword>valid browsing context
   11829   name or keyword</a>, which specifies which <a href=#browsing-context>browsing
   11830   context</a> is to be used as the default when <a href=#hyperlink title=hyperlink>hyperlinks</a> and <a href=#the-form-element title=form>forms</a> in the <code><a href=#document>Document</a></code> cause <a href=#navigate title=navigate>navigation</a>.</p>
   11831 
   11832   <p>A <code><a href=#the-base-element>base</a></code> element, if it has a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, must come before
   11833   any elements in the tree that represent <a href=#hyperlink title=hyperlink>hyperlinks</a>.</p>
   11834 
   11835   <div class=impl>
   11836 
   11837   <p class=note>If there are multiple <code><a href=#the-base-element>base</a></code> elements
   11838   with <code title=attr-base-target><a href=#attr-base-target>target</a></code> attributes, all but
   11839   the first are ignored.</p>
   11840 
   11841   <p>The <dfn id=dom-base-href title=dom-base-href><code>href</code></dfn> and <dfn id=dom-base-target title=dom-base-target><code>target</code></dfn> IDL attributes
   11842   must <a href=#reflect>reflect</a> the respective content attributes of the
   11843   same name.</p>
   11844 
   11845   </div>
   11846 
   11847   <div class=example>
   11848 
   11849    <p>In this example, a <code><a href=#the-base-element>base</a></code> element is used to set the
   11850    <a href=#document-base-url>document base URL</a>:</p>
   11851 
   11852    <pre>&lt;!DOCTYPE html&gt;
   11853 &lt;html&gt;
   11854     &lt;head&gt;
   11855         &lt;title&gt;This is an example for the &amp;lt;base&amp;gt; element&lt;/title&gt;
   11856         &lt;base href="http://www.example.com/news/index.html"&gt;
   11857     &lt;/head&gt;
   11858     &lt;body&gt;
   11859         &lt;p&gt;Visit the &lt;a href="archives.html"&gt;archives&lt;/a&gt;.&lt;/p&gt;
   11860     &lt;/body&gt;
   11861 &lt;/html&gt;</pre>
   11862 
   11863    <p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>
   11864 
   11865   </div>
   11866 
   11867 
   11868 
   11869 
   11870   <h4 id=the-link-element><span class=secno>4.2.4 </span>The <dfn><code>link</code></dfn> element</h4>
   11871 
   11872   <dl class=element><dt>Categories</dt>
   11873    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   11874 
   11875    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   11876    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#phrasing-content>phrasing content</a>.</dd>
   11877 
   11878    <dt>Contexts in which this element may be used:</dt>
   11879    <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   11880    <dd>In a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   11881 
   11882    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   11883 
   11884    <dt>Content model:</dt>
   11885    <dd>Empty.</dd>
   11886    <dt>Content attributes:</dt>
   11887    <dd><a href=#global-attributes>Global attributes</a></dd>
   11888    <dd><code title=attr-link-href><a href=#attr-link-href>href</a></code></dd>
   11889    <dd><code title=attr-link-rel><a href=#attr-link-rel>rel</a></code></dd>
   11890    <dd><code title=attr-link-media><a href=#attr-link-media>media</a></code></dd>
   11891    <dd><code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code></dd>
   11892    <dd><code title=attr-link-type><a href=#attr-link-type>type</a></code></dd>
   11893    <dd><code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></dd>
   11894    <dd>Also, the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute has special semantics on this element.</dd>
   11895    <dt>DOM interface:</dt>
   11896    <dd>
   11897 <pre class=idl>interface <dfn id=htmllinkelement>HTMLLinkElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   11898            attribute boolean <a href=#dom-link-disabled title=dom-link-disabled>disabled</a>;
   11899            attribute DOMString <a href=#dom-link-href title=dom-link-href>href</a>;
   11900            attribute DOMString <a href=#dom-link-rel title=dom-link-rel>rel</a>;
   11901   readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-link-rellist title=dom-link-relList>relList</a>;
   11902            attribute DOMString <a href=#dom-link-media title=dom-link-media>media</a>;
   11903            attribute DOMString <a href=#dom-link-hreflang title=dom-link-hreflang>hreflang</a>;
   11904            attribute DOMString <a href=#dom-link-type title=dom-link-type>type</a>;
   11905   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-link-sizes title=dom-link-sizes>sizes</a>;
   11906 };
   11907 <a href=#htmllinkelement>HTMLLinkElement</a> implements <span>LinkStyle</span>;</pre>
   11908    </dd>
   11909   </dl><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their
   11910   document to other resources.</p>
   11911 
   11912   <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must
   11913   be present and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
   11914   surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the
   11915   element does not define a link.</span></p>
   11916 
   11917 
   11918   <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute, or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, or both.</p>
   11919 
   11920   <p>The types of link indicated (the relationships) are given by the
   11921   value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn>
   11922   attribute, which, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
   11923   of space-separated tokens</a>. The <a href=#linkTypes>allowed
   11924   values and their meanings</a> are defined in a later section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
   11925   is absent, or if none of the values used are allowed according to
   11926   the definitions in this specification, then the element does not
   11927   define a link.</span></p>
   11928 
   11929   <p>Two categories of links can be created using the
   11930   <code><a href=#the-link-element>link</a></code> element. <dfn id=external-resource-link title="external resource link">Links
   11931   to external resources</dfn> are links to resources that are to be
   11932   used to augment the current document, and <dfn id=hyperlink-link title="hyperlink
   11933   link">hyperlink links</dfn> are <a href=#hyperlink title=hyperlink>links to
   11934   other documents</a>. The <a href=#linkTypes>link types
   11935   section</a> defines whether a particular link type is an external
   11936   resource or a hyperlink. One element can create multiple links (of
   11937   which some might be external resource links and some might be
   11938   hyperlinks); exactly which and how many links are created depends on
   11939   the keywords given in the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>
   11940   attribute. User agents must process the links on a per-link basis,
   11941   not a per-element basis.</p>
   11942 
   11943   <p class=note>Each link is handled separately. For instance, if
   11944   there are two <code><a href=#the-link-element>link</a></code> elements with <code title="">rel="stylesheet"</code>, they each count as a separate
   11945   external resource, and each is affected by its own attributes
   11946   independently.</p>
   11947 
   11948   <p>The exact behavior for links to external resources depends on the
   11949   exact relationship, as defined for the relevant link type. Some of
   11950   the attributes control whether or not the external resource is to be
   11951   applied (as defined below).</p>
   11952 
   11953   <div class=impl>
   11954 
   11955   <p>For external resources that are represented in the
   11956   DOM (for example, style sheets), the DOM representation must be made
   11957   available even if the resource is not applied. To <dfn id=concept-link-obtain title=concept-link-obtain>obtain the resource</dfn>, the user
   11958   agent must run the following steps:</p>
   11959 
   11960   <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's
   11961    value is the empty string, then abort these steps.</li>
   11962 
   11963    <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
   11964    <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the
   11965    element.</li>
   11966 
   11967    <li><p>If the previous step fails, then abort these steps.</li>
   11968 
   11969    <li><p><a href=#fetch>Fetch</a> the resulting <a href=#absolute-url>absolute
   11970    URL</a>.</li> <!-- http-origin privacy sensitive -->
   11971 
   11972   </ol><p>User agents may opt to only try to obtain such resources when
   11973   they are needed, instead of pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are
   11974   not applied.</p>
   11975 
   11976   <p>The semantics of the protocol used (e.g. HTTP) must be followed
   11977   when fetching external resources. (For example, redirects will be
   11978   followed and 404 responses will cause the external resource to not
   11979   be applied.)</p>
   11980 
   11981   <!-- the next few paragraph are similar to text in the <style> section -->
   11982   <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical
   11983   subresources</a> are complete, the user agent must, if the loads
   11984   were successful, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   11985   event</a> named <code title=event-load>load</code> at the
   11986   <code><a href=#the-link-element>link</a></code> element, or, if the resource or one of its
   11987   <a href=#critical-subresources>critical subresources</a> failed to completely load for any
   11988   reason (e.g. DNS error, HTTP 404 response, a connection being
   11989   prematurely closed, unsupported Content-Type), <a href=#queue-a-task>queue a
   11990   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-link-element>link</a></code>
   11991   element. Non-network errors in processing the resource or its
   11992   subresources (e.g. CSS parse errors, PNG decoding errors) are not
   11993   failures for the purposes of this paragraph.</p>
   11994 
   11995   <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation task
   11996   source</a>.</p>
   11997 
   11998   <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
   11999   element's document until all the attempts to obtain the resource and
   12000   its <a href=#critical-subresources>critical subresources</a> are complete. (Resources that
   12001   the user agent has not yet attempted to obtain, e.g. because it is
   12002   waiting for the resource to be needed, do not <a href=#delay-the-load-event>delay the load
   12003   event</a>.)</p>
   12004 
   12005   <hr><p id=linkui>Interactive user agents may provide users with a
   12006   means to <a href=#following-hyperlinks title="following hyperlinks">follow the
   12007   hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element,
   12008   somewhere within their user interface. The exact interface is not
   12009   defined by this specification, but it could include the following
   12010   information (obtained from the element's attributes, again as
   12011   defined below), in some form or another (possibly simplified), for
   12012   each hyperlink created with each <code><a href=#the-link-element>link</a></code> element in the
   12013   document:</p>
   12014 
   12015   <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given
   12016    by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>
   12017 
   12018    <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute).</li>
   12019 
   12020    <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute).</li>
   12021 
   12022    <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> attribute).</li>
   12023 
   12024    <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute).</li>
   12025 
   12026   </ul><p>User agents could also include other information, such as the
   12027   type of the resource (as given by the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>
   12028 
   12029   </div>
   12030 
   12031   <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code>
   12032   element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
   12033   apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code>
   12034   and <code><a href=#the-area-element>area</a></code> elements, which indicates the type of a link
   12035   whose context is given by the link's location within the
   12036   document.</p>
   12037 
   12038   <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn>
   12039   attribute says which media the resource applies to. The value must
   12040   be a <a href=#valid-media-query>valid media query</a>.</p>
   12041 
   12042   <div class=impl>
   12043 
   12044   <p>If the link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
   12045   then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
   12046   purely advisory, and describes for which media the document in
   12047   question was designed.</p>
   12048 
   12049   <p>However, if the link is an <a href=#external-resource-link>external resource link</a>,
   12050   then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
   12051   prescriptive. The user agent must apply the external resource when
   12052   the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
   12053   <a href=#matches-the-environment>matches the environment</a> and the other relevant
   12054   conditions apply, and must not apply it otherwise.</p><!-- note
   12055   similar text in <style> section -->
   12056 
   12057   <p class=note>The external resource might have further
   12058   restrictions defined within that limit its applicability. For
   12059   example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
   12060   such further restrictions or requirements.</p><!-- note similar text
   12061   in <style> section -->
   12062 
   12063   </div>
   12064 
   12065   <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
   12066   media.</p>
   12067 
   12068   <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn>
   12069   attribute on the <code><a href=#the-link-element>link</a></code> element has the same semantics as
   12070   the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code>
   12071   attribute on hyperlink elements</a>.</p>
   12072 
   12073   <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute
   12074   gives the <a href=#mime-type>MIME type</a> of the linked resource. It is
   12075   purely advisory.  The value must be a <a href=#valid-mime-type>valid MIME
   12076   type</a>.</p>
   12077 
   12078   <p>For <a href=#external-resource-link title="external resource link">external resource
   12079   links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
   12080   is used as a hint to user agents so that they can avoid fetching
   12081   resources they do not support. <span class=impl>If the attribute
   12082   is present, then the user agent must assume that the resource is of
   12083   the given type (even if that is not a <a href=#valid-mime-type>valid MIME type</a>,
   12084   e.g. the empty string). If the attribute is omitted, but the
   12085   external resource link type has a default type defined, then the
   12086   user agent must assume that the resource is of that type. If the UA
   12087   does not support the given <a href=#mime-type>MIME type</a> for the given link
   12088   relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource; if the UA
   12089   does support the given <a href=#mime-type>MIME type</a> for the given link
   12090   relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource. If the
   12091   attribute is omitted, and the external resource link type does not
   12092   have a default type defined, but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if the type
   12093   was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the
   12094   assumption that it will be supported.</span></p>
   12095 
   12096   <div class=impl>
   12097 
   12098   <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute authoritative &mdash;
   12099   upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual
   12100   type. Only the actual type (as defined in the next paragraph) is
   12101   used to determine whether to <em>apply</em> the resource, not the
   12102   aforementioned assumed type.</p>
   12103 
   12104   <p id=concept-link-type-sniffing>If the external resource link
   12105   type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules
   12106   apply. Otherwise, if the resource is expected to be an image, user
   12107   agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
   12108   image">image sniffing rules</a>, with the <var title="">official
   12109   type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, and use the
   12110   resulting sniffed type of the resource as if it was the actual
   12111   type. Otherwise, if neither of these conditions apply or if the user
   12112   agent opts not to apply the image sniffing rules, then the user
   12113   agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the
   12114   type of the resource. If there is no type metadata, but the external
   12115   resource link type has a default type defined, then the user agent
   12116   must assume that the resource is of that type.</p>
   12117 
   12118   <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
   12119   link type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>
   12120 
   12121   <p>Once the user agent has established the type of the resource, the
   12122   user agent must apply the resource if it is of a supported type and
   12123   the other relevant conditions apply, and must ignore the resource
   12124   otherwise.</p>
   12125 
   12126   <div class=example>
   12127 
   12128    <p>If a document contains style sheet links labeled as follows:</p>
   12129 
   12130    <pre>&lt;link rel="stylesheet" href="A" type="text/plain"&gt;
   12131 &lt;link rel="stylesheet" href="B" type="text/css"&gt;
   12132 &lt;link rel="stylesheet" href="C"&gt;</pre>
   12133 
   12134    <p>...then a compliant UA that supported only CSS style sheets
   12135    would fetch the B and C files, and skip the A file (since
   12136    <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
   12137    sheets).</p>
   12138 
   12139    <p>For files B and C, it would then check the actual types returned
   12140    by the server. For those that are sent as <code>text/css</code>, it
   12141    would apply the styles, but for those labeled as
   12142    <code>text/plain</code>, or any other type, it would not.</p>
   12143 
   12144    <p>If one of the two files was returned without a
   12145    <a href=#content-type>Content-Type</a> metadata, or with a syntactically
   12146    incorrect type like <code title="">Content-Type:&nbsp;"null"</code>, then the default type
   12147    for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick
   12148    in. Since that default type is <code title="">text/css</code>, the
   12149    style sheet <em>would</em> nonetheless be applied.</p>
   12150 
   12151   </div>
   12152 
   12153   </div>
   12154 
   12155   <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn>
   12156   attribute gives the title of the link. With one exception, it is
   12157   purely advisory. The value is text. The exception is for style sheet
   12158   links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
   12159   attribute defines <span>alternative style sheet sets</span>.</p>
   12160 
   12161   <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code>
   12162   attribute on <code><a href=#the-link-element>link</a></code> elements differs from the global
   12163   <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of most other
   12164   elements in that a link without a title does not inherit the title
   12165   of the parent element: it merely has no title.</p>
   12166 
   12167   <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used
   12168   with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute
   12169   must not be specified on <code><a href=#the-link-element>link</a></code> elements that do not have
   12170   a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies
   12171   the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>
   12172 
   12173   <div class=impl>
   12174 
   12175   <p>Some versions of HTTP defined a <code title="">Link:</code>
   12176   header, to be processed like a series of <code><a href=#the-link-element>link</a></code> elements.
   12177   If supported, for the purposes of ordering links defined by HTTP
   12178   headers must be assumed to come before any links in the document, in
   12179   the order that they were given in the HTTP entity header. (URIs in
   12180   these headers are to be processed and resolved according to the
   12181   rules given in HTTP; the rules of <em>this</em> specification don't
   12182   apply.) <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link: header -->
   12183 
   12184   <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>, <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, and <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must
   12185   <a href=#reflect>reflect</a> the respective content attributes of the same
   12186   name.</p>
   12187 
   12188   <p>The IDL attribute <dfn id=dom-link-rellist title=dom-link-rellist><code>relList</code></dfn> <span class=impl>must</span> <a href=#reflect title=reflect>reflect</a> the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> content attribute.</p>
   12189 
   12190   </div>
   12191 
   12192   <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies
   12193   to style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a
   12194   style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as
   12195   defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative
   12196   style sheets DOM</a>. For all other <code><a href=#the-link-element>link</a></code> elements it
   12197   always return false and does nothing on setting.</p> <!-- that is
   12198   normatively required in the definition of dom-linkstyle-disabled -->
   12199 
   12200   <p>The <code>LinkStyle</code> interface is also implemented by
   12201   this element; the <a href=#styling>styling processing model</a> defines
   12202   how. <a href=#refsCSSOM>[CSSOM]</a></p>
   12203 
   12204   <div class=example>
   12205 
   12206    <p>Here, a set of <code><a href=#the-link-element>link</a></code> elements provide some style
   12207    sheets:</p>
   12208 
   12209    <pre>&lt;!-- a persistent style sheet --&gt;
   12210 &lt;link rel="stylesheet" href="default.css"&gt;
   12211 
   12212 &lt;!-- the preferred alternate style sheet --&gt;
   12213 &lt;link rel="stylesheet" href="green.css" title="Green styles"&gt;
   12214 
   12215 &lt;!-- some alternate style sheets --&gt;
   12216 &lt;link rel="alternate stylesheet" href="contrast.css" title="High contrast"&gt;
   12217 &lt;link rel="alternate stylesheet" href="big.css" title="Big fonts"&gt;
   12218 &lt;link rel="alternate stylesheet" href="wide.css" title="Wide screen"&gt;</pre>
   12219 
   12220   </div>
   12221 
   12222   <div class=example>
   12223 
   12224    <p>The following example shows how you can specify versions of the
   12225    page that use alternative formats, are aimed at other languages,
   12226    and that are intended for other media:</p>
   12227 
   12228    <pre>&lt;link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"&gt;
   12229 &lt;link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"&gt;
   12230 &lt;link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"&gt;
   12231 &lt;link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"&gt;
   12232 &lt;link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"&gt;
   12233 &lt;link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"&gt;</pre>
   12234 
   12235   </div>
   12236 
   12237 
   12238 
   12239 
   12240 
   12241   <h4 id=meta><span class=secno>4.2.5 </span>The <dfn><code>meta</code></dfn> element</h4>
   12242 
   12243   <dl class=element><dt>Categories</dt>
   12244    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   12245 
   12246    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   12247    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a href=#phrasing-content>phrasing content</a>.</dd>
   12248 
   12249    <dt>Contexts in which this element may be used:</dt>
   12250    <dd>If the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute is present, or if the element's <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   12251    <dd>If the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   12252    <dd>If the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   12253    <dd>If the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is present: where <a href=#metadata-content>metadata content</a> is expected.</dd>
   12254 
   12255    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#metadata-content>metadata content</a> is expected.</dd>
   12256    <dd>If the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   12257 
   12258    <dt>Content model:</dt>
   12259    <dd>Empty.</dd>
   12260    <dt>Content attributes:</dt>
   12261    <dd><a href=#global-attributes>Global attributes</a></dd>
   12262    <dd><code title=attr-meta-name><a href=#attr-meta-name>name</a></code></dd>
   12263    <dd><code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code></dd>
   12264    <dd><code title=attr-meta-content><a href=#attr-meta-content>content</a></code></dd>
   12265    <dd><code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code></dd>
   12266    <dt>DOM interface:</dt>
   12267    <dd>
   12268 <pre class=idl>interface <dfn id=htmlmetaelement>HTMLMetaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   12269            attribute DOMString <a href=#dom-meta-name title=dom-meta-name>name</a>;
   12270            attribute DOMString <a href=#dom-meta-httpequiv title=dom-meta-httpEquiv>httpEquiv</a>;
   12271            attribute DOMString <a href=#dom-meta-content title=dom-meta-content>content</a>;
   12272 };</pre>
   12273    </dd>
   12274   </dl><p>The <code><a href=#meta>meta</a></code> element <a href=#represents>represents</a> various
   12275   kinds of metadata that cannot be expressed using the
   12276   <code><a href=#the-title-element-0>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>,
   12277   <code><a href=#the-style-element>style</a></code>, and <code><a href=#script>script</a></code> elements.</p>
   12278 
   12279   <p>The <code><a href=#meta>meta</a></code> element can represent document-level
   12280   metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
   12281   attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the
   12282   file's <a href=#character-encoding-declaration>character encoding declaration</a> when an HTML
   12283   document is serialized to string form (e.g. for transmission over
   12284   the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>
   12285 
   12286 
   12287   <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>,
   12288   <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>, and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be
   12289   specified.</p>
   12290 
   12291   <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
   12292   specified. Otherwise, it must be omitted.</p>
   12293 
   12294   <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn>
   12295   attribute specifies the character encoding used by the
   12296   document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If
   12297   the attribute is present in an <a href=#xml-documents title="XML documents">XML
   12298   document</a>, its value must be an <a href=#ascii-case-insensitive>ASCII
   12299   case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
   12300   UTF-8 as its encoding).</p>
   12301 
   12302   <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
   12303   attribute on the <code><a href=#meta>meta</a></code> element has no effect in XML
   12304   documents, and is only allowed in order to facilitate migration to
   12305   and from XHTML.</p>
   12306 
   12307   <p>There must not be more than one <code><a href=#meta>meta</a></code> element with a
   12308   <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per
   12309   document.</p>
   12310 
   12311   <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn>
   12312   attribute gives the value of the document metadata or pragma
   12313   directive when the element is used for those purposes. The allowed
   12314   values depend on the exact context, as described in subsequent
   12315   sections of this specification.</p>
   12316 
   12317   <p>If a <code><a href=#meta>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn> attribute, it sets
   12318   document metadata. Document metadata is expressed in terms of
   12319   name/value pairs, the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
   12320   attribute on the <code><a href=#meta>meta</a></code> element giving the name, and the
   12321   <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same
   12322   element giving the value. The name specifies what aspect of metadata
   12323   is being set; valid names and the meaning of their values are
   12324   described in the following sections. If a <code><a href=#meta>meta</a></code> element
   12325   has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute,
   12326   then the value part of the metadata name/value pair is the empty
   12327   string.</p>
   12328 
   12329   <div class=impl>
   12330 
   12331   <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes
   12332   must <a href=#reflect>reflect</a> the respective content attributes of the
   12333   same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must
   12334   <a href=#reflect>reflect</a> the content attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>
   12335 
   12336   </div>
   12337 
   12338 
   12339   <h5 id=standard-metadata-names><span class=secno>4.2.5.1 </span>Standard metadata names</h5>
   12340 
   12341   <p>This specification defines a few names for the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute of the
   12342   <code><a href=#meta>meta</a></code> element.</p>
   12343 
   12344   <p>Names are case-insensitive<span class=impl>, and must be compared
   12345   in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner</span>.</p>
   12346 
   12347   <dl><dt><dfn id=meta-application-name title=meta-application-name><code>application-name</code></dfn></dt>
   12348 
   12349    <dd><p>The value must be a short free-form string giving the name
   12350    of the Web application that the page represents. If the page is not
   12351    a Web application, the <code title=meta-application-name><a href=#meta-application-name>application-name</a></code> metadata name
   12352    must not be used. There must not be more than one <code><a href=#meta>meta</a></code>
   12353    element with its <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
   12354    set to the value <code title=meta-application-name><a href=#meta-application-name>application-name</a></code> per
   12355    document. <span class=impl>User agents may use the application
   12356    name in UI in preference to the page's <code><a href=#the-title-element-0>title</a></code>, since
   12357    the title might include status messages and the like relevant to
   12358    the status of the page at a particular moment in time instead of
   12359    just being the name of the application.</span></dd>
   12360 
   12361    <dt><dfn id=meta-author title=meta-author><code>author</code></dfn></dt>
   12362 
   12363    <dd><p>The value must be a free-form string giving the name of one
   12364    of the page's authors.</dd>
   12365 
   12366    <dt><dfn id=meta-description title=meta-description><code>description</code></dfn></dt>
   12367 
   12368    <dd><p>The value must be a free-form string that describes the
   12369    page. The value must be appropriate for use in a directory of
   12370    pages, e.g. in a search engine. There must not be more than one
   12371    <code><a href=#meta>meta</a></code> element with its <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute set to the value <code title=meta-description><a href=#meta-description>description</a></code> per document.</dd>
   12372 
   12373    <dt><dfn id=meta-generator title=meta-generator><code>generator</code></dfn></dt>
   12374 
   12375    <dd>
   12376 
   12377     <p>The value must be a free-form string that identifies one of the
   12378     software packages used to generate the document. This value must
   12379     not be used on hand-authored pages.</p>
   12380 
   12381     <div class=example>
   12382 
   12383      <p>Here is what a tool called "Frontweaver" could include in its
   12384      output, in the page's <code><a href=#the-head-element-0>head</a></code> element, to identify
   12385      itself as the tool used to generate the page:</p>
   12386 
   12387      <pre>&lt;meta name=generator content="Frontweaver 8.2"&gt;</pre>
   12388 
   12389     </div>
   12390 
   12391    </dd>
   12392 
   12393    <dt><dfn id=meta-keywords title=meta-keywords><code>keywords</code></dfn></dt>
   12394 
   12395    <dd>
   12396 
   12397     <p>The value must be a <a href=#set-of-comma-separated-tokens>set of comma-separated tokens</a>,
   12398     each of which is a keyword relevant to the page.</p>
   12399 
   12400     <div class=example>
   12401 
   12402      <p>This page about typefaces on British motorways uses a
   12403      <code><a href=#meta>meta</a></code> element to specify some keywords that users
   12404      might use to look for the page:</p>
   12405 
   12406      <pre>&lt;!DOCTYPE HTML&gt;
   12407 &lt;html&gt;
   12408  &lt;head&gt;
   12409   &lt;title&gt;Typefaces on UK motorways&lt;/title&gt;
   12410   &lt;meta name="keywords" content="british,type face,font,fonts,highway,highways"&gt;
   12411  &lt;/head&gt;
   12412  &lt;body&gt;
   12413   ...</pre>
   12414 
   12415     </div>
   12416 
   12417     <p class=note>Many search engines do not consider such keywords,
   12418     because this feature has historically been used unreliably and
   12419     even misleadingly as a way to spam search engine results in a way
   12420     that is not helpful for users.</p>
   12421 
   12422     <div class=impl>
   12423 
   12424     <p>To obtain the list of keywords that the author has specified as
   12425     applicable to the page, the user agent must run the following
   12426     steps:</p>
   12427 
   12428     <ol><li><p>Let <var title="">keywords</var> be an empty
   12429      list.</li>
   12430 
   12431      <li>
   12432 
   12433       <p>For each <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute and whose
   12434       <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute's value is
   12435       <code title=meta-keywords><a href=#meta-keywords>keywords</a></code>, run the following
   12436       substeps:</p>
   12437 
   12438       <ol><li><p><a href=#split-a-string-on-commas title="split a string on commas">Split the value
   12439        of the element's <code title=attr-meta-content>content</code>
   12440        attribute on commas</a>.</li>
   12441 
   12442        <li><p>Add the resulting tokens, if any, to <var title="">keywords</var>.</li>
   12443 
   12444       </ol></li>
   12445 
   12446      <li><p>Remove any duplicates from <var title="">keywords</var>.</li>
   12447 
   12448      <li><p>Return <var title="">keywords</var>. This is the list of
   12449      keywords that the author has specified as applicable to the
   12450      page.</li>
   12451 
   12452     </ol><p>User agents should not use this information when there is
   12453     insufficient confidence in the reliability of the value.</p>
   12454 
   12455     <p class=example>For instance, it would be reasonable for a
   12456     content management system to use the keyword information of pages
   12457     within the system to populate the index of a site-specific search
   12458     engine, but a large-scale content aggregator that used this
   12459     information would likely find that certain users would try to game
   12460     its ranking mechanism through the use of inappropriate
   12461     keywords.</p>
   12462 
   12463     </div>
   12464 
   12465    </dd>
   12466 
   12467   </dl><h5 id=other-metadata-names><span class=secno>4.2.5.2 </span>Other metadata names</h5>
   12468 
   12469   <p><dfn id=concept-meta-extensions title=concept-meta-extensions>Extensions to the predefined
   12470   set of metadata names</dfn> may be registered in the <a href=http://wiki.whatwg.org/wiki/MetaExtensions>WHATWG Wiki
   12471   MetaExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
   12472 
   12473   <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any
   12474   time to add a type. These new names must be specified with the
   12475   following information:</p>
   12476 
   12477   <dl><dt>Keyword</dt>
   12478 
   12479    <dd><p>The actual name being defined. The name should not be
   12480    confusingly similar to any other defined name (e.g. differing only
   12481    in case).</dd>
   12482 
   12483 
   12484    <dt>Brief description</dt>
   12485 
   12486    <dd><p>A short non-normative description of what the metadata
   12487    name's meaning is, including the format the value is required to be
   12488    in.</dd>
   12489 
   12490 
   12491    <dt>Specification</dt>
   12492 
   12493    <dd>A link to a more detailed description of the metadata name's
   12494    semantics and requirements. It could be another page on the Wiki,
   12495    or a link to an external page.</dd>
   12496 
   12497 
   12498    <dt>Synonyms</dt>
   12499 
   12500    <dd><p>A list of other names that have exactly the same processing
   12501    requirements. Authors should not use the names defined to be
   12502    synonyms, they are only intended to allow user agents to support
   12503    legacy content. Anyone may remove synonyms that are not used in
   12504    practice; only names that need to be processed as synonyms for
   12505    compatibility with legacy content are to be registered in this
   12506    way.</dd>
   12507 
   12508 
   12509    <dt>Status</dt>
   12510 
   12511    <dd>
   12512 
   12513     <p>One of the following:</p>
   12514 
   12515     <dl><dt>Proposed</dt>
   12516 
   12517      <dd>The name has not received wide peer review and
   12518      approval. Someone has proposed it and is, or soon will be, using
   12519      it.</dd>
   12520 
   12521      <dt>Ratified</dt>
   12522 
   12523      <dd>The name has received wide peer review and approval. It has a
   12524      specification that unambiguously defines how to handle pages that
   12525      use the name, including when they use it in incorrect ways.</dd>
   12526 
   12527      <dt>Discontinued</dt>
   12528 
   12529      <dd>The metadata name has received wide peer review and it has
   12530      been found wanting. Existing pages are using this metadata name,
   12531      but new pages should avoid it. The "brief description" and
   12532      "specification" entries will give details of what authors should
   12533      use instead, if anything.</dd>
   12534 
   12535     </dl><p>If a metadata name is found to be redundant with existing
   12536     values, it should be removed and listed as a synonym for the
   12537     existing value.</p>
   12538 
   12539     <p>If a metadata name is registered in the "proposed" state for a
   12540     period of a month or more without being used or specified, then it
   12541     may be removed from the registry.</p>
   12542 
   12543     <p>If a metadata name is added with the "proposed" status and
   12544     found to be redundant with existing values, it should be removed
   12545     and listed as a synonym for the existing value. If a metadata name
   12546     is added with the "proposed" status and found to be harmful, then
   12547     it should be changed to "discontinued" status.</p>
   12548 
   12549     <p>Anyone can change the status at any time, but should only do so
   12550     in accordance with the definitions above.</p>
   12551 
   12552    </dd>
   12553 
   12554   </dl><div class=impl>
   12555 
   12556   <p>Conformance checkers must use the information given on the WHATWG
   12557   Wiki MetaExtensions page to establish if a value is allowed or not:
   12558   values defined in this specification or marked as "proposed" or
   12559   "ratified" must be accepted, whereas values marked as "discontinued"
   12560   or not listed in either this specification or on the aforementioned
   12561   page must be rejected as invalid. Conformance checkers may cache
   12562   this information (e.g. for performance reasons or to avoid the use
   12563   of unreliable network connectivity).</p>
   12564 
   12565   <p>When an author uses a new metadata name not defined by either
   12566   this specification or the Wiki page, conformance checkers should
   12567   offer to add the value to the Wiki, with the details described
   12568   above, with the "proposed" status.</p>
   12569 
   12570   </div>
   12571 
   12572   <p>Metadata names whose values are to be <a href=#url title=URL>URLs</a> must not be proposed or accepted. Links must
   12573   be represented using the <code><a href=#the-link-element>link</a></code> element, not the
   12574   <code><a href=#meta>meta</a></code> element.</p>
   12575 
   12576 
   12577 
   12578   <h5 id=pragma-directives><span class=secno>4.2.5.3 </span>Pragma directives</h5>
   12579 
   12580   <p>When the <dfn id=attr-meta-http-equiv title=attr-meta-http-equiv><code>http-equiv</code></dfn> attribute
   12581   is specified on a <code><a href=#meta>meta</a></code> element, the element is a pragma
   12582   directive.</p>
   12583 
   12584   <p>The <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>
   12585   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
   12586   table lists the keywords defined for this attribute. The states
   12587   given in the first cell of the rows with keywords give the states to
   12588   which those keywords map. <!--<span class="impl">Some of the
   12589   keywords are non-conforming, as noted in the last
   12590   column.</span>--></p>
   12591 
   12592 <!-- things that are neither conforming nor do anything are commented out -->
   12593 <!-- if you add something non-conforming, uncomment out the last sentence above -->
   12594   <table><thead><tr><th>State
   12595      <th>Keywords
   12596      <th>Notes
   12597    <tbody><tr><td><a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content Language</a>
   12598      <td><code title="">content-language</code>
   12599      <td>Conformance checkers will include a warning
   12600     <tr><td><a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration</a>
   12601      <td><code title="">content-type</code>
   12602      <td>
   12603 <!--
   12604     <tr class="impl">
   12605      <td><span title="attr-meta-http-equiv-content-script-type">Content-Script-Type</span>
   12606      <td><code title="">Content-Script-Type</code>
   12607      <td>Non-conforming
   12608     <tr class="impl">
   12609      <td><span title="attr-meta-http-equiv-content-style-type">Content-Style-Type</span>
   12610      <td><code title="">Content-Style-Type</code>
   12611      <td>Non-conforming
   12612 -->
   12613     <tr><td><a href=#attr-meta-http-equiv-default-style title=attr-meta-http-equiv-default-style>Default style</a>
   12614      <td><code title="">default-style</code>
   12615      <td>
   12616     <tr><td><a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh</a>
   12617      <td><code title="">refresh</code>
   12618      <td>
   12619   </table><!--
   12620 DATA: According to Henri's validator stats, here are common
   12621 non-conforming values used by people who validate (sample of 400
   12622 pages):
   12623 
   12624 COUNT ERROR
   12625    20 Bad value "Content-Language" for attribute "http-equiv" on element "meta".
   12626    17 Bad value "Content-Style-Type" for attribute "http-equiv" on element "meta".
   12627    12 Bad value "Expires" for attribute "http-equiv" on element "meta".
   12628    11 Bad value "Pragma" for attribute "http-equiv" on element "meta".
   12629    11 Bad value "imagetoolbar" for attribute "http-equiv" on element "meta".
   12630    10 Bad value "Content-Script-Type" for attribute "http-equiv" on element "meta".
   12631    10 Bad value "content-language" for attribute "http-equiv" on element "meta".
   12632  [...]
   12633 http://hsivonen.iki.fi/test/moz/analysis.txt
   12634 
   12635 Here's some more data, this time from Philip`, on a sample of 15k pages.
   12636 
   12637   COUNT VALUE
   12638    1181 Content-Language
   12639     430 Content-Style-Type
   12640     342 imagetoolbar
   12641     276 content-language
   12642     269 Pragma
   12643     260 expires
   12644     227 Expires
   12645     211 pragma
   12646     146 Content-Script-Type
   12647     132 keywords
   12648     119 Page-Enter
   12649     116 description
   12650     106 reply-to
   12651     102 Cache-Control
   12652    [...]
   12653 http://philip.html5.org/data/meta-http-equiv.txt
   12654 
   12655 These numbers are low; further study is required to establish what
   12656 people expect to have work and what is necessary.
   12657 --><div class=impl>
   12658 
   12659   <p>When a <code><a href=#meta>meta</a></code> element is <a href=#insert-an-element-into-a-document title="insert an
   12660   element into a document">inserted into the document</a>, if its
   12661   <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is
   12662   present and represents one of the above states, then the user agent
   12663   must run the algorithm appropriate for that state, as described in
   12664   the following list:</p>
   12665 
   12666   </div>
   12667 
   12668   <dl><dt><dfn id=attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content language state</dfn> (<code title="">http-equiv="content-language"</code>)
   12669 
   12670    <dd>
   12671 
   12672     <p>This pragma sets the <dfn id=pragma-set-default-language>pragma-set default
   12673     language</dfn>. Until the pragma is successfully processed, there
   12674     is no <a href=#pragma-set-default-language>pragma-set default language</a>.</p>
   12675 
   12676     <p class=note>Conformance checkers will include a warning if
   12677     this pragma is used. Authors are encouraged to use the <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute instead.</p>
   12678 
   12679     <div class=impl>
   12680 
   12681     <ol><li><p>If another <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   12682      <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
   12683      Language state</a> has already been successfully processed
   12684      (i.e. when it was inserted the user agent processed it and
   12685      reached the last step of this list of steps), then abort these
   12686      steps.</li>
   12687 
   12688      <li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
   12689      attribute's value is the empty string, then abort these
   12690      steps.</li>
   12691 
   12692      <li><p>If the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute contains a
   12693      U+002C COMMA character (,) then abort these steps.</li><!--
   12694      if you remove this, un-comment-out the corresponding bits in the
   12695      step below. -->
   12696 
   12697      <li><p>Let <var title="">input</var> be the value of the
   12698      element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>
   12699      attribute.</li>
   12700 
   12701      <li><p>Let <var title="">position</var> point at the first
   12702      character of <var title="">input</var>.</li>
   12703 
   12704      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12705 
   12706      <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
   12707      sequence of characters</a> that are not<!--neither--> <a href=#space-character title="space character">space characters</a><!-- nor a U+002C
   12708      COMMA character (,)-->.</li>
   12709 
   12710      <li><p>Let the <a href=#pragma-set-default-language>pragma-set default language</a> be the
   12711      string that resulted from the previous step.</li>
   12712 
   12713     </ol></div>
   12714 
   12715     <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   12716     <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
   12717     Language state</a>, the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must have a
   12718     value consisting of a valid BCP 47 language tag. <a href=#refsBCP47>[BCP47]</a></p>
   12719 
   12720     <p class=note>This pragma is not exactly equivalent to the HTTP
   12721     <code>Content-Language</code> header, for instance it only
   12722     supports one language. <a href=#refsHTTP>[HTTP]</a></p>
   12723 
   12724    </dd>
   12725 
   12726    <dt><dfn id=attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration state</dfn> (<code title="">http-equiv="content-type"</code>)
   12727 
   12728    <dd>
   12729 
   12730     <p>The <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
   12731     declaration state</a> is just an alternative form of setting
   12732     the <code title=meta-charset>charset</code> attribute: it is a
   12733     <a href=#character-encoding-declaration>character encoding declaration</a>. <span class=impl>This state's user agent requirements are all handled
   12734     by the parsing section of the specification.</span></p>
   12735 
   12736     <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   12737     <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
   12738     declaration state</a>, the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must have a
   12739     value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for a
   12740     string that consists of: the literal string "<code title="">text/html;</code>", optionally followed by any number of
   12741     <a href=#space-character title="space character">space characters</a>, followed by
   12742     the literal string "<code title="">charset=</code>", followed by
   12743     the character encoding name of the <a href=#character-encoding-declaration>character encoding
   12744     declaration</a>.</p>
   12745 
   12746     <p>If the document contains a <code><a href=#meta>meta</a></code> element with an
   12747     <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in
   12748     the <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
   12749     declaration state</a>, then the document must not contain a
   12750     <code><a href=#meta>meta</a></code> element with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute present.</p>
   12751 
   12752     <p>The <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding
   12753     declaration state</a> may be used in <a href=#html-documents>HTML
   12754     documents</a>, but elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in that
   12755     state must not be used in <a href=#xml-documents>XML documents</a>.</p>
   12756 
   12757    </dd>
   12758 
   12759    <dt><dfn id=attr-meta-http-equiv-default-style title=attr-meta-http-equiv-default-style>Default style state</dfn> (<code title="">http-equiv="default-style"</code>)
   12760 
   12761    <dd>
   12762 
   12763     <p>This pragma sets the name of the default <span title="alternative style sheet sets">alternative style sheet
   12764     set</span>.</p>
   12765 
   12766     <div class=impl>
   12767 
   12768     <ol><li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
   12769      attribute's value is the empty string, then abort these
   12770      steps.</li>
   12771 
   12772      <li><p>Set the <span>preferred style sheet set</span> to the
   12773      value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute. <a href=#refsCSSOM>[CSSOM]</a></li>
   12774 
   12775     </ol></div>
   12776 
   12777    </dd>
   12778 
   12779    <dt><dfn id=attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</dfn> (<code title="">http-equiv="refresh"</code>)
   12780 
   12781    <dd>
   12782 
   12783     <p>This pragma acts as timed redirect.</p>
   12784 
   12785     <div class=impl>
   12786 
   12787     <ol><!-- TESTS: http://www.hixie.ch/tests/adhoc/html/meta/refresh/ --><li><p>If another <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   12788      <a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</a>
   12789      has already been successfully processed (i.e. when it was
   12790      inserted the user agent processed it and reached the last step of
   12791      this list of steps), then abort these steps.</li>
   12792 
   12793      <li><p>If the <code><a href=#meta>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, or if that
   12794      attribute's value is the empty string, then abort these
   12795      steps.</li>
   12796 
   12797      <li><p>Let <var title="">input</var> be the value of the
   12798      element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>
   12799      attribute.</li>
   12800 
   12801      <li><p>Let <var title="">position</var> point at the first
   12802      character of <var title="">input</var>.</li>
   12803 
   12804      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12805 
   12806      <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
   12807      sequence of characters</a> in the range U+0030 DIGIT ZERO (0)
   12808      to U+0039 DIGIT NINE (9), and parse the resulting string using
   12809      the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>. If the
   12810      sequence of characters collected is the empty string, then no
   12811      number will have been parsed; abort these steps. Otherwise, let
   12812      <var title="">time</var> be the parsed number.</li>
   12813 
   12814      <li><p><a href=#collect-a-sequence-of-characters title="collect a sequence of characters">Collect a
   12815      sequence of characters</a> in the range U+0030 DIGIT ZERO (0) to
   12816      U+0039 DIGIT NINE (9) and U+002E FULL STOP (.). Ignore any collected
   12817      characters.</li>
   12818 
   12819      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12820 
   12821      <li><p>Let <var title="">url</var> be the address of the current
   12822      page.</li>
   12823 
   12824      <li><p>If the character in <var title="">input</var> pointed to
   12825      by <var title="">position</var> is a U+003B SEMICOLON ("<code title="">;</code>"), then advance <var title="">position</var> to
   12826      the next character. Otherwise, jump to the last step.</li>
   12827 
   12828      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12829 
   12830      <li><p>If the character in <var title="">input</var> pointed to
   12831      by <var title="">position</var> is a U+0055 LATIN CAPITAL LETTER
   12832      U character (U) or a U+0075 LATIN SMALL LETTER U character (u),
   12833      then advance <var title="">position</var> to the next
   12834      character. Otherwise, jump to the last step.</li>
   12835 
   12836      <li><p>If the character in <var title="">input</var> pointed to
   12837      by <var title="">position</var> is a U+0052 LATIN CAPITAL LETTER
   12838      R character (R) or a U+0072 LATIN SMALL LETTER R character (r),
   12839      then advance <var title="">position</var> to the next
   12840      character. Otherwise, jump to the last step.</li>
   12841 
   12842      <li><p>If the character in <var title="">input</var> pointed to
   12843      by <var title="">position</var> is s U+004C LATIN CAPITAL LETTER
   12844      L character (L) or a U+006C LATIN SMALL LETTER L character (l),
   12845      then advance <var title="">position</var> to the next
   12846      character. Otherwise, jump to the last step.</li>
   12847 
   12848      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12849 
   12850      <li><p>If the character in <var title="">input</var> pointed to
   12851      by <var title="">position</var> is a U+003D EQUALS SIGN ("<code title="">=</code>"), then advance <var title="">position</var> to
   12852      the next character. Otherwise, jump to the last step.</li>
   12853 
   12854      <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   12855 
   12856      <li><p>If the character in <var title="">input</var> pointed to
   12857      by <var title="">position</var> is either a U+0027 APOSTROPHE
   12858      character (') or U+0022 QUOTATION MARK character ("), then let
   12859      <var title="">quote</var> be that character, and advance <var title="">position</var> to the next character. Otherwise, let
   12860      <var title="">quote</var> be the empty string.</li>
   12861 
   12862      <li><p>Let <var title="">url</var> be equal to the substring of
   12863      <var title="">input</var> from the character at <var title="">position</var> to the end of the string.</li>
   12864 
   12865      <li><p>If <var title="">quote</var> is not the empty string, and
   12866      there is a character in <var title="">url</var> equal to <var title="">quote</var>, then truncate <var title="">url</var> at
   12867      that character, so that it and all subsequent characters are
   12868      removed.</p>
   12869 
   12870      <li><p>Strip any trailing <a href=#space-character title="space character">space
   12871      characters</a> from the end of <var title="">url</var>.</li>
   12872 
   12873      <li><p>Strip any U+0009 CHARACTER TABULATION, U+000A LINE FEED
   12874      (LF), and U+000D CARRIAGE RETURN (CR) characters from <var title="">url</var>.</li>
   12875 
   12876      <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the <var title="">url</var> value to an <a href=#absolute-url>absolute URL</a>,
   12877      relative to the <code><a href=#meta>meta</a></code> element. If this fails, abort
   12878      these steps.</li>
   12879 
   12880      <li>
   12881 
   12882       <p>Perform one or more of the following steps:</p>
   12883 
   12884       <ul><li><p>Set a timer so that in <var title="">time</var> seconds,
   12885        adjusted to take into account user or user agent preferences,
   12886        if the user has not canceled the redirect and if the
   12887        <code><a href=#meta>meta</a></code> element's <code><a href=#document>Document</a></code>'s
   12888        <a href=#browsing-context>browsing context</a> did not have the <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed
   12889        automatic features browsing context flag</a> set when the
   12890        <code><a href=#document>Document</a></code> was created, the user agent <a href=#navigate title=navigate>navigates</a> the <code><a href=#document>Document</a></code>'s
   12891        <a href=#browsing-context>browsing context</a> to <var title="">url</var>, with
   12892        <a href=#replacement-enabled>replacement enabled</a>, and with the
   12893        <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> as the
   12894        <a href=#source-browsing-context>source browsing context</a>.</li>
   12895 
   12896        <li><p>Provide the user with an interface that, when selected,
   12897        <a href=#navigate title=navigate>navigates</a> a <a href=#browsing-context>browsing
   12898        context</a> to <var title="">url</var>, with the document's
   12899        browsing context as the <a href=#source-browsing-context>source browsing
   12900        context</a>.</li>
   12901 
   12902        <li><p>Do nothing.</li>
   12903 
   12904       </ul><p>In addition, the user agent may, as with anything, inform the
   12905       user of any and all aspects of its operation, including the
   12906       state of any timers, the destinations of any timed redirects,
   12907       and so forth.</p>
   12908 
   12909      </li>
   12910 
   12911     </ol></div>
   12912 
   12913     <p>For <code><a href=#meta>meta</a></code> elements with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   12914     <a href=#attr-meta-http-equiv-refresh title=attr-meta-http-equiv-refresh>Refresh state</a>,
   12915     the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must
   12916     have a value consisting either of:</p>
   12917 
   12918     <ul><li> just a <a href=#valid-non-negative-integer>valid non-negative integer</a>, or</li>
   12919 
   12920      <li> a <a href=#valid-non-negative-integer>valid non-negative integer</a>, followed by a
   12921      U+003B SEMICOLON character (;), followed by one or more <a href=#space-character title="space character">space characters</a>, followed by
   12922      either a U+0055 LATIN CAPITAL LETTER U character (U) or a U+0075
   12923      LATIN SMALL LETTER U character (u), a U+0052 LATIN CAPITAL LETTER
   12924      R character (R) or a U+0072 LATIN SMALL LETTER R character (r), a
   12925      U+004C LATIN CAPITAL LETTER L character (L) or a U+006C LATIN
   12926      SMALL LETTER L character (l), a U+003D EQUALS SIGN character (=),
   12927      and then a <a href=#valid-url>valid URL</a>.</li>
   12928 
   12929     </ul><p>In the former case, the integer represents a number of seconds
   12930     before the page is to be reloaded; in the latter case the integer
   12931     represents a number of seconds before the page is to be replaced
   12932     by the page at the given <a href=#url>URL</a>.</p>
   12933 
   12934     <div class=example>
   12935 
   12936      <p>A news organization's front page could include the following
   12937      markup in the page's <code><a href=#the-head-element-0>head</a></code> element, to ensure that
   12938      the page automatically reloads from the server every five
   12939      minutes:</p>
   12940 
   12941      <pre>&lt;meta http-equiv="Refresh" content="300"&gt;</pre>
   12942 
   12943     </div>
   12944 
   12945     <div class=example>
   12946 
   12947      <p>A sequence of pages could be used as an automated slide show
   12948      by making each page refresh to the next page in the sequence,
   12949      using markup such as the following:</p>
   12950 
   12951      <pre>&lt;meta http-equiv="Refresh" content="20; URL=page4.html"&gt;</pre>
   12952 
   12953     </div>
   12954 
   12955    </dd>
   12956 
   12957   </dl><p>There must not be more than one <code><a href=#meta>meta</a></code> element with
   12958   any particular state in the document at a time.</p>
   12959 
   12960 
   12961   <h5 id=other-pragma-directives><span class=secno>4.2.5.4 </span>Other pragma directives</h5>
   12962 
   12963   <p><dfn id=concept-http-equiv-extensions title=concept-http-equiv-extensions>Extensions to the
   12964   predefined set of pragma directives</dfn> may, under certain
   12965   conditions, be registered in the <a href=http://wiki.whatwg.org/wiki/PragmaExtensions>WHATWG Wiki
   12966   PragmaExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
   12967 
   12968   <p>Such extensions must use a name that is identical to an HTTP
   12969   header registered in the Permanent Message Header Field Registry,
   12970   and must have behavior identical to that described for the HTTP
   12971   header. <a href=#refsIANAPERMHEADERS>[IANAPERMHEADERS]</a></p>
   12972 
   12973   <p>Pragma directives corresponding to headers describing metadata,
   12974   or not requiring specific user agent processing, must not be
   12975   registered; instead, use <a href=#concept-meta-extensions title=concept-meta-extensions>metadata names</a>. Pragma
   12976   directives corresponding to headers that affect the HTTP processing
   12977   model (e.g. caching) must not be registered, as they would result in
   12978   HTTP-level behavior being different for user agents that implement
   12979   HTML than for user agents that do not.</p>
   12980 
   12981   <p>Anyone is free to edit the WHATWG Wiki PragmaExtensions page at
   12982   any time to add a pragma directive satisfying these conditions. Such
   12983   registrations must specify the following information:</p>
   12984 
   12985   <dl><dt>Keyword</dt>
   12986 
   12987    <dd><p>The actual name being defined. The name must match a
   12988    previously-registered HTTP name with the same
   12989    requirements.</dd>
   12990 
   12991 
   12992    <dt>Brief description</dt>
   12993 
   12994    <dd><p>A short non-normative description of the purpose of the
   12995    pragma directive.</dd>
   12996 
   12997 
   12998    <dt>Specification</dt>
   12999 
   13000    <dd>A link to the specification defining the corresponding HTTP
   13001    header.</dd>
   13002 
   13003   </dl><div class=impl>
   13004 
   13005   <p>Conformance checkers must use the information given on the WHATWG
   13006   Wiki PragmaExtensions page to establish if a value is allowed or
   13007   not: values defined in this specification or listed on the
   13008   aforementioned page must be accepted, whereas values not listed in
   13009   either this specification or on the aforementioned page must be
   13010   rejected as invalid. Conformance checkers may cache this information
   13011   (e.g. for performance reasons or to avoid the use of unreliable
   13012   network connectivity).</p>
   13013 
   13014   </div>
   13015 
   13016 
   13017 
   13018 
   13019   <h5 id=charset><span class=secno>4.2.5.5 </span>Specifying the document's character encoding</h5>
   13020 
   13021   <!-- READ ME WHEN EDITING: if we ever move this to the "writing
   13022   HTML" section, then we have to duplicate the requirements in the
   13023   parsing section for conformance checkers, and we have to make sure
   13024   that the requirements for charset="" apply even in XML, for the
   13025    polyglot hack. -->
   13026 
   13027   <p>A <dfn id=character-encoding-declaration>character encoding declaration</dfn> is a mechanism by
   13028   which the character encoding used to store or transmit a document is
   13029   specified.</p>
   13030 
   13031   <p>The following restrictions apply to character encoding
   13032   declarations:</p>
   13033 
   13034   <ul><li>The character encoding name given must be the name of the
   13035    character encoding used to serialize the file.</li>
   13036 
   13037    <li>The value must be a valid character encoding name, and must be
   13038    an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   13039    <a href=#preferred-mime-name>preferred MIME name</a> for that encoding. <a href=#refsIANACHARSET>[IANACHARSET]</a></li>
   13040 
   13041    <li>The character encoding declaration must be serialized without
   13042    the use of <a href=#syntax-charref title=syntax-charref>character references</a>
   13043    or character escapes of any kind.</li>
   13044 
   13045    <li id=charset512>The element containing the character encoding
   13046    declaration must be serialized completely within the first 512
   13047    bytes of the document.</li>
   13048 
   13049    <li>There can only be one character encoding declaration in the
   13050    document.</li> <!-- conformance criteria for this one are given in
   13051    the XML spec, the <meta> section just after defining charset="",
   13052    and the character encoding pragma section. And actually this
   13053    statement isn't quite true, since you can have an XML one and an
   13054    HTML one at the same time if they match. -->
   13055 
   13056   </ul><p>If an <a href=#html-documents title="HTML documents">HTML document</a> does not
   13057   start with a BOM, and if its encoding is not explicitly given by
   13058   <a href=#content-type title=Content-Type>Content-Type metadata</a>, and the
   13059   document is not <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>, then the
   13060   character encoding used must be an <a href=#ascii-compatible-character-encoding>ASCII-compatible character
   13061   encoding</a>, and, in addition, if that encoding isn't US-ASCII
   13062   itself, then the encoding must be specified using a
   13063   <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute or a
   13064   <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   13065   <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration
   13066   state</a>.</p>
   13067 
   13068   <p>If the document is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>, the
   13069   document must not have a <a href=#character-encoding-declaration>character encoding
   13070   declaration</a>. (In this case, the source is already decoded,
   13071   since it is part of the document that contained the
   13072   <code><a href=#the-iframe-element>iframe</a></code>.)</p>
   13073 
   13074   <p>If an <a href=#html-documents title="HTML documents">HTML document</a> contains
   13075   a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute or a
   13076   <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   13077   <a href=#attr-meta-http-equiv-content-type title=attr-meta-http-equiv-content-type>Encoding declaration
   13078   state</a>, then the character encoding used must be an
   13079   <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>.</p>
   13080 
   13081   <p>Authors are encouraged to use UTF-8. Conformance checkers may
   13082   advise authors against using legacy encodings.</p>
   13083 
   13084   <div class=impl>
   13085 
   13086   <p>Authoring tools should default to using UTF-8 for newly-created
   13087   documents.</p>
   13088 
   13089   </div>
   13090 
   13091   <p>Encodings in which a series of bytes in the range 0x20 to 0x7E
   13092   can encode characters other than the corresponding characters in the
   13093   range U+0020 to U+007E represent a potential security vulnerability:
   13094   a user agent that does not support the encoding (or does not support
   13095   the label used to declare the encoding, or does not use the same
   13096   mechanism to detect the encoding of unlabelled content as another
   13097   user agent) might end up interpreting technically benign plain text
   13098   content as HTML tags and JavaScript. For example, this applies to
   13099   encodings in which the bytes corresponding to "<code title="">&lt;script&gt;</code>" in ASCII can encode a different
   13100   string. Authors should not use such encodings, which are known to
   13101   include JIS_C6226-1983<!-- aka JIS-X-0208, x-JIS0208 -->,
   13102   JIS_X0212-1990<!-- aka JIS-X-0212 -->, HZ-GB-2312<!-- has crazy
   13103   handling of ASCII "~" -->, JOHAB <!-- a supplementary encoding in KS
   13104   C 5601-1992 Annex 3 (= KS X 1001:1998 Annex 3) --> (Windows code
   13105   page 1361), encodings based on ISO-2022<!--
   13106   http://krijnhoetmer.nl/irc-logs/whatwg/20090628#l-422 and
   13107   http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-October/023797.html
   13108   -->, and encodings based on EBCDIC. Furthermore, authors must not
   13109   use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
   13110   into this category, because these encodings were never intended for
   13111   use for Web content.
   13112   <a href=#refsRFC1345>[RFC1345]</a><!-- for the JIS types -->
   13113   <a href=#refsRFC1842>[RFC1842]</a><!-- HZ-GB-2312 -->
   13114   <a href=#refsRFC1468>[RFC1468]</a><!-- ISO-2022-JP -->
   13115   <a href=#refsRFC2237>[RFC2237]</a><!-- ISO-2022-JP-1 -->
   13116   <a href=#refsRFC1554>[RFC1554]</a><!-- ISO-2022-JP-2 -->
   13117   <a href=#refsRFC1922>[RFC1922]</a><!-- ISO-2022-CN and ISO-2022-CN-EXT -->
   13118   <a href=#refsRFC1557>[RFC1557]</a><!-- ISO-2022-KR -->
   13119   <a href=#refsCESU8>[CESU8]</a>
   13120   <a href=#refsUTF7>[UTF7]</a>
   13121   <a href=#refsBOCU1>[BOCU1]</a>
   13122   <a href=#refsSCSU>[SCSU]</a>
   13123   <!-- no idea what to reference for JOHAB or EBCDIC, so... -->
   13124   </p>
   13125 
   13126   <p>Authors should not use UTF-32, as the encoding detection
   13127   algorithms described in this specification intentionally do not
   13128   distinguish it from UTF-16. <a href=#refsUNICODE>[UNICODE]</a></p>
   13129 
   13130   <p class=note>Using non-UTF-8 encodings can have unexpected
   13131   results on form submission and URL encodings, which use the
   13132   <a href="#document's-character-encoding">document's character encoding</a> by default.</p>
   13133 
   13134   <p>In XHTML, the XML declaration should be used for inline character
   13135   encoding information, if necessary.</p>
   13136 
   13137   <div class=example>
   13138 
   13139    <p>In HTML, to declare that the character encoding is UTF-8, the
   13140    author could include the following markup near the top of the
   13141    document (in the <code><a href=#the-head-element-0>head</a></code> element):</p>
   13142 
   13143    <pre>&lt;meta charset="utf-8"&gt;</pre>
   13144 
   13145    <p>In XML, the XML declaration would be used instead, at the very
   13146    top of the markup:</p>
   13147 
   13148    <pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;</pre>
   13149 
   13150   </div>
   13151 
   13152 
   13153   <h4 id=the-style-element><span class=secno>4.2.6 </span>The <dfn><code>style</code></dfn> element</h4>
   13154 
   13155   <dl class=element><dt>Categories</dt>
   13156    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   13157    <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present: <a href=#flow-content>flow content</a>.</dd>
   13158    <dt>Contexts in which this element may be used:</dt>
   13159    <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is absent: where <a href=#metadata-content>metadata content</a> is expected.</dd>
   13160    <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is absent: in a <code><a href=#the-noscript-element>noscript</a></code> element that is a child of a <code><a href=#the-head-element-0>head</a></code> element.</dd>
   13161    <dd>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present: where <a href=#flow-content>flow content</a> is expected, but before any other <a href=#flow-content>flow content</a> other than other <code><a href=#the-style-element>style</a></code> elements and <a href=#inter-element-whitespace>inter-element whitespace</a>.</dd>
   13162    <dt>Content model:</dt>
   13163    <dd>Depends on the value of the <code title=attr-style-type><a href=#attr-style-type>type</a></code> attribute, but must match requirements described in prose below.</dd>
   13164    <dt>Content attributes:</dt>
   13165    <dd><a href=#global-attributes>Global attributes</a></dd>
   13166    <dd><code title=attr-style-media><a href=#attr-style-media>media</a></code></dd>
   13167    <dd><code title=attr-style-type><a href=#attr-style-type>type</a></code></dd>
   13168    <dd><code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code></dd>
   13169    <dd>Also, the <code title=attr-style-title><a href=#attr-style-title>title</a></code> attribute has special semantics on this element.</dd>
   13170    <dt>DOM interface:</dt>
   13171    <dd>
   13172 <pre class=idl>interface <dfn id=htmlstyleelement>HTMLStyleElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   13173            attribute boolean <a href=#dom-style-disabled title=dom-style-disabled>disabled</a>;
   13174            attribute DOMString <a href=#dom-style-media title=dom-style-media>media</a>;
   13175            attribute DOMString <a href=#dom-style-type title=dom-style-type>type</a>;
   13176            attribute boolean <a href=#dom-style-scoped title=dom-style-scoped>scoped</a>;
   13177 };
   13178 <a href=#htmlstyleelement>HTMLStyleElement</a> implements <span>LinkStyle</span>;</pre>
   13179    </dd>
   13180   </dl><p>The <code><a href=#the-style-element>style</a></code> element allows authors to embed style
   13181   information in their documents. The <code><a href=#the-style-element>style</a></code> element is
   13182   one of several inputs to the <a href=#styling>styling processing
   13183   model</a>. The element does not <a href=#represents title=represents>represent</a> content for the user.</p>
   13184 
   13185   <p>The <dfn id=attr-style-type title=attr-style-type><code>type</code></dfn>
   13186   attribute gives the styling language. If the attribute is present,
   13187   its value must be a <a href=#valid-mime-type>valid MIME type</a> that designates a
   13188   styling language. The <code title="">charset</code> parameter must
   13189   not be specified. The default, which is used if the attribute is
   13190   absent, is "<code title="">text/css</code>". <a href=#refsRFC2318>[RFC2318]</a></p>
   13191 
   13192   <div class=impl>
   13193 
   13194   <!-- this paragraph is also present in the <script> section -->
   13195   <p>When examining types to determine if they support the language,
   13196   user agents must not ignore unknown MIME parameters &mdash; types
   13197   with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
   13198   parameter for the purpose of comparing <a href=#mime-type title="MIME type">MIME
   13199   types</a> here.</p>
   13200 
   13201   </div>
   13202 
   13203   <p>The <dfn id=attr-style-media title=attr-style-media><code>media</code></dfn>
   13204   attribute says which media the styles apply to. The value must be a
   13205   <a href=#valid-media-query>valid media query</a>.  <span class=impl>The user agent
   13206   must apply the styles when the <code title=attr-style-media><a href=#attr-style-media>media</a></code> attribute's value
   13207   <a href=#matches-the-environment>matches the environment</a> and the other relevant
   13208   conditions apply, and must not apply them otherwise.</span></p><!--
   13209   note similar text in <link> section -->
   13210 
   13211   <div class=impl>
   13212 
   13213   <p class=note>The styles might be further limited in scope,
   13214   e.g. in CSS with the use of <code title="">@media</code>
   13215   blocks. This specification does not override such further
   13216   restrictions or requirements.</p><!-- note similar text in <link>
   13217   section -->
   13218 
   13219   </div>
   13220 
   13221   <p id=style-default-media>The default, if the <code title=attr-style-media><a href=#attr-style-media>media</a></code> attribute is omitted, is
   13222   "<code title="">all</code>", meaning that by default styles apply to
   13223   all media.</p>
   13224 
   13225   <p>The <dfn id=attr-style-scoped title=attr-style-scoped><code>scoped</code></dfn>
   13226   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If set, it indicates
   13227   that the styles are intended just for the subtree rooted at the
   13228   <code><a href=#the-style-element>style</a></code> element's parent element, as opposed to the whole
   13229   <code><a href=#document>Document</a></code>.</p>
   13230 
   13231   <div class=impl>
   13232 
   13233   <p>If the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is
   13234   present, then the user agent must apply the specified style
   13235   information only to the <code><a href=#the-style-element>style</a></code> element's parent element
   13236   (if any), and that element's child nodes. Otherwise, the specified
   13237   styles must, if applied, be applied to the entire document.</p>
   13238 
   13239   </div>
   13240 
   13241   <p id=title-on-style>The <dfn id=attr-style-title title=attr-style-title><code>title</code></dfn> attribute on
   13242   <code><a href=#the-style-element>style</a></code> elements defines <span>alternative style sheet
   13243   sets</span>. If the <code><a href=#the-style-element>style</a></code> element has no <code title=attr-style-title><a href=#attr-style-title>title</a></code> attribute, then it has no
   13244   title; the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute of
   13245   ancestors does not apply to the <code><a href=#the-style-element>style</a></code> element. <a href=#refsCSSOM>[CSSOM]</a></p>
   13246 
   13247   <p class=note>The <code title=attr-style-title><a href=#attr-style-title>title</a></code>
   13248   attribute on <code><a href=#the-style-element>style</a></code> elements, like the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code><a href=#the-link-element>link</a></code>
   13249   elements, differs from the global <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in that a
   13250   <code><a href=#the-style-element>style</a></code> block without a title does not inherit the title
   13251   of the parent element: it merely has no title.</p>
   13252 
   13253   <p>The <code><a href=#textcontent>textContent</a></code> of a <code><a href=#the-style-element>style</a></code> element must
   13254   match the <code title="">style</code> production in the following
   13255   ABNF, the character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>
   13256 
   13257   <pre>style         = no-c-start *( c-start no-c-end c-end no-c-start )
   13258 no-c-start    = &lt;any string that doesn't contain a substring that matches c-start &gt;
   13259 c-start       = "&lt;!--"
   13260 no-c-end      = &lt;any string that doesn't contain a substring that matches c-end &gt;
   13261 c-end         = "--&gt;"</pre>
   13262 
   13263   <!-- Unmatched comment-like syntax is invalid on a temporary basis,
   13264        waiting for IE, WebKit, and Opera to fix their parsing bug
   13265        whereby such comments trigger a weird escape in which </style>
   13266        is ignored. Otherwise, parsing behaviour in those browsers
   13267        could differ substantially from the parsing behaviour of HTML5.
   13268        Once everyone follows the HTML5 spec, we can drop this
   13269        requirement.
   13270   -->
   13271 
   13272   <div class=impl>
   13273 
   13274   <p>All descendant elements must be processed, according to their
   13275   semantics, before the <code><a href=#the-style-element>style</a></code> element itself is
   13276   evaluated. For styling languages that consist of pure text, user
   13277   agents must evaluate <code><a href=#the-style-element>style</a></code> elements by passing the
   13278   concatenation of the contents of all the <a href=#text-node title="text
   13279   node">text nodes</a> that are direct children of the
   13280   <code><a href=#the-style-element>style</a></code> element (not any other nodes such as comments or
   13281   elements), in <a href=#tree-order>tree order</a>, to the style system. For
   13282   XML-based styling languages, user agents must pass all the child
   13283   nodes of the <code><a href=#the-style-element>style</a></code> element to the style system.</p>
   13284 
   13285   <p>All <a href=#url title=URL>URLs</a> found by the styling language's
   13286   processor must be <a href=#resolve-a-url title="resolve a url">resolved</a>,
   13287   relative to the element (or as defined by the styling language),
   13288   when the processor is invoked.<!-- so dynamic changes to the base
   13289   URL don't affect the CSS --></p>
   13290 
   13291   <!-- the next few paragraph are similar to text in the <style> section -->
   13292   <p>Once the attempts to obtain the style sheet's <a href=#critical-subresources>critical
   13293   subresources</a>, if any, are complete, or, if the style sheet
   13294   has no <a href=#critical-subresources>critical subresources</a>, once the style sheet has
   13295   been parsed and processed, the user agent must, if the loads were
   13296   successful or there were none, <a href=#queue-a-task>queue a task</a> to
   13297   <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#the-style-element>style</a></code> element,
   13298   or, if one of the style sheet's <a href=#critical-subresources>critical subresources</a>
   13299   failed to completely load for any reason (e.g. DNS error, HTTP 404
   13300   response, a connection being prematurely closed, unsupported
   13301   Content-Type), <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   13302   event</a> named <code title=event-error>error</code> at the
   13303   <code><a href=#the-style-element>style</a></code> element. Non-network errors in processing the
   13304   style sheet or its subresources (e.g. CSS parse errors, PNG decoding
   13305   errors) are not failures for the purposes of this paragraph.</p>
   13306 
   13307   <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation task
   13308   source</a>.</p>
   13309 
   13310   <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
   13311   element's document until all the attempts to obtain the style
   13312   sheet's <a href=#critical-subresources>critical subresources</a>, if any, are
   13313   complete.</p>
   13314 
   13315   </div>
   13316 
   13317   <p class=note>This specification does not specify a style system,
   13318   but CSS is expected to be supported by most Web browsers. <a href=#refsCSS>[CSS]</a></p>
   13319 
   13320   <div class=impl>
   13321 
   13322   <p>The <dfn id=dom-style-media title=dom-style-media><code>media</code></dfn>, <dfn id=dom-style-type title=dom-style-type><code>type</code></dfn> and <dfn id=dom-style-scoped title=dom-style-scoped><code>scoped</code></dfn> IDL attributes
   13323   must <a href=#reflect>reflect</a> the respective content attributes of the
   13324   same name.</p>
   13325 
   13326   </div>
   13327 
   13328   <p>The <dfn id=dom-style-disabled title=dom-style-disabled><code>disabled</code></dfn>
   13329   IDL attribute behaves as defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative style sheets
   13330   DOM</a>.</p>
   13331 
   13332   <p>The <code>LinkStyle</code> interface is also implemented by
   13333   this element; the <a href=#styling>styling processing model</a> defines
   13334   how. <a href=#refsCSSOM>[CSSOM]</a></p>
   13335 
   13336   <div class=example>
   13337 
   13338    <p>The following document has its emphasis styled as bright red
   13339    text rather than italics text, while leaving titles of works and
   13340    Latin words in their default italics. It shows how using
   13341    appropriate elements enables easier restyling of documents.</p>
   13342 
   13343    <pre>&lt;!DOCTYPE html&gt;
   13344 &lt;html lang="en-US"&gt;
   13345  &lt;head&gt;
   13346   &lt;title&gt;My favorite book&lt;/title&gt;
   13347   &lt;style&gt;
   13348    body { color: black; background: white; }
   13349    em { font-style: normal; color: red; }
   13350   &lt;/style&gt;
   13351  &lt;/head&gt;
   13352  &lt;body&gt;
   13353   &lt;p&gt;My &lt;em&gt;favorite&lt;/em&gt; book of all time has &lt;em&gt;got&lt;/em&gt; to be
   13354   &lt;cite&gt;A Cat's Life&lt;/cite&gt;. It is a book by P. Rahmel that talks
   13355   about the &lt;i lang="la"&gt;Felis Catus&lt;/i&gt; in modern human society.&lt;/p&gt;
   13356  &lt;/body&gt;
   13357 &lt;/html&gt;</pre>
   13358 
   13359   </div>
   13360 
   13361 
   13362 
   13363 
   13364   <h4 id=styling><span class=secno>4.2.7 </span><dfn title="styling processing model">Styling</dfn></h4>
   13365 
   13366   <p>The <code><a href=#the-link-element>link</a></code> and <code><a href=#the-style-element>style</a></code> elements can provide
   13367   styling information for the user agent to use when rendering the
   13368   document. The DOM Styling specification specifies what styling
   13369   information is to be used by the user agent and how it is to be
   13370   used. <a href=#refsCSSOM>[CSSOM]</a></p>
   13371 
   13372   <p>The <code><a href=#the-style-element>style</a></code> and <code><a href=#the-link-element>link</a></code> elements implement
   13373   the <code>LinkStyle</code> interface. <a href=#refsCSSOM>[CSSOM]</a></p>
   13374 
   13375   <div class=impl>
   13376 
   13377   <p>For <code><a href=#the-style-element>style</a></code> elements, if the user agent does not
   13378   support the specified styling language, then the <code title=dom-LinkStyle-sheet>sheet</code> attribute of the element's
   13379   <code>LinkStyle</code> interface must return null. Similarly,
   13380   <code><a href=#the-link-element>link</a></code> elements that do not represent <a href=#link-type-stylesheet title=rel-stylesheet>external resource links that contribute to
   13381   the styling processing model</a> (i.e. that do not have a <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword in their <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute), and <code><a href=#the-link-element>link</a></code>
   13382   elements whose specified resource has not yet been fetched, or is
   13383   not in a supported styling language, must have their
   13384   <code>LinkStyle</code> interface's <code title=dom-LinkStyle-sheet>sheet</code> attribute return null.</p>
   13385 
   13386   <p>Otherwise, the <code>LinkStyle</code> interface's <code title=dom-LinkStyle-sheet>sheet</code> attribute must return a
   13387   <code>StyleSheet</code> object with the following properties: <a href=#refsCSSOM>[CSSOM]</a></p>
   13388 
   13389   <dl><dt>The style sheet type</dt>
   13390 
   13391    <dd><p>The style sheet type must be the same as the style's specified
   13392    type. For <code><a href=#the-style-element>style</a></code> elements, this is the same as the
   13393    <code title=attr-style-type><a href=#attr-style-type>type</a></code> content attribute's
   13394    value, or <code title="">text/css</code> if that is omitted. For
   13395    <code><a href=#the-link-element>link</a></code> elements, this is the <a href=#content-type title=Content-Type>Content-Type metadata of the specified
   13396    resource</a>.</dd>
   13397 
   13398    <dt>The style sheet location</dt>
   13399 
   13400    <dd><p>For <code><a href=#the-link-element>link</a></code> elements, the location must be the
   13401    result of <a href=#resolve-a-url title="resolve a url">resolving</a> the
   13402    <a href=#url>URL</a> given by the element's <code title=attr-link-href><a href=#attr-link-href>href</a></code> content attribute, relative to
   13403    the element, or the empty string if that fails. For
   13404    <code><a href=#the-style-element>style</a></code> elements, there is no location.</dd> <!--
   13405    note that this might not match the style sheet URL, if the base URL
   13406    has changed for instance -->
   13407 
   13408    <dt>The style sheet media</dt>
   13409 
   13410    <dd><p>The media must be the same as the value of the element's
   13411    <code title="">media</code> content attribute, or the empty string,
   13412    if the attribute is omitted.</dd>
   13413 
   13414    <dt>The style sheet title</dt>
   13415 
   13416    <dd><p>The title must be the same as the value of the element's
   13417    <code title=dom-title><a href=#dom-title>title</a></code> content attribute, if the
   13418    attribute is present and has a non-empty value. If the attribute is
   13419    absent or its value is the empty string, then the style sheet does
   13420    not have a title (it is the empty string). The title is used for
   13421    defining <span>alternative style sheet sets</span>.</dd>
   13422 
   13423    <dt>The style sheet alternate flag</dt>
   13424 
   13425    <dd><p>For <code><a href=#the-link-element>link</a></code> elements, true if <a href=#the-link-is-an-alternative-stylesheet>the link is an
   13426    alternative stylesheet</a>. In all other cases, false.</dd>
   13427 
   13428 <!--
   13429    <dt>The style sheet disabled flag</dt>
   13430    (not included, because I assume CSSOM will change to not require
   13431    this spec to initialise the value, but will instead initialise it
   13432    based on the other values)
   13433 -->
   13434 
   13435   </dl><p>The same object must be returned each time.</p>
   13436 
   13437   <p>The <dfn id=dom-linkstyle-disabled title=dom-LinkStyle-disabled><code>disabled</code></dfn> IDL
   13438   attribute on <code><a href=#the-link-element>link</a></code> and <code><a href=#the-style-element>style</a></code> elements must
   13439   return false and do nothing on setting, if the <code title=dom-linkstyle-sheet>sheet</code> attribute of their
   13440   <code>LinkStyle</code> interface is null. Otherwise, it must return
   13441   the value of the <code>StyleSheet</code> interface's <code title=dom-stylesheet-disabled>disabled</code> attribute on
   13442   getting, and forward the new value to that same attribute on
   13443   setting.</p>
   13444 
   13445   <!-- [CSSOM] covers the following: the term "alternative style sheet
   13446   sets", the term "default style sheet set", preferred stylesheets,
   13447   alternative stylesheets, persistent stylesheets, ordering of
   13448   stylesheets, dynamic additions/removals, window.styleSheets, style
   13449   sheets given by HTTP Link: headers, and the alternative style sheet
   13450   API -->
   13451 
   13452   <p id=alternate-style-sheets>The rules for handling alternative
   13453   style sheets are defined in the CSS object model specification. <a href=#refsCSSOM>[CSSOM]</a></p>
   13454 
   13455   <hr><p>Style sheets, whether added by a <code><a href=#the-link-element>link</a></code> element, a
   13456   <code><a href=#the-style-element>style</a></code> element, an <code>&lt;?xml-stylesheet&gt;</code> PI,
   13457   an HTTP <code title=http-link>Link:</code> header, or some other
   13458   mechanism, have a <dfn id=style-sheet-ready>style sheet ready</dfn> flag, which is
   13459   initially unset.</p>
   13460 
   13461   <p>When a style sheet is ready to be applied, its <a href=#style-sheet-ready>style sheet
   13462   ready</a> flag must be set. If the style sheet referenced no
   13463   other resources (e.g. it was an internal style sheet given by a
   13464   <code><a href=#the-style-element>style</a></code> element with no <code title="">@import</code>
   13465   rules), then the style rules must be synchronously made available to
   13466   script; otherwise, the style rules must only be made available to
   13467   script once the <a href=#event-loop>event loop</a> reaches its "update the
   13468   rendering" step.</p>
   13469 
   13470   <p>A style sheet in the context of the <code><a href=#document>Document</a></code> of an
   13471   <a href=#html-parser>HTML parser</a> or <a href=#xml-parser>XML parser</a> is said to be
   13472   <dfn id=a-style-sheet-blocking-scripts>a style sheet blocking scripts</dfn> if the element was created
   13473   by that <code><a href=#document>Document</a></code>'s parser, and the element is either a
   13474   <code><a href=#the-style-element>style</a></code> element or a <code><a href=#the-link-element>link</a></code> element that was
   13475   an <a href=#link-type-stylesheet title=rel-stylesheet>external resource link that
   13476   contributes to the styling processing model</a> when the element
   13477   was created by the parser, and the element's style sheet was enabled
   13478   when the element was created by the parser, and the element's
   13479   <a href=#style-sheet-ready>style sheet ready</a> flag is not yet set, and, the last
   13480   time the <a href=#event-loop>event loop</a> reached step 1, the element was
   13481   <a href=#in-a-document title="in a document">in that <code>Document</code></a>,
   13482   and the user agent hasn't given up on that particular style sheet
   13483   yet. A user agent may give up on a style sheet at any time.</p>
   13484 
   13485   </div>
   13486 
   13487 
   13488 
   13489   <h3 id=scripting-1><span class=secno>4.3 </span>Scripting</h3>
   13490 
   13491   <p>Scripts allow authors to add interactivity to their documents.</p>
   13492 
   13493   <p>Authors are encouraged to use declarative alternatives to
   13494   scripting where possible, as declarative mechanisms are often more
   13495   maintainable, and many users disable scripting.</p>
   13496 
   13497   <div class=example>
   13498    <p>For example, instead of using script to show or hide a section
   13499    to show more details, the <code><a href=#the-details-element>details</a></code> element could be
   13500    used.</p>
   13501   </div>
   13502 
   13503   <p>Authors are also encouraged to make their applications degrade
   13504   gracefully in the absence of scripting support.</p>
   13505 
   13506   <div class=example>
   13507    <p>For example, if an author provides a link in a table header to
   13508    dynamically resort the table, the link could also be made to
   13509    function without scripts by requesting the sorted table from the
   13510    server.</p>
   13511   </div>
   13512 
   13513 
   13514   <h4 id=script><span class=secno>4.3.1 </span>The <dfn><code>script</code></dfn> element</h4>
   13515 
   13516   <dl class=element><dt>Categories</dt>
   13517    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   13518    <dd><a href=#flow-content>Flow content</a>.</dd>
   13519    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   13520    <dt>Contexts in which this element may be used:</dt>
   13521    <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   13522    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   13523    <dt>Content model:</dt>
   13524    <dd>If there is no <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   13525    attribute, depends on the value of the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, but must match
   13526    <a href=#restrictions-for-contents-of-script-elements>script content restrictions</a>.</dd>
   13527    <dd>If there <em>is</em> a <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   13528    attribute, the element must be either empty or contain only
   13529    <a href=#inline-documentation-for-external-scripts>script documentation</a> that also matches <a href=#restrictions-for-contents-of-script-elements>script
   13530    content restrictions</a>.</dd>
   13531    <dt>Content attributes:</dt>
   13532    <dd><a href=#global-attributes>Global attributes</a></dd>
   13533    <dd><code title=attr-script-src><a href=#attr-script-src>src</a></code></dd>
   13534    <dd><code title=attr-script-async><a href=#attr-script-async>async</a></code></dd>
   13535    <dd><code title=attr-script-defer><a href=#attr-script-defer>defer</a></code></dd>
   13536    <dd><code title=attr-script-type><a href=#attr-script-type>type</a></code></dd>
   13537    <dd><code title=attr-script-charset><a href=#attr-script-charset>charset</a></code></dd>
   13538    <dt>DOM interface:</dt>
   13539    <dd>
   13540 <pre class=idl>interface <dfn id=htmlscriptelement>HTMLScriptElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   13541            attribute DOMString <a href=#dom-script-src title=dom-script-src>src</a>;
   13542            attribute boolean <a href=#dom-script-async title=dom-script-async>async</a>;
   13543            attribute boolean <a href=#dom-script-defer title=dom-script-defer>defer</a>;
   13544            attribute DOMString <a href=#dom-script-type title=dom-script-type>type</a>;
   13545            attribute DOMString <a href=#dom-script-charset title=dom-script-charset>charset</a>;
   13546            attribute DOMString <a href=#dom-script-text title=dom-script-text>text</a>;
   13547 };</pre>
   13548    </dd>
   13549   </dl><p>The <code><a href=#script>script</a></code> element allows authors to include dynamic
   13550   script and data blocks in their documents. The element does not
   13551   <a href=#represents title=represents>represent</a> content for the user.</p>
   13552 
   13553   <p>When used to include dynamic scripts, the scripts may either be
   13554   embedded inline or may be imported from an external file using the
   13555   <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute. If the language
   13556   is not that described by "<code title="">text/javascript</code>",
   13557   then the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute must
   13558   be present, as described below.</p>
   13559 
   13560   <p>When used to include data blocks (as opposed to scripts), the
   13561   data must be embedded inline, the format of the data must be given
   13562   using the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, and
   13563   the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute must not be
   13564   specified.</p>
   13565 
   13566   <p>The <dfn id=attr-script-type title=attr-script-type><code>type</code></dfn>
   13567   attribute gives the language of the script or format of the data. If
   13568   the attribute is present, its value must be a <a href=#valid-mime-type>valid MIME
   13569   type</a>. The <code title="">charset</code> parameter must not be
   13570   specified. The default, which is used if the attribute is absent,
   13571   is "<code title="">text/javascript</code>".</p>
   13572 
   13573   <p>The <dfn id=attr-script-src title=attr-script-src><code>src</code></dfn>
   13574   attribute, if specified, gives the address of the external script
   13575   resource to use. The value of the attribute must be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid
   13576   non-empty URL potentially surrounded by spaces</a> identifying a
   13577   script resource of the type given by the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, if the attribute is
   13578   present, or of the type "<code title="">text/javascript</code>", if
   13579   the attribute is absent. A resource is a script resource of a given
   13580   type if that type identifies a scripting language and the resource
   13581   conforms with the requirements of that language's specification.</p>
   13582 
   13583   <p>The <dfn id=attr-script-charset title=attr-script-charset><code>charset</code></dfn>
   13584   attribute gives the character encoding of the external script
   13585   resource. The attribute must not be specified if the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is not present. If the
   13586   attribute is set, its value must be a valid character encoding name,
   13587   must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   13588   <a href=#preferred-mime-name>preferred MIME name</a> for that encoding, and must match
   13589   the encoding given in the <code title="">charset</code> parameter of
   13590   the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the
   13591   external file, if any. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   13592 
   13593   <p>The <dfn id=attr-script-async title=attr-script-async><code>async</code></dfn> and
   13594   <dfn id=attr-script-defer title=attr-script-defer><code>defer</code></dfn> attributes
   13595   are <a href=#boolean-attribute title="boolean attribute">boolean attributes</a> that
   13596   indicate how the script should be executed. The <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> and <code title=attr-script-async><a href=#attr-script-async>async</a></code> attributes must not be
   13597   specified if the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute
   13598   is not present.</p>
   13599 
   13600   <p>There are three possible modes that can be selected using these
   13601   attributes. If the <code title=attr-script-async><a href=#attr-script-async>async</a></code>
   13602   attribute is present, then the script will be executed
   13603   asynchronously, as soon as it is available. If the <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute is not present but
   13604   the <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute is
   13605   present, then the script is executed when the page has finished
   13606   parsing. If neither attribute is present, then the script is
   13607   fetched and executed immediately, before the user agent continues
   13608   parsing the page.</p>
   13609 
   13610   <p class=note>The exact processing details for these attributes
   13611   are, for mostly historical reasons, somewhat non-trivial, involving
   13612   a number of aspects of HTML. The implementation requirements are
   13613   therefore by necessity scattered throughout the specification. The
   13614   algorithms below (in this section) describe the core of this
   13615   processing, but these algorithms reference and are referenced by the
   13616   parsing rules for <code><a href=#script>script</a></code> <a href=#scriptTag>start</a>
   13617   and <a href=#scriptEndTag>end</a> tags in HTML, <a href=#scriptForeignEndTag>in foreign content</a>, and <a href=#scriptTagXML>in XML</a>, the rules for the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method, the
   13618   handling of <a href=#scripting>scripting</a>, etc.</p>
   13619 
   13620   <p>The <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute may be
   13621   specified even if the <code title=attr-script-async><a href=#attr-script-async>async</a></code>
   13622   attribute is specified, to cause legacy Web browsers that only
   13623   support <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> (and not <code title=attr-script-async><a href=#attr-script-async>async</a></code>) to fall back to the <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> behavior instead of the
   13624   synchronous blocking behavior that is the default.</p>
   13625 
   13626   <p>Changing the <code title=attr-script-src><a href=#attr-script-src>src</a></code>, <code title=attr-script-type><a href=#attr-script-type>type</a></code>, <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code>, <code title=attr-script-async><a href=#attr-script-async>async</a></code>, and <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attributes dynamically has no
   13627   direct effect; these attribute are only used at specific times
   13628   described below.</p> <!-- by implication, changes to the base URL
   13629   also have no effect -->
   13630 
   13631   <div class=impl>
   13632 
   13633   <p>A <code><a href=#script>script</a></code> element has several associated pieces of
   13634   state.</p>
   13635 
   13636   <p>The first is a flag indicating whether or not the script block
   13637   has been <dfn id=already-started>"already started"</dfn>. Initially,
   13638   <code><a href=#script>script</a></code> elements must have this flag unset (script
   13639   blocks, when created, are not "already started"). When a
   13640   <code><a href=#script>script</a></code> element is cloned, the "already started" flag,
   13641   if set, must be propagated to the clone when it is created.</p>
   13642 
   13643   <p>The second is a flag indicating whether the element was
   13644   <dfn id=parser-inserted>"parser-inserted"</dfn>. Initially, <code><a href=#script>script</a></code>
   13645   elements must have this flag unset. It is set by the <a href=#html-parser>HTML
   13646   parser</a> and the <a href=#xml-parser>XML parser</a> on <code><a href=#script>script</a></code>
   13647   elements they insert and affects the processing of those
   13648   elements.</p>
   13649 
   13650   <p>The third is a flag indicating whether or not the script block is
   13651   <dfn id=ready-to-be-parser-executed>"ready to be parser-executed"</dfn>. Initially,
   13652   <code><a href=#script>script</a></code> elements must have this flag unset (script
   13653   blocks, when created, are not "ready to be parser-executed"). This
   13654   flag is used only for elements that are also
   13655   <a href=#parser-inserted>"parser-inserted"</a>, to let the parser know when to
   13656   execute the script.</p>
   13657 
   13658   <p>The fourth and fifth pieces of state are <dfn id="the-script-block's-type"><var>the script
   13659   block's type</var></dfn> and <dfn id="the-script-block's-character-encoding"><var>the script block's character
   13660   encoding</var></dfn>. They are determined when the script is run,
   13661   based on the attributes on the element at that time.</p>
   13662 
   13663   <p>When a <code><a href=#script>script</a></code> element that is neither marked as
   13664   having <a href=#already-started>"already started"</a> nor marked as being
   13665   <a href=#parser-inserted>"parser-inserted"</a> experiences one of the events listed
   13666   in the following list, the user agent must synchronously <a href=#running-a-script title="running a script">run</a> the <code><a href=#script>script</a></code>
   13667   element:</p>
   13668 
   13669   <ul><li>The <code><a href=#script>script</a></code> element gets <a href=#insert-an-element-into-a-document title="insert an
   13670    element into a document">inserted into a document</a>.</li>
   13671 
   13672    <li>The <code><a href=#script>script</a></code> element is <a href=#in-a-document>in a
   13673    <code>Document</code></a> and its child nodes are changed.</li>
   13674 
   13675    <li>The <code><a href=#script>script</a></code> element is <a href=#in-a-document>in a
   13676    <code>Document</code></a> and has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute set where previously
   13677    the element had no such attribute.</li>
   13678 
   13679   </ul><p><dfn id=running-a-script title="running a script">Running a script</dfn>: When a
   13680   <code><a href=#script>script</a></code> element is to be run, the user agent must act as
   13681   follows:</p>
   13682 
   13683   <ol><li id=script-processing-prepare>
   13684 
   13685     <p>If either:</p>
   13686 
   13687     <ul class=brief><li>the <code><a href=#script>script</a></code> element has a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute and its value is
   13688      the empty string, or</li>
   13689 
   13690      <li>the <code><a href=#script>script</a></code> element has no <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute but it has a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute and
   13691      <em>that</em> attribute's value is the empty string, or</li>
   13692 
   13693      <li>the <code><a href=#script>script</a></code> element has neither a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute nor a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute, then</li>
   13694 
   13695     </ul><p>...let <var><a href="#the-script-block's-type">the script block's type</a></var> for this
   13696     <code><a href=#script>script</a></code> element be "<code title="">text/javascript</code>".</p>
   13697 
   13698     <p>Otherwise, if the <code><a href=#script>script</a></code> element has a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute, let <var><a href="#the-script-block's-type">the
   13699     script block's type</a></var> for this <code><a href=#script>script</a></code> element be
   13700     the value of that attribute with any leading or trailing sequences
   13701     of <a href=#space-character title="space character">space characters</a>
   13702     removed.</p>
   13703 
   13704     <p>Otherwise, the element has a non-empty <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute; let
   13705     <var><a href="#the-script-block's-type">the script block's type</a></var> for this <code><a href=#script>script</a></code>
   13706     element be the concatenation of the string "<code title="">text/</code>" followed by the value of the <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute.</p> <!--
   13707     user agents already support, e.g., type="text/javascript1.3", so
   13708     we don't have to support that separately. -->
   13709 
   13710     <p class=note>The <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute is never
   13711     conforming, and is always ignored if there is a <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute present.</p>
   13712 
   13713    </li>
   13714 
   13715    <li id=script-processing-encoding>
   13716 
   13717     <p>If the <code><a href=#script>script</a></code> element has a <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code> attribute, then let
   13718     <var><a href="#the-script-block's-character-encoding">the script block's character encoding</a></var> for this
   13719     <code><a href=#script>script</a></code> element be the encoding given by the <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code> attribute.</p>
   13720 
   13721     <p>Otherwise, let <var><a href="#the-script-block's-character-encoding">the script block's character encoding</a></var>
   13722     for this <code><a href=#script>script</a></code> element be the same as <a href="#document's-character-encoding" title="document's character encoding">the encoding of the document
   13723     itself</a>.</p>
   13724 
   13725    </li>
   13726 
   13727    <li id=script-processing-for>
   13728 
   13729     <p>If the <code><a href=#script>script</a></code> element has an <code title=attr-script-event><a href=#attr-script-event>event</a></code> attribute and a <code title=attr-script-for><a href=#attr-script-for>for</a></code> attribute, then run these
   13730     substeps:</p>
   13731 
   13732     <ol><li><p>Let <var title="">for</var> be the value of the <code title=attr-script-for><a href=#attr-script-for>for</a></code> attribute.</li>
   13733 
   13734      <li><p>Let <var title="">event</var> be the value of the <code title=attr-script-event><a href=#attr-script-event>event</a></code> attribute.</li>
   13735 
   13736      <li><p><a href=#strip-leading-and-trailing-whitespace>Strip leading and trailing whitespace</a> from
   13737      <var title="">event</var> and <var title="">for</var>.</li>
   13738 
   13739      <li><p>If <var title="">for</var> is not an <a href=#ascii-case-insensitive>ASCII
   13740      case-insensitive</a> match for the string "<code title="">window</code>", then the user agent must abort these
   13741      steps at this point. The script is not executed.</li>
   13742 
   13743      <li><p>If <var title="">event</var> is not an <a href=#ascii-case-insensitive>ASCII
   13744      case-insensitive</a> match for either the string "<code title="">onload</code>" or the string "<code title="">onload()</code>", then the user agent must abort these
   13745      steps at this point. The script is not executed.</li>
   13746 
   13747     </ol></li>
   13748 
   13749    <li id=script-processing-noscript>
   13750 
   13751     <p>If <a href=#concept-n-noscript title=concept-n-noscript>scripting is
   13752     disabled</a> for the <code><a href=#script>script</a></code> element, or if the
   13753     user agent does not <a href=#support-the-scripting-language>support the scripting language</a>
   13754     given by <var><a href="#the-script-block's-type">the script block's type</a></var> for this
   13755     <code><a href=#script>script</a></code> element, then the user agent must abort these
   13756     steps at this point. The script is not executed.</p>
   13757 
   13758    </li>
   13759 
   13760    <li id=script-processing-empty>
   13761 
   13762     <p>If the element has no <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   13763     attribute, and its child nodes consist only of comment nodes and
   13764     empty <a href=#text-node title="text node">text nodes</a>, then the user
   13765     agent must abort these steps at this point. The script is not
   13766     executed.</p>
   13767 
   13768    </li>
   13769 
   13770    <li id=script-processing-start>
   13771 
   13772     <p>The user agent must set the element's <a href=#already-started>"already
   13773     started"</a> flag.</p>
   13774 
   13775    </li>
   13776 
   13777    <li id=script-processing-src-prepare>
   13778 
   13779     <p>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code>
   13780     attribute whose value is not the empty string, then the value of
   13781     that attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a>
   13782     relative to the element, and if that is successful, the specified
   13783     resource must then be <a href=#fetch title=fetch>fetched</a>, from the
   13784     <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>.</p>
   13785     <!-- not http-origin privacy sensitive -->
   13786 
   13787     <p>If the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute's
   13788     value is the empty string or if it could not be resolved, then the
   13789     user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   13790     event</a> named <code title=event-error>error</code> at the
   13791     element, and abort these steps.</p>
   13792 
   13793     <p>For historical reasons, if the <a href=#url>URL</a> is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code>
   13794     URL</a>, then the user agent must not, despite the requirements
   13795     in the definition of the <a href=#fetch title=fetch>fetching</a>
   13796     algorithm, actually execute the script in the URL; instead the
   13797     user agent must act as if it had received an empty HTTP 400
   13798     response.</p>
   13799 
   13800     <p>Once the resource's <a href=#content-type title=Content-Type>Content Type
   13801     metadata</a> is available, if it ever is, apply the
   13802     <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
   13803     Content-Type</a> to it. If this returns an encoding, and the
   13804     user agent supports that encoding, then let <var><a href="#the-script-block's-character-encoding">the script
   13805     block's character encoding</a></var> be that encoding.</p>
   13806 
   13807     <p>For performance reasons, user agents may start fetching the
   13808     script as soon as the attribute is set, instead, in the hope that
   13809     the element will be inserted into the document. Either way, once
   13810     the element is <a href=#insert-an-element-into-a-document title="insert an element into a
   13811     document">inserted into the document</a>, the load must have
   13812     started. If the UA performs such prefetching, but the element is
   13813     never inserted in the document, or the <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is dynamically
   13814     changed,<!-- or the base URL is dynamically changed,--> then the
   13815     user agent will not execute the script, and the fetching process
   13816     will have been effectively wasted.</p>
   13817 
   13818    </li>
   13819 
   13820    <li>
   13821 
   13822     <p>Then, the first of the following options that describes the
   13823     situation must be followed:</p>
   13824 
   13825     <dl class=switch><dt id=script-processing-defer>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, and the element has
   13826      a <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute, and the
   13827      element has been flagged as <a href=#parser-inserted>"parser-inserted"</a>, and
   13828      the element does not have an <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute</dt>
   13829 
   13830      <dd>
   13831 
   13832       <p>The element must be added to the end of the <dfn id=list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of
   13833       scripts that will execute when the document has finished
   13834       parsing</dfn>.</p>
   13835 
   13836       <p>The <a href=#concept-task title=concept-task>task</a> that the
   13837       <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
   13838       queue</a> once the <a href=#fetch title=fetch>fetching
   13839       algorithm</a> has completed must set the element's
   13840       <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag. The parser will
   13841       handle executing the script.</p>
   13842 
   13843      </dd>
   13844 
   13845 
   13846      <dt id=script-processing-parser-inserted>If the element has a
   13847      <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, and the
   13848      element has been flagged as <a href=#parser-inserted>"parser-inserted"</a>, and
   13849      the element does not have an <code title=attr-script-async><a href=#attr-script-async>async</a></code> attribute</dt>
   13850 
   13851      <dd>
   13852 
   13853       <p>The element is the <a href=#pending-parsing-blocking-script>pending parsing-blocking
   13854       script</a>. (There can only be one such script at a
   13855       time.)</p>
   13856 
   13857       <p>The <a href=#concept-task title=concept-task>task</a> that the
   13858       <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
   13859       queue</a> once the <a href=#fetch title=fetch>fetching
   13860       algorithm</a> has completed must set the element's
   13861       <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag. The parser will
   13862       handle executing the script.</p>
   13863 
   13864      </dd>
   13865 
   13866 
   13867      <dt id=script-processing-style-delayed>If the element does not
   13868      have a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute, but
   13869      there is <a href=#a-style-sheet-blocking-scripts>a style sheet blocking scripts</a>, and the
   13870      element has been flagged as <a href=#parser-inserted>"parser-inserted"</a></dt>
   13871 
   13872      <dd>
   13873 
   13874       <p>The element is the <a href=#pending-parsing-blocking-script>pending parsing-blocking
   13875       script</a>. (There can only be one such script at a
   13876       time.)</p>
   13877 
   13878       <p>Set the element's <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a>
   13879       flag. The parser will handle executing the script.</p>
   13880 
   13881      </dd>
   13882 
   13883 
   13884      <dt id=script-processing-src>If the element has a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute</dt>
   13885 
   13886      <dd>
   13887 
   13888       <p>The element must be added to the <dfn id=set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that
   13889       will execute as soon as possible</dfn>.</p>
   13890 
   13891       <p>The <a href=#concept-task title=concept-task>task</a> that the
   13892       <a href=#networking-task-source>networking task source</a> places on the <a href=#task-queue>task
   13893       queue</a> once the <a href=#fetch title=fetch>fetching
   13894       algorithm</a> has completed must <a href=#executing-a-script-block title="executing a
   13895       script block">execute the script block</a> and then remove
   13896       the element from the <a href=#set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that will execute as
   13897       soon as possible</a>.</p>
   13898 
   13899      </dd>
   13900 
   13901 
   13902      <dt id=script-processing-inline>Otherwise</dt>
   13903 
   13904      <dd>The user agent must immediately <a href=#executing-a-script-block title="executing a
   13905      script block">execute the script block</a>, even if other
   13906      scripts are already executing.</dd>
   13907 
   13908     </dl></li>
   13909 
   13910   </ol><!-- similar text in various places --><p>Fetching an external script must <a href=#delay-the-load-event>delay the load
   13911   event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
   13912   task">queued</a> by the <a href=#networking-task-source>networking task source</a> once
   13913   the resource has been <a href=#fetch title=fetch>fetched</a> (defined
   13914   above) has been run.</p>
   13915 
   13916   <p>The <dfn id=pending-parsing-blocking-script>pending parsing-blocking script</dfn> is used by the
   13917   parser.</p>
   13918 
   13919   <p><dfn id=executing-a-script-block title="executing a script block">Executing a script
   13920   block</dfn>: When the steps above require that the script block be
   13921   executed, the user agent must act as follows:</p>
   13922 
   13923   <dl class=switch><dt>If the load resulted in an error (for example a DNS error, or
   13924    an HTTP 404 error)</dt>
   13925 
   13926    <dd><p>Executing the script block must just consist of <a href=#fire-a-simple-event title="fire a simple event">firing a simple event</a> named
   13927    <code title=event-error>error</code> at the element.</dd>
   13928 
   13929    <dt>If the load was successful</dt>
   13930 
   13931    <!-- SCRIPT EXEC -->
   13932    <dd>
   13933 
   13934     <ol><li>
   13935 
   13936       <p>Initialize <dfn id="the-script-block's-source"><var>the script block's source</var></dfn> as
   13937       follows:</p>
   13938 
   13939       <dl class=switch><dt>If the script is from an external file and <var><a href="#the-script-block's-type">the script block's type</a></var> is a text-based language</dt>
   13940 
   13941        <dd>
   13942 
   13943         <p>The contents of that file, interpreted as string of
   13944         Unicode characters, are the script source.</p>
   13945 
   13946         <p>For each of the rows in the following table, starting with
   13947         the first one and going down, if the file has as many or more
   13948         bytes available than the number of bytes in the first column,
   13949         and the first bytes of the file match the bytes given in the
   13950         first column, then set <var><a href="#the-script-block's-character-encoding">the script block's character
   13951         encoding</a></var> to the encoding given in the cell in the second
   13952         column of that row, irrespective of any previous value:</p>
   13953 
   13954         <!-- this table is present in several forms in this file; keep them in sync -->
   13955         <table><thead><tr><th>Bytes in Hexadecimal
   13956            <th>Encoding
   13957          <tbody><!-- nobody uses this
   13958           <tr>
   13959            <td>00 00 FE FF
   13960            <td>UTF-32BE
   13961           <tr>
   13962            <td>FF FE 00 00
   13963            <td>UTF-32LE
   13964 --><tr><td>FE FF
   13965            <td>UTF-16BE
   13966           <tr><td>FF FE
   13967            <td>UTF-16LE
   13968           <tr><td>EF BB BF
   13969            <td>UTF-8
   13970 <!-- nobody uses this
   13971           <tr>
   13972            <td>DD 73 66 73
   13973            <td>UTF-EBCDIC
   13974 -->
   13975         </table><p class=note>This step looks for Unicode Byte Order Marks
   13976         (BOMs).</p>
   13977 
   13978         <p>The file must then be converted to Unicode using the
   13979         character encoding given by <var><a href="#the-script-block's-character-encoding">the script block's character
   13980         encoding</a></var>.</p>
   13981 
   13982        </dd>
   13983 
   13984        <dt>If the script is from an external file and <var><a href="#the-script-block's-type">the script block's type</a></var> is an XML-based language</dt>
   13985 
   13986        <dd>
   13987 
   13988         <p>The external file is the script source. When it is later
   13989         executed, it must be interpreted in a manner consistent with
   13990         the specification defining the language given by <var><a href="#the-script-block's-type">the
   13991         script block's type</a></var>.</p>
   13992 
   13993        </dd>
   13994 
   13995        <dt>If the script is inline and <var><a href="#the-script-block's-type">the script block's type</a></var> is a text-based language</dt>
   13996 
   13997        <dd>
   13998 
   13999         <p>The value of the <code title=dom-script-text><a href=#dom-script-text>text</a></code>
   14000         IDL attribute at the time the element's <a href=#already-started>"already
   14001         started"</a> flag was set is the script source.</p>
   14002 
   14003        </dd>
   14004 
   14005        <dt>If the script is inline and <var><a href="#the-script-block's-type">the script block's type</a></var> is an XML-based language</dt>
   14006 
   14007        <dd>
   14008 
   14009         <p>The child nodes of the <code><a href=#script>script</a></code> element at the
   14010         time the element's <a href=#already-started>"already started"</a> flag was set
   14011         are the script source.</p>
   14012 
   14013        </dd>
   14014 
   14015       </dl></li>
   14016 
   14017      <li>
   14018 
   14019       <p><a href=#create-a-script-from-a-node title="create a script from a node">Create a
   14020       script</a> from the <code><a href=#script>script</a></code> element node, using
   14021       <var><a href="#the-script-block's-source">the script block's source</a></var> and <var><a href="#the-script-block's-type">the script
   14022       block's type</a></var>.</p>
   14023 
   14024       <p class=note>This is where the script is compiled and
   14025       actually executed.</p>
   14026 
   14027      </li>
   14028 
   14029      <li>
   14030 
   14031       <p>If the script is from an external file, <a href=#fire-a-simple-event>fire a simple
   14032       event</a> named <code title=event-load>load</code> at the
   14033       <code><a href=#script>script</a></code> element.</p>
   14034 
   14035       <p>Otherwise, the script is internal; <a href=#queue-a-task>queue a task</a>
   14036       to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#script>script</a></code>
   14037       element.</p>
   14038 
   14039      </li>
   14040 
   14041     </ol></dd>
   14042 
   14043   </dl><p>The IDL attributes <dfn id=dom-script-src title=dom-script-src><code>src</code></dfn>, <dfn id=dom-script-type title=dom-script-type><code>type</code></dfn>, <dfn id=dom-script-charset title=dom-script-charset><code>charset</code></dfn>, <dfn id=dom-script-async title=dom-script-async><code>async</code></dfn>, and <dfn id=dom-script-defer title=dom-script-defer><code>defer</code></dfn>, each must
   14044   <a href=#reflect>reflect</a> the respective content attributes of the same
   14045   name.</p>
   14046 
   14047   </div>
   14048 
   14049   <dl class=domintro><dt><var title="">script</var> . <code title=dom-script-text><a href=#dom-script-text>text</a></code> [ = <var title="">value</var> ]</dt>
   14050 
   14051    <dd>
   14052 
   14053     <p>Returns the contents of the element, ignoring child nodes that
   14054     aren't <a href=#text-node title="text node">text nodes</a>.</p>
   14055 
   14056     <p>Can be set, to replace the element's children with the given
   14057     value.</p>
   14058 
   14059    </dd>
   14060 
   14061   </dl><div class=impl>
   14062 
   14063   <p>The IDL attribute <dfn id=dom-script-text title=dom-script-text><code>text</code></dfn> must return a
   14064   concatenation of the contents of all the <a href=#text-node title="text
   14065   node">text nodes</a> that are direct children of the
   14066   <code><a href=#script>script</a></code> element (ignoring any other nodes such as
   14067   comments or elements), in tree order. On setting, it must act the
   14068   same way as the <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>
   14069 
   14070   </div>
   14071 
   14072   <p class=note>When inserted using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> method,
   14073   <code><a href=#script>script</a></code> elements execute (typically synchronously), but
   14074   when inserted using <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> and <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attributes, they do not
   14075   execute at all.</p>
   14076 
   14077   <div class=example>
   14078 
   14079    <p>In this example, two <code><a href=#script>script</a></code> elements are used. One
   14080    embeds an external script, and the other includes some data.</p>
   14081 
   14082    <pre>&lt;script src="game-engine.js"&gt;&lt;/script&gt;
   14083 &lt;script type="text/x-game-map"&gt;
   14084 ........U.........e
   14085 o............A....e
   14086 .....A.....AAA....e
   14087 .A..AAA...AAAAA...e
   14088 &lt;/script&gt;</pre>
   14089 
   14090    <p>The data in this case might be used by the script to generate
   14091    the map of a video game. The data doesn't have to be used that way,
   14092    though; maybe the map data is actually embedded in other parts of
   14093    the page's markup, and the data block here is just used by the
   14094    site's search engine to help users who are looking for particular
   14095    features in their game maps.</p>
   14096 
   14097   </div>
   14098 
   14099   <div class=example>
   14100 
   14101    <p>The following sample shows how a script element can be used to
   14102    define a function that is then used by other parts of the
   14103    document. It also shows how a <code><a href=#script>script</a></code> element can be
   14104    used to invoke script while the document is being parsed, in this
   14105    case to initialize the form's output.</p>
   14106 
   14107    <pre>&lt;script&gt;
   14108  function calculate(form) {
   14109    var price = 52000;
   14110    if (form.elements.brakes.checked)
   14111      price += 1000;
   14112    if (form.elements.radio.checked)
   14113      price += 2500;
   14114    if (form.elements.turbo.checked)
   14115      price += 5000;
   14116    if (form.elements.sticker.checked)
   14117      price += 250;
   14118    form.elements.result.value = price;
   14119  }
   14120 &lt;/script&gt;
   14121 &lt;form name="pricecalc" onsubmit="return false"&gt;
   14122  &lt;fieldset&gt;
   14123   &lt;legend&gt;Work out the price of your car&lt;/legend&gt;
   14124   &lt;p&gt;Base cost: &pound;52000.&lt;/p&gt;
   14125   &lt;p&gt;Select additional options:&lt;/p&gt;
   14126   &lt;ul&gt;
   14127    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=brakes&gt; Ceramic brakes (&pound;1000)&lt;/label&gt;&lt;/li&gt;
   14128    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=radio&gt; Satellite radio (&pound;2500)&lt;/label&gt;&lt;/li&gt;
   14129    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=turbo&gt; Turbo charger (&pound;5000)&lt;/label&gt;&lt;/li&gt;
   14130    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=sticker&gt; "XZ" sticker (&pound;250)&lt;/label&gt;&lt;/li&gt;
   14131   &lt;/ul&gt;
   14132   &lt;p&gt;Total: &pound;&lt;output name=result onformchange="calculate(form)"&gt;&lt;/output&gt;&lt;/p&gt;
   14133  &lt;/fieldset&gt;
   14134  &lt;script&gt;
   14135   document.forms.pricecalc.dispatchFormChange();
   14136  &lt;/script&gt;
   14137 &lt;/form&gt;</pre>
   14138 
   14139   </div>
   14140 
   14141 
   14142 
   14143   <h5 id=scriptingLanguages><span class=secno>4.3.1.1 </span>Scripting languages</h5>
   14144 
   14145   <div class=impl>
   14146 
   14147   <p>A user agent is said to <dfn id=support-the-scripting-language>support the scripting language</dfn>
   14148   if <var><a href="#the-script-block's-type">the script block's type</a></var> is an <a href=#ascii-case-insensitive>ASCII
   14149   case-insensitive</a> match for the <a href=#mime-type>MIME type</a> string
   14150   of a scripting language that the user agent implements.</p>
   14151 
   14152   </div>
   14153 
   14154   <p>The following lists some <a href=#mime-type>MIME type</a> strings and the
   14155   languages to which they refer:</p>
   14156 
   14157   <dl><dt>"<code>application/ecmascript</code>"</dt>
   14158    <dt>"<code>application/javascript</code>"</dt>
   14159    <dt>"<code>application/x-ecmascript</code>"</dt>
   14160    <dt>"<code>application/x-javascript</code>"</dt>
   14161    <dt>"<code>text/ecmascript</code>"</dt>
   14162    <dt>"<code>text/javascript</code>"</dt>
   14163    <dt>"<code>text/javascript1.0</code>"</dt>
   14164    <dt>"<code>text/javascript1.1</code>"</dt>
   14165    <dt>"<code>text/javascript1.2</code>"</dt>
   14166    <dt>"<code>text/javascript1.3</code>"</dt>
   14167    <dt>"<code>text/javascript1.4</code>"</dt>
   14168    <dt>"<code>text/javascript1.5</code>"</dt>
   14169    <dt>"<code>text/jscript</code>"</dt>
   14170    <dt>"<code>text/livescript</code>"</dt>
   14171    <dt>"<code>text/x-ecmascript</code>"</dt>
   14172    <dt>"<code>text/x-javascript</code>"</dt>
   14173    <dd>JavaScript. <a href=#refsECMA262>[ECMA262]</a></dd>
   14174 
   14175    <dt>"<code>text/javascript;e4x=1</code>"</dt>
   14176    <dd>JavaScript with ECMAScript for XML. <a href=#refsECMA357>[ECMA357]</a></dd>
   14177 
   14178   </dl><div class=impl>
   14179 
   14180   <p>User agents may support other <a href=#mime-type title="MIME type">MIME
   14181   types</a> and other languages.</p>
   14182 
   14183   <!-- this paragraph is also present in the <style> section -->
   14184   <p>When examining types to determine if they support the language,
   14185   user agents must not ignore unknown MIME parameters &mdash; types
   14186   with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
   14187   parameter for the purpose of comparing <a href=#mime-type title="MIME type">MIME
   14188   types</a> here.</p>
   14189 
   14190   </div>
   14191 
   14192 
   14193   <h5 id=restrictions-for-contents-of-script-elements><span class=secno>4.3.1.2 </span><dfn title="script content restrictions">Restrictions for contents of <code>script</code> elements</dfn></h5>
   14194 
   14195   <p>The <code><a href=#textcontent>textContent</a></code> of a <code><a href=#script>script</a></code> element must match the
   14196   <code title="">script</code> production in the following ABNF, the
   14197   character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>
   14198 
   14199   <pre>script        = data1 *( escape [ script-start data3 ] "--&gt;" data1 ) [ escape ]
   14200 escape        = "&lt;!--" data2 *( script-start data3 script-end data2 )
   14201 
   14202 data1         = &lt;any string that doesn't contain a substring that matches not-data1&gt;
   14203 not-data1     = <!-- script-end / -->"&lt;!--"             <!-- the script-end is redundant here since it would close the element -->
   14204 
   14205 data2         = &lt;any string that doesn't contain a substring that matches not-data2&gt;
   14206 not-data2     = <!-- script-end / -->script-start / "--&gt;"  <!-- the script-end is redundant here since it would close the element -->
   14207 
   14208 data3         = &lt;any string that doesn't contain a substring that matches not-data3&gt;
   14209 not-data3     = script-end / "--&gt;"
   14210 
   14211 script-start  = lt       s c r i p t tag-end
   14212 script-end    = lt slash s c r i p t tag-end
   14213 
   14214 lt            =  %x003C ; U+003C LESS-THAN SIGN character (&lt;)
   14215 slash         =  %x002F ; U+002F SOLIDUS character (/)
   14216 
   14217 s             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
   14218 s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
   14219 c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
   14220 c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
   14221 r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
   14222 r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
   14223 i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
   14224 i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
   14225 p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
   14226 p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
   14227 t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
   14228 t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T
   14229 
   14230 tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION
   14231 tag-end       =/ %x000A ; U+000A LINE FEED (LF)
   14232 tag-end       =/ %x000C ; U+000C FORM FEED (FF)
   14233 tag-end       =/ %x0020 ; U+0020 SPACE
   14234 tag-end       =/ %x002F ; U+002F SOLIDUS (/)
   14235 tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)</pre>
   14236 
   14237   <p>When a <code><a href=#script>script</a></code> element contains <a href=#inline-documentation-for-external-scripts>script
   14238   documentation</a>, there are further restrictions on the contents
   14239   of the element, as described in the section below.</p>
   14240 
   14241 
   14242   <h5 id=inline-documentation-for-external-scripts><span class=secno>4.3.1.3 </span><dfn title="script documentation">Inline documentation for external scripts</dfn></h5>
   14243 
   14244   <p>If a <code><a href=#script>script</a></code> element's <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute is specified, then the
   14245   contents of the <code><a href=#script>script</a></code> element, if any, must be such
   14246   that the value of the <code title=dom-script-text><a href=#dom-script-text>text</a></code> IDL
   14247   attribute, which is derived from the element's contents, matches the
   14248   <code title="">documentation</code> production in the following
   14249   ABNF, the character set for which is Unicode. <a href=#refsABNF>[ABNF]</a></p>
   14250 
   14251   <pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
   14252 comment       = slash star *( not-star / star not-slash ) 1*star slash
   14253 line-comment  = slash slash *not-newline
   14254 
   14255 ; characters
   14256 tab           = %x0009 ; U+0009 TAB
   14257 newline       = %x000A ; U+000A LINE FEED (LF)
   14258 space         = %x0020 ; U+0020 SPACE
   14259 star          = %x002A ; U+002A ASTERISK (*)
   14260 slash         = %x002F ; U+002F SOLIDUS (/)
   14261 not-newline   = %x0000-0009 / %x000B-10FFFF
   14262                 ; a Unicode character other than U+000A LINE FEED (LF)
   14263 not-star      = %x0000-0029 / %x002B-10FFFF
   14264                 ; a Unicode character other than U+002A ASTERISK (*)
   14265 not-slash     = %x0000-002E / %x0030-10FFFF
   14266                 ; a Unicode character other than U+002F SOLIDUS (/)</pre>
   14267 
   14268   <p class=note>This corresponds to putting the contents of the
   14269   element in JavaScript comments.</p>
   14270 
   14271   <p class=note>This requirement is in addition to the earlier
   14272   restrictions on the syntax of contents of <code><a href=#script>script</a></code>
   14273   elements.</p>
   14274 
   14275   <div class=example>
   14276 
   14277    <p>This allows authors to include documentation, such as license
   14278    information or API information, inside their documents while still
   14279    referring to external script files. The syntax is constrained so
   14280    that authors don't accidentally include what looks like valid
   14281    script while also providing a <code title=attr-script-src><a href=#attr-script-src>src</a></code> attribute.</p>
   14282 
   14283    <pre>&lt;script src="cool-effects.js"&gt;
   14284  // create new instances using:
   14285  //    var e = new Effect();
   14286  // start the effect using .play, stop using .stop:
   14287  //    e.play();
   14288  //    e.stop();
   14289 &lt;/script&gt;</pre>
   14290 
   14291   </div>
   14292 
   14293 
   14294 
   14295   <h4 id=the-noscript-element><span class=secno>4.3.2 </span>The <dfn><code>noscript</code></dfn> element</h4>
   14296 
   14297   <dl class=element><dt>Categories</dt>
   14298    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   14299    <dd><a href=#flow-content>Flow content</a>.</dd>
   14300    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   14301    <dt>Contexts in which this element may be used:</dt>
   14302    <dd>In a <code><a href=#the-head-element-0>head</a></code> element of an <a href=#html-documents title="HTML documents">HTML document</a>, if there are no ancestor <code><a href=#the-noscript-element>noscript</a></code> elements.</dd>
   14303    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected in <a href=#html-documents>HTML documents</a>, if there are no ancestor <code><a href=#the-noscript-element>noscript</a></code> elements.</dd>
   14304    <dt>Content model:</dt>
   14305    <dd>When <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>, in a <code><a href=#the-head-element-0>head</a></code> element: in any order, zero or more <code><a href=#the-link-element>link</a></code> elements, zero or more <code><a href=#the-style-element>style</a></code> elements, and zero or more <code><a href=#meta>meta</a></code> elements.</dd>
   14306    <dd>When <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>, not in a <code><a href=#the-head-element-0>head</a></code> element: <a href=#transparent>transparent</a>, but there must be no <code><a href=#the-noscript-element>noscript</a></code> element descendants.</dd>
   14307    <dd>Otherwise: text that conforms to the requirements given in the prose.</dd>
   14308    <dt>Content attributes:</dt>
   14309    <dd><a href=#global-attributes>Global attributes</a></dd>
   14310    <dt>DOM interface:</dt>
   14311    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   14312   </dl><p>The <code><a href=#the-noscript-element>noscript</a></code> element <a href=#represents>represents</a> nothing
   14313   if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>, and
   14314   <a href=#represents>represents</a> its children if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a>. It is used
   14315   to present different markup to user agents that support scripting
   14316   and those that don't support scripting, by affecting how the
   14317   document is parsed.</p>
   14318 
   14319   <p>When used in <a href=#html-documents>HTML documents</a>, the allowed content
   14320   model is as follows:</p>
   14321 
   14322   <dl><dt>In a <code><a href=#the-head-element-0>head</a></code> element, if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   14323    <code><a href=#the-noscript-element>noscript</a></code> element</dt>
   14324 
   14325    <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only
   14326    <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>, and <code><a href=#meta>meta</a></code>
   14327    elements.</dd>
   14328 
   14329    <dt>In a <code><a href=#the-head-element-0>head</a></code> element, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   14330    <code><a href=#the-noscript-element>noscript</a></code> element</dt>
   14331 
   14332    <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only text,
   14333    except that invoking the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing
   14334    algorithm</a> <!-- (which disables <script> execution) --> with
   14335    the <code><a href=#the-noscript-element>noscript</a></code> element as the <var title="">context</var> element and the text contents as the <var title="">input</var> must result in a list of nodes that consists
   14336    only of <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>, and
   14337    <code><a href=#meta>meta</a></code> elements that would be conforming if they were
   14338    children of the <code><a href=#the-noscript-element>noscript</a></code> element, and no <a href=#parse-error title="parse error">parse errors</a>.</dd>
   14339 
   14340    <dt>Outside of <code><a href=#the-head-element-0>head</a></code> elements, if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   14341    <code><a href=#the-noscript-element>noscript</a></code> element</dt>
   14342 
   14343    <dd><p>The <code><a href=#the-noscript-element>noscript</a></code> element's content model is
   14344    <a href=#transparent>transparent</a>, with the additional restriction that a
   14345    <code><a href=#the-noscript-element>noscript</a></code> element must not have a <code><a href=#the-noscript-element>noscript</a></code>
   14346    element as an ancestor (that is, <code><a href=#the-noscript-element>noscript</a></code> can't be
   14347    nested).</dd>
   14348 
   14349    <dt>Outside of <code><a href=#the-head-element-0>head</a></code> elements, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   14350    <code><a href=#the-noscript-element>noscript</a></code> element</dt>
   14351 
   14352    <dd>
   14353 
   14354     <p>The <code><a href=#the-noscript-element>noscript</a></code> element must contain only text,
   14355     except that the text must be such that running the following
   14356     algorithm results in a conforming document with no
   14357     <code><a href=#the-noscript-element>noscript</a></code> elements and no <code><a href=#script>script</a></code>
   14358     elements, and such that no step in the algorithm causes an
   14359     <a href=#html-parser>HTML parser</a> to flag a <a href=#parse-error>parse error</a>:</p>
   14360 
   14361     <ol><li>Remove every <code><a href=#script>script</a></code> element from the
   14362      document.</li>
   14363 
   14364      <li>Make a list of every <code><a href=#the-noscript-element>noscript</a></code> element in the
   14365      document. For every <code><a href=#the-noscript-element>noscript</a></code> element in that list,
   14366      perform the following steps:
   14367 
   14368       <ol><li>Let the <var title="">parent element</var> be the parent
   14369        element of the <code><a href=#the-noscript-element>noscript</a></code> element.</li>
   14370 
   14371        <li>Take all the children of the <var title="">parent element</var>
   14372        that come before the <code><a href=#the-noscript-element>noscript</a></code> element, and call these
   14373        elements <var title="">the before children</var>.</li>
   14374 
   14375        <li>Take all the children of the <var title="">parent element</var>
   14376        that come <em>after</em> the <code><a href=#the-noscript-element>noscript</a></code> element, and
   14377        call these elements <var title="">the after children</var>.</li>
   14378 
   14379        <li>Let <var title="">s</var> be the concatenation of all the
   14380        <a href=#text-node>text node</a> children of the <code><a href=#the-noscript-element>noscript</a></code>
   14381        element.</li>
   14382 
   14383        <li>Set the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code>
   14384        attribute of the <var title="">parent element</var> to the value
   14385        of <var title="">s</var>. (This, as a side-effect, causes the
   14386        <code><a href=#the-noscript-element>noscript</a></code> element to be removed from the
   14387        document.)</li>
   14388 
   14389        <li>Insert <var title="">the before children</var> at the start of
   14390        the <var title="">parent element</var>, preserving their original
   14391        relative order.</li>
   14392 
   14393        <li>Insert <var title="">the after children</var> at the end of the
   14394        <var title="">parent element</var>, preserving their original
   14395        relative order.</li>
   14396 
   14397       </ol></li>
   14398 
   14399     </ol></dd>
   14400 
   14401   </dl><p class=note>All these contortions are required because, for
   14402   historical reasons, the <code><a href=#the-noscript-element>noscript</a></code> element is handled
   14403   differently by the <a href=#html-parser>HTML parser</a> based on whether <a href=#scripting-flag title="scripting flag">scripting was enabled or not</a> when the
   14404   parser was invoked.</p>
   14405 
   14406   <p>The <code><a href=#the-noscript-element>noscript</a></code> element must not be used in <a href=#xml-documents>XML
   14407   documents</a>.</p>
   14408 
   14409   <p class=note><strong>The <code><a href=#the-noscript-element>noscript</a></code> element is only
   14410   effective in <a href=#syntax>the HTML syntax</a>, it has no effect in
   14411   <a href=#the-xhtml-syntax>the XHTML syntax</a>.</strong></p>
   14412 
   14413   <div class=impl>
   14414 
   14415   <p>The <code><a href=#the-noscript-element>noscript</a></code> element has no other requirements. In
   14416   particular, children of the <code><a href=#the-noscript-element>noscript</a></code> element are not
   14417   exempt from <a href=#form-submission>form submission</a>, scripting, and so forth,
   14418   even when <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>
   14419   for the element.</p>
   14420 
   14421   </div>
   14422 
   14423   <div class=example>
   14424 
   14425    <p>In the following example, a <code><a href=#the-noscript-element>noscript</a></code> element is
   14426    used to provide fallback for a script.</p>
   14427 
   14428    <pre>&lt;form action="calcSquare.php"&gt;
   14429  &lt;p&gt;
   14430   &lt;label for=x&gt;Number&lt;/label&gt;:
   14431   &lt;input id="x" name="x" type="number"&gt;
   14432  &lt;/p&gt;
   14433  &lt;script&gt;
   14434   var x = document.getElementById('x');
   14435   var output = document.createElement('p');
   14436   output.textContent = 'Type a number; it will be squared right then!';
   14437   x.form.appendChild(output);
   14438   x.form.onsubmit = function () { return false; }
   14439   x.oninput = function () {
   14440     var v = x.valueAsNumber;
   14441     output.textContent = v + ' squared is ' + v * v;
   14442   };
   14443  &lt;/script&gt;
   14444  &lt;noscript&gt;
   14445   &lt;input type=submit value="Calculate Square"&gt;
   14446  &lt;/noscript&gt;
   14447 &lt;/form&gt;</pre>
   14448 
   14449    <p>When script is disabled, a button appears to do the calculation
   14450    on the server side. When script is enabled, the value is computed
   14451    on-the-fly instead.</p>
   14452 
   14453    <p>The <code><a href=#the-noscript-element>noscript</a></code> element is a blunt
   14454    instrument. Sometimes, scripts might be enabled, but for some
   14455    reason the page's script might fail. For this reason, it's
   14456    generally better to avoid using <code><a href=#the-noscript-element>noscript</a></code>, and to
   14457    instead design the script to change the page from being a
   14458    scriptless page to a scripted page on the fly, as in the next
   14459    example:</p>
   14460 
   14461    <pre>&lt;form action="calcSquare.php"&gt;
   14462  &lt;p&gt;
   14463   &lt;label for=x&gt;Number&lt;/label&gt;:
   14464   &lt;input id="x" name="x" type="number"&gt;
   14465  &lt;/p&gt;
   14466  <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
   14467  &lt;script&gt;
   14468   var x = document.getElementById('x');
   14469   var output = document.createElement('p');
   14470   output.textContent = 'Type a number; it will be squared right then!';
   14471   x.form.appendChild(output);
   14472   x.form.onsubmit = function () { return false; }
   14473   x.oninput = function () {
   14474     var v = x.valueAsNumber;
   14475     output.textContent = v + ' squared is ' + v * v;
   14476   };
   14477 <strong>  var submit = document.getElementById('submit');
   14478   submit.parentNode.removeChild(submit);</strong>
   14479  &lt;/script&gt;
   14480 &lt;/form&gt;</pre>
   14481 
   14482    <p>The above technique is also useful in XHTML, since
   14483    <code><a href=#the-noscript-element>noscript</a></code> is not supported in <a href=#the-xhtml-syntax>the XHTML
   14484    syntax</a>.</p>
   14485 
   14486   </div>
   14487 
   14488 
   14489 
   14490   <h3 id=sections><span class=secno>4.4 </span>Sections</h3>
   14491 
   14492   <h4 id=the-body-element-0><span class=secno>4.4.1 </span>The <dfn><code>body</code></dfn> element</h4>
   14493 
   14494   <dl class=element><dt>Categories</dt>
   14495    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   14496    <dt>Contexts in which this element may be used:</dt>
   14497    <dd>As the second element in an <code><a href=#the-html-element-0>html</a></code> element.</dd>
   14498    <dt>Content model:</dt>
   14499    <dd><a href=#flow-content>Flow content</a>.</dd>
   14500    <dt>Content attributes:</dt>
   14501    <dd><a href=#global-attributes>Global attributes</a></dd>
   14502    <dd><code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code></dd>
   14503    <dd><code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code></dd>
   14504    <dd><code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code></dd>
   14505    <dd><code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code></dd>
   14506    <dd><code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code></dd>
   14507    <dd><code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code></dd>
   14508    <dd><code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code></dd>
   14509    <dd><code title=handler-window-onload><a href=#handler-window-onload>onload</a></code></dd>
   14510    <dd><code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code></dd>
   14511    <dd><code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code></dd>
   14512    <dd><code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code></dd>
   14513    <dd><code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code></dd>
   14514    <dd><code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code></dd>
   14515    <dd><code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code></dd>
   14516    <dd><code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code></dd>
   14517    <dd><code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code></dd>
   14518    <dd><code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code></dd>
   14519    <dd><code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code></dd>
   14520    <dd><code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></dd>
   14521    <dt>DOM interface:</dt>
   14522    <dd>
   14523 <pre class=idl>interface <dfn id=htmlbodyelement>HTMLBodyElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   14524            attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
   14525            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
   14526            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
   14527            attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
   14528            attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
   14529            attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
   14530            attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
   14531            attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
   14532            attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
   14533            attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
   14534            attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
   14535            attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
   14536            attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
   14537            attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
   14538            attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
   14539            attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
   14540            attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
   14541            attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
   14542            attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
   14543 };</pre>
   14544 </dd>
   14545   </dl><p>The <code><a href=#the-body-element-0>body</a></code> element <a href=#represents>represents</a> the main
   14546   content of the document.</p>
   14547 
   14548   <p>In conforming documents, there is only one <code><a href=#the-body-element-0>body</a></code>
   14549   element. The <code title=dom-document-body><a href=#dom-document-body>document.body</a></code>
   14550   IDL attribute provides scripts with easy access to a document's
   14551   <code><a href=#the-body-element-0>body</a></code> element.</p>
   14552 
   14553   <div class=impl>
   14554 
   14555   <p class=note>Some DOM operations (for example, parts of the
   14556   <a href=#dnd>drag and drop</a> model) are defined in terms of "<a href=#the-body-element>the
   14557   body element</a>". This refers to a particular element in the
   14558   DOM, as per the definition of the term, and not any arbitrary
   14559   <code><a href=#the-body-element-0>body</a></code> element.</p>
   14560 
   14561   </div>
   14562 
   14563   <p>The <code><a href=#the-body-element-0>body</a></code> element exposes as <a href=#event-handler-content-attributes>event handler
   14564   content attributes</a> a number of the <a href=#event-handlers>event
   14565   handlers</a> of the <code><a href=#window>Window</a></code> object. It also mirrors
   14566   their <a href=#event-handler-idl-attributes>event handler IDL attributes</a>.</p>
   14567 
   14568   <p>The <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>, <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>, <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>, and <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code> <a href=#event-handlers>event
   14569   handlers</a> of the <code><a href=#window>Window</a></code> object, exposed on the
   14570   <code><a href=#the-body-element-0>body</a></code> element, shadow the generic <a href=#event-handlers>event
   14571   handlers</a> with the same names normally supported by <a href=#html-elements>HTML
   14572   elements</a>.</p>
   14573 
   14574   <p class=example>Thus, for example, a bubbling <code title=event-error>error</code> event fired on a child of <a href=#the-body-element>the
   14575   body element</a> of a <code><a href=#document>Document</a></code> would first trigger
   14576   the <code title=handler-onerror><a href=#handler-onerror>onerror</a></code> <a href=#event-handler-content-attributes>event handler
   14577   content attributes</a> of that element, then that of the root
   14578   <code><a href=#the-html-element-0>html</a></code> element, and only <em>then</em> would it trigger
   14579   the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> <a href=#event-handler-content-attributes title="event handler content attributes">event handler content
   14580   attribute</a> on the <code><a href=#the-body-element-0>body</a></code> element. This is because
   14581   the event would bubble from the target, to the <code><a href=#the-body-element-0>body</a></code>, to
   14582   the <code><a href=#the-html-element-0>html</a></code>, to the <code><a href=#document>Document</a></code>, to the
   14583   <code><a href=#window>Window</a></code>, and the <a href=#event-handlers title="event handlers">event
   14584   handler</a> on the <code><a href=#the-body-element-0>body</a></code> is watching the
   14585   <code><a href=#window>Window</a></code> not the <code><a href=#the-body-element-0>body</a></code>. A regular event
   14586   listener attached to the <code><a href=#the-body-element-0>body</a></code> using <code title="">addEventListener()</code>, however, would fire when the
   14587   event bubbled through the <code><a href=#the-body-element-0>body</a></code> and not when it reaches
   14588   the <code><a href=#window>Window</a></code> object.</p>
   14589 
   14590   <div class=example>
   14591 
   14592    <p>This page updates an indicator to show whether or not the user
   14593    is online:</p>
   14594 
   14595    <pre>&lt;!DOCTYPE HTML&gt;
   14596 &lt;html&gt;
   14597  &lt;head&gt;
   14598   &lt;title&gt;Online or offline?&lt;/title&gt;
   14599   &lt;script&gt;
   14600    function update(online) {
   14601      document.getElementById('status').textContent =
   14602        online ? 'Online' : 'Offline';
   14603    }
   14604   &lt;/script&gt;
   14605  &lt;/head&gt;
   14606  &lt;body ononline="update(true)"
   14607        onoffline="update(false)"
   14608        onload="update(navigator.onLine)"&gt;
   14609   &lt;p&gt;You are: &lt;span id="status"&gt;(Unknown)&lt;/span&gt;&lt;/p&gt;
   14610  &lt;/body&gt;
   14611 &lt;/html&gt;</pre>
   14612 
   14613   </div>
   14614 
   14615 
   14616 
   14617   <h4 id=the-section-element><span class=secno>4.4.2 </span>The <dfn><code>section</code></dfn> element</h4>
   14618 
   14619   <dl class=element><dt>Categories</dt>
   14620    <dd><a href=#flow-content>Flow content</a>.</dd>
   14621    <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   14622    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   14623    <dt>Contexts in which this element may be used:</dt>
   14624    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   14625    <dt>Content model:</dt>
   14626    <dd><a href=#flow-content>Flow content</a>.</dd>
   14627    <dt>Content attributes:</dt>
   14628    <dd><a href=#global-attributes>Global attributes</a></dd>
   14629    <dt>DOM interface:</dt>
   14630    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   14631   </dl><p>The <code><a href=#the-section-element>section</a></code> element <a href=#represents>represents</a> a
   14632   generic section of a document or application. A section, in this
   14633   context, is a thematic grouping of content, typically with a
   14634   heading.</p>
   14635 
   14636   <p class=example>Examples of sections would be chapters, the
   14637   various tabbed pages in a tabbed dialog box, or the numbered
   14638   sections of a thesis. A Web site's home page could be split into
   14639   sections for an introduction, news items, contact information.</p>
   14640 
   14641   <p class=note>Authors are encouraged to use the
   14642   <code><a href=#the-article-element>article</a></code> element instead of the <code><a href=#the-section-element>section</a></code>
   14643   element when it would make sense to syndicate the contents of the
   14644   element.</p>
   14645 
   14646   <p class=note id=use-div-for-wrappers>The <code><a href=#the-section-element>section</a></code>
   14647   element is not a generic container element. When an element is
   14648   needed for styling purposes or as a convenience for scripting,
   14649   authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element
   14650   instead. A general rule is that the <code><a href=#the-section-element>section</a></code> element is
   14651   appropriate only if the element's contents would be listed
   14652   explicitly in the document's <a href=#outline>outline</a>.</p>
   14653 
   14654   <div class=example>
   14655 
   14656    <p>In the following example, we see an article (part of a larger
   14657    Web page) about apples, containing two short sections.</p>
   14658 
   14659    <pre>&lt;article&gt;
   14660  &lt;hgroup&gt;
   14661   &lt;h1&gt;Apples&lt;/h1&gt;
   14662   &lt;h2&gt;Tasty, delicious fruit!&lt;/h2&gt;
   14663  &lt;/hgroup&gt;
   14664  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
   14665  &lt;section&gt;
   14666   &lt;h1&gt;Red Delicious&lt;/h1&gt;
   14667   &lt;p&gt;These bright red apples are the most common found in many
   14668   supermarkets.&lt;/p&gt;
   14669  &lt;/section&gt;
   14670  &lt;section&gt;
   14671   &lt;h1&gt;Granny Smith&lt;/h1&gt;
   14672   &lt;p&gt;These juicy, green apples make a great filling for
   14673   apple pies.&lt;/p&gt;
   14674  &lt;/section&gt;
   14675 &lt;/article&gt;</pre>
   14676 
   14677    <p>Notice how the use of <code><a href=#the-section-element>section</a></code> means that the author
   14678    can use <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements throughout, without having to
   14679    worry about whether a particular section is at the top level, the
   14680    second level, the third level, and so on.</p>
   14681 
   14682   </div>
   14683 
   14684   <div class=example>
   14685 
   14686    <p>Here is a graduation programme with two sections, one for the
   14687    list of people graduating, and one for the description of the
   14688    ceremony.</p>
   14689 
   14690    <pre>&lt;!DOCTYPE Html&gt;
   14691 &lt;Html
   14692  &gt;&lt;Head
   14693    &gt;&lt;Title
   14694      &gt;Graduation Ceremony Summer 2022&lt;/Title
   14695    &gt;&lt;/Head
   14696  &gt;&lt;Body
   14697    &gt;&lt;H1
   14698      &gt;Graduation&lt;/H1
   14699    &gt;&lt;Section
   14700      &gt;&lt;H1
   14701        &gt;Ceremony&lt;/H1
   14702      &gt;&lt;P
   14703        &gt;Opening Procession&lt;/P
   14704      &gt;&lt;P
   14705        &gt;Speech by Validactorian&lt;/P
   14706      &gt;&lt;P
   14707        &gt;Speech by Class President&lt;/P
   14708      &gt;&lt;P
   14709        &gt;Presentation of Diplomas&lt;/P
   14710      &gt;&lt;P
   14711        &gt;Closing Speech by Headmaster&lt;/P
   14712    &gt;&lt;/Section
   14713    &gt;&lt;Section
   14714      &gt;&lt;H1
   14715        &gt;Graduates&lt;/H1
   14716      &gt;&lt;Ul
   14717        &gt;&lt;Li
   14718          &gt;Molly Carpenter&lt;/Li
   14719        &gt;&lt;Li
   14720          &gt;Anastasia Luccio&lt;/Li
   14721        &gt;&lt;Li
   14722          &gt;Ebenezar McCoy&lt;/Li
   14723        &gt;&lt;Li
   14724          &gt;Karrin Murphy&lt;/Li
   14725        &gt;&lt;Li
   14726          &gt;Thomas Raith&lt;/Li
   14727        &gt;&lt;Li
   14728          &gt;Susan Rodriguez&lt;/Li
   14729      &gt;&lt;/Ul
   14730    &gt;&lt;/Section
   14731  &gt;&lt;/Body
   14732 &gt;&lt;/Html&gt;</pre>
   14733 
   14734   </div>
   14735 
   14736 
   14737 
   14738   <h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>
   14739 
   14740   <dl class=element><dt>Categories</dt>
   14741    <dd><a href=#flow-content>Flow content</a>.</dd>
   14742    <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   14743    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   14744    <dt>Contexts in which this element may be used:</dt>
   14745    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   14746    <dt>Content model:</dt>
   14747    <dd><a href=#flow-content>Flow content</a>.</dd>
   14748    <dt>Content attributes:</dt>
   14749    <dd><a href=#global-attributes>Global attributes</a></dd>
   14750    <dt>DOM interface:</dt>
   14751    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   14752   </dl><p>The <code><a href=#the-nav-element>nav</a></code> element <a href=#represents>represents</a> a section of
   14753   a page that links to other pages or to parts within the page: a
   14754   section with navigation links.</p>
   14755 
   14756   <p>Not all groups of links on a page need to be in a
   14757   <code><a href=#the-nav-element>nav</a></code> element &mdash; only sections that consist of major
   14758   navigation blocks are appropriate for the <code><a href=#the-nav-element>nav</a></code>
   14759   element. In particular, it is common for footers to have a short
   14760   list of links to various pages of a site, such as the terms of
   14761   service, the home page, and a copyright page. The
   14762   <code><a href=#the-footer-element>footer</a></code> element alone is sufficient for such cases,
   14763   without a <code><a href=#the-nav-element>nav</a></code> element.</p>
   14764 
   14765   <p class=note>User agents (such as screen readers) that are
   14766   targeted at users who can benefit from navigation information being
   14767   omitted in the initial rendering, or who can benefit from navigation
   14768   information being immediately available, can use this element as a
   14769   way to determine what content on the page to initially skip and/or
   14770   provide on request.</p>
   14771 
   14772   <div class=example>
   14773 
   14774    <p>In the following example, the page has several places where
   14775    links are present, but only one of those places is considered a
   14776    navigation section.</p>
   14777 
   14778    <pre>&lt;body&gt;
   14779  &lt;header&gt;
   14780   &lt;h1&gt;Wake up sheeple!&lt;/h1&gt;
   14781   &lt;p&gt;&lt;a href="news.html"&gt;News&lt;/a&gt; -
   14782      &lt;a href="blog.html"&gt;Blog&lt;/a&gt; -
   14783      &lt;a href="forums.html"&gt;Forums&lt;/a&gt;&lt;/p&gt;
   14784   &lt;p&gt;Last Modified: &lt;time&gt;2009-04-01&lt;/time&gt;&lt;/p&gt;
   14785   &lt;nav&gt;
   14786    &lt;h1&gt;Navigation&lt;/h1&gt;
   14787    &lt;ul&gt;
   14788     &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
   14789     &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
   14790     &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
   14791    &lt;/ul&gt;
   14792   &lt;/nav&gt;
   14793  &lt;/header&gt;
   14794  &lt;div&gt;
   14795   &lt;article&gt;
   14796    &lt;header&gt;
   14797     &lt;h1&gt;My Day at the Beach&lt;/h1&gt;
   14798    &lt;/header&gt;
   14799    &lt;div&gt;
   14800     &lt;p&gt;Today I went to the beach and had a lot of fun.&lt;/p&gt;
   14801     <em>...more content...</em>
   14802    &lt;/div&gt;
   14803    &lt;footer&gt;
   14804     &lt;p&gt;Posted &lt;time pubdate datetime="2009-10-10T14:36-08:00"&gt;Thursday&lt;/time&gt;.&lt;/p&gt;
   14805    &lt;/footer&gt;
   14806   &lt;/article&gt;
   14807   <em>...more blog posts...</em>
   14808  &lt;/div&gt;
   14809  &lt;footer&gt;
   14810   &lt;p&gt;Copyright &copy; 2006 The Example Company&lt;/p&gt;
   14811   &lt;p&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; -
   14812      &lt;a href="policy.html"&gt;Privacy Policy&lt;/a&gt; -
   14813      &lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
   14814  &lt;/footer&gt;
   14815 &lt;/body&gt;</pre>
   14816 
   14817    <p>Notice the <code><a href=#the-div-element>div</a></code> elements being used to wrap all the
   14818    contents of the page other than the header and footer, and all the
   14819    contents of the blog entry other than its header and footer.</p>
   14820 
   14821   </div>
   14822 
   14823   <div class=example>
   14824 
   14825    <p>In the following example, there are two <code><a href=#the-nav-element>nav</a></code>
   14826    elements, one for primary navigation around the site, and one for
   14827    secondary navigation around the page itself.</p>
   14828 
   14829    <pre>&lt;body&gt;
   14830  &lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
   14831  &lt;nav&gt;
   14832   &lt;ul&gt;
   14833    &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
   14834    &lt;li&gt;&lt;a href="/events"&gt;Current Events&lt;/a&gt;&lt;/li&gt;
   14835    <em>...more...</em>
   14836   &lt;/ul&gt;
   14837  &lt;/nav&gt;
   14838  &lt;article&gt;
   14839   &lt;header&gt;
   14840    &lt;h1&gt;Demos in Exampland&lt;/h1&gt;
   14841    &lt;p&gt;Written by A. N. Other.&lt;/p&gt;
   14842   &lt;/header&gt;
   14843   &lt;nav&gt;
   14844    &lt;ul&gt;
   14845     &lt;li&gt;&lt;a href="#public"&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
   14846     &lt;li&gt;&lt;a href="#destroy"&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
   14847     <em>...more...</em>
   14848    &lt;/ul&gt;
   14849   &lt;/nav&gt;
   14850   &lt;div&gt;
   14851    &lt;section id="public"&gt;
   14852     &lt;h1&gt;Public demonstrations&lt;/h1&gt;
   14853     &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   14854    &lt;/section&gt;
   14855    &lt;section id="destroy"&gt;
   14856     &lt;h1&gt;Demolitions&lt;/h1&gt;
   14857     &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   14858    &lt;/section&gt;
   14859    <em>...more...</em>
   14860   &lt;/div&gt;
   14861   &lt;footer&gt;
   14862    &lt;p&gt;&lt;a href="?edit"&gt;Edit&lt;/a&gt; | &lt;a href="?delete"&gt;Delete&lt;/a&gt; | &lt;a href="?Rename"&gt;Rename&lt;/a&gt;&lt;/p&gt;
   14863   &lt;/footer&gt;
   14864  &lt;/article&gt;
   14865  &lt;footer&gt;
   14866   &lt;p&gt;&lt;small&gt;&copy; copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
   14867  &lt;/footer&gt;
   14868 &lt;/body&gt;</pre>
   14869 
   14870   </div>
   14871 
   14872 
   14873   <h4 id=the-article-element><span class=secno>4.4.4 </span>The <dfn><code>article</code></dfn> element</h4>
   14874 
   14875   <dl class=element><dt>Categories</dt>
   14876    <dd><a href=#flow-content>Flow content</a>.</dd>
   14877    <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   14878    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   14879    <dt>Contexts in which this element may be used:</dt>
   14880    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   14881    <dt>Content model:</dt>
   14882    <dd><a href=#flow-content>Flow content</a>.</dd>
   14883    <dt>Content attributes:</dt>
   14884    <dd><a href=#global-attributes>Global attributes</a></dd>
   14885    <dt>DOM interface:</dt>
   14886    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   14887   </dl><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
   14888   self-contained composition in a document, page, application, or site
   14889   and that is intended to be independently distributable or reusable,
   14890   e.g. in syndication. This could be a forum post, a magazine or
   14891   newspaper article, a blog entry, a user-submitted comment, an
   14892   interactive widget or gadget, or any other independent item of
   14893   content.</p>
   14894 
   14895   <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
   14896   <code><a href=#the-article-element>article</a></code> elements represent articles that are in
   14897   principle related to the contents of the outer article. For
   14898   instance, a blog entry on a site that accepts user-submitted
   14899   comments could represent the comments as <code><a href=#the-article-element>article</a></code>
   14900   elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
   14901   entry.</p>
   14902 
   14903   <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
   14904   element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
   14905   nested <code><a href=#the-article-element>article</a></code> elements.</p>
   14906 
   14907   <p class=note>When used specifically with content to be
   14908   redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
   14909   similar in purpose to the <code title="">entry</code> element in
   14910   Atom. <a href=#refsATOM>[ATOM]</a>
   14911 
   14912   <p class=note>The <code><a href=#the-time-element>time</a></code> element's <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute can be used to
   14913   provide the publication date for an <code><a href=#the-article-element>article</a></code>
   14914   element.</p>
   14915 
   14916   <div class=example id=article-example>
   14917 
   14918    <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
   14919    element:</p>
   14920 
   14921    <pre>&lt;article&gt;
   14922  &lt;header&gt;
   14923   &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
   14924   &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   14925  &lt;/header&gt;
   14926  &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
   14927  sending whatever you're saying to the world. Seriously.&lt;/p&gt;
   14928  &lt;p&gt;<em>...</em>&lt;/p&gt;
   14929  &lt;footer&gt;
   14930   &lt;a href="?comments=1"&gt;Show comments...&lt;/a&gt;
   14931  &lt;/footer&gt;
   14932 &lt;/article&gt;</pre>
   14933 
   14934    <p>Here is that same blog post, but showing some of the comments:</p>
   14935 
   14936    <pre>&lt;article&gt;
   14937  &lt;header&gt;
   14938   &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
   14939   &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   14940  &lt;/header&gt;
   14941  &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
   14942  sending whatever you're saying to the world. Seriously.&lt;/p&gt;
   14943  &lt;p&gt;<em>...</em>&lt;/p&gt;
   14944  &lt;section&gt;
   14945   &lt;h1&gt;Comments&lt;/h1&gt;
   14946   &lt;article&gt;
   14947    &lt;footer&gt;
   14948     &lt;p&gt;Posted by: George Washington&lt;/p&gt;
   14949     &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:10-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   14950    &lt;/footer&gt;
   14951    &lt;p&gt;Yeah! Especially when talking about your lobbyist friends!&lt;/p&gt;
   14952   &lt;/article&gt;
   14953   &lt;article&gt;
   14954    &lt;footer&gt;
   14955     &lt;p&gt;Posted by: George Hammond&lt;/p&gt;
   14956     &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:15-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   14957    &lt;/footer&gt;
   14958    &lt;p&gt;Hey, you have the same first name as me.&lt;/p&gt;
   14959   &lt;/article&gt;
   14960  &lt;/section&gt;
   14961 &lt;/article&gt;</pre>
   14962 
   14963    <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
   14964    each comment (such as who wrote it and when): the
   14965    <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
   14966    section when appropriate, such as in this case. (Using
   14967    <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
   14968    mostly a matter of authoring preference.)</p>
   14969 
   14970   </div>
   14971 
   14972 
   14973 
   14974 
   14975   <h4 id=the-aside-element><span class=secno>4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4>
   14976 
   14977   <dl class=element><dt>Categories</dt>
   14978    <dd><a href=#flow-content>Flow content</a>.</dd>
   14979    <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
   14980    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   14981    <dt>Contexts in which this element may be used:</dt>
   14982    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   14983    <dt>Content model:</dt>
   14984    <dd><a href=#flow-content>Flow content</a>.</dd>
   14985    <dt>Content attributes:</dt>
   14986    <dd><a href=#global-attributes>Global attributes</a></dd>
   14987    <dt>DOM interface:</dt>
   14988    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   14989   </dl><p>The <code><a href=#the-aside-element>aside</a></code> element <a href=#represents>represents</a> a section
   14990   of a page that consists of content that is tangentially related to
   14991   the content around the <code><a href=#the-aside-element>aside</a></code> element, and which could
   14992   be considered separate from that content. Such sections are often
   14993   represented as sidebars in printed typography.</p>
   14994 
   14995   <p>The element can be used for typographical effects like pull
   14996   quotes or sidebars, for advertising, for groups of <code><a href=#the-nav-element>nav</a></code>
   14997   elements, and for other content that is considered separate from the
   14998   main content of the page.</p>
   14999 
   15000   <p class=note>It's not appropriate to use the <code><a href=#the-aside-element>aside</a></code>
   15001   element just for parentheticals, since those are part of the main
   15002   flow of the document.</p>
   15003 
   15004   <div class=example>
   15005 
   15006    <p>The following example shows how an aside is used to mark up
   15007    background material on Switzerland in a much longer news story on
   15008    Europe.</p>
   15009 
   15010    <pre>&lt;aside&gt;
   15011  &lt;h1&gt;Switzerland&lt;/h1&gt;
   15012  &lt;p&gt;Switzerland, a land-locked country in the middle of geographic
   15013  Europe, has not joined the geopolitical European Union, though it is
   15014  a signatory to a number of European treaties.&lt;/p&gt;
   15015 &lt;/aside&gt;</pre>
   15016 
   15017   </div>
   15018 
   15019   <div class=example>
   15020 
   15021    <p>The following example shows how an aside is used to mark up
   15022    a pull quote in a longer article.</p>
   15023 
   15024    <pre>...
   15025 
   15026 &lt;p&gt;He later joined a large company, continuing on the same work.
   15027 &lt;q&gt;I love my job. People ask me what I do for fun when I'm not at
   15028 work. But I'm paid to do my hobby, so I never know what to
   15029 answer. Some people wonder what they would do if they didn't have to
   15030 work... but I know what I would do, because I was unemployed for a
   15031 year, and I filled that time doing exactly what I do now.&lt;/q&gt;&lt;/p&gt;
   15032 
   15033 &lt;aside&gt;
   15034  &lt;q&gt; People ask me what I do for fun when I'm not at work. But I'm
   15035  paid to do my hobby, so I never know what to answer. &lt;/q&gt;
   15036 &lt;/aside&gt;
   15037 
   15038 &lt;p&gt;Of course his work &mdash; or should that be hobby? &mdash;
   15039 isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
   15040 
   15041 ...</pre>
   15042 
   15043   </div>
   15044 
   15045   <div class=example>
   15046 
   15047    <p>The following extract shows how <code><a href=#the-aside-element>aside</a></code> can be used
   15048    for blogrolls and other side content on a blog:</p>
   15049 
   15050    <pre>&lt;body&gt;
   15051  &lt;header&gt;
   15052   &lt;h1&gt;My wonderful blog&lt;/h1&gt;
   15053   &lt;p&gt;My tagline&lt;/p&gt;
   15054  &lt;/header&gt;
   15055  &lt;aside&gt;
   15056   &lt;!-- <em>this aside contains two sections that are tangentially related
   15057   to the page, namely, links to other blogs, and links to blog posts
   15058   from this blog</em> --&gt;
   15059   &lt;nav&gt;
   15060    &lt;h1&gt;My blogroll&lt;/h1&gt;
   15061    &lt;ul&gt;
   15062     &lt;li&gt;&lt;a href="http://blog.example.com/"&gt;Example Blog&lt;/a&gt;
   15063    &lt;/ul&gt;
   15064   &lt;/nav&gt;
   15065   &lt;nav&gt;
   15066    &lt;h1&gt;Archives&lt;/h1&gt;
   15067    &lt;ol reversed&gt;
   15068     &lt;li&gt;&lt;a href="/last-post"&gt;My last post&lt;/a&gt;
   15069     &lt;li&gt;&lt;a href="/first-post"&gt;My first post&lt;/a&gt;
   15070    &lt;/ol&gt;
   15071   &lt;/nav&gt;
   15072  &lt;/aside&gt;
   15073  &lt;aside&gt;
   15074   &lt;!-- <em>this aside is tangentially related to the page also, it
   15075   contains twitter messages from the blog author</em> --&gt;
   15076   &lt;h1&gt;Twitter Feed&lt;/h1&gt;
   15077   &lt;blockquote cite="http://twitter.example.net/t31351234"&gt;
   15078    I'm on vacation, writing my blog.
   15079   &lt;/blockquote&gt;
   15080   &lt;blockquote cite="http://twitter.example.net/t31219752"&gt;
   15081    I'm going to go on vacation soon.
   15082   &lt;/blockquote&gt;
   15083  &lt;/aside&gt;
   15084  &lt;article&gt;
   15085   &lt;!-- <em>this is a blog post</em> --&gt;
   15086   &lt;h1&gt;My last post&lt;/h1&gt;
   15087   &lt;p&gt;This is my last post.&lt;/p&gt;
   15088   &lt;footer&gt;
   15089    &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
   15090   &lt;/footer&gt;
   15091  &lt;/article&gt;
   15092  &lt;article&gt;
   15093   &lt;!-- <em>this is also a blog post</em> --&gt;
   15094   &lt;h1&gt;My first post&lt;/h1&gt;
   15095   &lt;p&gt;This is my first post.&lt;/p&gt;
   15096   &lt;aside&gt;
   15097    &lt;!-- <em>this aside is about the blog post, since it's inside the
   15098    &lt;article&gt; element; it would be wrong, for instance, to put the
   15099    blogroll here, since the blogroll isn't really related to this post
   15100    specifically, only to the page as a whole</em> --&gt;
   15101    &lt;h1&gt;Posting&lt;/h1&gt;
   15102    &lt;p&gt;While I'm thinking about it, I wanted to say something about
   15103    posting. Posting is fun!&lt;/p&gt;
   15104   &lt;/aside&gt;
   15105   &lt;footer&gt;
   15106    &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
   15107   &lt;/footer&gt;
   15108  &lt;/article&gt;
   15109  &lt;footer&gt;
   15110   &lt;nav&gt;
   15111    &lt;a href="/archives"&gt;Archives&lt;/a&gt; &mdash;
   15112    &lt;a href="/about"&gt;About me&lt;/a&gt; &mdash;
   15113    &lt;a href="/copyright"&gt;Copyright&lt;/a&gt;
   15114   &lt;/nav&gt;
   15115  &lt;/footer&gt;
   15116 &lt;/body&gt;</pre>
   15117 
   15118   </div>
   15119 
   15120 
   15121 
   15122   <h4 id=the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <dfn><code>h1</code></dfn>, <dfn><code>h2</code></dfn>,
   15123   <dfn><code>h3</code></dfn>, <dfn><code>h4</code></dfn>,
   15124   <dfn><code>h5</code></dfn>, and <dfn><code>h6</code></dfn>
   15125   elements</h4>
   15126 
   15127   <dl class=element><dt>Categories</dt>
   15128    <dd><a href=#flow-content>Flow content</a>.</dd>
   15129    <dd><a href=#heading-content>Heading content</a>.</dd>
   15130    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   15131    <dt>Contexts in which this element may be used:</dt>
   15132    <dd>As a child of an <code><a href=#the-hgroup-element>hgroup</a></code> element.</dd>
   15133    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   15134    <dt>Content model:</dt>
   15135    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   15136    <dt>Content attributes:</dt>
   15137    <dd><a href=#global-attributes>Global attributes</a></dd>
   15138    <dt>DOM interface:</dt>
   15139    <dd>
   15140     <pre class=idl>interface <dfn id=htmlheadingelement>HTMLHeadingElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   15141    </dd>
   15142   </dl><p>These elements <a href=#represents title=represents>represent</a> headings
   15143   for their sections.</p>
   15144 
   15145   <p>The semantics and meaning of these elements are defined in the
   15146   section on <a href=#headings-and-sections>headings and sections</a>.</p>
   15147 
   15148   <p>These elements have a <dfn id=rank>rank</dfn> given by the number in
   15149   their name. The <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element is said to have the highest
   15150   rank, the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element has the lowest rank, and two
   15151   elements with the same name have equal rank.</p>
   15152 
   15153   <div class=example>
   15154 
   15155    <p>These two snippets are equivalent:</p>
   15156 
   15157    <pre>&lt;body&gt;
   15158 &lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
   15159 &lt;h2&gt;Diving in&lt;/h2&gt;
   15160 &lt;h2&gt;Simple shapes&lt;/h2&gt;
   15161 &lt;h2&gt;Canvas coordinates&lt;/h2&gt;
   15162 &lt;h3&gt;Canvas coordinates diagram&lt;/h3&gt;
   15163 &lt;h2&gt;Paths&lt;/h2&gt;
   15164 &lt;/body&gt;</pre>
   15165 
   15166    <pre>&lt;body&gt;
   15167  &lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
   15168  &lt;section&gt;
   15169   &lt;h1&gt;Diving in&lt;/h1&gt;
   15170  &lt;/section&gt;
   15171  &lt;section&gt;
   15172   &lt;h1&gt;Simple shapes&lt;/h1&gt;
   15173  &lt;/section&gt;
   15174  &lt;section&gt;
   15175   &lt;h1&gt;Canvas coordinates&lt;/h1&gt;
   15176   &lt;section&gt;
   15177    &lt;h1&gt;Canvas coordinates diagram&lt;/h1&gt;
   15178   &lt;/section&gt;
   15179  &lt;/section&gt;
   15180  &lt;section&gt;
   15181   &lt;h1&gt;Paths&lt;/h1&gt;
   15182  &lt;/section&gt;
   15183 &lt;/body&gt;</pre>
   15184 
   15185   </div>
   15186 
   15187 
   15188 
   15189 
   15190   <h4 id=the-hgroup-element><span class=secno>4.4.7 </span>The <dfn><code>hgroup</code></dfn> element</h4>
   15191 
   15192   <dl class=element><dt>Categories</dt>
   15193    <dd><a href=#flow-content>Flow content</a>.</dd>
   15194    <dd><a href=#heading-content>Heading content</a>.</dd>
   15195    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   15196    <dt>Contexts in which this element may be used:</dt>
   15197    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   15198    <dt>Content model:</dt>
   15199    <dd>One or more <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and/or <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements.</dd>
   15200    <dt>Content attributes:</dt>
   15201    <dd><a href=#global-attributes>Global attributes</a></dd>
   15202    <dt>DOM interface:</dt>
   15203    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   15204   </dl><p>The <code><a href=#the-hgroup-element>hgroup</a></code> element <a href=#represents>represents</a> the
   15205   heading of a section. The element is used to group a set of
   15206   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the heading has
   15207   multiple levels, such as subheadings, alternative titles, or
   15208   taglines.</p>
   15209 
   15210   <p>For the purposes of document summaries, outlines, and the like,
   15211   the text of <code><a href=#the-hgroup-element>hgroup</a></code> elements is defined to be the text
   15212   of the highest <a href=#rank title=rank>ranked</a>
   15213   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element descendant of the
   15214   <code><a href=#the-hgroup-element>hgroup</a></code> element, if there are any such elements, and the
   15215   first such element if there are multiple elements with that
   15216   <a href=#rank>rank</a>. If there are no such elements, then the text of
   15217   the <code><a href=#the-hgroup-element>hgroup</a></code> element is the empty string.</p>
   15218 
   15219   <p>Other elements of <a href=#heading-content>heading content</a> in the
   15220   <code><a href=#the-hgroup-element>hgroup</a></code> element indicate subheadings or subtitles.</p>
   15221 
   15222   <p>The <a href=#rank>rank</a> of an <code><a href=#the-hgroup-element>hgroup</a></code> element is the
   15223   rank of the highest-ranked <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>
   15224   element descendant of the <code><a href=#the-hgroup-element>hgroup</a></code> element, if there are
   15225   any such elements, or otherwise the same as for an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
   15226   element (the highest rank).</p>
   15227 
   15228   <p>The section on <a href=#headings-and-sections>headings and sections</a>
   15229   defines how <code><a href=#the-hgroup-element>hgroup</a></code> elements are assigned to individual
   15230   sections.</p>
   15231 
   15232   <div class=example>
   15233 
   15234    <p>Here are some examples of valid headings. In each case, the
   15235    emphasized text represents the text that would be used as the
   15236    heading in an application extracting heading data and ignoring
   15237    subheadings.</p>
   15238 
   15239    <pre>&lt;hgroup&gt;
   15240  &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
   15241  &lt;h2&gt;Space is not the only void&lt;/h2&gt;
   15242 &lt;/hgroup&gt;</pre>
   15243 
   15244    <pre>&lt;hgroup&gt;
   15245  &lt;h1&gt;<strong>Dr. Strangelove</strong>&lt;/h1&gt;
   15246  &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
   15247 &lt;/hgroup&gt;</pre>
   15248 
   15249   <p>The point of using <code><a href=#the-hgroup-element>hgroup</a></code> in these examples is to
   15250   mask the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element (which acts as a secondary title)
   15251   from the <a href=#outline>outline</a> algorithm.</p><!--
   15252   http://www.brucelawson.co.uk/2009/html-5-is-a-mess/#comment-618895
   15253   -->
   15254 
   15255   </div>
   15256 
   15257 
   15258   <h4 id=the-header-element><span class=secno>4.4.8 </span>The <dfn><code>header</code></dfn> element</h4>
   15259 
   15260   <dl class=element><dt>Categories</dt>
   15261    <dd><a href=#flow-content>Flow content</a>.</dd>
   15262    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   15263    <dt>Contexts in which this element may be used:</dt>
   15264    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   15265    <dt>Content model:</dt>
   15266    <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-header-element>header</a></code> or
   15267    <code><a href=#the-footer-element>footer</a></code> element descendants.</dd>
   15268    <dt>Content attributes:</dt>
   15269    <dd><a href=#global-attributes>Global attributes</a></dd>
   15270    <dt>DOM interface:</dt>
   15271    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   15272   </dl><p>The <code><a href=#the-header-element>header</a></code> element <a href=#represents>represents</a> a group
   15273   of introductory or navigational aids.</p>
   15274 
   15275   <p class=note>A <code><a href=#the-header-element>header</a></code> element is intended to usually
   15276   contain the section's heading (an
   15277   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element or an
   15278   <code><a href=#the-hgroup-element>hgroup</a></code> element), but this is not required. The
   15279   <code><a href=#the-header-element>header</a></code> element can also be used to wrap a section's
   15280   table of contents, a search form, or any relevant logos.</p>
   15281 
   15282   <div class=example>
   15283 
   15284   <p>Here are some sample headers. This first one is for a game:</p>
   15285 
   15286    <pre>&lt;header&gt;
   15287  &lt;p&gt;Welcome to...&lt;/p&gt;
   15288  &lt;h1&gt;Voidwars!&lt;/h1&gt;
   15289 &lt;/header&gt;</pre>
   15290 
   15291    <p>The following snippet shows how the element can be used to mark
   15292    up a specification's header:</p>
   15293 
   15294    <pre>&lt;header&gt;
   15295  &lt;hgroup&gt;
   15296   &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
   15297   &lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
   15298  &lt;/hgroup&gt;
   15299  &lt;dl&gt;
   15300   &lt;dt&gt;This version:&lt;/dt&gt;
   15301   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>;
   15302   &lt;dt&gt;Previous version:&lt;/dt&gt;
   15303   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>;
   15304   &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
   15305   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/</a></dd>;
   15306   &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
   15307   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/</a></dd>;
   15308   &lt;dt&gt;Editor:&lt;/dt&gt;
   15309   &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean (a] w3.org"&gt;dean (a] w3.org&lt;/a&gt;&lt;/dd&gt;
   15310   &lt;dt&gt;Authors:&lt;/dt&gt;
   15311   &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&gt;
   15312  &lt;/dl&gt;
   15313  &lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
   15314 &lt;/header&gt;</pre>
   15315 
   15316   </div>
   15317 
   15318   <p class=note>The <code><a href=#the-header-element>header</a></code> element is not
   15319   <a href=#sectioning-content>sectioning content</a>; it doesn't introduce a new
   15320   section.</p>
   15321 
   15322   <div class=example>
   15323 
   15324   <p>In this example, the page has a page heading given by the
   15325   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, and two subsections whose headings are
   15326   given by <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> elements. The content after the
   15327   <code><a href=#the-header-element>header</a></code> element is still part of the last subsection
   15328   started in the <code><a href=#the-header-element>header</a></code> element, because the
   15329   <code><a href=#the-header-element>header</a></code> element doesn't take part in the
   15330   <a href=#outline>outline</a> algorithm.</p>
   15331 
   15332    <pre>&lt;body&gt;
   15333  &lt;header&gt;
   15334   &lt;h1&gt;Little Green Guys With Guns&lt;/h1&gt;
   15335   &lt;nav&gt;
   15336    &lt;ul&gt;
   15337     &lt;li&gt;&lt;a href="/games"&gt;Games&lt;/a&gt;
   15338     &lt;li&gt;&lt;a href="/forum"&gt;Forum&lt;/a&gt;
   15339     &lt;li&gt;&lt;a href="/download"&gt;Download&lt;/a&gt;
   15340    &lt;/ul&gt;
   15341   &lt;/nav&gt;
   15342   &lt;h2&gt;Important News&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
   15343   &lt;!-- this is part of the subsection entitled "Important News" --&gt;
   15344   &lt;p&gt;To play today's games you will need to update your client.&lt;/p&gt;
   15345   &lt;h2&gt;Games&lt;/h2&gt; &lt;!-- this starts a third subsection --&gt;
   15346  &lt;/header&gt;
   15347  &lt;p&gt;You have three active games:&lt;/p&gt;
   15348  &lt;!-- this is still part of the subsection entitled "Games" --&gt;
   15349  ...</pre>
   15350 
   15351   </div>
   15352 
   15353 
   15354 
   15355 
   15356   <h4 id=the-footer-element><span class=secno>4.4.9 </span>The <dfn><code>footer</code></dfn> element</h4>
   15357 
   15358   <dl class=element><dt>Categories</dt>
   15359    <dd><a href=#flow-content>Flow content</a>.</dd>
   15360    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   15361    <dt>Contexts in which this element may be used:</dt>
   15362    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   15363    <dt>Content model:</dt>
   15364    <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-header-element>header</a></code> or
   15365    <code><a href=#the-footer-element>footer</a></code> element descendants.</dd>
   15366    <dt>Content attributes:</dt>
   15367    <dd><a href=#global-attributes>Global attributes</a></dd>
   15368    <dt>DOM interface:</dt>
   15369    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   15370   </dl><p>The <code><a href=#the-footer-element>footer</a></code> element <a href=#represents>represents</a> a footer
   15371   for its nearest ancestor <a href=#sectioning-content>sectioning content</a> or
   15372   <a href=#sectioning-root>sectioning root</a> element. A footer typically contains
   15373   information about its section such as who wrote it, links to related
   15374   documents, copyright data, and the like.</p>
   15375 
   15376   <p class=note>Contact information for the author or editor of a
   15377   section belongs in an <code><a href=#the-address-element>address</a></code> element, possibly itself
   15378   inside a <code><a href=#the-footer-element>footer</a></code>.</p>
   15379 
   15380   <p>Footers don't necessarily have to appear at the <em>end</em> of a
   15381   section, though they usually do.</p>
   15382 
   15383   <p>When the <code><a href=#the-footer-element>footer</a></code> element contains entire sections,
   15384   they <a href=#represents title=represents>represent</a> appendices, indexes,
   15385   long colophons, verbose license agreements, and other such
   15386   content.</p>
   15387 
   15388   <p class=note>The <code><a href=#the-footer-element>footer</a></code> element is not
   15389   <a href=#sectioning-content>sectioning content</a>; it doesn't introduce a new
   15390   section.</p>
   15391 
   15392   <p>When the nearest ancestor <a href=#sectioning-content>sectioning content</a> or
   15393   <a href=#sectioning-root>sectioning root</a> element is <a href=#the-body-element>the body
   15394   element</a>, then it applies to the whole page.</p>
   15395 
   15396   <div class=example>
   15397 
   15398    <p>Here is a page with two footers, one at the top and one at the
   15399    bottom, with the same content:</p>
   15400 
   15401    <pre>&lt;body&gt;
   15402  &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
   15403  &lt;hgroup&gt;
   15404   &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
   15405   &lt;h2&gt;The ipsum of all lorems&lt;/h2&gt;
   15406  &lt;/hgroup&gt;
   15407  &lt;p&gt;A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   15408  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
   15409  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
   15410  ea commodo consequat. Duis aute irure dolor in reprehenderit in
   15411  voluptate velit esse cillum dolore eu fugiat nulla
   15412  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
   15413  culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
   15414  &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
   15415 &lt;/body&gt;</pre>
   15416 
   15417   </div>
   15418 
   15419   <div class=example>
   15420 
   15421    <p>Here is an example which shows the <code><a href=#the-footer-element>footer</a></code> element
   15422    being used both for a site-wide footer and for a section
   15423    footer.</p>
   15424 
   15425    <pre>&lt;!DOCTYPE HTML&gt;
   15426 &lt;HTML&gt;&lt;HEAD&gt;
   15427 &lt;TITLE&gt;The Ramblings of a Scientist&lt;/TITLE&gt;
   15428 &lt;BODY&gt;
   15429 &lt;H1&gt;The Ramblings of a Scientist&lt;/H1&gt;
   15430 &lt;ARTICLE&gt;
   15431  &lt;H1&gt;Episode 15&lt;/H1&gt;
   15432  &lt;VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD&gt;
   15433   &lt;P&gt;&lt;A HREF="/fm/015.ogv"&gt;Download video&lt;/A&gt;.&lt;/P&gt;
   15434  &lt;/VIDEO&gt;
   15435  &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
   15436   &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
   15437  &lt;/FOOTER&gt;
   15438 &lt;/ARTICLE&gt;
   15439 &lt;ARTICLE&gt;
   15440  &lt;H1&gt;My Favorite Trains&lt;/H1&gt;
   15441  &lt;P&gt;I love my trains. My favorite train of all time is a K&ouml;f.&lt;/P&gt;
   15442  &lt;P&gt;It is fun to see them pull some coal cars because they look so
   15443  dwarfed in comparison.&lt;/P&gt;
   15444  &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
   15445   &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
   15446  &lt;/FOOTER&gt;
   15447 &lt;/ARTICLE&gt;
   15448 &lt;FOOTER&gt; &lt;!-- site wide footer --&gt;
   15449  &lt;NAV&gt;
   15450   &lt;P&gt;&lt;A HREF="/credits.html"&gt;Credits&lt;/A&gt; &mdash;
   15451      &lt;A HREF="/tos.html"&gt;Terms of Service&lt;/A&gt; &mdash;
   15452      &lt;A HREF="/index.html"&gt;Blog Index&lt;/A&gt;&lt;/P&gt;
   15453  &lt;/NAV&gt;
   15454  &lt;P&gt;Copyright &copy; 2009 Gordon Freeman&lt;/P&gt;
   15455 &lt;/FOOTER&gt;
   15456 &lt;/BODY&gt;
   15457 &lt;/HTML&gt;</pre>
   15458 
   15459   </div>
   15460 
   15461 
   15462   <h4 id=the-address-element><span class=secno>4.4.10 </span>The <dfn><code>address</code></dfn> element</h4>
   15463 
   15464   <dl class=element><dt>Categories</dt>
   15465    <dd><a href=#flow-content>Flow content</a>.</dd>
   15466    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   15467    <dt>Contexts in which this element may be used:</dt>
   15468    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   15469    <dt>Content model:</dt>
   15470    <dd><a href=#flow-content>Flow content</a>, but with no <a href=#heading-content>heading
   15471    content</a> descendants, no <a href=#sectioning-content>sectioning content</a>
   15472    descendants, and no <code><a href=#the-header-element>header</a></code>, <code><a href=#the-footer-element>footer</a></code>, or
   15473    <code><a href=#the-address-element>address</a></code> element descendants.</dd>
   15474    <dt>Content attributes:</dt>
   15475    <dd><a href=#global-attributes>Global attributes</a></dd>
   15476    <dt>DOM interface:</dt>
   15477    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   15478   </dl><p>The <code><a href=#the-address-element>address</a></code> element <a href=#represents>represents</a> the
   15479   contact information for its nearest <code><a href=#the-article-element>article</a></code> or
   15480   <code><a href=#the-body-element-0>body</a></code> element ancestor. If that is <a href=#the-body-element>the body
   15481   element</a>, then the contact information applies to the document
   15482   as a whole.</p>
   15483 
   15484   <div class=example>
   15485    <p>For example, a page at the W3C Web site related to HTML might
   15486    include the following contact information:</p>
   15487    <pre>&lt;ADDRESS&gt;
   15488  &lt;A href="../People/Raggett/"&gt;Dave Raggett&lt;/A&gt;,
   15489  &lt;A href="../People/Arnaud/"&gt;Arnaud Le Hors&lt;/A&gt;,
   15490  contact persons for the &lt;A href="Activity"&gt;W3C HTML Activity&lt;/A&gt;
   15491 &lt;/ADDRESS&gt;</pre>
   15492   </div>
   15493 
   15494   <p>The <code><a href=#the-address-element>address</a></code> element must not be used to represent
   15495   arbitrary addresses (e.g. postal addresses), unless those addresses
   15496   are in fact the relevant contact information. (The <code><a href=#the-p-element>p</a></code>
   15497   element is the appropriate element for marking up postal addresses
   15498   in general.)</p>
   15499 
   15500   <p>The <code><a href=#the-address-element>address</a></code> element must not contain information
   15501   other than contact information.</p>
   15502 
   15503   <div class=example>
   15504    <p>For example, the following is non-conforming use of the
   15505    <code><a href=#the-address-element>address</a></code> element:</p>
   15506    <pre class=bad>&lt;ADDRESS&gt;Last Modified: 1999/12/24 23:37:50&lt;/ADDRESS&gt;</pre>
   15507   </div>
   15508 
   15509   <p>Typically, the <code><a href=#the-address-element>address</a></code> element would be included
   15510   along with other information in a <code><a href=#the-footer-element>footer</a></code> element.</p>
   15511 
   15512   <div class=impl>
   15513 
   15514   <p>The contact information for a node <var title="">node</var> is a
   15515   collection of <code><a href=#the-address-element>address</a></code> elements defined by the first
   15516   applicable entry from the following list:</p>
   15517 
   15518   <dl class=switch><dt>If <var title="">node</var> is an <code><a href=#the-article-element>article</a></code> element</dt>
   15519    <dt>If <var title="">node</var> is a <code><a href=#the-body-element-0>body</a></code> element</dt>
   15520 
   15521    <dd>
   15522 
   15523     <p>The contact information consists of all the
   15524     <code><a href=#the-address-element>address</a></code> elements that have <var title="">node</var>
   15525     as an ancestor and do not have another <code><a href=#the-body-element-0>body</a></code> or
   15526     <code><a href=#the-article-element>article</a></code> element ancestor that is a descendant of <var title="">node</var>.</p>
   15527 
   15528    </dd>
   15529 
   15530    <dt>If <var title="">node</var> has an ancestor element that is an <code><a href=#the-article-element>article</a></code> element</dt>
   15531    <dt>If <var title="">node</var> has an ancestor element that is a <code><a href=#the-body-element-0>body</a></code> element</dt>
   15532 
   15533    <dd>
   15534 
   15535     <p>The contact information of <var title="">node</var> is the same
   15536     as the contact information of the nearest <code><a href=#the-article-element>article</a></code> or
   15537     <code><a href=#the-body-element-0>body</a></code> element ancestor, whichever is nearest.</p>
   15538 
   15539    </dd>
   15540 
   15541    <dt>If <var title="">node</var>'s <code><a href=#document>Document</a></code> has <a href=#the-body-element title="the body element">a body element</a></dt>
   15542 
   15543    <dd>
   15544 
   15545     <p>The contact information of <var title="">node</var> is the same
   15546     as the contact information <a href=#the-body-element>the body element</a> of the
   15547     <code><a href=#document>Document</a></code>.</p>
   15548 
   15549    </dd>
   15550 
   15551    <dt>Otherwise</dt>
   15552 
   15553    <dd>
   15554 
   15555     <p>There is no contact information for <var title="">node</var>.</p>
   15556 
   15557    </dd>
   15558 
   15559   </dl><p>User agents may expose the contact information of a node to the
   15560   user, or use it for other purposes, such as indexing sections based
   15561   on the sections' contact information.</p>
   15562 
   15563   </div>
   15564 
   15565 
   15566 
   15567   <h4 id=headings-and-sections><span class=secno>4.4.11 </span><dfn>Headings and sections</dfn></h4>
   15568 
   15569   <p>The <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements and the
   15570   <code><a href=#the-hgroup-element>hgroup</a></code> element are headings.</p>
   15571 
   15572   <p>The first element of <a href=#heading-content>heading content</a> in an element
   15573   of <a href=#sectioning-content>sectioning content</a> <a href=#represents>represents</a> the
   15574   heading for that section. Subsequent headings of equal or higher
   15575   <a href=#rank>rank</a> start new (implied) sections, headings of lower
   15576   <a href=#rank>rank</a> start implied subsections that are part of the
   15577   previous one. In both cases, the element <a href=#represents>represents</a> the
   15578   heading of the implied section.</p>
   15579 
   15580   <p>Certain elements are said to be <dfn id=sectioning-root title="sectioning
   15581   root">sectioning roots</dfn>, including <code><a href=#the-blockquote-element>blockquote</a></code> and
   15582   <code><a href=#the-td-element>td</a></code> elements. These elements can have their own
   15583   outlines, but the sections and headings inside these elements do not
   15584   contribute to the outlines of their ancestors.</p>
   15585 
   15586   <!-- when updating this also update the category index -->
   15587   <ul class="brief category-list"><li><code><a href=#the-blockquote-element>blockquote</a></code></li>
   15588    <li><code><a href=#the-body-element-0>body</a></code></li>
   15589 <!-- v2DATAGRID   <li><code>datagrid</code></li> -->
   15590    <li><code><a href=#the-details-element>details</a></code></li>
   15591    <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   15592    <li><code><a href=#the-figure-element>figure</a></code></li>
   15593    <li><code><a href=#the-td-element>td</a></code></li>
   15594   </ul><!-- a root element isn't a sectioning root. This means, for
   15595   instance, that you don't get an outline if you just have a random
   15596   XML file with <html:h1> elements in it. Other vocabs need to define
   15597   what their sectioning root is. --><p><a href=#sectioning-content>Sectioning content</a> elements are always considered
   15598   subsections of their nearest ancestor <a href=#sectioning-root>sectioning root</a>
   15599   or their nearest ancestor element of <a href=#sectioning-content>sectioning
   15600   content</a>, whichever is nearest, regardless of what implied
   15601   sections other headings may have created.</p>
   15602 
   15603   <div class=example>
   15604    <p>For the following fragment:</p>
   15605    <pre>&lt;body&gt;
   15606  &lt;h1&gt;Foo&lt;/h1&gt;
   15607  &lt;h2&gt;Bar&lt;/h2&gt;
   15608  &lt;blockquote&gt;
   15609   &lt;h3&gt;Bla&lt;/h3&gt;
   15610  &lt;/blockquote&gt;
   15611  &lt;p&gt;Baz&lt;/p&gt;
   15612  &lt;h2&gt;Quux&lt;/h2&gt;
   15613  &lt;section&gt;
   15614   &lt;h3&gt;Thud&lt;/h3&gt;
   15615  &lt;/section&gt;
   15616  &lt;p&gt;Grunt&lt;/p&gt;
   15617 &lt;/body&gt;</pre>
   15618    <p>...the structure would be:</p>
   15619    <ol><li>
   15620      Foo (heading of explicit <code><a href=#the-body-element-0>body</a></code> section, containing the "Grunt" paragraph)
   15621      <ol><li>
   15622        Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
   15623       </li>
   15624       <li>
   15625        Quux (heading starting implied section with no content other than the heading itself)
   15626       </li>
   15627       <li>
   15628        Thud (heading of explicit <code><a href=#the-section-element>section</a></code> section)
   15629       </li>
   15630      </ol></li>
   15631    </ol><p>Notice how the <code><a href=#the-section-element>section</a></code> ends the earlier implicit
   15632    section so that a later paragraph ("Grunt") is back at the top
   15633    level.</p>
   15634   </div>
   15635 
   15636   <p>Sections may contain headings of any <a href=#rank>rank</a>, but
   15637   authors are strongly encouraged to either use only <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
   15638   elements, or to use elements of the appropriate <a href=#rank>rank</a>
   15639   for the section's nesting level.</p>
   15640 
   15641   <p>Authors are also encouraged to explicitly wrap sections in
   15642   elements of <a href=#sectioning-content>sectioning content</a>, instead of relying on
   15643   the implicit sections generated by having multiple headings in one
   15644   element of <a href=#sectioning-content>sectioning content</a>.</p>
   15645 
   15646   <div class=example>
   15647    <p>For example, the following is correct:</p>
   15648 
   15649    <pre>&lt;body&gt;
   15650  &lt;h4&gt;Apples&lt;/h4&gt;
   15651  &lt;p&gt;Apples are fruit.&lt;/p&gt;
   15652  &lt;section&gt;
   15653   &lt;h2&gt;Taste&lt;/h2&gt;
   15654   &lt;p&gt;They taste lovely.&lt;/p&gt;
   15655   &lt;h6&gt;Sweet&lt;/h6&gt;
   15656   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
   15657   &lt;h1&gt;Color&lt;/h1&gt;
   15658   &lt;p&gt;Apples come in various colors.&lt;/p&gt;
   15659  &lt;/section&gt;
   15660 &lt;/body&gt;</pre>
   15661 
   15662    <p>However, the same document would be more clearly expressed
   15663    as:</p>
   15664 
   15665    <pre>&lt;body&gt;
   15666  &lt;h1&gt;Apples&lt;/h1&gt;
   15667  &lt;p&gt;Apples are fruit.&lt;/p&gt;
   15668  &lt;section&gt;
   15669   &lt;h2&gt;Taste&lt;/h2&gt;
   15670   &lt;p&gt;They taste lovely.&lt;/p&gt;
   15671   &lt;section&gt;
   15672    &lt;h3&gt;Sweet&lt;/h3&gt;
   15673    &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
   15674   &lt;/section&gt;
   15675  &lt;/section&gt;
   15676  &lt;section&gt;
   15677   &lt;h2&gt;Color&lt;/h2&gt;
   15678   &lt;p&gt;Apples come in various colors.&lt;/p&gt;
   15679  &lt;/section&gt;
   15680 &lt;/body&gt;</pre>
   15681 
   15682    <p>Both of the documents above are semantically identical and would
   15683    produce the same outline in compliant user agents.</p>
   15684 
   15685   </div>
   15686 
   15687 
   15688   <h5 id=outlines><span class=secno>4.4.11.1 </span>Creating an outline</h5>
   15689 
   15690   <div class=impl>
   15691 
   15692   <!-- v2 idea: It would be nice if there was a way to use this to
   15693   autogenerate a table of contents or some such -->
   15694 
   15695   <p>This section defines an algorithm for creating an outline for a
   15696   <a href=#sectioning-content>sectioning content</a> element or a <a href=#sectioning-root>sectioning
   15697   root</a> element. It is defined in terms of a walk over the nodes
   15698   of a DOM tree, in tree order, with each node being visited when it
   15699   is <i>entered</i> and when it is <i>exited</i> during the walk.</p>
   15700 
   15701   </div>
   15702 
   15703   <p>The <dfn id=outline>outline</dfn> for a <a href=#sectioning-content>sectioning content</a>
   15704   element or a <a href=#sectioning-root>sectioning root</a> element consists of a list
   15705   of one or more potentially nested <a href=#concept-section title=concept-section>sections</a>. A <dfn id=concept-section title=concept-section>section</dfn> is a container that
   15706   corresponds to some nodes in the original DOM tree. Each section can
   15707   have one heading associated with it, and can contain any number of
   15708   further nested sections. <span class=impl>The algorithm for the
   15709   outline also associates each node in the DOM tree with a particular
   15710   section and potentially a heading.</span> (The sections in the
   15711   outline aren't <code><a href=#the-section-element>section</a></code> elements, though some may
   15712   correspond to such elements &mdash; they are merely conceptual
   15713   sections.)</p>
   15714 
   15715   <div class=example>
   15716 
   15717    <p>The following markup fragment:</p>
   15718 
   15719    <pre>&lt;body&gt;
   15720  &lt;h1&gt;A&lt;/h1&gt;
   15721  &lt;p&gt;B&lt;/p&gt;
   15722  &lt;h2&gt;C&lt;/h2&gt;
   15723  &lt;p&gt;D&lt;/p&gt;
   15724  &lt;h2&gt;E&lt;/h2&gt;
   15725  &lt;p&gt;F&lt;/p&gt;
   15726 &lt;/body&gt;</pre>
   15727 
   15728    <p>...results in the following outline being created for the
   15729    <code><a href=#the-body-element-0>body</a></code> node (and thus the entire document):</p>
   15730 
   15731    <ol class=brief><li>
   15732      <p>Section created for <code><a href=#the-body-element-0>body</a></code> node.</p>
   15733      <p>Associated with heading "A".</p>
   15734      <p>Also associated with paragraph "B".</p>
   15735      <p>Nested sections:</p>
   15736      <ol class=brief><li>
   15737        <p>Section implied for first <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element.</p>
   15738        <p>Associated with heading "C".</p>
   15739        <p>Also associated with paragraph "D".</p>
   15740        <p>No nested sections.</p>
   15741       </li>
   15742       <li>
   15743        <p>Section implied for second <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> element.</p>
   15744        <p>Associated with heading "E".</p>
   15745        <p>Also associated with paragraph "F".</p>
   15746        <p>No nested sections.</p>
   15747       </li>
   15748      </ol></li>
   15749    </ol></div>
   15750 
   15751   <div class=impl>
   15752 
   15753   <p>The algorithm that must be followed during a walk of a DOM
   15754   subtree rooted at a <a href=#sectioning-content>sectioning content</a> element or a
   15755   <a href=#sectioning-root>sectioning root</a> element to determine that element's
   15756   <a href=#outline>outline</a> is as follows:</p>
   15757 
   15758   <ol><li><p>Let <var title="">current outlinee</var> be null. (It holds
   15759    the element whose <a href=#outline>outline</a> is being created.)</li>
   15760 
   15761    <li><p>Let <var title="">current section</var> be null. (It holds a
   15762    pointer to a <a href=#concept-section title=concept-section>section</a>, so that
   15763    elements in the DOM can all be associated with a section.)</li>
   15764 
   15765    <li><p>Create a stack to hold elements, which is used to handle
   15766    nesting. Initialize this stack to empty.</li>
   15767 
   15768    <li>
   15769 
   15770     <p>As you walk over the DOM in <a href=#tree-order>tree order</a>, trigger
   15771     the first relevant step below for each element as you enter and
   15772     exit it.</p>
   15773 
   15774     <dl class=switch><dt>If the top of the stack is an element, and you are exiting
   15775      that element</dt>
   15776 
   15777      <dd>
   15778 
   15779       <p class=note>The element being exited is a <a href=#heading-content>heading
   15780       content</a> element.</p>
   15781 
   15782       <p>Pop that element from the stack.</p>
   15783 
   15784      </dd>
   15785 
   15786 
   15787      <dt>If the top of the stack is a <a href=#heading-content>heading content</a>
   15788      element</dt>
   15789 
   15790      <dd><p>Do nothing.</dd>
   15791 
   15792 
   15793      <dt>When entering a <a href=#sectioning-content>sectioning content</a> element or a
   15794      <a href=#sectioning-root>sectioning root</a> element</dt>
   15795 
   15796      <dd>
   15797 
   15798       <p>If <var title="">current outlinee</var> is not null, and the
   15799       <var title="">current section</var> has no heading, create an
   15800       implied heading and let that be the heading for the <var title="">current section</var>.</p>
   15801 
   15802       <p>If <var title="">current outlinee</var> is not null, push
   15803       <var title="">current outlinee</var> onto the stack.</p>
   15804 
   15805       <p>Let <var title="">current outlinee</var> be the element
   15806       that is being entered.</p>
   15807 
   15808       <p>Let <var title="">current section</var> be a newly created
   15809       <a href=#concept-section title=concept-section>section</a> for the <var title="">current outlinee</var> element.</p>
   15810 
   15811       <p>Let there be a new <a href=#outline>outline</a> for the new <var title="">current outlinee</var>, initialized with just the new
   15812       <var title="">current section</var> as the only <a href=#concept-section title=concept-section>section</a> in the outline.</p>
   15813 
   15814      </dd>
   15815 
   15816 
   15817      <dt>When exiting a <a href=#sectioning-content>sectioning content</a> element, if
   15818      the stack is not empty</dt>
   15819 
   15820      <dd>
   15821 
   15822       <p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p>
   15823 
   15824       <p>Let <var title="">current section</var> be the last section
   15825       in the <a href=#outline>outline</a> of the <var title="">current
   15826       outlinee</var> element.</p>
   15827 
   15828       <p>Append the <a href=#outline>outline</a> of the <a href=#sectioning-content>sectioning
   15829       content</a> element being exited to the <var title="">current
   15830       section</var>. (This does not change which section is the last
   15831       section in the <a href=#outline>outline</a>.)</p>
   15832 
   15833      </dd>
   15834 
   15835 
   15836      <dt>When exiting a <a href=#sectioning-root>sectioning root</a> element, if the
   15837      stack is not empty</dt>
   15838 
   15839      <dd>
   15840 
   15841       <p>Run these steps:</p>
   15842 
   15843       <ol><li><p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</li>
   15844 
   15845        <li><p>Let <var title="">current section</var> be the last
   15846        section in the <a href=#outline>outline</a> of the <var title="">current
   15847        outlinee</var> element.</li>
   15848 
   15849        <li><p><i>Finding the deepest child</i>: If <var title="">current section</var> has no child sections, stop
   15850        these steps.</li>
   15851 
   15852        <li><p>Let <var title="">current section</var> be the last
   15853        child <a href=#concept-section title=concept-section>section</a> of the
   15854        current <var title="">current section</var>.</li>
   15855 
   15856        <li><p>Go back to the substep labeled <i>finding the deepest
   15857        child</i>.</li>
   15858 
   15859       </ol></dd>
   15860 
   15861 
   15862      <dt>When exiting a <a href=#sectioning-content>sectioning content</a> element or a
   15863      <a href=#sectioning-root>sectioning root</a> element</dt>
   15864 
   15865      <dd>
   15866 
   15867       <p class=note>The <var title="">current outlinee</var> is
   15868       the element being exited.</p>
   15869 
   15870       <p>Let <var title="">current section</var> be the first <a href=#concept-section title=concept-section>section</a> in the
   15871       <a href=#outline>outline</a> of the <var title="">current outlinee</var>
   15872       element.</p>
   15873 
   15874       <p>Skip to the next step in the overall set of steps. (The walk
   15875       is over.)</p>
   15876 
   15877      </dd>
   15878 
   15879 
   15880      <dt>If the <var title="">current outlinee</var> is null</dt>
   15881 
   15882      <dd><p>Do nothing.</dd>
   15883 
   15884 
   15885      <dt>When entering a <a href=#heading-content>heading content</a> element</dt>
   15886 
   15887      <dd>
   15888 
   15889       <p>If the <var title="">current section</var> has no heading,
   15890       let the element being entered be the heading for the <var title="">current section</var>.</p>
   15891 
   15892       <p>Otherwise, if the element being entered has a
   15893       <a href=#rank>rank</a> equal to or greater than the heading of the
   15894       last section of the <a href=#outline>outline</a> of the <var title="">current outlinee</var>, then create a new <a href=#concept-section title=concept-section>section</a> and append it to the
   15895       <a href=#outline>outline</a> of the <var title="">current outlinee</var>
   15896       element, so that this new section is the new last section of
   15897       that outline. Let <var title="">current section</var> be that
   15898       new section. Let the element being entered be the new heading
   15899       for the <var title="">current section</var>.</p>
   15900 
   15901       <p>Otherwise, run these substeps:</p>
   15902 
   15903       <ol><li><p>Let <var title="">candidate section</var> be <var title="">current section</var>.</li>
   15904 
   15905        <li><p>If the element being entered has a <a href=#rank>rank</a>
   15906        lower than the <a href=#rank>rank</a> of the heading of the <var title="">candidate section</var>, then create a new <a href=#concept-section title=concept-section>section</a>, and append it to <var title="">candidate section</var>. (This does not change which
   15907        section is the last section in the outline.) Let <var title="">current section</var> be this new section. Let the
   15908        element being entered be the new heading for the <var title="">current section</var>. Abort these substeps.</p>
   15909 
   15910        <li><p>Let <var title="">new candidate section</var> be the
   15911        <a href=#concept-section title=concept-section>section</a> that contains <var title="">candidate section</var> in the <a href=#outline>outline</a> of
   15912        <var title="">current outlinee</var>.</li>
   15913 
   15914        <li><p>Let <var title="">candidate section</var> be <var title="">new candidate section</var>.</li>
   15915 
   15916        <li><p>Return to step 2.</li>
   15917 
   15918       </ol><p>Push the element being entered onto the stack. (This causes
   15919       the algorithm to skip any descendants of the element.)</p>
   15920 
   15921       <p class=note>Recall that <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> has the
   15922       <em>highest</em> rank, and <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> has the lowest
   15923       rank.</p>
   15924 
   15925      </dd>
   15926 
   15927 
   15928      <dt>Otherwise</dt>
   15929 
   15930      <dd><p>Do nothing.</dd>
   15931 
   15932     </dl><p id=associatedSection>In addition, whenever you exit a node,
   15933     after doing the steps above, if <var title="">current
   15934     section</var> is not null, associate the node with the <a href=#concept-section title=concept-section>section</a> <var title="">current
   15935     section</var>.</p>
   15936 
   15937    </li>
   15938 
   15939    <li><p>If the <var title="">current outlinee</var> is null,
   15940    then there was no <a href=#sectioning-content>sectioning content</a> element or
   15941    <a href=#sectioning-root>sectioning root</a> element in the DOM. There is no
   15942    <a href=#outline>outline</a>. Abort these steps.</li>
   15943 
   15944    <li><p>Associate any nodes that were not associated with a <a href=#concept-section title=concept-section>section</a> in the steps above with <var title="">current outlinee</var> as their section.</li>
   15945 
   15946    <li><p>Associate all nodes with the heading of the <a href=#concept-section title=concept-section>section</a> with which they are
   15947    associated, if any.</li>
   15948 
   15949    <li><p>If <var title="">current outlinee</var> is <a href=#the-body-element>the body
   15950    element</a>, then the outline created for that element is the
   15951    <a href=#outline>outline</a> of the entire document.</li>
   15952 
   15953   </ol><p>The tree of sections created by the algorithm above, or a proper
   15954   subset thereof, must be used when generating document outlines, for
   15955   example when generating tables of contents.</p>
   15956 
   15957   <p>When creating an interactive table of contents, entries should
   15958   jump the user to the relevant <a href=#sectioning-content>sectioning content</a>
   15959   element, if the <a href=#concept-section title=concept-section>section</a> was
   15960   created for a real element in the original document, or to the
   15961   relevant <a href=#heading-content>heading content</a> element, if the <a href=#concept-section title=concept-section>section</a> in the tree was generated for
   15962   a heading in the above process.</p>
   15963 
   15964   <p class=note>Selecting the first <a href=#concept-section title=concept-section>section</a> of the document therefore
   15965   always takes the user to the top of the document, regardless of
   15966   where the first heading in the <code><a href=#the-body-element-0>body</a></code> is to be found.</p>
   15967 
   15968   <p>The <dfn id=outline-depth>outline depth</dfn> of a <a href=#heading-content>heading content</a>
   15969   element associated with a <a href=#concept-section title=concept-section>section</a> <var title="">section</var>
   15970   is the number of <a href=#concept-section title=concept-section>sections</a> that
   15971   are ancestors of <var title="">section</var> in the
   15972   <a href=#outline>outline</a> that <var title="">section</var> finds itself
   15973   in when the <a href=#outline title=outline>outlines</a> of its
   15974   <code><a href=#document>Document</a></code>'s elements are created, plus 1. The
   15975   <a href=#outline-depth>outline depth</a> of a <a href=#heading-content>heading content</a> element
   15976   not associated with a <a href=#concept-section title=concept-section>section</a>
   15977   is 1.</p>
   15978 
   15979   <p>User agents should provide default headings for sections that do
   15980   not have explicit section headings.</p>
   15981 
   15982   <div class=example>
   15983 
   15984    <p>Consider the following snippet:</p>
   15985 
   15986    <pre>&lt;body&gt;
   15987  &lt;nav&gt;
   15988   &lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
   15989  &lt;/nav&gt;
   15990  &lt;p&gt;Hello world.&lt;/p&gt;
   15991  &lt;aside&gt;
   15992   &lt;p&gt;My cat is cute.&lt;/p&gt;
   15993  &lt;/aside&gt;
   15994 &lt;/body&gt;</pre>
   15995 
   15996    <p>Although it contains no headings, this snippet has three
   15997    sections: a document (the <code><a href=#the-body-element-0>body</a></code>) with two subsections
   15998    (a <code><a href=#the-nav-element>nav</a></code> and an <code><a href=#the-aside-element>aside</a></code>). A user agent could
   15999    present the outline as follows:</p>
   16000 
   16001    <ol class=brief><li>Untitled document
   16002      <ol><li>Navigation</li>
   16003       <li>Sidebar</li>
   16004      </ol></li>
   16005    </ol><p>These default headings ("Untitled document", "Navigation",
   16006    "Sidebar") are not specified by this specification, and might vary
   16007    with the user's language, the page's language, the user's
   16008    preferences, the user agent implementor's preferences, etc.</p>
   16009 
   16010   </div>
   16011 
   16012   <div class=note>
   16013 
   16014    <p>The following JavaScript function shows how the tree walk could
   16015    be implemented. The <var title="">root</var> argument is the root
   16016    of the tree to walk, and the <var title="">enter</var> and <var title="">exit</var> arguments are callbacks that are called with
   16017    the nodes as they are entered and exited. <a href=#refsECMA262>[ECMA262]</a></p>
   16018 
   16019    <pre>function (root, enter, exit) {
   16020   var node = root;
   16021   start: while (node) {
   16022     enter(node);
   16023     if (node.firstChild) {
   16024       node = node.firstChild;
   16025       continue start;
   16026     }
   16027     while (node) {
   16028       exit(node);
   16029       if (node.nextSibling) {
   16030         node = node.nextSibling;
   16031         continue start;
   16032       }
   16033       if (node == root)
   16034         node = null;
   16035       else
   16036         node = node.parentNode;
   16037     }
   16038   }
   16039 }</pre>
   16040 
   16041   </div>
   16042 
   16043   </div>
   16044 
   16045 
   16046 
   16047   <h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>
   16048 
   16049   <h4 id=the-p-element><span class=secno>4.5.1 </span>The <dfn><code>p</code></dfn> element</h4>
   16050 
   16051   <dl class=element><dt>Categories</dt>
   16052    <dd><a href=#flow-content>Flow content</a>.</dd>
   16053    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   16054    <dt>Contexts in which this element may be used:</dt>
   16055    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16056    <dt>Content model:</dt>
   16057    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   16058    <dt>Content attributes:</dt>
   16059    <dd><a href=#global-attributes>Global attributes</a></dd>
   16060    <dt>DOM interface:</dt>
   16061    <dd>
   16062     <pre class=idl>interface <dfn id=htmlparagraphelement>HTMLParagraphElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   16063    </dd>
   16064   </dl><p>The <code><a href=#the-p-element>p</a></code> element <a href=#represents>represents</a> a
   16065   <a href=#paragraph>paragraph</a>.</p>
   16066 
   16067   <div class=example>
   16068    <p>The following examples are conforming HTML fragments:</p>
   16069    <pre>&lt;p&gt;The little kitten gently seated himself on a piece of
   16070 carpet. Later in his life, this would be referred to as the time the
   16071 cat sat on the mat.&lt;/p&gt;</pre>
   16072    <pre>&lt;fieldset&gt;
   16073  &lt;legend&gt;Personal information&lt;/legend&gt;
   16074  &lt;p&gt;
   16075    &lt;label&gt;Name: &lt;input name="n"&gt;&lt;/label&gt;
   16076    &lt;label&gt;&lt;input name="anon" type="checkbox"&gt; Hide from other users&lt;/label&gt;
   16077  &lt;/p&gt;
   16078  &lt;p&gt;&lt;label&gt;Address: &lt;textarea name="a"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   16079 &lt;/fieldset&gt;</pre>
   16080    <pre>&lt;p&gt;There was once an example from Femley,&lt;br&gt;
   16081 Whose markup was of dubious quality.&lt;br&gt;
   16082 The validator complained,&lt;br&gt;
   16083 So the author was pained,&lt;br&gt;
   16084 To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
   16085   </div>
   16086 
   16087   <p>The <code><a href=#the-p-element>p</a></code> element should not be used when a more
   16088   specific element is more appropriate.</p>
   16089 
   16090   <div class=example>
   16091 
   16092    <p>The following example is technically correct:</p>
   16093 
   16094 <pre>&lt;section&gt;
   16095  &lt;!-- ... --&gt;
   16096  &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
   16097  &lt;p&gt;Author: fred (a] example.com&lt;/p&gt;
   16098 &lt;/section&gt;</pre>
   16099 
   16100    <p>However, it would be better marked-up as:</p>
   16101 
   16102 <pre>&lt;section&gt;
   16103  &lt;!-- ... --&gt;
   16104  &lt;footer&gt;Last modified: 2001-04-23&lt;/footer&gt;
   16105  &lt;address&gt;Author: fred (a] example.com&lt;/address&gt;
   16106 &lt;/section&gt;</pre>
   16107 
   16108    <p>Or:</p>
   16109 
   16110 <pre>&lt;section&gt;
   16111  &lt;!-- ... --&gt;
   16112  &lt;footer&gt;
   16113   &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
   16114   &lt;address&gt;Author: fred (a] example.com&lt;/address&gt;
   16115  &lt;/footer&gt;
   16116 &lt;/section&gt;</pre>
   16117 
   16118   </div>
   16119 
   16120 
   16121   <h4 id=the-hr-element><span class=secno>4.5.2 </span>The <dfn><code>hr</code></dfn> element</h4>
   16122 
   16123   <dl class=element><dt>Categories</dt>
   16124    <dd><a href=#flow-content>Flow content</a>.</dd>
   16125    <dt>Contexts in which this element may be used:</dt>
   16126    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16127    <dt>Content model:</dt>
   16128    <dd>Empty.</dd>
   16129    <dt>Content attributes:</dt>
   16130    <dd><a href=#global-attributes>Global attributes</a></dd>
   16131    <dt>DOM interface:</dt>
   16132    <dd>
   16133     <pre class=idl>interface <dfn id=htmlhrelement>HTMLHRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   16134    </dd>
   16135   </dl><p>The <code><a href=#the-hr-element>hr</a></code> element <a href=#represents>represents</a> a
   16136   <a href=#paragraph>paragraph</a>-level thematic break, e.g. a scene change in
   16137   a story, or a transition to another topic within a section of a
   16138   reference book.</p>
   16139 
   16140   <div class=example>
   16141 
   16142    <p>The following fictional extract from a project manual shows two
   16143    sections that use the <code><a href=#the-hr-element>hr</a></code> element to separate topics
   16144    within the section.</p>
   16145 
   16146    <pre>&lt;section&gt;
   16147  &lt;h1&gt;Communication&lt;/h1&gt;
   16148  &lt;p&gt;There are various methods of communication. This section
   16149  covers a few of the important ones used by the project.&lt;/p&gt;
   16150  <strong>&lt;hr&gt;</strong>
   16151  &lt;p&gt;Communication stones seem to come in pairs and have mysterious
   16152  properties:&lt;/p&gt;
   16153  &lt;ul&gt;
   16154   &lt;li&gt;They can transfer thoughts in two directions once activated
   16155   if used alone.&lt;/li&gt;
   16156   &lt;li&gt;If used with another device, they can transfer one's
   16157   consciousness to another body.&lt;/li&gt;
   16158   &lt;li&gt;If both stones are used with another device, the
   16159   consciousnesses switch bodies.&lt;/li&gt;
   16160  &lt;/ul&gt;
   16161  <strong>&lt;hr&gt;</strong>
   16162  &lt;p&gt;Radios use the electromagnetic spectrum in the meter range and
   16163  longer.&lt;/p&gt;
   16164  <strong>&lt;hr&gt;</strong>
   16165  &lt;p&gt;Signal flares use the electromagnetic spectrum in the
   16166  nanometer range.&lt;/p&gt;
   16167 &lt;/section&gt;
   16168 &lt;section&gt;
   16169  &lt;h1&gt;Food&lt;/h1&gt;
   16170  &lt;p&gt;All food at the project is rationed:&lt;/p&gt;
   16171  &lt;dl&gt;
   16172   &lt;dt&gt;Potatoes&lt;/dt&gt;
   16173   &lt;dd&gt;Two per day&lt;/dd&gt;
   16174   &lt;dt&gt;Soup&lt;/dt&gt;
   16175   &lt;dd&gt;One bowl per day&lt;/dd&gt;
   16176  &lt;/dl&gt;
   16177  <strong>&lt;hr&gt;</strong>
   16178  &lt;p&gt;Cooking is done by the chefs on a set rotation.&lt;/p&gt;
   16179 &lt;/section&gt;</pre>
   16180 
   16181    <p>There is no need for an <code><a href=#the-hr-element>hr</a></code> element between the
   16182    sections themselves, since the <code><a href=#the-section-element>section</a></code> elements and
   16183    the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements imply thematic changes themselves.</p>
   16184 
   16185   </div>
   16186 
   16187   <div class=example>
   16188 
   16189    <p>The following extract from <cite>Pandora's Star</cite> by Peter
   16190    F. Hamilton shows two paragraphs that precede a scene change and
   16191    the paragraph that follows it. The scene change, represented in the
   16192    printed book by a gap containing a solitary centered star between
   16193    the second and third paragraphs, is here represented using the
   16194    <code><a href=#the-hr-element>hr</a></code> element.</p>
   16195 
   16196    <!-- ISBN 1-4050-0020-1; bottom of page 14 -->
   16197 
   16198    <pre lang=en-GB>&lt;p&gt;Dudley was ninety-two, in his second life, and fast approaching
   16199 time for another rejuvenation. Despite his body having the physical
   16200 age of a standard fifty-year-old, the prospect of a long degrading
   16201 campaign within academia was one he regarded with dread. For a
   16202 supposedly advanced civilization, the Intersolar Commonwearth could be
   16203 appallingly backward at times, not to mention cruel.&lt;/p&gt;
   16204 &lt;p&gt;&lt;i&gt;Maybe it won't be that bad&lt;/i&gt;, he told himself. The lie was
   16205 comforting enough to get him through the rest of the night's
   16206 shift.&lt;/p&gt;
   16207 <strong>&lt;hr&gt;</strong>
   16208 &lt;p&gt;The Carlton AllLander drove Dudley home just after dawn. Like the
   16209 astronomer, the vehicle was old and worn, but perfectly capable of
   16210 doing its job. It had a cheap diesel engine, common enough on a
   16211 semi-frontier world like Gralmond, although its drive array was a
   16212 thoroughly modern photoneural processor. With its high suspension and
   16213 deep-tread tyres it could plough along the dirt track to the
   16214 observatory in all weather and seasons, including the metre-deep snow
   16215 of Gralmond's winters.&lt;/p&gt;</pre>
   16216 
   16217   </div>
   16218 
   16219   <p class=note>The <code><a href=#the-hr-element>hr</a></code> element does not affect the
   16220   document's <a href=#outline>outline</a>.</p>
   16221 
   16222 
   16223   <h4 id=the-pre-element><span class=secno>4.5.3 </span>The <dfn><code>pre</code></dfn> element</h4>
   16224 
   16225   <dl class=element><dt>Categories</dt>
   16226    <dd><a href=#flow-content>Flow content</a>.</dd>
   16227    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   16228    <dt>Contexts in which this element may be used:</dt>
   16229    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16230    <dt>Content model:</dt>
   16231    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   16232    <dt>Content attributes:</dt>
   16233    <dd><a href=#global-attributes>Global attributes</a></dd>
   16234    <dt>DOM interface:</dt>
   16235    <dd>
   16236     <pre class=idl>interface <dfn id=htmlpreelement>HTMLPreElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   16237    </dd>
   16238   </dl><p>The <code><a href=#the-pre-element>pre</a></code> element <a href=#represents>represents</a> a block of
   16239   preformatted text, in which structure is represented by typographic
   16240   conventions rather than by elements.</p>
   16241 
   16242   <p class=note>In <a href=#syntax>the HTML syntax</a>, a leading
   16243   newline character immediately following the <code><a href=#the-pre-element>pre</a></code> element
   16244   start tag is stripped.</p>
   16245 
   16246   <p>Some examples of cases where the <code><a href=#the-pre-element>pre</a></code> element could
   16247   be used:</p>
   16248 
   16249   <ul><li>Including an e-mail, with paragraphs indicated by blank lines,
   16250    lists indicated by lines prefixed with a bullet, and so on.</li>
   16251 
   16252    <li>Including fragments of computer code, with structure indicated
   16253    according to the conventions of that language.</li>
   16254 
   16255    <li>Displaying ASCII art.</li>
   16256 
   16257   </ul><p class=note>Authors are encouraged to consider how preformatted
   16258   text will be experienced when the formatting is lost, as will be the
   16259   case for users of speech synthesizers, braille displays, and the
   16260   like. For cases like ASCII art, it is likely that an alternative
   16261   presentation, such as a textual description, would be more
   16262   universally accessible to the readers of the document.</p>
   16263 
   16264   <p>To represent a block of computer code, the <code><a href=#the-pre-element>pre</a></code>
   16265   element can be used with a <code><a href=#the-code-element>code</a></code> element; to represent a
   16266   block of computer output the <code><a href=#the-pre-element>pre</a></code> element can be used
   16267   with a <code><a href=#the-samp-element>samp</a></code> element. Similarly, the <code><a href=#the-kbd-element>kbd</a></code>
   16268   element can be used within a <code><a href=#the-pre-element>pre</a></code> element to indicate
   16269   text that the user is to enter.</p>
   16270 
   16271   <div class=example>
   16272 
   16273    <p>In the following snippet, a sample of computer code is
   16274    presented.</p>
   16275 
   16276    <pre>&lt;p&gt;This is the &lt;code&gt;Panel&lt;/code&gt; constructor:&lt;/p&gt;
   16277 &lt;pre&gt;&lt;code&gt;function Panel(element, canClose, closeHandler) {
   16278   this.element = element;
   16279   this.canClose = canClose;
   16280   this.closeHandler = function () { if (closeHandler) closeHandler() };
   16281 }&lt;/code&gt;&lt;/pre&gt;</pre>
   16282 
   16283   </div>
   16284 
   16285   <div class=example>
   16286 
   16287    <p>In the following snippet, <code><a href=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
   16288    elements are mixed in the contents of a <code><a href=#the-pre-element>pre</a></code> element to
   16289    show a session of Zork I.</p>
   16290 
   16291    <pre>&lt;pre&gt;&lt;samp&gt;You are in an open field west of a big white house with a boarded
   16292 front door.
   16293 There is a small mailbox here.
   16294 
   16295 &gt;&lt;/samp&gt; &lt;kbd&gt;open mailbox&lt;/kbd&gt;
   16296 
   16297 &lt;samp&gt;Opening the mailbox reveals:
   16298 A leaflet.
   16299 
   16300 &gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
   16301 
   16302   </div>
   16303 
   16304   <div class=example>
   16305 
   16306    <p>The following shows a contemporary poem that uses the
   16307    <code><a href=#the-pre-element>pre</a></code> element to preserve its unusual formatting, which
   16308    forms an intrinsic part of the poem itself.</p>
   16309 
   16310    <pre>&lt;pre&gt;                maxling
   16311 
   16312 it is with a          heart
   16313                heavy
   16314 
   16315 that i admit loss of a feline
   16316         so           loved
   16317 
   16318 a friend lost to the
   16319         unknown
   16320                                 (night)
   16321 
   16322 ~cdr 11dec07&lt;/pre&gt;</pre>
   16323 
   16324   </div>
   16325 
   16326 
   16327 
   16328   <h4 id=the-blockquote-element><span class=secno>4.5.4 </span>The <dfn><code>blockquote</code></dfn> element</h4>
   16329 
   16330   <dl class=element><dt>Categories</dt>
   16331    <dd><a href=#flow-content>Flow content</a>.</dd>
   16332    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   16333    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   16334    <dt>Contexts in which this element may be used:</dt>
   16335    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16336    <dt>Content model:</dt>
   16337    <dd><a href=#flow-content>Flow content</a>.</dd>
   16338    <dt>Content attributes:</dt>
   16339    <dd><a href=#global-attributes>Global attributes</a></dd>
   16340    <dd><code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code></dd>
   16341    <dt>DOM interface:</dt>
   16342    <dd>
   16343 <pre class=idl>interface <dfn id=htmlquoteelement>HTMLQuoteElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   16344            attribute DOMString <a href=#dom-quote-cite title=dom-quote-cite>cite</a>;
   16345 };</pre>
   16346     <p class=note>The <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> interface is
   16347     also used by the <code><a href=#the-q-element>q</a></code> element.</p>
   16348    </dd>
   16349   </dl><p>The <code><a href=#the-blockquote-element>blockquote</a></code> element <a href=#represents>represents</a> a
   16350   section that is quoted from another source.</p>
   16351 
   16352   <p>Content inside a <code><a href=#the-blockquote-element>blockquote</a></code> must be quoted from
   16353   another source, whose address, if it has one, may be cited in the
   16354   <dfn id=attr-blockquote-cite title=attr-blockquote-cite><code>cite</code></dfn>
   16355   attribute.</p>
   16356 
   16357   <p>If the <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code> attribute
   16358   is present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
   16359   spaces</a>. <span class=impl>To obtain the corresponding
   16360   citation link, the value of the attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element. User
   16361   agents should allow users to follow such citation links.</span></p>
   16362 
   16363   <div class=impl>
   16364 
   16365   <p>The <dfn id=dom-quote-cite title=dom-quote-cite><code>cite</code></dfn> IDL
   16366   attribute must <a href=#reflect>reflect</a> the element's <code title="">cite</code> content attribute.</p>
   16367 
   16368   </div>
   16369 
   16370   <div class=example>
   16371 
   16372    <p>This next example shows the use of <code><a href=#the-cite-element>cite</a></code> alongside
   16373    <code><a href=#the-blockquote-element>blockquote</a></code>:</p>
   16374 
   16375    <pre>&lt;p&gt;His next piece was the aptly named &lt;cite&gt;Sonnet 130&lt;/cite&gt;:&lt;/p&gt;
   16376 &lt;blockquote cite="http://quotes.example.org/s/sonnet130.html"&gt;
   16377   &lt;p&gt;My mistress' eyes are nothing like the sun,&lt;br&gt;
   16378   Coral is far more red, than her lips red,&lt;br&gt;
   16379   ...</pre>
   16380 
   16381   </div>
   16382 
   16383   <div class=example>
   16384 
   16385    <p>This example shows how a forum post could use
   16386    <code><a href=#the-blockquote-element>blockquote</a></code> to show what post a user is replying
   16387    to. The <code><a href=#the-article-element>article</a></code> element is used for each post, to mark
   16388    up the threading.</p>
   16389 
   16390    <pre>&lt;article&gt;
   16391  &lt;h1&gt;&lt;a href="http://bacon.example.com/?blog=109431"&gt;Bacon on a crowbar&lt;/a&gt;&lt;/h1&gt;
   16392  &lt;article&gt;
   16393   &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 12 points 1 hour ago&lt;/header&gt;
   16394   &lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;
   16395   &lt;footer&gt;&lt;a href="?pid=29578"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   16396   &lt;article&gt;
   16397    &lt;header&gt;&lt;strong&gt;greg&lt;/strong&gt; 8 points 1 hour ago&lt;/header&gt;
   16398    &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   16399    &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
   16400    &lt;footer&gt;&lt;a href="?pid=29579"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   16401    &lt;article&gt;
   16402     &lt;header&gt;&lt;strong&gt;t3yw&lt;/strong&gt; 15 points 1 hour ago&lt;/header&gt;
   16403     &lt;blockquote&gt;
   16404      &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   16405      &lt;p&gt;Dude narwhals don't eat bacon.&lt;/p&gt;
   16406     &lt;/blockquote&gt;
   16407     &lt;p&gt;Next thing you'll be saying they don't get capes and wizard
   16408     hats either!&lt;/p&gt;
   16409     &lt;footer&gt;&lt;a href="?pid=29580"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   16410     &lt;article&gt;
   16411      &lt;article&gt;
   16412       &lt;header&gt;&lt;strong&gt;boing&lt;/strong&gt; -5 points 1 hour ago&lt;/header&gt;
   16413       &lt;p&gt;narwhals are worse than ceiling cat&lt;/p&gt;
   16414       &lt;footer&gt;&lt;a href="?pid=29581"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   16415      &lt;/article&gt;
   16416     &lt;/article&gt;
   16417    &lt;/article&gt;
   16418   &lt;/article&gt;
   16419   &lt;article&gt;
   16420    &lt;header&gt;&lt;strong&gt;fred&lt;/strong&gt; 1 points 23 minutes ago&lt;/header&gt;
   16421    &lt;blockquote&gt;&lt;p&gt;I bet a narwhal would love that.&lt;/p&gt;&lt;/blockquote&gt;
   16422    &lt;p&gt;I bet they'd love to peel a banana too.&lt;/p&gt;
   16423    &lt;footer&gt;&lt;a href="?pid=29582"&gt;permalink&lt;/a&gt;&lt;/footer&gt;
   16424   &lt;/article&gt;
   16425  &lt;/article&gt;
   16426 &lt;/article&gt;</pre>
   16427 
   16428   </div>
   16429 
   16430   <p class=note><a href=#conversations>Examples of how to
   16431   represent a conversation</a> are shown in a later section; it is not
   16432   appropriate to use the <code><a href=#the-cite-element>cite</a></code> and <code><a href=#the-blockquote-element>blockquote</a></code>
   16433   elements for this purpose.</p>
   16434 
   16435 
   16436 
   16437   <h4 id=the-ol-element><span class=secno>4.5.5 </span>The <dfn><code>ol</code></dfn> element</h4>
   16438 
   16439   <dl class=element><dt>Categories</dt>
   16440    <dd><a href=#flow-content>Flow content</a>.</dd>
   16441    <dt>Contexts in which this element may be used:</dt>
   16442    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16443    <dt>Content model:</dt>
   16444    <dd>Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   16445    <dt>Content attributes:</dt>
   16446    <dd><a href=#global-attributes>Global attributes</a></dd>
   16447    <dd><code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code></dd>
   16448    <dd><code title=attr-ol-start><a href=#attr-ol-start>start</a></code></dd>
   16449    <dt>DOM interface:</dt>
   16450    <dd>
   16451 <pre class=idl>interface <dfn id=htmlolistelement>HTMLOListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   16452            attribute boolean <a href=#dom-ol-reversed title=dom-ol-reversed>reversed</a>;
   16453            attribute long <a href=#dom-ol-start title=dom-ol-start>start</a>;
   16454 };</pre>
   16455    </dd>
   16456   </dl><p>The <code><a href=#the-ol-element>ol</a></code> element <a href=#represents>represents</a> a list of
   16457   items, where the items have been intentionally ordered, such that
   16458   changing the order would change the meaning of the document.</p>
   16459 
   16460   <p>The items of the list are the <code><a href=#the-li-element>li</a></code> element child nodes
   16461   of the <code><a href=#the-ol-element>ol</a></code> element, in <a href=#tree-order>tree order</a>.</p>
   16462 
   16463   <p>The <dfn id=attr-ol-reversed title=attr-ol-reversed><code>reversed</code></dfn>
   16464   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
   16465   indicates that the list is a descending list (..., 3, 2, 1). If the
   16466   attribute is omitted, the list is an ascending list (1, 2, 3,
   16467   ...).</p>
   16468 
   16469   <p>The <dfn id=attr-ol-start title=attr-ol-start><code>start</code></dfn>
   16470   attribute, if present, must be a <a href=#valid-integer>valid integer</a> giving
   16471   the ordinal value of the first list item.</p>
   16472 
   16473   <div class=impl>
   16474 
   16475   <p>If the <code title=attr-ol-start><a href=#attr-ol-start>start</a></code> attribute is
   16476   present, user agents must <a href=#rules-for-parsing-integers title="rules for parsing
   16477   integers">parse it as an integer</a>, in order to determine the
   16478   attribute's value. The default value, used if the attribute is
   16479   missing or if the value cannot be converted to a number according to
   16480   the referenced algorithm, is 1 if the element has no <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute, and is the
   16481   number of child <code><a href=#the-li-element>li</a></code> elements otherwise.</p>
   16482 
   16483   <p>The first item in the list has the ordinal value given by the
   16484   <code><a href=#the-ol-element>ol</a></code> element's <code title=attr-ol-start><a href=#attr-ol-start>start</a></code>
   16485   attribute, unless that <code><a href=#the-li-element>li</a></code> element has a <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute with a value that can
   16486   be successfully parsed, in which case it has the ordinal value given
   16487   by that <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute.</p>
   16488 
   16489   <p>Each subsequent item in the list has the ordinal value given by
   16490   its <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute, if it has
   16491   one, or, if it doesn't, the ordinal value of the previous item, plus
   16492   one if the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> is absent,
   16493   or minus one if it is present.</p>
   16494 
   16495   <p>The <dfn id=dom-ol-reversed title=dom-ol-reversed><code>reversed</code></dfn> IDL
   16496   attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> content attribute.</p>
   16497 
   16498   <p>The <dfn id=dom-ol-start title=dom-ol-start><code>start</code></dfn> IDL
   16499   attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-ol-start><a href=#attr-ol-start>start</a></code> content attribute.</p>
   16500 
   16501   </div>
   16502 
   16503   <!-- v2: resuming numbering of lists from previous lists? -->
   16504 
   16505   <div class=example>
   16506 
   16507    <p>The following markup shows a list where the order matters, and
   16508    where the <code><a href=#the-ol-element>ol</a></code> element is therefore appropriate. Compare
   16509    this list to the equivalent list in the <code><a href=#the-ul-element>ul</a></code> section to
   16510    see an example of the same items using the <code><a href=#the-ul-element>ul</a></code>
   16511    element.</p>
   16512 
   16513    <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
   16514 I first lived there):&lt;/p&gt;
   16515 &lt;ol&gt;
   16516  &lt;li&gt;Switzerland
   16517  &lt;li&gt;United Kingdom
   16518  &lt;li&gt;United States
   16519  &lt;li&gt;Norway
   16520 &lt;/ol&gt;</pre>
   16521 
   16522    <p>Note how changing the order of the list changes the meaning of
   16523    the document. In the following example, changing the relative order
   16524    of the first two items has changed the birthplace of the
   16525    author:</p>
   16526 
   16527    <pre>&lt;p&gt;I have lived in the following countries (given in the order of when
   16528 I first lived there):&lt;/p&gt;
   16529 &lt;ol&gt;
   16530  &lt;li&gt;United Kingdom
   16531  &lt;li&gt;Switzerland
   16532  &lt;li&gt;United States
   16533  &lt;li&gt;Norway
   16534 &lt;/ol&gt;</pre>
   16535 
   16536   </div>
   16537 
   16538 
   16539   <h4 id=the-ul-element><span class=secno>4.5.6 </span>The <dfn><code>ul</code></dfn> element</h4>
   16540 
   16541   <dl class=element><dt>Categories</dt>
   16542    <dd><a href=#flow-content>Flow content</a>.</dd>
   16543    <dt>Contexts in which this element may be used:</dt>
   16544    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16545    <dt>Content model:</dt>
   16546    <dd>Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   16547    <dt>Content attributes:</dt>
   16548    <dd><a href=#global-attributes>Global attributes</a></dd>
   16549    <dt>DOM interface:</dt>
   16550    <dd>
   16551     <pre class=idl>interface <dfn id=htmlulistelement>HTMLUListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   16552    </dd>
   16553   </dl><p>The <code><a href=#the-ul-element>ul</a></code> element <a href=#represents>represents</a> a list of
   16554   items, where the order of the items is not important &mdash; that
   16555   is, where changing the order would not materially change the meaning
   16556   of the document.</p>
   16557 
   16558   <p>The items of the list are the <code><a href=#the-li-element>li</a></code> element child nodes
   16559   of the <code><a href=#the-ul-element>ul</a></code> element.</p>
   16560 
   16561   <div class=example>
   16562 
   16563    <p>The following markup shows a list where the order does not
   16564    matter, and where the <code><a href=#the-ul-element>ul</a></code> element is therefore
   16565    appropriate. Compare this list to the equivalent list in the
   16566    <code><a href=#the-ol-element>ol</a></code> section to see an example of the same items using
   16567    the <code><a href=#the-ol-element>ol</a></code> element.</p>
   16568 
   16569    <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
   16570 &lt;ul&gt;
   16571  &lt;li&gt;Norway
   16572  &lt;li&gt;Switzerland
   16573  &lt;li&gt;United Kingdom
   16574  &lt;li&gt;United States
   16575 &lt;/ul&gt;</pre>
   16576 
   16577    <p>Note that changing the order of the list does not change the
   16578    meaning of the document. The items in the snippet above are given
   16579    in alphabetical order, but in the snippet below they are given in
   16580    order of the size of their current account balance in 2007, without
   16581    changing the meaning of the document whatsoever:</p>
   16582 
   16583    <pre>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
   16584 &lt;ul&gt;
   16585  &lt;li&gt;Switzerland
   16586  &lt;li&gt;Norway
   16587  &lt;li&gt;United Kingdom
   16588  &lt;li&gt;United States
   16589 &lt;/ul&gt;</pre>
   16590 
   16591   </div>
   16592 
   16593 
   16594   <h4 id=the-li-element><span class=secno>4.5.7 </span>The <dfn><code>li</code></dfn> element</h4>
   16595 
   16596   <dl class=element><dt>Categories</dt>
   16597    <dd>None.</dd>
   16598    <dt>Contexts in which this element may be used:</dt>
   16599    <dd>Inside <code><a href=#the-ol-element>ol</a></code> elements.</dd>
   16600    <dd>Inside <code><a href=#the-ul-element>ul</a></code> elements.</dd>
   16601    <dd>Inside <code><a href=#menus>menu</a></code> elements.</dd>
   16602    <dt>Content model:</dt>
   16603    <dd><a href=#flow-content>Flow content</a>.</dd>
   16604    <dt>Content attributes:</dt>
   16605    <dd><a href=#global-attributes>Global attributes</a></dd>
   16606    <dd>If the element is a child of an <code><a href=#the-ol-element>ol</a></code> element: <code title=attr-li-value><a href=#attr-li-value>value</a></code></dd>
   16607    <dt>DOM interface:</dt>
   16608    <dd>
   16609 <pre class=idl>interface <dfn id=htmllielement>HTMLLIElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   16610            attribute long <a href=#dom-li-value title=dom-li-value>value</a>;
   16611 };</pre>
   16612    </dd>
   16613   </dl><p>The <code><a href=#the-li-element>li</a></code> element <a href=#represents>represents</a> a list
   16614   item. If its parent element is an <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-ul-element>ul</a></code>,
   16615   or <code><a href=#menus>menu</a></code> element, then the element is an item of the
   16616   parent element's list, as defined for those elements. Otherwise, the
   16617   list item has no defined list-related relationship to any other
   16618   <code><a href=#the-li-element>li</a></code> element.</p>
   16619 
   16620   <p>The <dfn id=attr-li-value title=attr-li-value><code>value</code></dfn>
   16621   attribute, if present, must be a <a href=#valid-integer>valid integer</a> giving
   16622   the ordinal value of the list item.</p>
   16623 
   16624   <div class=impl>
   16625 
   16626   <p>If the <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute is
   16627   present, user agents must <a href=#rules-for-parsing-integers title="rules for parsing
   16628   integers">parse it as an integer</a>, in order to determine the
   16629   attribute's value. If the attribute's value cannot be converted to a
   16630   number, the attribute must be treated as if it was absent. The
   16631   attribute has no default value.</p>
   16632 
   16633   <p>The <code title=attr-li-value><a href=#attr-li-value>value</a></code> attribute is
   16634   processed relative to the element's parent <code><a href=#the-ol-element>ol</a></code> element
   16635   (q.v.), if there is one. If there is not, the attribute has no
   16636   effect.</p>
   16637 
   16638   <p>The <dfn id=dom-li-value title=dom-li-value><code>value</code></dfn> IDL
   16639   attribute must <a href=#reflect>reflect</a> the value of the <code title=dom-li-value><a href=#dom-li-value>value</a></code> content attribute.</p>
   16640 
   16641   </div>
   16642 
   16643   <div class=example>
   16644    <p>The following example, the top ten movies are listed (in reverse
   16645    order). Note the way the list is given a title by using a
   16646    <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-figcaption-element>figcaption</a></code>
   16647    element.</p>
   16648    <pre>&lt;figure&gt;
   16649  &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
   16650  &lt;ol&gt;
   16651   &lt;li value="10"&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
   16652   &lt;li value="9"&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
   16653   &lt;li value="8"&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
   16654   &lt;li value="7"&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
   16655   &lt;li value="6"&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
   16656   &lt;li value="5"&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
   16657   &lt;li value="4"&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
   16658   &lt;li value="3"&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
   16659   &lt;li value="2"&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
   16660   &lt;li value="1"&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
   16661  &lt;/ol&gt;
   16662 &lt;/figure&gt;</pre>
   16663 
   16664    <p>The markup could also be written as follows, using the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute on the
   16665    <code><a href=#the-ol-element>ol</a></code> element:</p>
   16666 
   16667    <pre>&lt;figure&gt;
   16668  &lt;figcaption&gt;The top 10 movies of all time&lt;/figcaption&gt;
   16669  &lt;ol reversed&gt;
   16670   &lt;li&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
   16671   &lt;li&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
   16672   &lt;li&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
   16673   &lt;li&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
   16674   &lt;li&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
   16675   &lt;li&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
   16676   &lt;li&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
   16677   &lt;li&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
   16678   &lt;li&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
   16679   &lt;li&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
   16680  &lt;/ol&gt;
   16681 &lt;/figure&gt;</pre>
   16682   </div>
   16683 
   16684   <p class=note>If the <code><a href=#the-li-element>li</a></code> element is the child of a
   16685   <code><a href=#menus>menu</a></code> element and itself has a child that defines a
   16686   <a href=#concept-command title=concept-command>command</a>, then the
   16687   <code><a href=#the-li-element>li</a></code> element will match the <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> and <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-classes in the
   16688   same way as the first such child element does.</p>
   16689 
   16690 
   16691 
   16692   <h4 id=the-dl-element><span class=secno>4.5.8 </span>The <dfn><code>dl</code></dfn> element</h4>
   16693 
   16694   <dl class=element><dt>Categories</dt>
   16695    <dd><a href=#flow-content>Flow content</a>.</dd>
   16696    <dt>Contexts in which this element may be used:</dt>
   16697    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16698    <dt>Content model:</dt>
   16699    <dd>Zero or more groups each consisting of one or more
   16700    <code><a href=#the-dt-element>dt</a></code> elements followed by one or more <code><a href=#the-dd-element>dd</a></code>
   16701    elements.</dd>
   16702    <dt>Content attributes:</dt>
   16703    <dd><a href=#global-attributes>Global attributes</a></dd>
   16704    <dt>DOM interface:</dt>
   16705    <dd>
   16706     <pre class=idl>interface <dfn id=htmldlistelement>HTMLDListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   16707    </dd>
   16708   </dl><p>The <code><a href=#the-dl-element>dl</a></code> element <a href=#represents>represents</a> an
   16709   association list consisting of zero or more name-value groups (a
   16710   description list). Each group must consist of one or more names
   16711   (<code><a href=#the-dt-element>dt</a></code> elements) followed by one or more values
   16712   (<code><a href=#the-dd-element>dd</a></code> elements). Within a single <code><a href=#the-dl-element>dl</a></code> element,
   16713   there should not be more than one <code><a href=#the-dt-element>dt</a></code> element for each
   16714   name.</p>
   16715 
   16716   <p>Name-value groups may be terms and definitions, metadata topics
   16717   and values, or any other groups of name-value data.</p>
   16718 
   16719   <p>The values within a group are alternatives; multiple paragraphs
   16720   forming part of the same value must all be given within the same
   16721   <code><a href=#the-dd-element>dd</a></code> element.</p>
   16722 
   16723   <p>The order of the list of groups, and of the names and values
   16724   within each group, may be significant.</p>
   16725 
   16726   <div class=impl>
   16727 
   16728   <p>If a <code><a href=#the-dl-element>dl</a></code> element is empty, it contains no groups.</p>
   16729 
   16730   <p>If a <code><a href=#the-dl-element>dl</a></code> element contains non-<a href=#inter-element-whitespace title="inter-element whitespace">whitespace</a> <a href=#text-node title="text
   16731   node">text nodes</a>, or elements other than <code><a href=#the-dt-element>dt</a></code> and
   16732   <code><a href=#the-dd-element>dd</a></code>, then those elements or <a href=#text-node title="text node">text
   16733   nodes</a> do not form part of any groups in that
   16734   <code><a href=#the-dl-element>dl</a></code>.</p>
   16735 
   16736   <p>If a <code><a href=#the-dl-element>dl</a></code> element contains only <code><a href=#the-dt-element>dt</a></code>
   16737   elements, then it consists of one group with names but no
   16738   values.</p>
   16739 
   16740   <p>If a <code><a href=#the-dl-element>dl</a></code> element contains only <code><a href=#the-dd-element>dd</a></code>
   16741   elements, then it consists of one group with values but no
   16742   names.</p>
   16743 
   16744   <p>If a <code><a href=#the-dl-element>dl</a></code> element starts with one or more
   16745   <code><a href=#the-dd-element>dd</a></code> elements, then the first group has no associated
   16746   name.</p>
   16747 
   16748   <p>If a <code><a href=#the-dl-element>dl</a></code> element ends with one or more
   16749   <code><a href=#the-dt-element>dt</a></code> elements, then the last group has no associated
   16750   value.</p>
   16751 
   16752   <p class=note>When a <code><a href=#the-dl-element>dl</a></code> element doesn't match its
   16753   content model, it is often due to accidentally using <code><a href=#the-dd-element>dd</a></code>
   16754   elements in the place of <code><a href=#the-dt-element>dt</a></code> elements and vice
   16755   versa. Conformance checkers can spot such mistakes and might be able
   16756   to advise authors how to correctly use the markup.</p>
   16757 
   16758   </div>
   16759 
   16760   <div class=example>
   16761    <p>In the following example, one entry ("Authors") is linked to two
   16762    values ("John" and "Luke").</p>
   16763    <pre>&lt;dl&gt;
   16764  &lt;dt&gt; Authors
   16765  &lt;dd&gt; John
   16766  &lt;dd&gt; Luke
   16767  &lt;dt&gt; Editor
   16768  &lt;dd&gt; Frank
   16769 &lt;/dl&gt;</pre>
   16770   </div>
   16771 
   16772   <div class=example>
   16773    <p>In the following example, one definition is linked to two
   16774    terms.</p>
   16775    <pre>&lt;dl&gt;
   16776  &lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
   16777  &lt;dt lang="en-GB"&gt; &lt;dfn&gt;colour&lt;/dfn&gt; &lt;/dt&gt;
   16778  &lt;dd&gt; A sensation which (in humans) derives from the ability of
   16779  the fine structure of the eye to distinguish three differently
   16780  filtered analyses of a view. &lt;/dd&gt;
   16781 &lt;/dl&gt;</pre>
   16782   </div>
   16783 
   16784   <div class=example>
   16785    <p>The following example illustrates the use of the <code><a href=#the-dl-element>dl</a></code>
   16786    element to mark up metadata of sorts. At the end of the example,
   16787    one group has two metadata labels ("Authors" and "Editors") and two
   16788    values ("Robert Rothman" and "Daniel Jackson").</p>
   16789    <pre>&lt;dl&gt;
   16790  &lt;dt&gt; Last modified time &lt;/dt&gt;
   16791  &lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
   16792  &lt;dt&gt; Recommended update interval &lt;/dt&gt;
   16793  &lt;dd&gt; 60s &lt;/dd&gt;
   16794  &lt;dt&gt; Authors &lt;/dt&gt;
   16795  &lt;dt&gt; Editors &lt;/dt&gt;
   16796  &lt;dd&gt; Robert Rothman &lt;/dd&gt;
   16797  &lt;dd&gt; Daniel Jackson &lt;/dd&gt;
   16798 &lt;/dl&gt;</pre>
   16799   </div>
   16800 
   16801   <div class=example>
   16802 
   16803    <p>The following example shows the <code><a href=#the-dl-element>dl</a></code> element used to
   16804    give a set of instructions. The order of the instructions here is
   16805    important (in the other examples, the order of the blocks was not
   16806    important).</p>
   16807 
   16808    <pre>&lt;p&gt;Determine the victory points as follows (use the
   16809 first matching case):&lt;/p&gt;
   16810 &lt;dl&gt;
   16811  &lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt;
   16812  &lt;dd&gt; You get five victory points &lt;/dd&gt;
   16813  &lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt;
   16814  &lt;dd&gt; You get two victory points &lt;/dd&gt;
   16815  &lt;dt&gt; If you have one or more silver coins &lt;/dt&gt;
   16816  &lt;dd&gt; You get one victory point &lt;/dd&gt;
   16817  &lt;dt&gt; Otherwise &lt;/dt&gt;
   16818  &lt;dd&gt; You get no victory points &lt;/dd&gt;
   16819 &lt;/dl&gt;</pre>
   16820   </div>
   16821 
   16822   <div class=example>
   16823    <p>The following snippet shows a <code><a href=#the-dl-element>dl</a></code> element being used
   16824    as a glossary. Note the use of <code><a href=#the-dfn-element>dfn</a></code> to indicate the
   16825    word being defined.</p>
   16826    <pre>&lt;dl&gt;
   16827  &lt;dt&gt;&lt;dfn&gt;Apartment&lt;/dfn&gt;, n.&lt;/dt&gt;
   16828  &lt;dd&gt;An execution context grouping one or more threads with one or
   16829  more COM objects.&lt;/dd&gt;
   16830  &lt;dt&gt;&lt;dfn&gt;Flat&lt;/dfn&gt;, n.&lt;/dt&gt;
   16831  &lt;dd&gt;A deflated tire.&lt;/dd&gt;
   16832  &lt;dt&gt;&lt;dfn&gt;Home&lt;/dfn&gt;, n.&lt;/dt&gt;
   16833  &lt;dd&gt;The user's login directory.&lt;/dd&gt;
   16834 &lt;/dl&gt;</pre>
   16835   </div>
   16836 
   16837   <p class=note>The <code><a href=#the-dl-element>dl</a></code> element is inappropriate for
   16838   marking up dialogue. <a href=#conversations>Examples of how to
   16839   mark up dialogue</a> are shown below.</p>
   16840 
   16841 
   16842 
   16843   <h4 id=the-dt-element><span class=secno>4.5.9 </span>The <dfn><code>dt</code></dfn> element</h4>
   16844 
   16845   <dl class=element><dt>Categories</dt>
   16846    <dd>None.</dd>
   16847    <dt>Contexts in which this element may be used:</dt>
   16848    <dd>Before <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
   16849    <dt>Content model:</dt>
   16850    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   16851    <dt>Content attributes:</dt>
   16852    <dd><a href=#global-attributes>Global attributes</a></dd>
   16853    <dt>DOM interface:</dt>
   16854    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   16855   </dl><p>The <code><a href=#the-dt-element>dt</a></code> element <a href=#represents>represents</a> the term, or
   16856   name, part of a term-description group in a description list
   16857   (<code><a href=#the-dl-element>dl</a></code> element).</p>
   16858 
   16859   <p class=note>The <code><a href=#the-dt-element>dt</a></code> element itself, when used in a
   16860   <code><a href=#the-dl-element>dl</a></code> element, does not indicate that its contents are a
   16861   term being defined, but this can be indicated using the
   16862   <code><a href=#the-dfn-element>dfn</a></code> element.</p>
   16863 
   16864   <div class=example>
   16865 
   16866    <p>This example shows a list of frequently asked questions (a FAQ)
   16867    marked up using the <code><a href=#the-dt-element>dt</a></code> element for questions and the
   16868    <code><a href=#the-dd-element>dd</a></code> element for answers.</p>
   16869 
   16870    <pre>&lt;article&gt;
   16871  &lt;h1&gt;FAQ&lt;/h1&gt;
   16872  &lt;dl&gt;
   16873   &lt;dt&gt;What do we want?&lt;/dt&gt;
   16874   &lt;dd&gt;Our data.&lt;/dd&gt;
   16875   &lt;dt&gt;When do we want it?&lt;/dt&gt;
   16876   &lt;dd&gt;Now.&lt;/dd&gt;
   16877   &lt;dt&gt;Where is it?&lt;/dt&gt;
   16878   &lt;dd&gt;We are not sure.&lt;/dd&gt;
   16879  &lt;/dl&gt;
   16880 &lt;/article&gt;</pre>
   16881 
   16882   </div>
   16883 
   16884 
   16885 
   16886   <h4 id=the-dd-element><span class=secno>4.5.10 </span>The <dfn><code>dd</code></dfn> element</h4>
   16887 
   16888   <dl class=element><dt>Categories</dt>
   16889    <dd>None.</dd>
   16890    <dt>Contexts in which this element may be used:</dt>
   16891    <dd>After <code><a href=#the-dt-element>dt</a></code> or <code><a href=#the-dd-element>dd</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
   16892    <dt>Content model:</dt>
   16893    <dd><a href=#flow-content>Flow content</a>.</dd>
   16894    <dt>Content attributes:</dt>
   16895    <dd><a href=#global-attributes>Global attributes</a></dd>
   16896    <dt>DOM interface:</dt>
   16897    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   16898   </dl><p>The <code><a href=#the-dd-element>dd</a></code> element <a href=#represents>represents</a> the
   16899   description, definition, or value, part of a term-description group
   16900   in a description list (<code><a href=#the-dl-element>dl</a></code> element).</p>
   16901 
   16902   <div class=example>
   16903 
   16904    <p>A <code><a href=#the-dl-element>dl</a></code> can be used to define a vocabulary list, like
   16905    in a dictionary. In the following example, each entry, given by a
   16906    <code><a href=#the-dt-element>dt</a></code> with a <code><a href=#the-dfn-element>dfn</a></code>, has several
   16907    <code><a href=#the-dd-element>dd</a></code>s, showing the various parts of the definition.</p>
   16908 
   16909    <!-- the actual pronunciations below are nonsense. -->
   16910    <pre>&lt;dl&gt;
   16911  &lt;dt&gt;&lt;dfn&gt;happiness&lt;/dfn&gt;&lt;/dt&gt;
   16912  &lt;dd class="pronunciation"&gt;/'h&aelig; p. nes/&lt;/dd&gt;
   16913  &lt;dd class="part-of-speech"&gt;&lt;i&gt;&lt;abbr&gt;n.&lt;/abbr&gt;&lt;/i&gt;&lt;/dd&gt;
   16914  &lt;dd&gt;The state of being happy.&lt;/dd&gt;
   16915  &lt;dd&gt;Good fortune; success. &lt;q&gt;Oh &lt;b&gt;happiness&lt;/b&gt;! It worked!&lt;/q&gt;&lt;/dd&gt;
   16916  &lt;dt&gt;&lt;dfn&gt;rejoice&lt;/dfn&gt;&lt;/dt&gt;
   16917  &lt;dd class="pronunciation"&gt;/ri jois'/&lt;/dd&gt;
   16918  &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.intr.&lt;/abbr&gt;&lt;/i&gt; To be delighted oneself.&lt;/dd&gt;
   16919  &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.tr.&lt;/abbr&gt;&lt;/i&gt; To cause one to be delighted.&lt;/dd&gt;
   16920 &lt;/dl&gt;</pre>
   16921   </div>
   16922 
   16923 
   16924   <h4 id=the-figure-element><span class=secno>4.5.11 </span>The <dfn><code>figure</code></dfn> element</h4>
   16925 
   16926   <dl class=element><dt>Categories</dt>
   16927    <dd><a href=#flow-content>Flow content</a>.</dd>
   16928    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   16929    <dt>Contexts in which this element may be used:</dt>
   16930    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   16931    <dt>Content model:</dt>
   16932    <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
   16933    <dd>Or: <a href=#flow-content>Flow content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
   16934    <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
   16935    <dt>Content attributes:</dt>
   16936    <dd><a href=#global-attributes>Global attributes</a></dd>
   16937    <dt>DOM interface:</dt>
   16938    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   16939   </dl><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
   16940   <a href=#flow-content>flow content</a>, optionally with a caption, that is
   16941   self-contained and is typically referenced as a single unit from the
   16942   main flow of the document.</p>
   16943 
   16944   <p>The element can thus be used to annotate illustrations, diagrams,
   16945   photos, code listings, etc, that are referred to from the main
   16946   content of the document, but that could, without affecting the flow
   16947   of the document, be moved away from that primary content, e.g. to
   16948   the side of the page, to dedicated pages, or to an appendix.</p>
   16949 
   16950   <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</a></code>
   16951   element child of the element, if any, represents the caption of the
   16952   <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
   16953   <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>
   16954 
   16955   <div class=example>
   16956 
   16957    <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
   16958    code listing.</p>
   16959 
   16960    <pre>&lt;p&gt;In &lt;a href="#l4"&gt;listing 4&lt;/a&gt; we see the primary core interface
   16961 API declaration.&lt;/p&gt;
   16962 &lt;figure id="l4"&gt;
   16963  &lt;figcaption&gt;Listing 4. The primary core interface API declaration.&lt;/figcaption&gt;
   16964  &lt;pre&gt;&lt;code&gt;interface PrimaryCore {
   16965  boolean verifyDataLine();
   16966  void sendData(in sequence&amp;lt;byte&gt; data);
   16967  void initSelfDestruct();
   16968 }&lt;/code&gt;&lt;/pre&gt;
   16969 &lt;/figure&gt;
   16970 &lt;p&gt;The API is designed to use UTF-8.&lt;/p&gt;</pre>
   16971 
   16972   </div>
   16973 
   16974   <div class=example>
   16975 
   16976    <p>Here we see a <code><a href=#the-figure-element>figure</a></code> element to mark up a
   16977    photo.</p>
   16978 
   16979    <pre>&lt;figure&gt;
   16980  &lt;img src="bubbles-work.jpeg"
   16981       alt="Bubbles, sitting in his office chair, works on his
   16982            latest project intently."&gt;
   16983  &lt;figcaption&gt;Bubbles at work&lt;/figcaption&gt;
   16984 &lt;/figure&gt;</pre>
   16985 
   16986   </div>
   16987 
   16988   <div class=example>
   16989 
   16990    <p>In this example, we see an image that is <em>not</em>
   16991    a figure, as well as an image and a video that are.</p>
   16992 
   16993    <pre>&lt;h2&gt;Malinko's comics&lt;/h2&gt;
   16994 
   16995 &lt;p&gt;This case centered on some sort of "intellectual property"
   16996 infringement related to a comic (see Exhibit A). The suit started
   16997 after a trailer ending with these words:
   16998 
   16999 &lt;blockquote&gt;
   17000  &lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"&gt;
   17001 &lt;/blockquote&gt;
   17002 
   17003 &lt;p&gt;...was aired. A lawyer, armed with a Bigger Notebook, launched a
   17004 preemptive strike using snowballs. A complete copy of the trailer is
   17005 included with Exhibit B.
   17006 
   17007 &lt;figure&gt;
   17008  &lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."&gt;
   17009  &lt;figcaption&gt;Exhibit A. The alleged &lt;cite&gt;rough copy&lt;/cite&gt; comic.&lt;/figcaption&gt;
   17010 &lt;/figure&gt;
   17011 
   17012 &lt;figure&gt;
   17013  &lt;video src="ex-b.mov"&gt;&lt;/video&gt;
   17014  &lt;figcaption&gt;Exhibit B. The &lt;cite&gt;Rough Copy&lt;/cite&gt; trailer.&lt;/figcaption&gt;
   17015 &lt;/figure&gt;
   17016 
   17017 &lt;p&gt;The case was resolved out of court.</pre>
   17018 
   17019   </div>
   17020 
   17021   <div class=example>
   17022 
   17023    <p>Here, a part of a poem is marked up using
   17024    <code><a href=#the-figure-element>figure</a></code>.</p>
   17025 
   17026    <pre>&lt;figure&gt;
   17027  &lt;p&gt;'Twas brillig, and the slithy toves&lt;br&gt;
   17028  Did gyre and gimble in the wabe;&lt;br&gt;
   17029  All mimsy were the borogoves,&lt;br&gt;
   17030  And the mome raths outgrabe.&lt;/p&gt;
   17031  &lt;figcaption&gt;&lt;cite&gt;Jabberwocky&lt;/cite&gt; (first verse). Lewis Carroll, 1832-98&lt;/figcaption&gt;
   17032 &lt;/figure&gt;</pre>
   17033 
   17034   </div>
   17035 
   17036   <div class=example>
   17037 
   17038    <p>In this example, which could be part of a much larger work
   17039    discussing a castle, the figure has three images in it.</p>
   17040 
   17041    <pre>&lt;figure&gt;
   17042  &lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
   17043       alt="The castle has one tower, and a tall wall around it."&gt;
   17044  &lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
   17045       alt="The castle now has two towers and two walls."&gt;
   17046  &lt;img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
   17047       alt="The castle lies in ruins, the original tower all that remains in one piece."&gt;
   17048  &lt;figcaption&gt;The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/figcaption&gt;
   17049 &lt;/figure&gt;</pre>
   17050 
   17051   </div>
   17052 
   17053 
   17054   <h4 id=the-figcaption-element><span class=secno>4.5.12 </span>The <dfn><code>figcaption</code></dfn> element</h4>
   17055 
   17056   <dl class=element><dt>Categories</dt>
   17057    <dd>None.</dd>
   17058    <dt>Contexts in which this element may be used:</dt>
   17059    <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
   17060    <dt>Content model:</dt>
   17061    <dd><a href=#flow-content>Flow content</a>.</dd>
   17062    <dt>Content attributes:</dt>
   17063    <dd><a href=#global-attributes>Global attributes</a></dd>
   17064    <dt>DOM interface:</dt>
   17065    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17066   </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
   17067   caption or legend for the rest of the contents of the
   17068   <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
   17069   element<span class=impl>, if any</span>.</p>
   17070 
   17071 
   17072 
   17073   <h4 id=the-div-element><span class=secno>4.5.13 </span>The <dfn><code>div</code></dfn> element</h4>
   17074 
   17075   <dl class=element><dt>Categories</dt>
   17076    <dd><a href=#flow-content>Flow content</a>.</dd>
   17077    <dd><a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>.</dd>
   17078    <dt>Contexts in which this element may be used:</dt>
   17079    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   17080    <dt>Content model:</dt>
   17081    <dd><a href=#flow-content>Flow content</a>.</dd>
   17082    <dt>Content attributes:</dt>
   17083    <dd><a href=#global-attributes>Global attributes</a></dd>
   17084    <dt>DOM interface:</dt>
   17085    <dd>
   17086     <pre class=idl>interface <dfn id=htmldivelement>HTMLDivElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   17087    </dd>
   17088   </dl><p>The <code><a href=#the-div-element>div</a></code> element has no special meaning at all. It
   17089   <a href=#represents>represents</a> its children. It can be used with the <code title=attr-class><a href=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, and <code title=attr-title><a href=#the-title-attribute>title</a></code> attributes to mark up semantics
   17090   common to a group of consecutive elements.</p>
   17091 
   17092   <p class=note>Authors are strongly encouraged to view the
   17093   <code><a href=#the-div-element>div</a></code> element as an element of last resort, for when no
   17094   other element is suitable. Use of the <code><a href=#the-div-element>div</a></code> element
   17095   instead of more appropriate elements leads to poor accessibility for
   17096   readers and poor maintainability for authors.</p>
   17097 
   17098   <div class=example>
   17099 
   17100    <p>For example, a blog post would be marked up using
   17101    <code><a href=#the-article-element>article</a></code>, a chapter using <code><a href=#the-section-element>section</a></code>, a
   17102    page's navigation aids using <code><a href=#the-nav-element>nav</a></code>, and a group of form
   17103    controls using <code><a href=#the-fieldset-element>fieldset</a></code>.</p>
   17104 
   17105    <p>On the other hand, <code><a href=#the-div-element>div</a></code> elements can be useful for
   17106    stylistic purposes or to wrap multiple paragraphs within a section
   17107    that are all to be annotated in a similar way. In the following
   17108    example, we see <code><a href=#the-div-element>div</a></code> elements used as a way to set the
   17109    language of two paragraphs at once, instead of setting the language
   17110    on the two paragraph elements separately:</p>
   17111 
   17112    <pre>&lt;article lang="en-US"&gt;
   17113  &lt;h1&gt;My use of language and my cats&lt;/h1&gt;
   17114  &lt;p&gt;My cat's behavior hasn't changed much since her absence, except
   17115  that she plays her new physique to the neighbors regularly, in an
   17116  attempt to get pets.&lt;/p&gt;
   17117  &lt;div lang="en-GB"&gt;
   17118   &lt;p&gt;My other cat, coloured black and white, is a sweetie. He followed
   17119   us to the pool today, walking down the pavement with us. Yesterday
   17120   he apparently visited our neighbours. I wonder if he recognises that
   17121   their flat is a mirror image of ours.&lt;/p&gt;
   17122   &lt;p&gt;Hm, I just noticed that in the last paragraph I used British
   17123   English. But I'm supposed to write in American English. So I
   17124   shouldn't say "pavement" or "flat" or "colour"...&lt;/p&gt;
   17125  &lt;/div&gt;
   17126  &lt;p&gt;I should say "sidewalk" and "apartment" and "color"!&lt;/p&gt;
   17127 &lt;/article&gt;</pre>
   17128 
   17129   </div>
   17130 
   17131 
   17132   <h3 id=text-level-semantics><span class=secno>4.6 </span>Text-level semantics</h3>
   17133 
   17134   <h4 id=the-a-element><span class=secno>4.6.1 </span>The <dfn><code>a</code></dfn> element</h4>
   17135 
   17136   <dl class=element><dt>Categories</dt>
   17137    <dd><a href=#flow-content>Flow content</a>.</dd>
   17138    <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   17139    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   17140    <dt>Contexts in which this element may be used:</dt>
   17141    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17142    <dt>Content model:</dt>
   17143    <dd><a href=#transparent>Transparent</a>, but there must be no <a href=#interactive-content>interactive content</a> descendant.</dd>
   17144    <dt>Content attributes:</dt>
   17145    <dd><a href=#global-attributes>Global attributes</a></dd>
   17146    <dd><code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dd>
   17147    <dd><code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code></dd>
   17148 <!--PING-->
   17149    <dd><code title=attr-hyperlink-ping><a href=#ping>ping</a></code></dd>
   17150 <!--PING-->
   17151    <dd><code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code></dd>
   17152    <dd><code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code></dd>
   17153    <dd><code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code></dd>
   17154    <dd><code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></dd>
   17155    <dt>DOM interface:</dt>
   17156    <dd>
   17157 <pre class=idl>interface <dfn id=htmlanchorelement>HTMLAnchorElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   17158   stringifier attribute DOMString <a href=#dom-a-href title=dom-a-href>href</a>;
   17159            attribute DOMString <a href=#dom-a-target title=dom-a-target>target</a>;
   17160 <!--PING-->
   17161            attribute DOMString <a href=#dom-a-ping title=dom-a-ping>ping</a>;
   17162 <!--PING-->
   17163            attribute DOMString <a href=#dom-a-rel title=dom-a-rel>rel</a>;
   17164   readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-a-rellist title=dom-a-relList>relList</a>;
   17165            attribute DOMString <a href=#dom-a-media title=dom-a-media>media</a>;
   17166            attribute DOMString <a href=#dom-a-hreflang title=dom-a-hreflang>hreflang</a>;
   17167            attribute DOMString <a href=#dom-a-type title=dom-a-type>type</a>;
   17168 
   17169            attribute DOMString <a href=#dom-a-text title=dom-a-text>text</a>;
   17170 
   17171   // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>
   17172            attribute DOMString <a href=#dom-a-protocol title=dom-a-protocol>protocol</a>;
   17173            attribute DOMString <a href=#dom-a-host title=dom-a-host>host</a>;
   17174            attribute DOMString <a href=#dom-a-hostname title=dom-a-hostname>hostname</a>;
   17175            attribute DOMString <a href=#dom-a-port title=dom-a-port>port</a>;
   17176            attribute DOMString <a href=#dom-a-pathname title=dom-a-pathname>pathname</a>;
   17177            attribute DOMString <a href=#dom-a-search title=dom-a-search>search</a>;
   17178            attribute DOMString <a href=#dom-a-hash title=dom-a-hash>hash</a>;
   17179 };</pre>
   17180    </dd>
   17181   </dl><p>If the <code><a href=#the-a-element>a</a></code> element has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then it
   17182   <a href=#represents>represents</a> a <a href=#hyperlink>hyperlink</a> (a hypertext
   17183   anchor).</p>
   17184 
   17185   <!-- v2: Eric Meyer requests the ability to nest links so that a big
   17186   hyperlink, e.g. representing a calendar event, can be clickable,
   17187   while within it there are subareas that represent links to distinct
   17188   areas, e.g. a link to see photos of the event, or to edit the event,
   17189   or some such. -->
   17190 
   17191   <p>If the <code><a href=#the-a-element>a</a></code> element has no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the element
   17192   <a href=#represents>represents</a> a placeholder for where a link might
   17193   otherwise have been placed, if it had been relevant.</p>
   17194 
   17195   <p>The <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>,
   17196 <!--PING-->
   17197   <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>,
   17198 <!--PING-->
   17199   <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes must be omitted
   17200   if the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute is
   17201   not present.</p>
   17202 
   17203   <div class=example>
   17204    <p>If a site uses a consistent navigation toolbar on every page,
   17205    then the link that would normally link to the page itself could be
   17206    marked up using an <code><a href=#the-a-element>a</a></code> element:</p>
   17207    <pre>&lt;nav&gt;
   17208  &lt;ul&gt;
   17209   &lt;li&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/li&gt;
   17210   &lt;li&gt; &lt;a href="/news"&gt;News&lt;/a&gt; &lt;/li&gt;
   17211   &lt;li&gt; &lt;a&gt;Examples&lt;/a&gt; &lt;/li&gt;
   17212   &lt;li&gt; &lt;a href="/legal"&gt;Legal&lt;/a&gt; &lt;/li&gt;
   17213  &lt;/ul&gt;
   17214 &lt;/nav&gt;</pre>
   17215   </div>
   17216 
   17217   <div class=impl>
   17218 
   17219   <p>The <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>, <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>
   17220 <!--PING-->
   17221   and <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
   17222 <!--PING-->
   17223   attributes affect what
   17224   happens when users <a href=#following-hyperlinks title="following hyperlinks">follow
   17225   hyperlinks</a> created using the <code><a href=#the-a-element>a</a></code> element.  The
   17226   <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes may be used to
   17227   indicate to the user the likely nature of the target resource before
   17228   the user follows the link.</p>
   17229 
   17230   <p>The <a href=#activation-behavior>activation behavior</a> of <code><a href=#the-a-element>a</a></code> elements
   17231   that represent <a href=#hyperlink title=hyperlink>hyperlinks</a> is to run
   17232   the following steps:</p>
   17233 
   17234   <ol><li><p>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   17235    event in question is not <a href=#concept-events-trusted title=concept-events-trusted>trusted</a> (i.e. a <code title=dom-click><a href=#dom-click>click()</a></code> method call was the reason for the
   17236    event being dispatched), and the <code><a href=#the-a-element>a</a></code> element's <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute is such that
   17237    applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
   17238    browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
   17239    browsing context name, would result in there not being a chosen
   17240    browsing context, then raise an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
   17241    exception and abort these steps.</li>
   17242 
   17243    <li><p>If the target of the <code title=event-click><a href=#event-click>click</a></code>
   17244    event is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attribute specified, then
   17245    server-side image map processing must be performed, as follows:</p>
   17246 
   17247     <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A...%3Ca%20href%3D%22%23%22%3E%3Cimg%20ismap%20usemap%3D%22%23a%22%20src%3D/resources/images/smallcats%3E%3C/a%3E%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Drect%20coords%3D0%2C0%2C50%2C50%20href%3Db%3E%3C/map%3E --><li>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   17248      event was dispatched as the result of a real
   17249      pointing-device-triggered <code title=event-click><a href=#event-click>click</a></code>
   17250      event on the <code><a href=#the-img-element>img</a></code> element, then let <var title="">x</var> be the distance in CSS pixels from the left edge
   17251      of the image's left border, if it has one, or the left edge of
   17252      the image otherwise, to the location of the click, and let <var title="">y</var> be the distance in CSS pixels from the top edge
   17253      of the image's top border, if it has one, or the top edge of the
   17254      image otherwise, to the location of the click. Otherwise, let
   17255      <var title="">x</var> and <var title="">y</var> be zero.</li>
   17256 
   17257      <li>Let the <dfn id=hyperlink-suffix><var>hyperlink suffix</var></dfn> be a U+003F
   17258      QUESTION MARK character, the value of <var title="">x</var>
   17259      expressed as a base-ten integer using ASCII digits, a U+002C
   17260      COMMA character (,), and the value of <var title="">y</var>
   17261      expressed as a base-ten integer using ASCII digits. ASCII digits
   17262      are the characters in the range U+0030 DIGIT ZERO (0) to U+0039
   17263      DIGIT NINE (9).</li>
   17264 
   17265     </ol></li>
   17266 
   17267    <li><p>Finally, the user agent must <a href=#following-hyperlinks title="following
   17268    hyperlinks">follow the hyperlink</a> defined by the
   17269    <code><a href=#the-a-element>a</a></code> element. If the steps above defined a <var><a href=#hyperlink-suffix>hyperlink
   17270    suffix</a></var>, then take that into account when following the
   17271    hyperlink.</li>
   17272 
   17273   </ol></div>
   17274 
   17275   <dl class=domintro><dt><var title="">a</var> . <code title=dom-a-text><a href=#dom-a-text>text</a></code></dt>
   17276 
   17277    <dd>
   17278 
   17279     <p>Same as <code><a href=#textcontent>textContent</a></code>.</p>
   17280 
   17281    </dd>
   17282 
   17283   </dl><div class=impl>
   17284 
   17285   <p>The IDL attributes <dfn id=dom-a-href title=dom-a-href><code>href</code></dfn>,
   17286 <!--PING-->
   17287   <dfn id=dom-a-ping title=dom-a-ping><code>ping</code></dfn>,
   17288 <!--PING-->
   17289   <dfn id=dom-a-target title=dom-a-target><code>target</code></dfn>, <dfn id=dom-a-rel title=dom-a-rel><code>rel</code></dfn>, <dfn id=dom-a-media title=dom-a-media><code>media</code></dfn>, <dfn id=dom-a-hreflang title=dom-a-hreflang><code>hreflang</code></dfn>, and <dfn id=dom-a-type title=dom-a-type><code>type</code></dfn>, must
   17290   <a href=#reflect>reflect</a> the respective content attributes of the same
   17291   name.</p>
   17292 
   17293   <p>The IDL attribute <dfn id=dom-a-rellist title=dom-a-rellist><code>relList</code></dfn> must
   17294   <a href=#reflect>reflect</a> the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
   17295   content attribute.</p>
   17296 
   17297   <p>The <dfn id=dom-a-text title=dom-a-text><code>text</code></dfn> IDL
   17298   attribute, on getting, must return the same value as the
   17299   <code><a href=#textcontent>textContent</a></code> IDL attribute on the element, and on
   17300   setting, must act as if the <code><a href=#textcontent>textContent</a></code> IDL attribute
   17301   on the element had been set to the new value.</p>
   17302 
   17303   <p>The <code><a href=#the-a-element>a</a></code> element also supports the complement of
   17304   <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>, <dfn id=dom-a-protocol title=dom-a-protocol><code>protocol</code></dfn>, <dfn id=dom-a-host title=dom-a-host><code>host</code></dfn>, <dfn id=dom-a-port title=dom-a-port><code>port</code></dfn>, <dfn id=dom-a-hostname title=dom-a-hostname><code>hostname</code></dfn>, <dfn id=dom-a-pathname title=dom-a-pathname><code>pathname</code></dfn>, <dfn id=dom-a-search title=dom-a-search><code>search</code></dfn>, and <dfn id=dom-a-hash title=dom-a-hash><code>hash</code></dfn>. These must follow the
   17305   rules given for URL decomposition IDL attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
   17306   element, if there is such an attribute and resolving it is
   17307   successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
   17308   same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
   17309   value.</p>
   17310 
   17311   </div>
   17312 
   17313   <div class=example>
   17314 
   17315    <p>The <code><a href=#the-a-element>a</a></code> element may be wrapped around entire
   17316    paragraphs, lists, tables, and so forth, even entire sections, so
   17317    long as there is no interactive content within (e.g. buttons or
   17318    other links). This example shows how this can be used to make an
   17319    entire advertising block into a link:</p>
   17320 
   17321    <pre>&lt;aside class="advertising"&gt;
   17322  &lt;h1&gt;Advertising&lt;/h1&gt;
   17323  &lt;a href="http://ad.example.com/?adid=1929&amp;pubid=1422"&gt;
   17324   &lt;section&gt;
   17325    &lt;h1&gt;Mellblomatic 9000!&lt;/h1&gt;
   17326    &lt;p&gt;Turn all your widgets into mellbloms!&lt;/p&gt;
   17327    &lt;p&gt;Only $9.99 plus shipping and handling.&lt;/p&gt;
   17328   &lt;/section&gt;
   17329  &lt;/a&gt;
   17330  &lt;a href="http://ad.example.com/?adid=375&amp;pubid=1422"&gt;
   17331   &lt;section&gt;
   17332    &lt;h1&gt;The Mellblom Browser&lt;/h1&gt;
   17333    &lt;p&gt;Web browsing at the speed of light.&lt;/p&gt;
   17334    &lt;p&gt;No other browser goes faster!&lt;/p&gt;
   17335   &lt;/section&gt;
   17336  &lt;/a&gt;
   17337 &lt;/aside&gt;</pre>
   17338 
   17339   </div>
   17340 
   17341 
   17342   <h4 id=the-em-element><span class=secno>4.6.2 </span>The <dfn><code>em</code></dfn> element</h4>
   17343 
   17344   <dl class=element><dt>Categories</dt>
   17345    <dd><a href=#flow-content>Flow content</a>.</dd>
   17346    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17347    <dt>Contexts in which this element may be used:</dt>
   17348    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17349    <dt>Content model:</dt>
   17350    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17351    <dt>Content attributes:</dt>
   17352    <dd><a href=#global-attributes>Global attributes</a></dd>
   17353    <dt>DOM interface:</dt>
   17354    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17355   </dl><p>The <code><a href=#the-em-element>em</a></code> element <a href=#represents>represents</a> stress
   17356   emphasis of its contents.</p>
   17357 
   17358   <p>The level of emphasis that a particular piece of content has is
   17359   given by its number of ancestor <code><a href=#the-em-element>em</a></code> elements.</p>
   17360 
   17361   <p>The placement of emphasis changes the meaning of the sentence.
   17362   The element thus forms an integral part of the content. The precise
   17363   way in which emphasis is used in this way depends on the
   17364   language.</p>
   17365 
   17366   <div class=example>
   17367 
   17368    <p>These examples show how changing the emphasis changes the
   17369    meaning. First, a general statement of fact, with no emphasis:</p>
   17370 
   17371    <pre>&lt;p&gt;Cats are cute animals.&lt;/p&gt;</pre>
   17372 
   17373    <p>By emphasizing the first word, the statement implies that the
   17374    kind of animal under discussion is in question (maybe someone is
   17375    asserting that dogs are cute):</p>
   17376 
   17377    <pre>&lt;p&gt;&lt;em&gt;Cats&lt;/em&gt; are cute animals.&lt;/p&gt;</pre>
   17378 
   17379    <p>Moving the emphasis to the verb, one highlights that the truth
   17380    of the entire sentence is in question (maybe someone is saying cats
   17381    are not cute):</p>
   17382 
   17383    <pre>&lt;p&gt;Cats &lt;em&gt;are&lt;/em&gt; cute animals.&lt;/p&gt;</pre>
   17384 
   17385    <p>By moving it to the adjective, the exact nature of the cats
   17386    is reasserted (maybe someone suggested cats were <em>mean</em>
   17387    animals):</p>
   17388 
   17389    <pre>&lt;p&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals.&lt;/p&gt;</pre>
   17390 
   17391    <p>Similarly, if someone asserted that cats were vegetables,
   17392    someone correcting this might emphasize the last word:</p>
   17393 
   17394    <pre>&lt;p&gt;Cats are cute &lt;em&gt;animals&lt;/em&gt;.&lt;/p&gt;</pre>
   17395 
   17396    <p>By emphasizing the entire sentence, it becomes clear that the
   17397    speaker is fighting hard to get the point across. This kind of
   17398    emphasis also typically affects the punctuation, hence the
   17399    exclamation mark here.</p>
   17400 
   17401    <pre>&lt;p&gt;&lt;em&gt;Cats are cute animals!&lt;/em&gt;&lt;/p&gt;</pre>
   17402 
   17403    <p>Anger mixed with emphasizing the cuteness could lead to markup
   17404    such as:</p>
   17405 
   17406    <pre>&lt;p&gt;&lt;em&gt;Cats are &lt;em&gt;cute&lt;/em&gt; animals!&lt;/em&gt;&lt;/p&gt;</pre>
   17407 
   17408   </div>
   17409 
   17410   <div class=note>
   17411 
   17412    <p>The <code><a href=#the-em-element>em</a></code> element isn't a generic "italics"
   17413    element. Sometimes, text is intended to stand out from the rest of
   17414    the paragraph, as if it was in a different mood or voice. For this,
   17415    the <code><a href=#the-i-element>i</a></code> element is more appropriate.</p>
   17416 
   17417    <p>The <code><a href=#the-em-element>em</a></code> element also isn't intended to convey
   17418    importance; for that purpose, the <code><a href=#the-strong-element>strong</a></code> element is
   17419    more appropriate.</p>
   17420 
   17421    <!--
   17422 
   17423     Thus the following is a bad use of <em>:
   17424 
   17425       <p><em>Note</em>: ...</p>
   17426 
   17427     You should use <strong> or <i> for this instead (depending on
   17428     exactly what you're doing).
   17429 
   17430    -->
   17431 
   17432   </div>
   17433 
   17434 
   17435 
   17436   <h4 id=the-strong-element><span class=secno>4.6.3 </span>The <dfn><code>strong</code></dfn> element</h4>
   17437 
   17438   <dl class=element><dt>Categories</dt>
   17439    <dd><a href=#flow-content>Flow content</a>.</dd>
   17440    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17441    <dt>Contexts in which this element may be used:</dt>
   17442    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17443    <dt>Content model:</dt>
   17444    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17445    <dt>Content attributes:</dt>
   17446    <dd><a href=#global-attributes>Global attributes</a></dd>
   17447    <dt>DOM interface:</dt>
   17448    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17449   </dl><p>The <code><a href=#the-strong-element>strong</a></code> element <a href=#represents>represents</a> strong
   17450   importance for its contents.</p>
   17451 
   17452   <p>The relative level of importance of a piece of content is given
   17453   by its number of ancestor <code><a href=#the-strong-element>strong</a></code> elements; each
   17454   <code><a href=#the-strong-element>strong</a></code> element increases the importance of its
   17455   contents.</p>
   17456 
   17457   <p>Changing the importance of a piece of text with the
   17458   <code><a href=#the-strong-element>strong</a></code> element does not change the meaning of the
   17459   sentence.</p>
   17460 
   17461   <div class=example>
   17462    <p>Here is an example of a warning notice in a game, with the
   17463    various parts marked up according to how important they are:</p>
   17464    <!-- DO NOT REFLOW THIS EXAMPLE it has been carefully balanced -->
   17465    <pre>&lt;p&gt;&lt;strong&gt;Warning.&lt;/strong&gt; This dungeon is dangerous.
   17466 &lt;strong&gt;Avoid the ducks.&lt;/strong&gt; Take any gold you find.
   17467 &lt;strong&gt;&lt;strong&gt;Do not take any of the diamonds&lt;/strong&gt;,
   17468 they are explosive and &lt;strong&gt;will destroy anything within
   17469 ten meters.&lt;/strong&gt;&lt;/strong&gt; You have been warned.&lt;/p&gt;</pre>
   17470   </div>
   17471 
   17472 
   17473   <h4 id=the-small-element><span class=secno>4.6.4 </span>The <dfn><code>small</code></dfn> element</h4>
   17474 
   17475   <dl class=element><dt>Categories</dt>
   17476    <dd><a href=#flow-content>Flow content</a>.</dd>
   17477    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17478    <dt>Contexts in which this element may be used:</dt>
   17479    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17480    <dt>Content model:</dt>
   17481    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17482    <dt>Content attributes:</dt>
   17483    <dd><a href=#global-attributes>Global attributes</a></dd>
   17484    <dt>DOM interface:</dt>
   17485    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17486   </dl><p>The <code><a href=#the-small-element>small</a></code> element <a href=#represents>represents</a> side
   17487   comments such as small print.</p>
   17488 
   17489   <p class=note>Small print typically features disclaimers, caveats,
   17490   legal restrictions, or copyrights. Small print is also sometimes
   17491   used for attribution, or for satisfying licensing requirements.</p>
   17492 
   17493   <p class=note>The <code><a href=#the-small-element>small</a></code> element does not
   17494   "de-emphasize" or lower the importance of text emphasized by the
   17495   <code><a href=#the-em-element>em</a></code> element or marked as important with the
   17496   <code><a href=#the-strong-element>strong</a></code> element. To mark text as not emphasized or
   17497   important, simply do not mark it up with the <code><a href=#the-em-element>em</a></code> or
   17498   <code><a href=#the-strong-element>strong</a></code> elements respectively.</p>
   17499 
   17500   <p>The <code><a href=#the-small-element>small</a></code> element should not be used for extended
   17501   spans of text, such as multiple paragraphs, lists, or sections of
   17502   text. It is only intended for short runs of text. The text of a page
   17503   listing terms of use, for instance, would not be a suitable
   17504   candidate for the <code><a href=#the-small-element>small</a></code> element: in such a case, the
   17505   text is not a side comment, it is the main content of the page.</p>
   17506 
   17507   <div class=example>
   17508 
   17509    <p>In this example the footer contains contact information and a
   17510    copyright notice.</p>
   17511 
   17512    <pre>&lt;footer&gt;
   17513  &lt;address&gt;
   17514   For more details, contact
   17515   &lt;a href="mailto:js (a] example.com"&gt;John Smith&lt;/a&gt;.
   17516  &lt;/address&gt;
   17517  &lt;p&gt;&lt;small&gt;&copy; copyright 2038 Example Corp.&lt;/small&gt;&lt;/p&gt;
   17518 &lt;/footer&gt;</pre>
   17519 
   17520   </div>
   17521 
   17522   <div class=example>
   17523 
   17524    <p>In this second example, the <code><a href=#the-small-element>small</a></code> element is used
   17525    for a side comment in an article.</p>
   17526 
   17527    <pre>&lt;p&gt;Example Corp today announced record profits for the
   17528 second quarter &lt;small&gt;(Full Disclosure: Foo News is a subsidiary of
   17529 Example Corp)&lt;/small&gt;, leading to speculation about a third quarter
   17530 merger with Demo Group.&lt;/p&gt;</pre>
   17531 
   17532    <p>This is distinct from a sidebar, which might be multiple
   17533    paragraphs long and is removed from the main flow of text. In the
   17534    following example, we see a sidebar from the same article. This
   17535    sidebar also has small print, indicating the source of the
   17536    information in the sidebar.</p>
   17537 
   17538    <pre>&lt;aside&gt;
   17539  &lt;h1&gt;Example Corp&lt;/h1&gt;
   17540  &lt;p&gt;This company mostly creates small software and Web
   17541  sites.&lt;/p&gt;
   17542  &lt;p&gt;The Example Corp company mission is "To provide entertainment
   17543  and news on a sample basis".&lt;/p&gt;
   17544  &lt;p&gt;&lt;small&gt;Information obtained from &lt;a
   17545  href="http://example.com/about.html"&gt;example.com&lt;/a&gt; home
   17546  page.&lt;/small&gt;&lt;/p&gt;
   17547 &lt;/aside&gt;</pre>
   17548 
   17549   </div>
   17550 
   17551   <div class=example>
   17552 
   17553    <p>In this last example, the <code><a href=#the-small-element>small</a></code> element is marked
   17554    as being <em>important</em> small print.</p>
   17555 
   17556    <pre>&lt;p&gt;&lt;strong&gt;&lt;small&gt;Continued use of this service will result in a kiss.&lt;/small&gt;&lt;/strong&gt;&lt;/p&gt;</pre>
   17557 
   17558   </div>
   17559 
   17560 
   17561   <h4 id=the-cite-element><span class=secno>4.6.5 </span>The <dfn><code>cite</code></dfn> element</h4>
   17562 
   17563   <dl class=element><dt>Categories</dt>
   17564    <dd><a href=#flow-content>Flow content</a>.</dd>
   17565    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17566    <dt>Contexts in which this element may be used:</dt>
   17567    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17568    <dt>Content model:</dt>
   17569    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17570    <dt>Content attributes:</dt>
   17571    <dd><a href=#global-attributes>Global attributes</a></dd>
   17572    <dt>DOM interface:</dt>
   17573    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17574   </dl><p>The <code><a href=#the-cite-element>cite</a></code> element <a href=#represents>represents</a> the title
   17575   of a work (e.g.
   17576   a book,
   17577   a paper,
   17578   an essay,
   17579   a poem,
   17580   a score,
   17581   a song,
   17582   a script,
   17583   a film,
   17584   a TV show,
   17585   a game,
   17586   a sculpture,
   17587   a painting,
   17588   a theatre production,
   17589   a play,
   17590   an opera,
   17591   a musical,
   17592   an exhibition,
   17593   a legal case report,
   17594   etc). This can be a work that is being quoted or
   17595   referenced in detail (i.e. a citation), or it can just be a work
   17596   that is mentioned in passing.</p>
   17597 
   17598   <p>A person's name is not the title of a work &mdash; even if people
   17599   call that person a piece of work &mdash; and the element must
   17600   therefore not be used to mark up people's names. (In some cases, the
   17601   <code><a href=#the-b-element>b</a></code> element might be appropriate for names; e.g. in a
   17602   gossip article where the names of famous people are keywords
   17603   rendered with a different style to draw attention to them. In other
   17604   cases, if an element is <em>really</em> needed, the
   17605   <code><a href=#the-span-element>span</a></code> element can be used.)</p>
   17606 
   17607 <!--(some people argue a ship is a work)
   17608   <p>A ship is similarly not a work, and the element must not be used
   17609   to mark up ship names (the <code>i</code> element can be used for
   17610   that purpose).</p>
   17611 -->
   17612 
   17613   <div class=example>
   17614 
   17615    <p>This next example shows a typical use of the <code><a href=#the-cite-element>cite</a></code>
   17616    element:</p>
   17617 
   17618    <pre>&lt;p&gt;My favorite book is &lt;cite&gt;The Reality Dysfunction&lt;/cite&gt; by
   17619 Peter F. Hamilton. My favorite comic is &lt;cite&gt;Pearls Before
   17620 Swine&lt;/cite&gt; by Stephan Pastis. My favorite track is &lt;cite&gt;Jive
   17621 Samba&lt;/cite&gt; by the Cannonball Adderley Sextet.&lt;/p&gt;</pre>
   17622 
   17623   </div>
   17624 
   17625   <div class=example>
   17626 
   17627    <p>This is correct usage:</p>
   17628 
   17629    <pre>&lt;p&gt;According to the Wikipedia article &lt;cite&gt;HTML&lt;/cite&gt;, as it
   17630 stood in mid-February 2008, leaving attribute values unquoted is
   17631 unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>
   17632 
   17633    <p>The following, however, is incorrect usage, as the
   17634    <code><a href=#the-cite-element>cite</a></code> element here is containing far more than the
   17635    title of the work:</p>
   17636 
   17637    <pre class=bad>&lt;!-- do not copy this example, it is an example of bad usage! --&gt;
   17638 &lt;p&gt;According to &lt;cite&gt;the Wikipedia article on HTML&lt;/cite&gt;, as it
   17639 stood in mid-February 2008, leaving attribute values unquoted is
   17640 unsafe. This is obviously an over-simplification.&lt;/p&gt;</pre>
   17641 
   17642   </div>
   17643 
   17644   <div class=example>
   17645 
   17646    <p>The <code><a href=#the-cite-element>cite</a></code> element is obviously a key part of any
   17647    citation in a bibliography, but it is only used to mark the
   17648    title:</p>
   17649 
   17650    <pre>&lt;p&gt;&lt;cite&gt;Universal Declaration of Human Rights&lt;/cite&gt;, United Nations,
   17651 December 1948. Adopted by General Assembly resolution 217 A (III).&lt;/p&gt;</pre>
   17652 
   17653   </div>
   17654 
   17655   <p class=note>A <em>citation</em> is not a <em>quote</em> (for
   17656   which the <code><a href=#the-q-element>q</a></code> element is appropriate).</p>
   17657 
   17658   <div class=example>
   17659 
   17660    <p>This is incorrect usage, because <code><a href=#the-cite-element>cite</a></code> is not for
   17661    quotes:</p>
   17662 
   17663    <pre>&lt;p&gt;&lt;cite&gt;This is wrong!&lt;/cite&gt;, said Ian.&lt;/p&gt;</pre>
   17664 
   17665    <p>This is also incorrect usage, because a person is not a
   17666    work:</p>
   17667 
   17668    <pre>&lt;p&gt;&lt;q&gt;This is still wrong!&lt;/q&gt;, said &lt;cite&gt;Ian&lt;/cite&gt;.&lt;/p&gt;</pre>
   17669 
   17670    <p>The correct usage does not use a <code><a href=#the-cite-element>cite</a></code> element:</p>
   17671 
   17672    <pre>&lt;p&gt;&lt;q&gt;This is correct&lt;/q&gt;, said Ian.&lt;/p&gt;</pre>
   17673 
   17674    <p>As mentioned above, the <code><a href=#the-b-element>b</a></code> element might be relevant
   17675    for marking names as being keywords in certain kinds of
   17676    documents:</p>
   17677 
   17678    <pre>&lt;p&gt;And then &lt;b&gt;Ian&lt;/b&gt; said &lt;q&gt;this might be right, in a
   17679 gossip column, maybe!&lt;/q&gt;.&lt;/p&gt;</pre>
   17680 
   17681   </div>
   17682 
   17683 
   17684 
   17685   <h4 id=the-q-element><span class=secno>4.6.6 </span>The <dfn><code>q</code></dfn> element</h4>
   17686 
   17687   <dl class=element><dt>Categories</dt>
   17688    <dd><a href=#flow-content>Flow content</a>.</dd>
   17689    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17690    <dt>Contexts in which this element may be used:</dt>
   17691    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17692    <dt>Content model:</dt>
   17693    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17694    <dt>Content attributes:</dt>
   17695    <dd><a href=#global-attributes>Global attributes</a></dd>
   17696    <dd><code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></dd>
   17697    <dt>DOM interface:</dt>
   17698    <dd>Uses <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code>.</dd>
   17699   </dl><p>The <code><a href=#the-q-element>q</a></code> element <a href=#represents>represents</a> some <a href=#phrasing-content title="phrasing content">phrasing content</a> quoted from another
   17700   source.</p>
   17701 
   17702   <p>Quotation punctuation (such as quotation marks) that is quoting
   17703   the contents of the element must not appear immediately before,
   17704   after, or inside <code><a href=#the-q-element>q</a></code> elements; they will be inserted into
   17705   the rendering by the user agent.</p>
   17706 
   17707   <p>Content inside a <code><a href=#the-q-element>q</a></code> element must be quoted from
   17708   another source, whose address, if it has one, may be cited in the
   17709   <dfn id=attr-q-cite title=attr-q-cite><code>cite</code></dfn> attribute. The
   17710   source may be fictional, as when quoting characters in a novel or
   17711   screenplay.</p>
   17712 
   17713   <p>If the <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code> attribute is
   17714   present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
   17715   spaces</a>. <span class=impl>To obtain the corresponding
   17716   citation link, the value of the attribute must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element. User
   17717   agents should allow users to follow such citation links.</span></p>
   17718 
   17719   <p>The <code><a href=#the-q-element>q</a></code> element must not be used in place of quotation
   17720   marks that do not represent quotes; for example, it is inappropriate
   17721   to use the <code><a href=#the-q-element>q</a></code> element for marking up sarcastic
   17722   statements.</p>
   17723 
   17724   <p>The use of <code><a href=#the-q-element>q</a></code> elements to mark up quotations is
   17725   entirely optional; using explicit quotation punctuation without
   17726   <code><a href=#the-q-element>q</a></code> elements is just as correct.</p>
   17727 
   17728   <div class=example>
   17729 
   17730    <p>Here is a simple example of the use of the <code><a href=#the-q-element>q</a></code>
   17731    element:</p>
   17732 
   17733    <pre>&lt;p&gt;The man said &lt;q&gt;Things that are impossible just take
   17734 longer&lt;/q&gt;. I disagreed with him.&lt;/p&gt;</pre>
   17735 
   17736   </div>
   17737 
   17738   <div class=example>
   17739 
   17740    <p>Here is an example with both an explicit citation link in the
   17741    <code><a href=#the-q-element>q</a></code> element, and an explicit citation outside:</p>
   17742 
   17743    <pre>&lt;p&gt;The W3C page &lt;cite&gt;About W3C&lt;/cite&gt; says the W3C's
   17744 mission is &lt;q cite="http://www.w3.org/Consortium/"&gt;To lead the
   17745 World Wide Web to its full potential by developing protocols and
   17746 guidelines that ensure long-term growth for the Web&lt;/q&gt;. I
   17747 disagree with this mission.&lt;/p&gt;</pre>
   17748 
   17749   </div>
   17750 
   17751   <div class=example>
   17752 
   17753    <p>In the following example, the quotation itself contains a
   17754    quotation:</p>
   17755 
   17756    <pre>&lt;p&gt;In &lt;cite&gt;Example One&lt;/cite&gt;, he writes &lt;q&gt;The man
   17757 said &lt;q&gt;Things that are impossible just take longer&lt;/q&gt;. I
   17758 disagreed with him&lt;/q&gt;. Well, I disagree even more!&lt;/p&gt;</pre>
   17759 
   17760   </div>
   17761 
   17762   <div class=example>
   17763 
   17764    <p>In the following example, quotation marks are used instead of
   17765    the <code><a href=#the-q-element>q</a></code> element:</p>
   17766 
   17767    <pre>&lt;p&gt;His best argument was &#10077;I disagree&#10078;, which
   17768 I thought was laughable.&lt;/p&gt;</pre>
   17769 
   17770   </div>
   17771 
   17772   <div class=example>
   17773 
   17774    <p>In the following example, there is no quote &mdash; the
   17775    quotation marks are used to name a word. Use of the <code><a href=#the-q-element>q</a></code>
   17776    element in this case would be inappropriate.</p>
   17777 
   17778    <pre>&lt;p&gt;The word "ineffable" could have been used to describe the disaster
   17779 resulting from the campaign's mismanagement.&lt;/p&gt;</pre>
   17780 
   17781   </div>
   17782 
   17783 
   17784   <h4 id=the-dfn-element><span class=secno>4.6.7 </span>The <dfn><code>dfn</code></dfn> element</h4>
   17785 
   17786   <dl class=element><dt>Categories</dt>
   17787    <dd><a href=#flow-content>Flow content</a>.</dd>
   17788    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17789    <dt>Contexts in which this element may be used:</dt>
   17790    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17791    <dt>Content model:</dt>
   17792    <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-dfn-element>dfn</a></code> element descendants.</dd>
   17793    <dt>Content attributes:</dt>
   17794    <dd><a href=#global-attributes>Global attributes</a></dd>
   17795    <dd>Also, the <code title=attr-dfn-title><a href=#attr-dfn-title>title</a></code> attribute has special semantics on this element.</dd>
   17796    <dt>DOM interface:</dt>
   17797    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17798   </dl><p>The <code><a href=#the-dfn-element>dfn</a></code> element <a href=#represents>represents</a> the defining
   17799   instance of a term. The <a href=#paragraph title=paragraph>paragraph</a>,
   17800   <a href=#the-dl-element title=dl>description list group</a>, or <a href=#sectioning-content title="sectioning content">section</a> that is the nearest
   17801   ancestor of the <code><a href=#the-dfn-element>dfn</a></code> element must also contain the
   17802   definition(s) for the <a href=#defining-term title="defining term">term</a> given
   17803   by the <code><a href=#the-dfn-element>dfn</a></code> element.</p>
   17804 
   17805   <p><dfn id=defining-term>Defining term</dfn>: If the <code><a href=#the-dfn-element>dfn</a></code> element has a
   17806   <dfn id=attr-dfn-title title=attr-dfn-title><code>title</code></dfn> attribute, then
   17807   the exact value of that attribute is the term being defined.
   17808   Otherwise, if it contains exactly one element child node and no
   17809   child <a href=#text-node title="text node">text nodes</a>, and that child
   17810   element is an <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute, then the exact value
   17811   of <em>that</em> attribute is the term being defined. Otherwise, it
   17812   is the exact <code><a href=#textcontent>textContent</a></code> of the <code><a href=#the-dfn-element>dfn</a></code>
   17813   element that gives the term being defined.</p>
   17814 
   17815   <!-- note that this means <dfn>x \n x</dfn> won't match <span>x x</span> -->
   17816 
   17817   <p>If the <code title=attr-dfn-title><a href=#attr-dfn-title>title</a></code> attribute of the
   17818   <code><a href=#the-dfn-element>dfn</a></code> element is present, then it must contain only the
   17819   term being defined.</p>
   17820 
   17821   <p class=note>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   17822   of ancestor elements does not affect <code><a href=#the-dfn-element>dfn</a></code> elements.</p>
   17823 
   17824   <p>An <code><a href=#the-a-element>a</a></code> element that links to a <code><a href=#the-dfn-element>dfn</a></code>
   17825   element represents an instance of the term defined by the
   17826   <code><a href=#the-dfn-element>dfn</a></code> element.</p>
   17827 
   17828   <div class=example>
   17829 
   17830    <p>In the following fragment, the term "GDO" is first defined in
   17831    the first paragraph, then used in the second.</p>
   17832 
   17833    <pre>&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
   17834 is a device that allows off-world teams to open the iris.&lt;/p&gt;
   17835 &lt;!-- ... later in the document: --&gt;
   17836 &lt;p&gt;Teal'c activated his &lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;
   17837 and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>
   17838 
   17839    <p>With the addition of an <code><a href=#the-a-element>a</a></code> element, the reference
   17840    can be made explicit:</p>
   17841 
   17842    <pre>&lt;p&gt;The &lt;dfn id=gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt;
   17843 is a device that allows off-world teams to open the iris.&lt;/p&gt;
   17844 &lt;!-- ... later in the document: --&gt;
   17845 &lt;p&gt;Teal'c activated his &lt;a href=#gdo&gt;&lt;abbr title="Garage Door Opener"&gt;GDO&lt;/abbr&gt;&lt;/a&gt;
   17846 and so Hammond ordered the iris to be opened.&lt;/p&gt;</pre>
   17847 
   17848   </div>
   17849 
   17850 
   17851 
   17852   <h4 id=the-abbr-element><span class=secno>4.6.8 </span>The <dfn><code>abbr</code></dfn> element</h4>
   17853 
   17854   <dl class=element><dt>Categories</dt>
   17855    <dd><a href=#flow-content>Flow content</a>.</dd>
   17856    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17857    <dt>Contexts in which this element may be used:</dt>
   17858    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17859    <dt>Content model:</dt>
   17860    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17861    <dt>Content attributes:</dt>
   17862    <dd><a href=#global-attributes>Global attributes</a></dd>
   17863    <dd>Also, the <code title=attr-abbr-title><a href=#attr-abbr-title>title</a></code> attribute has special semantics on this element.</dd>
   17864    <dt>DOM interface:</dt>
   17865    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   17866   </dl><p>The <code><a href=#the-abbr-element>abbr</a></code> element <a href=#represents>represents</a> an
   17867   abbreviation or acronym, optionally with its expansion. The <dfn id=attr-abbr-title title=attr-abbr-title><code>title</code></dfn> attribute may be
   17868   used to provide an expansion of the abbreviation. The attribute, if
   17869   specified, must contain an expansion of the abbreviation, and
   17870   nothing else.</p>
   17871 
   17872   <div class=example>
   17873    <p>The paragraph below contains an abbreviation marked up with the
   17874    <code><a href=#the-abbr-element>abbr</a></code> element. This paragraph <a href=#defining-term title="defining
   17875    term">defines the term</a> "Web Hypertext Application Technology
   17876    Working Group".</p>
   17877    <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;&lt;abbr
   17878 title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/dfn&gt;
   17879 is a loose unofficial collaboration of Web browser manufacturers and
   17880 interested parties who wish to develop new technologies designed to
   17881 allow authors to write and deploy Applications over the World Wide
   17882 Web.&lt;/p&gt;</pre>
   17883    <p>An alternative way to write this would be:</p>
   17884    <pre>&lt;p&gt;The &lt;dfn id=whatwg&gt;Web Hypertext Application Technology
   17885 Working Group&lt;/dfn&gt; (&lt;abbr
   17886 title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;)
   17887 is a loose unofficial collaboration of Web browser manufacturers and
   17888 interested parties who wish to develop new technologies designed to
   17889 allow authors to write and deploy Applications over the World Wide
   17890 Web.&lt;/p&gt;</pre>
   17891   </div>
   17892 
   17893   <div class=example>
   17894    <p>This paragraph has two abbreviations. Notice how only one is
   17895    defined; the other, with no expansion associated with it, does not
   17896    use the <code><a href=#the-abbr-element>abbr</a></code> element.</p>
   17897    <pre>&lt;p&gt;The
   17898 &lt;abbr title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;
   17899 started working on HTML5 in 2004.&lt;/p&gt;</pre>
   17900   </div>
   17901 
   17902   <div class=example>
   17903    <p>This paragraph links an abbreviation to its definition.</p>
   17904    <pre>&lt;p&gt;The &lt;a href="#whatwg"&gt;&lt;abbr
   17905 title="Web Hypertext Application Technology Working Group"&gt;WHATWG&lt;/abbr&gt;&lt;/a&gt;
   17906 community does not have much representation from Asia.&lt;/p&gt;</pre>
   17907   </div>
   17908 
   17909   <div class=example>
   17910    <p>This paragraph marks up an abbreviation without giving an
   17911    expansion, possibly as a hook to apply styles for abbreviations
   17912    (e.g. smallcaps).</p>
   17913    <pre>&lt;p&gt;Philip` and Dashiva both denied that they were going to
   17914 get the issue counts from past revisions of the specification to
   17915 backfill the &lt;abbr&gt;WHATWG&lt;/abbr&gt; issue graph.&lt;/p&gt;</pre>
   17916   </div>
   17917 
   17918   <p>If an abbreviation is pluralized, the expansion's grammatical
   17919   number (plural vs singular) must match the grammatical number of the
   17920   contents of the element.</p>
   17921 
   17922   <div class=example>
   17923 
   17924    <p>Here the plural is outside the element, so the expansion is in
   17925    the singular:</p>
   17926 
   17927    <pre>&lt;p&gt;Two &lt;abbr title="Working Group"&gt;WG&lt;/abbr&gt;s worked on
   17928 this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
   17929 &lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>
   17930 
   17931    <p>Here the plural is inside the element, so the expansion is in
   17932    the plural:</p>
   17933 
   17934    <pre>&lt;p&gt;Two &lt;abbr title="Working Groups"&gt;WGs&lt;/abbr&gt; worked on
   17935 this specification: the &lt;abbr&gt;WHATWG&lt;/abbr&gt; and the
   17936 &lt;abbr&gt;HTMLWG&lt;/abbr&gt;.&lt;/p&gt;</pre>
   17937 
   17938   </div>
   17939 
   17940   <p>Abbreviations do not have to be marked up using this element. It
   17941   is expected to be useful in the following cases:</p>
   17942 
   17943   <ul><li>Abbreviations for which the author wants to give expansions,
   17944    where using the <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is an alternative to
   17945    including the expansion inline (e.g. in parentheses).</li>
   17946 
   17947    <li>Abbreviations that are likely to be unfamiliar to the
   17948    document's readers, for which authors are encouraged to either mark
   17949    up the abbreviation using a <code><a href=#the-abbr-element>abbr</a></code> element with a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute or include the expansion
   17950    inline in the text the first time the abbreviation is used.</li>
   17951 
   17952    <li>Abbreviations whose presence needs to be semantically
   17953    annotated, e.g. so that they can be identified from a style sheet
   17954    and given specific styles, for which the <code><a href=#the-abbr-element>abbr</a></code> element
   17955    can be used without a <code title=attr-title><a href=#the-title-attribute>title</a></code>
   17956    attribute.</li>
   17957 
   17958   </ul><p title=note>Providing an expansion in a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute once will not necessarily
   17959   cause other <code><a href=#the-abbr-element>abbr</a></code> elements in the same document with the
   17960   same contents but without a <code title=attr-title><a href=#the-title-attribute>title</a></code>
   17961   attribute to behave as if they had the same expansion. Every
   17962   <code><a href=#the-abbr-element>abbr</a></code> element is independent.</p>
   17963 
   17964 
   17965 
   17966 
   17967   <h4 id=the-time-element><span class=secno>4.6.9 </span>The <dfn><code>time</code></dfn> element</h4>
   17968 
   17969   <dl class=element><dt>Categories</dt>
   17970    <dd><a href=#flow-content>Flow content</a>.</dd>
   17971    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   17972    <dt>Contexts in which this element may be used:</dt>
   17973    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   17974    <dt>Content model:</dt>
   17975    <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-time-element>time</a></code> element descendants.</dd>
   17976    <dt>Content attributes:</dt>
   17977    <dd><a href=#global-attributes>Global attributes</a></dd>
   17978    <dd><code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code></dd>
   17979    <dd><code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code></dd>
   17980    <dt>DOM interface:</dt>
   17981    <dd>
   17982 <pre class=idl>interface <dfn id=htmltimeelement>HTMLTimeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   17983            attribute DOMString <a href=#dom-time-datetime title=dom-time-datetime>dateTime</a>;
   17984            attribute boolean <a href=#dom-time-pubdate title=dom-time-pubDate>pubDate</a>;
   17985   readonly attribute <span>Date</span> <a href=#dom-time-valueasdate title=dom-time-valueAsDate>valueAsDate</a>;
   17986 };</pre>
   17987    </dd>
   17988   </dl><p>The <code><a href=#the-time-element>time</a></code> element <a href=#represents>represents</a> either a
   17989   time on a 24 hour clock, or a precise date in the proleptic
   17990   Gregorian calendar, optionally with a time and a time-zone
   17991   offset. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
   17992 
   17993   <p>This element is intended as a way to encode modern dates and
   17994   times in a machine-readable way so that, for example, user agents
   17995   can offer to add birthday reminders or scheduled events to the
   17996   user's calendar.</p>
   17997 
   17998   <!-- it's also intended for restyling to local conventions
   17999   (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
   18000   that yet. -->
   18001 
   18002   <div class=note>
   18003 
   18004    <p>The <code><a href=#the-time-element>time</a></code> element is not intended for encoding times
   18005    for which a precise date or time cannot be established. For
   18006    example, it would be inappropriate for encoding times like "one
   18007    millisecond after the big bang", "the early part of the Jurassic
   18008    period", or "a winter around 250 BCE".</p>
   18009 
   18010    <p>For dates before the introduction of the Gregorian calendar,
   18011    authors are encouraged to not use the <code><a href=#the-time-element>time</a></code> element, or
   18012    else to be very careful about converting dates and times from the
   18013    period to the Gregorian calendar. This is complicated by the manner
   18014    in which the Gregorian calendar was phased in, which occurred at
   18015    different times in different countries, ranging from partway
   18016    through the 16th century all the way to early in the 20th.</p>
   18017 
   18018   </div>
   18019 
   18020   <p>The <dfn id=attr-time-pubdate title=attr-time-pubdate><code>pubdate</code></dfn>
   18021   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If specified, it
   18022   indicates that the date and time given by the element is the
   18023   publication date and time of the nearest ancestor
   18024   <code><a href=#the-article-element>article</a></code> element, or, if the element has no ancestor
   18025   <code><a href=#the-article-element>article</a></code> element, of the document as a whole. If the
   18026   element has a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code>
   18027   attribute specified, then the element <dfn id=needs-a-date>needs a date</dfn>. For
   18028   each <code><a href=#the-article-element>article</a></code> element, there must no more than one
   18029   <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute whose nearest
   18030   ancestor is that <code><a href=#the-article-element>article</a></code> element. Furthermore, for each
   18031   <code><a href=#document>Document</a></code>, there must be no more than one
   18032   <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute that does not
   18033   have an ancestor <code><a href=#the-article-element>article</a></code> element.</p>
   18034 
   18035   <p>The <dfn id=attr-time-datetime title=attr-time-datetime><code>datetime</code></dfn>
   18036   attribute, if present, gives the date or time being
   18037   specified. Otherwise, the date or time is given by the element's
   18038   contents.</p>
   18039 
   18040   <p>If the element <i><a href=#needs-a-date>needs a date</a></i>, and the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is present,
   18041   then the attribute's value must be a <a href=#valid-date-string-with-optional-time>valid date string with
   18042   optional time</a>.</p>
   18043 
   18044   <p>If the element <i><a href=#needs-a-date>needs a date</a></i>, but the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is not present,
   18045   then the element's <code><a href=#textcontent>textContent</a></code> must be a <a href=#valid-date-string-in-content-with-optional-time>valid
   18046   date string in content with optional time</a>.</p>
   18047 
   18048   <p>If the element does not <i>need a date</i>, and the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is present,
   18049   then the attribute's value must be a <a href=#valid-date-or-time-string>valid date or time
   18050   string</a>.</p>
   18051 
   18052   <p>If the element does not <i>need a date</i>, but the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute is not present,
   18053   then the element's <code><a href=#textcontent>textContent</a></code> must be a <a href=#valid-date-or-time-string-in-content>valid
   18054   date or time string in content</a>.</p>
   18055 
   18056   <p>The date, if any, must be expressed using the Gregorian
   18057   calendar.</p>
   18058 
   18059   <div class=impl>
   18060 
   18061   <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
   18062   is present, the user agent should convey the attribute's value to
   18063   the user when rendering the element.</p>
   18064 
   18065   </div>
   18066 
   18067   <div class=example>
   18068 
   18069    <p>The <code><a href=#the-time-element>time</a></code> element can be used to encode dates, for
   18070    example in Microformats. The following shows a hypothetical way of
   18071    encoding an event using a variant on hCalendar that uses the
   18072    <code><a href=#the-time-element>time</a></code> element:</p>
   18073 
   18074    <pre>&lt;div class="vevent"&gt;
   18075  &lt;a class="url" href="http://www.web2con.com/"&gt;http://www.web2con.com/</a>;
   18076   &lt;span class="summary"&gt;Web 2.0 Conference&lt;/span&gt;:
   18077   &lt;time class="dtstart" datetime="2007-10-05"&gt;October 5&lt;/time&gt; -
   18078   &lt;time class="dtend" datetime="2007-10-20"&gt;19&lt;/time&gt;,
   18079   at the &lt;span class="location"&gt;Argent Hotel, San Francisco, CA&lt;/span&gt;
   18080  &lt;/div&gt;</pre>
   18081 
   18082    <p>(The end date is encoded as one day after the last date of the
   18083    event because in the iCalendar format, end dates are
   18084    <em>exclusive</em>, not inclusive.)</p>
   18085 
   18086   </div>
   18087 
   18088   <div class=example>
   18089 
   18090    <p>The <code><a href=#the-time-element>time</a></code> element is not necessary for encoding
   18091    dates or times. In the following snippet, the time is encoded using
   18092    <code><a href=#the-time-element>time</a></code>, so that it can be restyled (e.g. using XBL2) to
   18093    match local conventions, while the year is not marked up at all,
   18094    since marking it up would not be particularly useful.</p>
   18095 
   18096    <pre>&lt;p&gt;I usually have a snack at &lt;time&gt;16:00&lt;/time&gt;.&lt;/p&gt;
   18097 &lt;p&gt;I've liked model trains since at least 1983.&lt;/p&gt;</pre>
   18098 
   18099    <p>Using a styling technology that supports restyling times, the
   18100    first paragraph from the above snippet could be rendered as follows:</p>
   18101 
   18102    <blockquote><p>I usually have a snack at 4pm.</blockquote>
   18103 
   18104    <p>Or it could be rendered as follows:</p>
   18105 
   18106    <blockquote><p>I usually have a snack at 16h00.</blockquote>
   18107 
   18108   </div>
   18109 
   18110   <div class=impl>
   18111 
   18112   <p>The <dfn id=dom-time-datetime title=dom-time-datetime><code>dateTime</code></dfn> IDL
   18113   attribute must <a href=#reflect>reflect</a> the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content attribute.</p>
   18114 
   18115   <p>The <dfn id=dom-time-pubdate title=dom-time-pubDate><code>pubDate</code></dfn> IDL
   18116   attribute must <a href=#reflect>reflect</a> the <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> content attribute.</p>
   18117 
   18118   <p>User agents, to obtain the <dfn id=concept-time-date title=concept-time-date>date</dfn>, <dfn id=concept-time-time title=concept-time-time>time</dfn>, and <dfn id=concept-time-timezone title=concept-time-timezone>time-zone offset</dfn> represented by
   18119   a <code><a href=#the-time-element>time</a></code> element, must follow these steps:</p>
   18120 
   18121   <ol><li>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>
   18122    attribute is present, then use the rules to <a href=#parse-a-date-or-time-string>parse a date or
   18123    time string</a> with the flag <i>in attribute</i> from the value
   18124    of that attribute, and let the result be <var title="">result</var>.</li>
   18125 
   18126    <li>Otherwise, use the rules to <a href=#parse-a-date-or-time-string>parse a date or time
   18127    string</a> with the flag <i>in content</i> from the element's
   18128    <code><a href=#textcontent>textContent</a></code>, and let the result be <var title="">result</var>.</li>
   18129 
   18130    <li>If <var title="">result</var> is empty (because the parsing
   18131    failed), then the <a href=#concept-time-date title=concept-time-date>date</a> is
   18132    unknown, the <a href=#concept-time-time title=concept-time-time>time</a> is
   18133    unknown, and the <a href=#concept-time-timezone title=concept-time-timezone>time-zone
   18134    offset</a> is unknown.</li>
   18135 
   18136    <li>Otherwise: if <var title="">result</var> contains a date, then
   18137    that is the <a href=#concept-time-date title=concept-time-date>date</a>; if <var title="">result</var> contains a time, then that is the <a href=#concept-time-time title=concept-time-time>time</a>; and if <var title="">result</var> contains a time-zone offset, then the
   18138    time-zone offset is the element's <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a>. (A time-zone
   18139    offset can only be present if both a date and a time are also
   18140    present.)</li>
   18141 
   18142   </ol></div>
   18143 
   18144   <dl class=domintro><dt><var title="">time</var> . <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code></dt>
   18145 
   18146    <dd>
   18147 
   18148     <p>Returns a <code>Date</code> object representing the specified date and time.</p>
   18149 
   18150    </dd>
   18151 
   18152   </dl><div class=impl>
   18153 
   18154   <p>The <dfn id=dom-time-valueasdate title=dom-time-valueAsDate><code>valueAsDate</code></dfn> IDL
   18155   attribute must return either null or a new <code>Date</code> object
   18156   initialised to the relevant value as defined by the following
   18157   list:</p>
   18158 
   18159   <dl><dt>If the <a href=#concept-time-date title=concept-time-date>date</a> is known but
   18160    the <a href=#concept-time-time title=concept-time-time>time</a> is not</dt>
   18161 
   18162    <dd>The time corresponding to midnight UTC (i.e. the first second)
   18163    of the given <a href=#concept-time-date title=concept-time-date>date</a>.</dd>
   18164 
   18165    <dt>If the <a href=#concept-time-time title=concept-time-time>time</a> is known but
   18166    the <a href=#concept-time-date title=concept-time-date>date</a> is not</dt>
   18167 
   18168    <dd>The time corresponding to the given <a href=#concept-time-time title=concept-time-time>time</a> of 1970-01-01, with the time
   18169    zone UTC.</dd>
   18170 
   18171    <dt>If both the <a href=#concept-time-date title=concept-time-date>date</a> and the
   18172    <a href=#concept-time-time title=concept-time-time>time</a> are known</dt>
   18173 
   18174    <dd>The time corresponding to the <a href=#concept-time-date title=concept-time-date>date</a> and <a href=#concept-time-time title=concept-time-time>time</a>, with the given <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a>.</dd>
   18175 
   18176    <dt>If neither the <a href=#concept-time-date title=concept-time-date>date</a> nor
   18177    the <a href=#concept-time-time title=concept-time-time>time</a> are known</dt>
   18178 
   18179    <dd>The null value.</dd>
   18180 
   18181   </dl><p>When a <code>Date</code> object is to be returned, a new one must
   18182   be constructed.</p> <!-- yes, this means .valueAsDate !=
   18183   .valueAsDate, but the object is mutable, so it'd be weird if we
   18184   didn't do that -->
   18185 
   18186   </div>
   18187 
   18188   <div class=example>
   18189 
   18190    <p>In the following snippet:</p>
   18191 
   18192    <pre>&lt;p&gt;Our first date was &lt;time datetime="2006-09-23"&gt;a Saturday&lt;/time&gt;.&lt;/p&gt;</pre>
   18193 
   18194    <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code> attribute would
   18195    have the value 1,158,969,600,000ms.</p>
   18196 
   18197   </div>
   18198 
   18199   <!-- <pre>&lt;p>We stopped talking at &lt;time datetime="2006-09-24T05:00-07:00">5am the next morning&lt;/time>.&lt;/p></pre> -->
   18200 
   18201   <div class=example>
   18202 
   18203    <p>In the following snippet:</p>
   18204 
   18205    <pre>&lt;p&gt;Many people get up at &lt;time&gt;08:00&lt;/time&gt;.&lt;/p&gt;</pre>
   18206 
   18207    <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-valueAsDate><a href=#dom-time-valueasdate>valueAsDate</a></code> attribute would
   18208    have the value 28,800,000ms.</p>
   18209 
   18210   </div>
   18211 
   18212   <div class=example>
   18213 
   18214    <p>In this example, an article's publication date is marked up
   18215    using <code><a href=#the-time-element>time</a></code>:</p>
   18216 
   18217    <pre>&lt;article&gt;
   18218  &lt;h1&gt;Small tasks&lt;/h1&gt;
   18219  &lt;footer&gt;Published &lt;time pubdate&gt;2009-08-30&lt;/time&gt;.&lt;/footer&gt;
   18220  &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
   18221 &lt;/article&gt;</pre>
   18222 
   18223    <p>Here is another way that could be marked up. In this example,
   18224    legacy user agents would say "today", while newer user agents would
   18225    render the time in a locale-specific manner based on the value of
   18226    the attribute.</p>
   18227 
   18228    <pre>&lt;article&gt;
   18229  &lt;h1&gt;Small tasks&lt;/h1&gt;
   18230  &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30"&gt;today&lt;/time&gt;.&lt;/footer&gt;
   18231  &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
   18232 &lt;/article&gt;</pre>
   18233 
   18234    <p>Here is the same thing but with the time included only. Because
   18235    the element is empty, legacy user agents will not show anything
   18236    useful; user agents that implement this specification, on the other
   18237    hand, would show the date and time in a locale-specific manner.</p>
   18238 
   18239    <pre>&lt;article&gt;
   18240  &lt;h1&gt;Small tasks&lt;/h1&gt;
   18241  &lt;footer&gt;Published &lt;time pubdate datetime="2009-08-30T07:13Z"&gt;&lt;/time&gt;.&lt;/footer&gt;
   18242  &lt;p&gt;I put a bike bell on his bike.&lt;/p&gt;
   18243 &lt;/article&gt;</pre>
   18244 
   18245   </div>
   18246 
   18247 
   18248 
   18249   <h4 id=the-code-element><span class=secno>4.6.10 </span>The <dfn><code>code</code></dfn> element</h4>
   18250 
   18251   <dl class=element><dt>Categories</dt>
   18252    <dd><a href=#flow-content>Flow content</a>.</dd>
   18253    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18254    <dt>Contexts in which this element may be used:</dt>
   18255    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18256    <dt>Content model:</dt>
   18257    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18258    <dt>Content attributes:</dt>
   18259    <dd><a href=#global-attributes>Global attributes</a></dd>
   18260    <dt>DOM interface:</dt>
   18261    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18262   </dl><p>The <code><a href=#the-code-element>code</a></code> element <a href=#represents>represents</a> a fragment
   18263   of computer code. This could be an XML element name, a filename, a
   18264   computer program, or any other string that a computer would
   18265   recognize.</p>
   18266 
   18267   <p>Although there is no formal way to indicate the language of
   18268   computer code being marked up, authors who wish to mark
   18269   <code><a href=#the-code-element>code</a></code> elements with the language used, e.g. so that
   18270   syntax highlighting scripts can use the right rules, may do so by
   18271   adding a class prefixed with "<code title="">language-</code>" to
   18272   the element.</p>
   18273 
   18274   <div class=example>
   18275 
   18276    <p>The following example shows how the element can be used in a
   18277    paragraph to mark up element names and computer code, including
   18278    punctuation.</p>
   18279 
   18280    <pre>&lt;p&gt;The &lt;code&gt;code&lt;/code&gt; element represents a fragment of computer
   18281 code.&lt;/p&gt;
   18282 
   18283 &lt;p&gt;When you call the &lt;code&gt;activate()&lt;/code&gt; method on the
   18284 &lt;code&gt;robotSnowman&lt;/code&gt; object, the eyes glow.&lt;/p&gt;
   18285 
   18286 &lt;p&gt;The example below uses the &lt;code&gt;begin&lt;/code&gt; keyword to indicate
   18287 the start of a statement block. It is paired with an &lt;code&gt;end&lt;/code&gt;
   18288 keyword, which is followed by the &lt;code&gt;.&lt;/code&gt; punctuation character
   18289 (full stop) to indicate the end of the program.&lt;/p&gt;</pre>
   18290 
   18291   </div>
   18292 
   18293   <div class=example>
   18294 
   18295    <p>The following example shows how a block of code could be marked
   18296    up using the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> elements.</p>
   18297 
   18298    <pre>&lt;pre&gt;&lt;code class="language-pascal"&gt;var i: Integer;
   18299 begin
   18300    i := 1;
   18301 end.&lt;/code&gt;&lt;/pre&gt;</pre>
   18302 
   18303    <p>A class is used in that example to indicate the language
   18304    used.</p>
   18305 
   18306   </div>
   18307 
   18308   <p class=note>See the <code><a href=#the-pre-element>pre</a></code> element for more details.</p>
   18309 
   18310 
   18311   <h4 id=the-var-element><span class=secno>4.6.11 </span>The <dfn><code>var</code></dfn> element</h4>
   18312 
   18313   <dl class=element><dt>Categories</dt>
   18314    <dd><a href=#flow-content>Flow content</a>.</dd>
   18315    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18316    <dt>Contexts in which this element may be used:</dt>
   18317    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18318    <dt>Content model:</dt>
   18319    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18320    <dt>Content attributes:</dt>
   18321    <dd><a href=#global-attributes>Global attributes</a></dd>
   18322    <dt>DOM interface:</dt>
   18323    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18324   </dl><p>The <code><a href=#the-var-element>var</a></code> element <a href=#represents>represents</a> a
   18325   variable. This could be an actual variable in a mathematical
   18326   expression or programming context, or it could just be a term used
   18327   as a placeholder in prose.</p>
   18328 
   18329   <div class=example>
   18330    <p>In the paragraph below, the letter "n" is being used as a
   18331    variable in prose:</p>
   18332    <pre>&lt;p&gt;If there are &lt;var&gt;n&lt;/var&gt; pipes leading to the ice
   18333 cream factory then I expect at &lt;em&gt;least&lt;/em&gt; &lt;var&gt;n&lt;/var&gt;
   18334 flavors of ice cream to be available for purchase!&lt;/p&gt;</pre>
   18335   </div>
   18336 
   18337   <p>For mathematics, in particular for anything beyond the simplest
   18338   of expressions, MathML is more appropriate. However, the
   18339   <code><a href=#the-var-element>var</a></code> element can still be used to refer to specific
   18340   variables that are then mentioned in MathML expressions.</p>
   18341 
   18342   <div class=example>
   18343 
   18344    <p>In this example, an equation is shown, with a legend that
   18345    references the variables in the equation. The expression itself is
   18346    marked up with MathML, but the variables are mentioned in the
   18347    figure's legend using <code><a href=#the-var-element>var</a></code>.</p>
   18348 
   18349    <pre>&lt;figure&gt;
   18350  &lt;math&gt;
   18351   &lt;mi&gt;a&lt;/mi&gt;
   18352   &lt;mo&gt;=&lt;/mo&gt;
   18353   &lt;msqrt&gt;
   18354    &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
   18355    &lt;mi&gt;+&lt;/mi&gt;
   18356    &lt;msup&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
   18357   &lt;/msqrt&gt;
   18358  &lt;/math&gt;
   18359  &lt;figcaption&gt;
   18360   Using Pythagoras' theorem to solve for the hypotenuse &lt;var&gt;a&lt;/var&gt; of
   18361   a triangle with sides &lt;var&gt;b&lt;/var&gt; and &lt;var&gt;c&lt;/var&gt;
   18362  &lt;/figcaption&gt;
   18363 &lt;/figure&gt;</pre>
   18364 
   18365   </div>
   18366 
   18367 
   18368   <h4 id=the-samp-element><span class=secno>4.6.12 </span>The <dfn><code>samp</code></dfn> element</h4>
   18369 
   18370   <dl class=element><dt>Categories</dt>
   18371    <dd><a href=#flow-content>Flow content</a>.</dd>
   18372    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18373    <dt>Contexts in which this element may be used:</dt>
   18374    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18375    <dt>Content model:</dt>
   18376    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18377    <dt>Content attributes:</dt>
   18378    <dd><a href=#global-attributes>Global attributes</a></dd>
   18379    <dt>DOM interface:</dt>
   18380    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18381   </dl><p>The <code><a href=#the-samp-element>samp</a></code> element <a href=#represents>represents</a> (sample)
   18382   output from a program or computing system.</p>
   18383 
   18384   <p class=note>See the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
   18385   elements for more details.</p>
   18386 
   18387   <div class=example>
   18388    <p>This example shows the <code><a href=#the-samp-element>samp</a></code> element being used
   18389    inline:</p>
   18390    <pre>&lt;p&gt;The computer said &lt;samp&gt;Too much cheese in tray
   18391 two&lt;/samp&gt; but I didn't know what that meant.&lt;/p&gt;</pre>
   18392 
   18393    <p>This second example shows a block of sample output. Nested
   18394    <code><a href=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code> elements allow for the
   18395    styling of specific elements of the sample output using a
   18396    style sheet.</p>
   18397 
   18398    <pre>&lt;pre&gt;&lt;samp&gt;&lt;span class="prompt"&gt;jdoe@mowmow:~$&lt;/span&gt; &lt;kbd&gt;ssh demo.example.com&lt;/kbd&gt;
   18399 Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
   18400 Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
   18401 
   18402 &lt;span class="prompt"&gt;jdoe@demo:~$&lt;/span&gt; &lt;span class="cursor"&gt;_&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
   18403   </div>
   18404 
   18405 
   18406   <h4 id=the-kbd-element><span class=secno>4.6.13 </span>The <dfn><code>kbd</code></dfn> element</h4>
   18407 
   18408   <dl class=element><dt>Categories</dt>
   18409    <dd><a href=#flow-content>Flow content</a>.</dd>
   18410    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18411    <dt>Contexts in which this element may be used:</dt>
   18412    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18413    <dt>Content model:</dt>
   18414    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18415    <dt>Content attributes:</dt>
   18416    <dd><a href=#global-attributes>Global attributes</a></dd>
   18417    <dt>DOM interface:</dt>
   18418    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18419   </dl><p>The <code><a href=#the-kbd-element>kbd</a></code> element <a href=#represents>represents</a> user input
   18420   (typically keyboard input, although it may also be used to represent
   18421   other input, such as voice commands).</p>
   18422 
   18423   <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside a
   18424   <code><a href=#the-samp-element>samp</a></code> element, it represents the input as it was echoed
   18425   by the system.</p>
   18426 
   18427   <p>When the <code><a href=#the-kbd-element>kbd</a></code> element <em>contains</em> a
   18428   <code><a href=#the-samp-element>samp</a></code> element, it represents input based on system
   18429   output, for example invoking a menu item.</p>
   18430 
   18431   <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside another
   18432   <code><a href=#the-kbd-element>kbd</a></code> element, it represents an actual key or other
   18433   single unit of input as appropriate for the input mechanism.</p>
   18434 
   18435   <div class=example>
   18436    <p>Here the <code><a href=#the-kbd-element>kbd</a></code> element is used to indicate keys to press:</p>
   18437    <pre>&lt;p&gt;To make George eat an apple, press &lt;kbd&gt;&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;F3&lt;/kbd&gt;&lt;/kbd&gt;&lt;/p&gt;</pre>
   18438 
   18439    <p>In this second example, the user is told to pick a particular
   18440    menu item. The outer <code><a href=#the-kbd-element>kbd</a></code> element marks up a block of
   18441    input, with the inner <code><a href=#the-kbd-element>kbd</a></code> elements representing each
   18442    individual step of the input, and the <code><a href=#the-samp-element>samp</a></code> elements
   18443    inside them indicating that the steps are input based on something
   18444    being displayed by the system, in this case menu labels:</p>
   18445 
   18446    <pre>&lt;p&gt;To make George eat an apple, select
   18447     &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;File&lt;/samp&gt;&lt;/kbd&gt;|&lt;kbd&gt;&lt;samp&gt;Eat Apple...&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;
   18448 &lt;/p&gt;</pre>
   18449 
   18450    <p>Such precision isn't necessary; the following is equally fine:</p>
   18451 
   18452    <pre>&lt;p&gt;To make George eat an apple, select &lt;kbd&gt;File | Eat Apple...&lt;/kbd&gt;&lt;/p&gt;</pre>
   18453 
   18454   </div>
   18455 
   18456 
   18457   <h4 id=the-sub-and-sup-elements><span class=secno>4.6.14 </span>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>
   18458 
   18459   <dl class=element><dt>Categories</dt>
   18460    <dd><a href=#flow-content>Flow content</a>.</dd>
   18461    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18462    <dt>Contexts in which these elements may be used:</dt>
   18463    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18464    <dt>Content model:</dt>
   18465    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18466    <dt>Content attributes:</dt>
   18467    <dd><a href=#global-attributes>Global attributes</a></dd>
   18468    <dt>DOM interface:</dt>
   18469    <dd>Use <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18470   </dl><p>The <code><a href=#the-sub-and-sup-elements>sup</a></code> element <a href=#represents>represents</a> a
   18471   superscript and the <code><a href=#the-sub-and-sup-elements>sub</a></code> element <a href=#represents>represents</a>
   18472   a subscript.</p>
   18473 
   18474   <p>These elements must be used only to mark up typographical
   18475   conventions with specific meanings, not for typographical
   18476   presentation for presentation's sake. For example, it would be
   18477   inappropriate for the <code><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> elements
   18478   to be used in the name of the LaTeX document preparation system. In
   18479   general, authors should use these elements only if the
   18480   <em>absence</em> of those elements would change the meaning of the
   18481   content.</p>
   18482 
   18483   <p>In certain languages, superscripts are part of the typographical
   18484   conventions for some abbreviations.</p>
   18485 
   18486   <div class=example>
   18487    <pre>&lt;p&gt;The most beautiful women are
   18488 &lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline&lt;/span&gt; and
   18489 &lt;span lang="fr"&gt;&lt;abbr&gt;M&lt;sup&gt;me&lt;/sup&gt;&lt;/abbr&gt; Denise&lt;/span&gt;.&lt;/p&gt;</pre>
   18490   </div>
   18491 
   18492   <p>The <code><a href=#the-sub-and-sup-elements>sub</a></code> element can be used inside a
   18493   <code><a href=#the-var-element>var</a></code> element, for variables that have subscripts.</p>
   18494 
   18495   <div class=example>
   18496 
   18497    <p>Here, the <code><a href=#the-sub-and-sup-elements>sub</a></code> element is used to represents the
   18498    subscript that identifies the variable in a family of
   18499    variables:</p>
   18500 
   18501    <pre>&lt;p&gt;The coordinate of the &lt;var&gt;i&lt;/var&gt;th point is
   18502 (&lt;var&gt;x&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;&lt;var&gt;i&lt;/var&gt;&lt;/sub&gt;&lt;/var&gt;).
   18503 For example, the 10th point has coordinate
   18504 (&lt;var&gt;x&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;, &lt;var&gt;y&lt;sub&gt;10&lt;/sub&gt;&lt;/var&gt;).&lt;/p&gt;</pre>
   18505   </div>
   18506 
   18507   <p>Mathematical expressions often use subscripts and superscripts.
   18508   Authors are encouraged to use MathML for marking up mathematics, but
   18509   authors may opt to use <code><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> if
   18510   detailed mathematical markup is not desired. <a href=#refsMATHML>[MATHML]</a></p>
   18511 
   18512   <div class=example>
   18513    <pre>&lt;var&gt;E&lt;/var&gt;=&lt;var&gt;m&lt;/var&gt;&lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;</pre>
   18514    <pre>f(&lt;var&gt;x&lt;/var&gt;, &lt;var&gt;n&lt;/var&gt;) = log&lt;sub&gt;4&lt;/sub&gt;&lt;var&gt;x&lt;/var&gt;&lt;sup&gt;&lt;var&gt;n&lt;/var&gt;&lt;/sup&gt;</pre>
   18515   </div>
   18516 
   18517 
   18518 
   18519   <h4 id=the-i-element><span class=secno>4.6.15 </span>The <dfn><code>i</code></dfn> element</h4>
   18520 
   18521   <dl class=element><dt>Categories</dt>
   18522    <dd><a href=#flow-content>Flow content</a>.</dd>
   18523    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18524    <dt>Contexts in which this element may be used:</dt>
   18525    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18526    <dt>Content model:</dt>
   18527    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18528    <dt>Content attributes:</dt>
   18529    <dd><a href=#global-attributes>Global attributes</a></dd>
   18530    <dt>DOM interface:</dt>
   18531    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18532   </dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> a span of text
   18533   in an alternate voice or mood, or otherwise offset from the normal
   18534   prose, such as a taxonomic designation, a technical term, an
   18535   idiomatic phrase from another language, a thought, a ship name, or
   18536   some other prose whose typical typographic presentation is
   18537   italicized.</p>
   18538 
   18539   <p>Terms in languages different from the main text should be
   18540   annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
   18541   in XML, <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
   18542   attributes in the <span>XML namespace</span></a>).</p>
   18543 
   18544   <div class=example>
   18545    <p>The examples below show uses of the <code><a href=#the-i-element>i</a></code> element:</p>
   18546    <pre>&lt;p&gt;The &lt;i class="taxonomy"&gt;Felis silvestris catus&lt;/i&gt; is cute.&lt;/p&gt;
   18547 &lt;p&gt;The term &lt;i&gt;prose content&lt;/i&gt; is defined above.&lt;/p&gt;
   18548 &lt;p&gt;There is a certain &lt;i lang="fr"&gt;je ne sais quoi&lt;/i&gt; in the air.&lt;/p&gt;</pre>
   18549    <p>In the following example, a dream sequence is marked up using
   18550    <code><a href=#the-i-element>i</a></code> elements.</p>
   18551    <pre>&lt;p&gt;Raymond tried to sleep.&lt;/p&gt;
   18552 &lt;p&gt;&lt;i&gt;The ship sailed away on Thursday&lt;/i&gt;, he
   18553 dreamt. &lt;i&gt;The ship had many people aboard, including a beautiful
   18554 princess called Carey. He watched her, day-in, day-out, hoping she
   18555 would notice him, but she never did.&lt;/i&gt;&lt;/p&gt;
   18556 &lt;p&gt;&lt;i&gt;Finally one night he picked up the courage to speak with
   18557 her&mdash;&lt;/i&gt;&lt;/p&gt;
   18558 &lt;p&gt;Raymond woke with a start as the fire alarm rang out.&lt;/p&gt;</pre>
   18559   </div>
   18560 
   18561   <p>Authors are encouraged to use the <code title=attr-class><a href=#classes>class</a></code> attribute on the <code><a href=#the-i-element>i</a></code>
   18562   element to identify why the element is being used, so that if the
   18563   style of a particular use (e.g. dream sequences as opposed to
   18564   taxonomic terms) is to be changed at a later date, the author
   18565   doesn't have to go through the entire document (or series of related
   18566   documents) annotating each use. Similarly, authors are encouraged to
   18567   consider whether other elements might be more applicable than the
   18568   <code><a href=#the-i-element>i</a></code> element, for instance the <code><a href=#the-em-element>em</a></code> element for
   18569   marking up stress emphasis, or the <code><a href=#the-dfn-element>dfn</a></code> element to mark
   18570   up the defining instance of a term.</p>
   18571 
   18572   <p class=note>Style sheets can be used to format <code><a href=#the-i-element>i</a></code>
   18573   elements, just like any other element can be restyled. Thus, it is
   18574   not the case that content in <code><a href=#the-i-element>i</a></code> elements will
   18575   necessarily be italicized.</p>
   18576 
   18577 
   18578   <h4 id=the-b-element><span class=secno>4.6.16 </span>The <dfn><code>b</code></dfn> element</h4>
   18579 
   18580   <dl class=element><dt>Categories</dt>
   18581    <dd><a href=#flow-content>Flow content</a>.</dd>
   18582    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18583    <dt>Contexts in which this element may be used:</dt>
   18584    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18585    <dt>Content model:</dt>
   18586    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18587    <dt>Content attributes:</dt>
   18588    <dd><a href=#global-attributes>Global attributes</a></dd>
   18589    <dt>DOM interface:</dt>
   18590    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18591   </dl><p>The <code><a href=#the-b-element>b</a></code> element <a href=#represents>represents</a> a span of text
   18592   to be stylistically offset from the normal prose without conveying
   18593   any extra importance, such as key words in a document abstract,
   18594   product names in a review, or other spans of text whose typical
   18595   typographic presentation is boldened.</p>
   18596 
   18597   <div class=example>
   18598    <p>The following example shows a use of the <code><a href=#the-b-element>b</a></code> element
   18599    to highlight key words without marking them up as important:</p>
   18600    <pre>&lt;p&gt;The &lt;b&gt;frobonitor&lt;/b&gt; and &lt;b&gt;barbinator&lt;/b&gt; components are fried.&lt;/p&gt;</pre>
   18601   </div>
   18602 
   18603   <div class=example>
   18604    <p>In the following example, objects in a text adventure are
   18605    highlighted as being special by use of the <code><a href=#the-b-element>b</a></code>
   18606    element.</p>
   18607    <pre>&lt;p&gt;You enter a small room. Your &lt;b&gt;sword&lt;/b&gt; glows
   18608 brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre>
   18609   </div>
   18610 
   18611   <div class=example>
   18612    <p>Another case where the <code><a href=#the-b-element>b</a></code> element is appropriate is
   18613    in marking up the lede (or lead) sentence or paragraph. The
   18614    following example shows how a <a href=http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm>BBC
   18615    article about kittens adopting a rabbit as their own</a> could be
   18616    marked up:</p>
   18617    <pre>&lt;article&gt;
   18618  &lt;h2&gt;Kittens 'adopted' by pet rabbit&lt;/h2&gt;
   18619  &lt;p&gt;&lt;b class="lede"&gt;Six abandoned kittens have found an
   18620  unexpected new mother figure &mdash; a pet rabbit.&lt;/b&gt;&lt;/p&gt;
   18621  &lt;p&gt;Veterinary nurse Melanie Humble took the three-week-old
   18622  kittens to her Aberdeen home.&lt;/p&gt;
   18623 <i>[...]</i></pre>
   18624   </div>
   18625 
   18626   <p>As with the <code><a href=#the-i-element>i</a></code> element, authors are encouraged to use
   18627   the <code title=attr-class><a href=#classes>class</a></code> attribute on the
   18628   <code><a href=#the-b-element>b</a></code> element to identify why the element is being used, so
   18629   that if the style of a particular use is to be changed at a later
   18630   date, the author doesn't have to go through annotating each use.</p>
   18631 
   18632   <p>The <code><a href=#the-b-element>b</a></code> element should be used as a last resort when
   18633   no other element is more appropriate. In particular, headings should
   18634   use the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, stress emphasis
   18635   should use the <code><a href=#the-em-element>em</a></code> element, importance should be denoted
   18636   with the <code><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted
   18637   should use the <code><a href=#the-mark-element>mark</a></code> element.</p>
   18638 
   18639   <div class=example>
   18640    <p>The following would be <em>incorrect</em> usage:</p>
   18641    <pre class=bad>&lt;p&gt;&lt;b&gt;WARNING!&lt;/b&gt; Do not frob the barbinator!&lt;/p&gt;</pre>
   18642    <p>In the previous example, the correct element to use would have
   18643    been <code><a href=#the-strong-element>strong</a></code>, not <code><a href=#the-b-element>b</a></code>.</p>
   18644   </div>
   18645 
   18646   <p class=note>Style sheets can be used to format <code><a href=#the-b-element>b</a></code>
   18647   elements, just like any other element can be restyled. Thus, it is
   18648   not the case that content in <code><a href=#the-b-element>b</a></code> elements will
   18649   necessarily be boldened.</p>
   18650 
   18651 
   18652 
   18653   <h4 id=the-mark-element><span class=secno>4.6.17 </span>The <dfn><code>mark</code></dfn> element</h4>
   18654 
   18655   <dl class=element><dt>Categories</dt>
   18656    <dd><a href=#flow-content>Flow content</a>.</dd>
   18657    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18658    <dt>Contexts in which this element may be used:</dt>
   18659    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18660    <dt>Content model:</dt>
   18661    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18662    <dt>Content attributes:</dt>
   18663    <dd><a href=#global-attributes>Global attributes</a></dd>
   18664    <dt>DOM interface:</dt>
   18665    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18666   </dl><!-- v2: attribute that means "highlight this on the scrollbar" --><p>The <code><a href=#the-mark-element>mark</a></code> element <a href=#represents>represents</a> a run of
   18667   text in one document marked or highlighted for reference purposes,
   18668   due to its relevance in another context. When used in a quotation or
   18669   other block of text referred to from the prose, it indicates a
   18670   highlight that was not originally present but which has been added
   18671   to bring the reader's attention to a part of the text that might not
   18672   have been considered important by the original author when the block
   18673   was originally written, but which is now under previously unexpected
   18674   scrutiny. When used in the main prose of a document, it indicates a
   18675   part of the document that has been highlighted due to its likely
   18676   relevance to the user's current activity.</p>
   18677 
   18678   <div class=example>
   18679    <p>This example shows how the <code><a href=#the-mark-element>mark</a></code> element can be used
   18680    to bring attention to a particular part of a quotation:</p>
   18681    <pre>&lt;p lang="en-US"&gt;Consider the following quote:&lt;/p&gt;
   18682 &lt;blockquote lang="en-GB"&gt;
   18683  &lt;p&gt;Look around and you will find, no-one's really
   18684  &lt;mark&gt;colour&lt;/mark&gt; blind.&lt;/p&gt;
   18685 &lt;/blockquote&gt;
   18686 &lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
   18687 the person writing this quote is clearly not American.&lt;/p&gt;</pre>
   18688   </div>
   18689 
   18690   <div class=example>
   18691 
   18692    <p>Another example of the <code><a href=#the-mark-element>mark</a></code> element is highlighting
   18693    parts of a document that are matching some search string. If
   18694    someone looked at a document, and the server knew that the user was
   18695    searching for the word "kitten", then the server might return the
   18696    document with one paragraph modified as follows:</p>
   18697 
   18698    <pre>&lt;p&gt;I also have some &lt;mark&gt;kitten&lt;/mark&gt;s who are visiting me
   18699 these days. They're really cute. I think they like my garden! Maybe I
   18700 should adopt a &lt;mark&gt;kitten&lt;/mark&gt;.&lt;/p&gt;</pre>
   18701 
   18702   </div>
   18703 
   18704   <div class=example>
   18705 
   18706    <p>In the following snippet, a paragraph of text refers to a
   18707    specific part of a code fragment.</p>
   18708 
   18709    <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
   18710 &lt;pre&gt;&lt;code&gt;var i: Integer;
   18711 begin
   18712    i := &lt;mark&gt;1.1&lt;/mark&gt;;
   18713 end.&lt;/code&gt;&lt;/pre&gt;</pre>
   18714 
   18715    <p>This is separate from <em>syntax highlighting</em>, for which
   18716    <code><a href=#the-span-element>span</a></code> is more appropriate. Combining both, one would
   18717    get:</p>
   18718 
   18719    <pre>&lt;p&gt;The highlighted part below is where the error lies:&lt;/p&gt;
   18720 &lt;pre&gt;&lt;code&gt;&lt;span class=keyword&gt;var&lt;/span&gt; &lt;span class=ident&gt;i&lt;/span&gt;: &lt;span class=type&gt;Integer&lt;/span&gt;;
   18721 &lt;span class=keyword&gt;begin&lt;/span&gt;
   18722    &lt;span class=ident&gt;i&lt;/span&gt; := &lt;span class=literal&gt;&lt;mark&gt;1.1&lt;/mark&gt;&lt;/span&gt;;
   18723 &lt;span class=keyword&gt;end&lt;/span&gt;.&lt;/code&gt;&lt;/pre&gt;</pre>
   18724 
   18725   </div>
   18726 
   18727   <div class=example>
   18728 
   18729    <p>This is another example showing the use of <code><a href=#the-mark-element>mark</a></code> to
   18730    highlight a part of quoted text that was originally not
   18731    emphasized. In this example, common typographic conventions have
   18732    led the author to explicitly style <code><a href=#the-mark-element>mark</a></code> elements in
   18733    quotes to render in italics.</p>
   18734 
   18735    <pre>&lt;article&gt;
   18736  &lt;style scoped&gt;
   18737   blockquote mark, q mark {
   18738     font: inherit; font-style: italic;
   18739     text-decoration: none;
   18740     background: transparent; color: inherit;
   18741   }
   18742   .bubble em {
   18743     font: inherit; font-size: larger;
   18744     text-decoration: underline;
   18745   }
   18746  &lt;/style&gt;
   18747  &lt;h1&gt;She knew&lt;/h1&gt;
   18748  &lt;p&gt;Did you notice the subtle joke in the joke on panel 4?&lt;/p&gt;
   18749  &lt;blockquote&gt;
   18750   &lt;p class="bubble"&gt;I didn't &lt;em&gt;want&lt;/em&gt; to believe. &lt;mark&gt;Of course
   18751   on some level I realized it was a known-plaintext attack.&lt;/mark&gt; But I
   18752   couldn't admit it until I saw for myself.&lt;/p&gt;
   18753  &lt;/blockquote&gt;
   18754  &lt;p&gt;(Emphasis mine.) I thought that was great. It's so pedantic, yet it
   18755  explains everything neatly.&lt;/p&gt;
   18756 &lt;/article&gt;</pre>
   18757 
   18758    <p>Note, incidentally, the distinction between the <code><a href=#the-em-element>em</a></code>
   18759    element in this example, which is part of the original text being
   18760    quoted, and the <code><a href=#the-mark-element>mark</a></code> element, which is highlighting a
   18761    part for comment.</p>
   18762 
   18763   </div>
   18764 
   18765   <div class=example>
   18766 
   18767    <p>The following example shows the difference between denoting the
   18768    <em>importance</em> of a span of text (<code><a href=#the-strong-element>strong</a></code>) as
   18769    opposed to denoting the <em>relevance</em> of a span of text
   18770    (<code><a href=#the-mark-element>mark</a></code>). It is an extract from a textbook, where the
   18771    extract has had the parts relevant to the exam highlighted. The
   18772    safety warnings, important though they may be, are apparently not
   18773    relevant to the exam.</p>
   18774 
   18775    <pre>&lt;h3&gt;Wormhole Physics Introduction&lt;/h3&gt;
   18776 
   18777 &lt;p&gt;&lt;mark&gt;A wormhole in normal conditions can be held open for a
   18778 maximum of just under 39 minutes.&lt;/mark&gt; Conditions that can increase
   18779 the time include a powerful energy source coupled to one or both of
   18780 the gates connecting the wormhole, and a large gravity well (such as a
   18781 black hole).&lt;/p&gt;
   18782 
   18783 &lt;p&gt;&lt;mark&gt;Momentum is preserved across the wormhole. Electromagnetic
   18784 radiation can travel in both directions through a wormhole,
   18785 but matter cannot.&lt;/mark&gt;&lt;/p&gt;
   18786 
   18787 &lt;p&gt;When a wormhole is created, a vortex normally forms.
   18788 &lt;strong&gt;Warning: The vortex caused by the wormhole opening will
   18789 annihilate anything in its path.&lt;/strong&gt; Vortexes can be avoided when
   18790 using sufficiently advanced dialing technology.&lt;/p&gt;
   18791 
   18792 &lt;p&gt;&lt;mark&gt;An obstruction in a gate will prevent it from accepting a
   18793 wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
   18794 
   18795   </div>
   18796 
   18797 
   18798   <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</code></dfn> element</h4>
   18799 
   18800   <dl class=element><dt>Categories</dt>
   18801    <dd><a href=#flow-content>Flow content</a>.</dd>
   18802    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18803    <dt>Contexts in which this element may be used:</dt>
   18804    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18805    <dt>Content model:</dt>
   18806    <dd>One or more groups of: <a href=#phrasing-content>phrasing content</a> followed either by a single <code><a href=#the-rt-element>rt</a></code> element, or an <code><a href=#the-rp-element>rp</a></code> element, an <code><a href=#the-rt-element>rt</a></code> element, and another <code><a href=#the-rp-element>rp</a></code> element.</dd>
   18807    <dt>Content attributes:</dt>
   18808    <dd><a href=#global-attributes>Global attributes</a></dd>
   18809    <dt>DOM interface:</dt>
   18810    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18811   </dl><p>The <code><a href=#the-ruby-element>ruby</a></code> element allows one or more spans of
   18812   phrasing content to be marked with ruby annotations. Ruby
   18813   annotations are short runs of text presented alongside base text,
   18814   primarily used in East Asian typography as a guide for
   18815   pronunciation or to include other annotations. In Japanese, this
   18816   form of typography is also known as <i>furigana</i>.</p>
   18817 
   18818   <p>A <code><a href=#the-ruby-element>ruby</a></code> element <a href=#represents>represents</a> the spans of
   18819   phrasing content it contains, ignoring all the child <code><a href=#the-rt-element>rt</a></code>
   18820   and <code><a href=#the-rp-element>rp</a></code> elements and their descendants. Those spans of
   18821   phrasing content have associated annotations created using the
   18822   <code><a href=#the-rt-element>rt</a></code> element.</p>
   18823 
   18824   <div class=example>
   18825 
   18826    <!-- this is the hiragana for the word "kanji" ("chinese character") in japanese -->
   18827    <!-- in japanese, ruby-like typography is called "furigana" -->
   18828 
   18829    <p>In this example, each ideograph in the Japanese text <span lang=ja title="">&#28450;&#23383;</span> is annotated with its
   18830    reading in hiragana.</p>
   18831 
   18832    <pre lang=ja>...
   18833 &lt;ruby&gt;
   18834  &#28450; &lt;rt&gt; &#12363;&#12435; &lt;/rt&gt;
   18835  &#23383; &lt;rt&gt; &#12376;&#12288; &lt;/rt&gt;
   18836 &lt;/ruby&gt;
   18837 ...</pre>
   18838 
   18839    <p>This might be rendered as:</p>
   18840 
   18841    <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." src=images/sample-ruby-ja.png></p>
   18842 
   18843   </div>
   18844 
   18845   <div class=example>
   18846 
   18847    <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->
   18848 
   18849    <p>In this example, each ideograph in the traditional Chinese text
   18850    <span lang=zh-TW title="">&#28450;&#23383;</span> is annotated
   18851    with its bopomofo reading.</p>
   18852 
   18853    <pre lang=zh-TW>&lt;ruby&gt;
   18854  &#28450; &lt;rt&gt; &#12559;&#12578;&#715; &lt;/rt&gt;
   18855  &#23383; &lt;rt&gt; &#12567;&#715;&#12288; &lt;/rt&gt;
   18856 &lt;/ruby&gt;</pre>
   18857 
   18858    <p>This might be rendered as:</p>
   18859 
   18860    <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=images/sample-ruby-bopomofo.png></p>
   18861 
   18862   </div>
   18863 
   18864   <div class=example>
   18865 
   18866    <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->
   18867 
   18868    <p>In this example, each ideograph in the simplified Chinese text
   18869    <span lang=zh-CN title="">&#27721;&#23383;</span> is annotated
   18870    with its pinyin reading.</p>
   18871 
   18872    <pre lang=zh-CN>...
   18873 &lt;ruby&gt;
   18874  &#27721; &lt;rt&gt; h&agrave;n &lt;/rt&gt;
   18875  &#23383; &lt;rt&gt; z&igrave;&nbsp; &lt;/rt&gt;
   18876 &lt;/ruby&gt;
   18877 ...</pre>
   18878 
   18879    <p>This might be rendered as:</p>
   18880 
   18881    <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." src=images/sample-ruby-pinyin.png></p>
   18882 
   18883   </div>
   18884 
   18885   <!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
   18886 
   18887 
   18888   <h4 id=the-rt-element><span class=secno>4.6.19 </span>The <dfn><code>rt</code></dfn> element</h4>
   18889 
   18890   <dl class=element><dt>Categories</dt>
   18891    <dd>None.</dd>
   18892    <dt>Contexts in which this element may be used:</dt>
   18893    <dd>As a child of a <code><a href=#the-ruby-element>ruby</a></code> element.</dd>
   18894    <dt>Content model:</dt>
   18895    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18896    <dt>Content attributes:</dt>
   18897    <dd><a href=#global-attributes>Global attributes</a></dd>
   18898    <dt>DOM interface:</dt>
   18899    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18900   </dl><p>The <code><a href=#the-rt-element>rt</a></code> element marks the ruby text component of a
   18901   ruby annotation.</p>
   18902 
   18903   <p>An <code><a href=#the-rt-element>rt</a></code> element <span class=impl>that is a child of
   18904   a <code><a href=#the-ruby-element>ruby</a></code> element</span> <a href=#represents>represents</a> an
   18905   annotation (given by its children) for the zero or more nodes of
   18906   phrasing content that immediately precedes it in the
   18907   <code><a href=#the-ruby-element>ruby</a></code> element, ignoring <code><a href=#the-rp-element>rp</a></code> elements.</p>
   18908 
   18909   <div class=impl>
   18910 
   18911   <p>An <code><a href=#the-rt-element>rt</a></code> element that is not a child of a
   18912   <code><a href=#the-ruby-element>ruby</a></code> element represents the same thing as its
   18913   children.</p>
   18914 
   18915   </div>
   18916 
   18917 
   18918   <h4 id=the-rp-element><span class=secno>4.6.20 </span>The <dfn><code>rp</code></dfn> element</h4>
   18919 
   18920   <dl class=element><dt>Categories</dt>
   18921    <dd>None.</dd>
   18922    <dt>Contexts in which this element may be used:</dt>
   18923    <dd>As a child of a <code><a href=#the-ruby-element>ruby</a></code> element, either immediately before or immediately after an <code><a href=#the-rt-element>rt</a></code> element.</dd>
   18924    <dt>Content model:</dt>
   18925    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18926 <!--
   18927    <dd>If the <code>rp</code> element is immediately after an <code>rt</code> element that is immediately preceded by another <code>rp</code> element: a single character from Unicode character class Pe.</dd>
   18928    <dd>Otherwise: a single character from Unicode character class Ps.</dd>
   18929 -->
   18930    <dt>Content attributes:</dt>
   18931    <dd><a href=#global-attributes>Global attributes</a></dd>
   18932    <dt>DOM interface:</dt>
   18933    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18934   </dl><p>The <code><a href=#the-rp-element>rp</a></code> element can be used to provide parentheses
   18935   around a ruby text component of a ruby annotation, to be shown by
   18936   user agents that don't support ruby annotations.</p>
   18937 
   18938   <p>An <code><a href=#the-rp-element>rp</a></code> element <span class=impl>that is a child of
   18939   a <code><a href=#the-ruby-element>ruby</a></code> element</span> <a href=#represents>represents</a>
   18940   nothing<span class=impl> and its contents must be
   18941   ignored</span>. <span class=impl>An <code><a href=#the-rp-element>rp</a></code> element whose
   18942   parent element is not a <code><a href=#the-ruby-element>ruby</a></code> element
   18943   <a href=#represents>represents</a> its children.</span></p>
   18944 
   18945   <div class=example>
   18946 
   18947    <p>The example above, in which each ideograph in the text <span lang=ja title="">&#28450;&#23383;</span> is annotated with its
   18948    phonetic reading, could be expanded to use <code><a href=#the-rp-element>rp</a></code> so that in
   18949    legacy user agents the readings are in parentheses:</p>
   18950 
   18951    <pre lang=ja>...
   18952 &lt;ruby&gt;
   18953  &#28450; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12363;&#12435;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
   18954  &#23383; &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&#12376;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
   18955 &lt;/ruby&gt;
   18956 ...</pre>
   18957 
   18958    <p>In conforming user agents the rendering would be as above, but
   18959    in user agents that do not support ruby, the rendering would
   18960    be:</p>
   18961 
   18962    <pre lang=ja>... &#28450; (&#12363;&#12435;) &#23383; (&#12376;) ...</pre>
   18963 
   18964   </div>
   18965 
   18966 
   18967   <h4 id=the-bdo-element><span class=secno>4.6.21 </span>The <dfn><code>bdo</code></dfn> element</h4>
   18968 
   18969   <dl class=element><dt>Categories</dt>
   18970    <dd><a href=#flow-content>Flow content</a>.</dd>
   18971    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18972    <dt>Contexts in which this element may be used:</dt>
   18973    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   18974    <dt>Content model:</dt>
   18975    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   18976    <dt>Content attributes:</dt>
   18977    <dd><a href=#global-attributes>Global attributes</a></dd>
   18978    <dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
   18979    <dt>DOM interface:</dt>
   18980    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   18981   </dl><p>The <code><a href=#the-bdo-element>bdo</a></code> element <a href=#represents>represents</a> explicit
   18982   text directionality formatting control for its children. It allows
   18983   authors to override the Unicode bidirectional algorithm by
   18984   explicitly specifying a direction override. <a href=#refsBIDI>[BIDI]</a></p>
   18985 
   18986   <p>Authors must specify the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
   18987   attribute on this element, with the value <code>ltr</code> to
   18988   specify a left-to-right override and with the value <code>rtl</code>
   18989   to specify a right-to-left override.</p>
   18990 
   18991   <div class=impl>
   18992 
   18993   <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
   18994   attribute set to the exact value <code>ltr</code>, then for the
   18995   purposes of the bidi algorithm, the user agent must act as if there
   18996   was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start of the
   18997   element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
   18998   element.</p>
   18999 
   19000   <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>
   19001   attribute set to the exact value <code>rtl</code>, then for the
   19002   purposes of the bidi algorithm, the user agent must act as if there
   19003   was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
   19004   element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
   19005   element.</p>
   19006 
   19007   <p>The requirements on handling the <code><a href=#the-bdo-element>bdo</a></code> element for the
   19008   bidi algorithm may be implemented indirectly through the style
   19009   layer. For example, an HTML+CSS user agent should implement these
   19010   requirements by implementing the CSS 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>
   19011 
   19012   </div>
   19013 
   19014 
   19015 
   19016   <h4 id=the-span-element><span class=secno>4.6.22 </span>The <dfn><code>span</code></dfn> element</h4>
   19017 
   19018   <dl class=element><dt>Categories</dt>
   19019    <dd><a href=#flow-content>Flow content</a>.</dd>
   19020    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   19021    <dt>Contexts in which this element may be used:</dt>
   19022    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   19023    <dt>Content model:</dt>
   19024    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   19025    <dt>Content attributes:</dt>
   19026    <dd><a href=#global-attributes>Global attributes</a></dd>
   19027    <dt>DOM interface:</dt>
   19028    <dd>
   19029     <pre class=idl>interface <dfn id=htmlspanelement>HTMLSpanElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   19030    </dd>
   19031   </dl><p>The <code><a href=#the-span-element>span</a></code> element doesn't mean anything on its own,
   19032   but can be useful when used together with other attributes,
   19033   e.g. <code title=attr-class><a href=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, or <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>. It <a href=#represents>represents</a> its
   19034   children.</p>
   19035 
   19036   <div class=example>
   19037 
   19038    <p>In this example, a code fragment is marked up using
   19039    <code><a href=#the-span-element>span</a></code> elements and <code title=attr-class><a href=#classes>class</a></code> attributes so that its keywords and
   19040    identifiers can be color-coded from CSS:</p>
   19041 
   19042    <!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->
   19043 
   19044    <pre>&lt;pre&gt;&lt;code class="lang-c"&gt;&lt;span class="keyword"&gt;for&lt;/span&gt; (&lt;span class="ident"&gt;j&lt;/span&gt; = 0; &lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt; 256; &lt;span class="ident"&gt;j&lt;/span&gt;++) {
   19045   &lt;span class="ident"&gt;i_t3&lt;/span&gt; = (&lt;span class="ident"&gt;i_t3&lt;/span&gt; &amp; 0x1ffff) | (&lt;span class="ident"&gt;j&lt;/span&gt; &amp;lt;&amp;lt; 17);
   19046   &lt;span class="ident"&gt;i_t6&lt;/span&gt; = (((((((&lt;span class="ident"&gt;i_t3&lt;/span&gt; &gt;&gt; 3) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 1) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 8) ^ &lt;span class="ident"&gt;i_t3&lt;/span&gt;) &gt;&gt; 5) &amp; 0xff;
   19047   &lt;span class="keyword"&gt;if&lt;/span&gt; (&lt;span class="ident"&gt;i_t6&lt;/span&gt; == &lt;span class="ident"&gt;i_t1&lt;/span&gt;)
   19048     &lt;span class="keyword"&gt;break&lt;/span&gt;;
   19049 }&lt;/code&gt;&lt;/pre&gt;</pre>
   19050 
   19051   </div>
   19052 
   19053 
   19054 
   19055   <h4 id=the-br-element><span class=secno>4.6.23 </span>The <dfn><code>br</code></dfn> element</h4>
   19056 
   19057   <dl class=element><dt>Categories</dt>
   19058    <dd><a href=#flow-content>Flow content</a>.</dd>
   19059    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   19060    <dt>Contexts in which this element may be used:</dt>
   19061    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   19062    <dt>Content model:</dt>
   19063    <dd>Empty.</dd>
   19064    <dt>Content attributes:</dt>
   19065    <dd><a href=#global-attributes>Global attributes</a></dd>
   19066    <dt>DOM interface:</dt>
   19067    <dd>
   19068     <pre class=idl>interface <dfn id=htmlbrelement>HTMLBRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   19069    </dd>
   19070   </dl><p>The <code><a href=#the-br-element>br</a></code> element <a href=#represents>represents</a> a line
   19071   break.</p>
   19072 
   19073   <p><code><a href=#the-br-element>br</a></code> elements must be used only for line breaks that
   19074   are actually part of the content, as in poems or addresses.</p>
   19075 
   19076   <div class=example>
   19077 
   19078   <p>The following example is correct usage of the <code><a href=#the-br-element>br</a></code>
   19079   element:</p>
   19080 
   19081    <pre>&lt;p&gt;P. Sherman&lt;br&gt;
   19082 42 Wallaby Way&lt;br&gt;
   19083 Sydney&lt;/p&gt;</pre>
   19084 
   19085   </div>
   19086 
   19087   <p><code><a href=#the-br-element>br</a></code> elements must not be used for separating thematic
   19088   groups in a paragraph.</p>
   19089 
   19090   <div class=example>
   19091 
   19092    <p>The following examples are non-conforming, as they abuse the
   19093    <code><a href=#the-br-element>br</a></code> element:</p>
   19094 
   19095    <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
   19096 &lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>
   19097 
   19098    <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
   19099 &lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>
   19100 
   19101    <p>Here are alternatives to the above, which are correct:</p>
   19102 
   19103    <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
   19104 &lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>
   19105 
   19106    <pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
   19107 &lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>
   19108 
   19109   </div>
   19110 
   19111   <p>If a <a href=#paragraph>paragraph</a> consists of nothing but a single
   19112   <code><a href=#the-br-element>br</a></code> element, it represents a placeholder blank line
   19113   (e.g. as in a template). Such blank lines must not be used for
   19114   presentation purposes.</p>
   19115 
   19116   <div class=impl>
   19117 
   19118   <p>Any content inside <code><a href=#the-br-element>br</a></code> elements must not be
   19119   considered part of the surrounding text.</p>
   19120 
   19121   <p>A <code><a href=#the-br-element>br</a></code> element does not separate paragraphs for the
   19122   purposes of the Unicode bidirectional algorithm. <a href=#refsBIDI>[BIDI]</a></p>
   19123 
   19124   </div>
   19125 
   19126 
   19127   <h4 id=the-wbr-element><span class=secno>4.6.24 </span>The <dfn><code>wbr</code></dfn> element</h4>
   19128 
   19129   <dl class=element><dt>Categories</dt>
   19130    <dd><a href=#flow-content>Flow content</a>.</dd>
   19131    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   19132    <dt>Contexts in which this element may be used:</dt>
   19133    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   19134    <dt>Content model:</dt>
   19135    <dd>Empty.</dd>
   19136    <dt>Content attributes:</dt>
   19137    <dd><a href=#global-attributes>Global attributes</a></dd>
   19138    <dt>DOM interface:</dt>
   19139    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   19140   </dl><p>The <code><a href=#the-wbr-element>wbr</a></code> element <a href=#represents>represents</a> a line break
   19141   opportunity.</p>
   19142 
   19143   <div class=example>
   19144 
   19145    <p>In the following example, someone is quoted as saying something
   19146    which, for effect, is written as one long word. However, to ensure
   19147    that the text can be wrapped in a readable fashion, the individual
   19148    words in the quote are separated using a <code><a href=#the-wbr-element>wbr</a></code>
   19149    element.</p>
   19150 
   19151    <pre>&lt;p&gt;So then he pointed at the tiger and screamed
   19152 "there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>
   19153 
   19154   </div>
   19155 
   19156   <div class=impl>
   19157 
   19158   <p>Any content inside <code><a href=#the-wbr-element>wbr</a></code> elements must not be
   19159   considered part of the surrounding text.</p>
   19160 
   19161   </div>
   19162 
   19163 
   19164 
   19165   <h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
   19166 
   19167   <p><i>This section is non-normative.</i></p>
   19168 
   19169   <table><thead><tr><th>Element
   19170      <th>Purpose
   19171      <th>Example
   19172    <tbody><tr><td><code><a href=#the-a-element>a</a></code>
   19173      <td>Hyperlinks
   19174      <td><pre class=example>Visit my <strong>&lt;a href="drinks.html"&gt;drinks&lt;/a&gt;</strong> page.</pre>
   19175 
   19176     <tr><td><code><a href=#the-em-element>em</a></code>
   19177      <td>Stress emphasis
   19178      <td><pre class=example>I must say I <strong>&lt;em&gt;adore&lt;/em&gt;</strong> lemonade.</pre>
   19179 
   19180     <tr><td><code><a href=#the-strong-element>strong</a></code>
   19181      <td>Importance
   19182      <td><pre class=example>This tea is <strong>&lt;strong&gt;very hot&lt;/strong&gt;</strong>.</pre>
   19183 
   19184     <tr><td><code><a href=#the-small-element>small</a></code>
   19185      <td>Side comments
   19186      <td><pre class=example>These grapes are made into wine. <strong>&lt;small&gt;Alcohol is addictive.&lt;/small&gt;</strong></pre>
   19187 
   19188     <tr><td><code><a href=#the-cite-element>cite</a></code>
   19189      <td>Titles of works
   19190      <td><pre class=example>The case <strong>&lt;cite&gt;Hugo v. Danielle&lt;/cite&gt;</strong> is relevant here.</pre>
   19191 
   19192     <tr><td><code><a href=#the-q-element>q</a></code>
   19193      <td>Quotations
   19194      <td><pre class=example>The judge said <strong>&lt;q&gt;You can drink water from the fish tank&lt;/q&gt;</strong> but advised against it.</pre>
   19195 
   19196     <tr><td><code><a href=#the-dfn-element>dfn</a></code>
   19197      <td>Defining instance
   19198      <td><pre class=example>The term <strong>&lt;dfn&gt;organic food&lt;/dfn&gt;</strong> refers to food produced without synthetic chemicals.</pre>
   19199 
   19200     <tr><td><code><a href=#the-abbr-element>abbr</a></code>
   19201      <td>Abbreviations
   19202      <td><pre class=example>Organic food in Ireland is certified by the <strong>&lt;abbr title="Irish Organic Farmers and Growers Association"&gt;IOFGA&lt;/abbr&gt;</strong>.</pre>
   19203 
   19204     <tr><td><code><a href=#the-time-element>time</a></code>
   19205      <td>Date and/or time
   19206      <td><pre class=example>Published <strong>&lt;time&gt;2009-10-21&lt;/time&gt;</strong>.</pre>
   19207 
   19208     <tr><td><code><a href=#the-code-element>code</a></code>
   19209      <td>Computer code
   19210      <td><pre class=example>The <strong>&lt;code&gt;fruitdb&lt;/code&gt;</strong> program can be used for tracking fruit production.</pre>
   19211 
   19212     <tr><td><code><a href=#the-var-element>var</a></code>
   19213      <td>Variables
   19214      <td><pre class=example>If there are <strong>&lt;var&gt;n&lt;/var&gt;</strong> fruit in the bowl, at least <strong>&lt;var&gt;n&lt;/var&gt;</strong>&divide;2 will be ripe.</pre>
   19215 
   19216     <tr><td><code><a href=#the-samp-element>samp</a></code>
   19217      <td>Computer output
   19218      <td><pre class=example>The computer said <strong>&lt;samp&gt;Unknown error -3&lt;/samp&gt;</strong>.</pre>
   19219 
   19220     <tr><td><code><a href=#the-kbd-element>kbd</a></code>
   19221      <td>User input
   19222      <td><pre class=example>Hit <strong>&lt;kbd&gt;F1&lt;/kbd&gt;</strong> to continue.</pre>
   19223 
   19224     <tr><td><code><a href=#the-sub-and-sup-elements>sub</a></code>
   19225      <td>Subscripts
   19226      <td><pre class=example>Water is H<strong>&lt;sub&gt;2&lt;/sub&gt;</strong>O.</pre>
   19227 
   19228     <tr><td><code><a href=#the-sub-and-sup-elements>sup</a></code>
   19229      <td>Superscripts
   19230      <td><pre class=example>The Hydrogen in heavy water is usually <strong>&lt;sup&gt;2&lt;/sup&gt;</strong>H.</pre>
   19231 
   19232     <tr><td><code><a href=#the-i-element>i</a></code>
   19233      <td>Alternative voice
   19234      <td><pre class=example>Lemonade consists primarily of <strong>&lt;i&gt;Citrus limon&lt;/i&gt;</strong>.</pre>
   19235 
   19236     <tr><td><code><a href=#the-b-element>b</a></code>
   19237      <td>Keywords
   19238      <td><pre class=example>Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>
   19239 
   19240     <tr><td><code><a href=#the-mark-element>mark</a></code>
   19241      <td>Highlight
   19242      <td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
   19243 
   19244     <tr><td><code><a href=#the-ruby-element>ruby</a></code>, <code><a href=#the-rt-element>rt</a></code>, <code><a href=#the-rp-element>rp</a></code>
   19245      <td>Ruby annotations
   19246      <td><pre class=example><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>
   19247 
   19248     <tr><td><code><a href=#the-bdo-element>bdo</a></code>
   19249      <td>Text directionality formatting
   19250      <td><pre class=example>The proposal is to write English, but in reverse order. "Juice" would become "<strong>&lt;bdo dir=rtl&gt;Juice&lt;/bdo&gt;</strong>"</pre>
   19251 
   19252     <tr><td><code><a href=#the-span-element>span</a></code>
   19253      <td>Other
   19254      <td><pre class=example>In French we call it <strong>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</strong>.</pre>
   19255 
   19256     <tr><td><code><a href=#the-br-element>br</a></code>
   19257      <td>Line break
   19258      <td><pre class=example>Simply Orange Juice Company<strong>&lt;br&gt;</strong>Apopka, FL 32703<strong>&lt;br&gt;</strong>U.S.A.</pre>
   19259 
   19260     <tr><td><code><a href=#the-wbr-element>wbr</a></code>
   19261      <td>Line breaking opportunity
   19262      <td><pre class=example>www.simply<strong>&lt;wbr&gt;</strong>orange<strong>&lt;wbr&gt;</strong>juice.com</pre>
   19263 
   19264   </table><h3 id=edits><span class=secno>4.7 </span>Edits</h3>
   19265 
   19266   <p>The <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements represent
   19267   edits to the document.</p>
   19268 
   19269 
   19270   <h4 id=the-ins-element><span class=secno>4.7.1 </span>The <dfn><code>ins</code></dfn> element</h4>
   19271 
   19272   <dl class=element><dt>Categories</dt>
   19273    <dd><a href=#flow-content>Flow content</a>.</dd>
   19274    <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   19275    <dt>Contexts in which this element may be used:</dt>
   19276    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   19277    <dt>Content model:</dt>
   19278    <dd><a href=#transparent>Transparent</a>.</dd>
   19279    <dt>Content attributes:</dt>
   19280    <dd><a href=#global-attributes>Global attributes</a></dd>
   19281    <dd><code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code></dd>
   19282    <dd><code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></dd>
   19283    <dt>DOM interface:</dt>
   19284    <dd>Uses the <code><a href=#htmlmodelement>HTMLModElement</a></code> interface.</dd>
   19285   </dl><p>The <code><a href=#the-ins-element>ins</a></code> element <a href=#represents>represents</a> an addition
   19286   to the document.</p>
   19287 
   19288   <div class=example>
   19289 
   19290    <p>The following represents the addition of a single paragraph:</p>
   19291 
   19292    <pre>&lt;aside&gt;
   19293  &lt;ins&gt;
   19294   &lt;p&gt; I like fruit. &lt;/p&gt;
   19295  &lt;/ins&gt;
   19296 &lt;/aside&gt;</pre>
   19297 
   19298    <p>As does this, because everything in the <code><a href=#the-aside-element>aside</a></code>
   19299    element here counts as <a href=#phrasing-content>phrasing content</a> and therefore
   19300    there is just one <a href=#paragraph>paragraph</a>:</p>
   19301 
   19302    <pre>&lt;aside&gt;
   19303  &lt;ins&gt;
   19304   Apples are &lt;em&gt;tasty&lt;/em&gt;.
   19305  &lt;/ins&gt;
   19306  &lt;ins&gt;
   19307   So are pears.
   19308  &lt;/ins&gt;
   19309 &lt;/aside&gt;</pre>
   19310 
   19311   </div>
   19312 
   19313   <p><code><a href=#the-ins-element>ins</a></code> elements should not cross <a href=#paragraph title=paragraph>implied paragraph</a> boundaries.</p>
   19314 
   19315   <div class=example>
   19316 
   19317    <p>The following example represents the addition of two paragraphs,
   19318    the second of which was inserted in two parts. The first
   19319    <code><a href=#the-ins-element>ins</a></code> element in this example thus crosses a paragraph
   19320    boundary, which is considered poor form.</p>
   19321 
   19322    <pre class=bad>&lt;aside&gt;
   19323  &lt;!-- don't do this --&gt;
   19324  &lt;ins datetime="2005-03-16T00:00Z"&gt;
   19325   &lt;p&gt; I like fruit. &lt;/p&gt;
   19326   Apples are &lt;em&gt;tasty&lt;/em&gt;.
   19327  &lt;/ins&gt;
   19328  &lt;ins datetime="2007-12-19T00:00Z"&gt;
   19329   So are pears.
   19330  &lt;/ins&gt;
   19331 &lt;/aside&gt;</pre>
   19332 
   19333    <p>Here is a better way of marking this up. It uses more elements,
   19334    but none of the elements cross implied paragraph boundaries.</p>
   19335 
   19336    <pre>&lt;aside&gt;
   19337  &lt;ins datetime="2005-03-16T00:00Z"&gt;
   19338   &lt;p&gt; I like fruit. &lt;/p&gt;
   19339  &lt;/ins&gt;
   19340  &lt;ins datetime="2005-03-16T00:00Z"&gt;
   19341   Apples are &lt;em&gt;tasty&lt;/em&gt;.
   19342  &lt;/ins&gt;
   19343  &lt;ins datetime="2007-12-19T00:00Z"&gt;
   19344   So are pears.
   19345  &lt;/ins&gt;
   19346 &lt;/aside&gt;</pre>
   19347 
   19348    <!-- Those dates aren't random. They're the start and end of
   19349    something. Can you guess what? -->
   19350 
   19351   </div>
   19352 
   19353 
   19354   <h4 id=the-del-element><span class=secno>4.7.2 </span>The <dfn><code>del</code></dfn> element</h4>
   19355 
   19356   <dl class=element><dt>Categories</dt>
   19357    <dd><a href=#flow-content>Flow content</a>.</dd>
   19358    <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   19359    <dt>Contexts in which this element may be used:</dt>
   19360    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   19361    <dt>Content model:</dt>
   19362    <dd><a href=#transparent>Transparent</a>.</dd>
   19363    <dt>Content attributes:</dt>
   19364    <dd><a href=#global-attributes>Global attributes</a></dd>
   19365    <dd><code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code></dd>
   19366    <dd><code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></dd>
   19367    <dt>DOM interface:</dt>
   19368    <dd>Uses the <code><a href=#htmlmodelement>HTMLModElement</a></code> interface.</dd>
   19369   </dl><p>The <code><a href=#the-del-element>del</a></code> element <a href=#represents>represents</a> a removal
   19370   from the document.</p>
   19371 
   19372   <p><code><a href=#the-del-element>del</a></code> elements should not cross <a href=#paragraph title=paragraph>implied paragraph</a> boundaries.</p>
   19373 
   19374   <div class=example>
   19375 
   19376    <p>The following shows a "to do" list where items that have been
   19377    done are crossed-off with the date and time of their
   19378    completion.</p>
   19379 
   19380    <pre>&lt;h1&gt;To Do&lt;/h1&gt;
   19381 &lt;ul&gt;
   19382  &lt;li&gt;Empty the dishwasher&lt;/li&gt;
   19383  &lt;li&gt;&lt;del datetime="2009-10-11T01:25-07:00"&gt;Watch Walter Lewin's lectures&lt;/del&gt;&lt;/li&gt;
   19384  &lt;li&gt;&lt;del datetime="2009-10-10T23:38-07:00"&gt;Download more tracks&lt;/del&gt;&lt;/li&gt;
   19385  &lt;li&gt;Buy a printer&lt;/li&gt;
   19386 &lt;/ul&gt;</pre>
   19387 
   19388   </div>
   19389 
   19390 
   19391 
   19392   <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>
   19393 
   19394   <p>The <dfn id=attr-mod-cite title=attr-mod-cite><code>cite</code></dfn> attribute
   19395   may be used to specify the address of a document that explains the
   19396   change. When that document is long, for instance the minutes of a
   19397   meeting, authors are encouraged to include a fragment identifier
   19398   pointing to the specific part of that document that discusses the
   19399   change.</p>
   19400 
   19401   <p>If the <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code> attribute is
   19402   present, it must be a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
   19403   spaces</a> that explains the change. <span class=impl>To obtain
   19404   the corresponding citation link, the value of the attribute must be
   19405   <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the
   19406   element. User agents should allow users to follow such citation
   19407   links.</span></p>
   19408 
   19409 
   19410   <p>The <dfn id=attr-mod-datetime title=attr-mod-datetime><code>datetime</code></dfn>
   19411   attribute may be used to specify the time and date of the change.</p>
   19412 
   19413   <p>If present, the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code>
   19414   attribute must be a <a href=#valid-global-date-and-time-string>valid global date and time string</a>
   19415   value.</p>
   19416 
   19417   <div class=impl>
   19418 
   19419   <p>User agents must parse the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attribute according to the
   19420   <a href=#parse-a-global-date-and-time-string>parse a global date and time string</a> algorithm. If that
   19421   doesn't return a time, then the modification has no associated
   19422   timestamp (the value is non-conforming; it is not a <a href=#valid-global-date-and-time-string>valid
   19423   global date and time string</a>). Otherwise, the modification is
   19424   marked as having been made at the given datetime. User agents should
   19425   use the associated time-zone offset information to determine which
   19426   time zone to present the given datetime in.</p>
   19427 
   19428   </div>
   19429 
   19430   <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>
   19431   interface:</p>
   19432 
   19433   <pre class=idl>interface <dfn id=htmlmodelement>HTMLModElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   19434            attribute DOMString <a href=#dom-mod-cite title=dom-mod-cite>cite</a>;
   19435            attribute DOMString <a href=#dom-mod-datetime title=dom-mod-datetime>dateTime</a>;
   19436 };</pre>
   19437 
   19438   <div class=impl>
   19439 
   19440   <p>The <dfn id=dom-mod-cite title=dom-mod-cite><code>cite</code></dfn> IDL
   19441   attribute must <a href=#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
   19442   must <a href=#reflect>reflect</a> the element's <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> content attribute.</p>
   19443 
   19444   </div>
   19445 
   19446 
   19447 
   19448   <h4 id=edits-and-paragraphs><span class=secno>4.7.4 </span>Edits and paragraphs</h4>
   19449 
   19450   <p><i>This section is non-normative.</i></p>
   19451 
   19452   <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
   19453   affect <a href=#paragraph title=paragraph>paragraphing</a>, it is possible,
   19454   in some cases where paragraphs are <a href=#paragraph title=paragraph>implied</a> (without explicit <code><a href=#the-p-element>p</a></code>
   19455   elements), for an <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element to
   19456   span both an entire paragraph or other non-<a href=#phrasing-content>phrasing
   19457   content</a> elements and part of another paragraph. For
   19458   example:</p>
   19459 
   19460   <pre>&lt;section&gt;
   19461  &lt;ins&gt;
   19462   &lt;p&gt;
   19463    This is a paragraph that was inserted.
   19464   &lt;/p&gt;
   19465   This is another paragraph whose first sentence was inserted
   19466   at the same time as the paragraph above.
   19467  &lt;/ins&gt;
   19468  This is a second sentence, which was there all along.
   19469 &lt;/section&gt;</pre>
   19470 
   19471   <p>By only wrapping some paragraphs in <code><a href=#the-p-element>p</a></code> elements, one
   19472   can even get the end of one paragraph, a whole second paragraph,
   19473   and the start of a third paragraph to be covered by the same
   19474   <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element (though this is very
   19475   confusing, and not considered good practice):</p>
   19476 
   19477   <pre class=bad>&lt;section&gt;
   19478  This is the first paragraph. &lt;ins&gt;This sentence was
   19479  inserted.
   19480  &lt;p&gt;This second paragraph was inserted.&lt;/p&gt;
   19481  This sentence was inserted too.&lt;/ins&gt; This is the
   19482  third paragraph in this example.
   19483  &lt;!-- (don't do this) --&gt;
   19484 &lt;/section&gt;</pre>
   19485 
   19486   <p>However, due to the way <a href=#paragraph title=paragraph>implied
   19487   paragraphs</a> are defined, it is not possible to mark up the
   19488   end of one paragraph and the start of the very next one using the
   19489   same <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element. You instead have
   19490   to use one (or two) <code><a href=#the-p-element>p</a></code> element(s) and two
   19491   <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> elements, as for example:</p>
   19492 
   19493   <pre>&lt;section&gt;
   19494  &lt;p&gt;This is the first paragraph. &lt;del&gt;This sentence was
   19495  deleted.&lt;/del&gt;&lt;/p&gt;
   19496  &lt;p&gt;&lt;del&gt;This sentence was deleted too.&lt;/del&gt; That
   19497  sentence needed a separate &amp;lt;del&amp;gt; element.&lt;/p&gt;
   19498 &lt;/section&gt;</pre>
   19499 
   19500   <p>Partly because of the confusion described above, authors are
   19501   strongly encouraged to always mark up all paragraphs with the
   19502   <code><a href=#the-p-element>p</a></code> element, instead of having <code><a href=#the-ins-element>ins</a></code> or
   19503   <code><a href=#the-del-element>del</a></code> elements that cross <a href=#paragraph title=paragraph>implied
   19504   paragraphs</a> boundaries.</p>
   19505 
   19506 
   19507   <h4 id=edits-and-lists><span class=secno>4.7.5 </span>Edits and lists</h4>
   19508 
   19509   <p><i>This section is non-normative.</i></p>
   19510 
   19511   <p>The content models of the <code><a href=#the-ol-element>ol</a></code> and <code><a href=#the-ul-element>ul</a></code>
   19512   elements do not allow <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements
   19513   as children. Lists always represent all their items, including items
   19514   that would otherwise have been marked as deleted.</p>
   19515 
   19516   <p>To indicate that an item is inserted or deleted, an
   19517   <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> element can be wrapped around
   19518   the contents of the <code><a href=#the-li-element>li</a></code> element. To indicate that an
   19519   item has been replaced by another, a single <code><a href=#the-li-element>li</a></code> element
   19520   can have one or more <code><a href=#the-del-element>del</a></code> elements followed by one or
   19521   more <code><a href=#the-ins-element>ins</a></code> elements.</p>
   19522 
   19523   <div class=example>
   19524 
   19525    <p>In the following example, a list that started empty had items
   19526    added and removed from it over time. The bits in the example that
   19527    have been emphasized show the parts that are the "current" state of
   19528    the list. The list item numbers don't take into account the edits,
   19529    though.</p>
   19530 
   19531    <pre>&lt;h1&gt;Stop-ship bugs&lt;/h1&gt;
   19532 &lt;ol&gt;
   19533  &lt;li&gt;&lt;ins datetime="2008-02-12T15:20Z"&gt;<em>Bug 225:
   19534  Rain detector doesn't work in snow</em>&lt;/ins&gt;&lt;/li&gt;
   19535  &lt;li&gt;&lt;del datetime="2008-03-01T20:22Z"&gt;&lt;ins datetime="2008-02-14T12:02Z"&gt;Bug 228:
   19536  Water buffer overflows in April&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
   19537  &lt;li&gt;&lt;ins datetime="2008-02-16T13:50Z"&gt;<em>Bug 230:
   19538  Water heater doesn't use renewable fuels</em>&lt;/ins&gt;&lt;/li&gt;
   19539  &lt;li&gt;&lt;del datetime="2008-02-20T21:15Z"&gt;&lt;ins datetime="2008-02-16T14:25Z"&gt;Bug 232:
   19540  Carbon dioxide emissions detected after startup&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
   19541 &lt;/ol&gt;</pre>
   19542 
   19543   </div>
   19544 
   19545   <div class=example>
   19546 
   19547    <p>In the following example, a list that started with just fruit
   19548    was replaced by a list with just colors.</p>
   19549 
   19550    <pre>&lt;h1&gt;List of &lt;del&gt;fruits&lt;/del&gt;&lt;ins&gt;colors&lt;/ins&gt;&lt;/h1&gt;
   19551 &lt;ul&gt;
   19552  &lt;li&gt;&lt;del&gt;Lime&lt;/del&gt;&lt;ins&gt;Green&lt;/ins&gt;&lt;/li&gt;
   19553  &lt;li&gt;&lt;del&gt;Apple&lt;/del&gt;&lt;/li&gt;
   19554  &lt;li&gt;Orange&lt;/li&gt;
   19555  &lt;li&gt;&lt;del&gt;Pear&lt;/del&gt;&lt;/li&gt;
   19556  &lt;li&gt;&lt;ins&gt;Teal&lt;/ins&gt;&lt;/li&gt;
   19557  &lt;li&gt;&lt;del&gt;Lemon&lt;/del&gt;&lt;ins&gt;Yellow&lt;/ins&gt;&lt;/li&gt;
   19558  &lt;li&gt;Olive&lt;/li&gt;
   19559  &lt;li&gt;&lt;ins&gt;Purple&lt;/ins&gt;&lt;/li&gt;
   19560 &lt;/ul&gt;</pre>
   19561 
   19562   </div>
   19563 
   19564 
   19565 
   19566 
   19567   <h3 id=embedded-content-1><span class=secno>4.8 </span>Embedded content</h3>
   19568 
   19569 
   19570   <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code></dfn> element</h4>
   19571 
   19572   <dl class=element><dt>Categories</dt>
   19573    <dd><a href=#flow-content>Flow content</a>.</dd>
   19574    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   19575    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   19576    <dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   19577    <dt>Contexts in which this element may be used:</dt>
   19578    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   19579    <dt>Content model:</dt>
   19580    <dd>Empty.</dd>
   19581    <dt>Content attributes:</dt>
   19582    <dd><a href=#global-attributes>Global attributes</a></dd>
   19583    <dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code></dd>
   19584    <dd><code title=attr-img-src><a href=#attr-img-src>src</a></code></dd>
   19585    <dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
   19586    <dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code></dd>
   19587    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   19588    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   19589    <dt>DOM interface:</dt>
   19590    <dd>
   19591 <pre class=idl>[NamedConstructor=<a href=#dom-image title=dom-image>Image</a>(),
   19592  NamedConstructor=<a href=#dom-image-w title=dom-image-w>Image</a>(in unsigned long width),
   19593  NamedConstructor=<a href=#dom-image-wh title=dom-image-wh>Image</a>(in unsigned long width, in unsigned long height)]
   19594 interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   19595            attribute DOMString <a href=#dom-img-alt title=dom-img-alt>alt</a>;
   19596            attribute DOMString <a href=#dom-img-src title=dom-img-src>src</a>;
   19597            attribute DOMString <a href=#dom-img-usemap title=dom-img-useMap>useMap</a>;
   19598            attribute boolean <a href=#dom-img-ismap title=dom-img-isMap>isMap</a>;
   19599            attribute unsigned long <a href=#dom-img-width title=dom-img-width>width</a>;
   19600            attribute unsigned long <a href=#dom-img-height title=dom-img-height>height</a>;
   19601   readonly attribute unsigned long <a href=#dom-img-naturalwidth title=dom-img-naturalWidth>naturalWidth</a>;
   19602   readonly attribute unsigned long <a href=#dom-img-naturalheight title=dom-img-naturalHeight>naturalHeight</a>;
   19603   readonly attribute boolean <a href=#dom-img-complete title=dom-img-complete>complete</a>;
   19604 };</pre>
   19605    </dd>
   19606   </dl><p>An <code><a href=#the-img-element>img</a></code> element represents an image.</p>
   19607 
   19608   <!-- v2 ideas for <img>:
   19609 
   19610      * Maps sites would like to know which images are already cached,
   19611        so that they can use images that are vaguely suitable while
   19612        they wait for the most appropriate image to download.
   19613 
   19614        Almost like lowsrc="", except that many images might be
   19615        appropriate.
   19616 
   19617        Slight hitch: their images are at a different origin, and we
   19618        don't want to allow arbitrary cross-origin inspection (privacy
   19619        leak risk).
   19620 
   19621      * See note at rel=noreferrer.
   19622 
   19623   -->
   19624 
   19625   <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> attribute is the
   19626   embedded content, and the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute is the
   19627   <code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>.</p>
   19628 
   19629   <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be
   19630   present, and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
   19631   surrounded by spaces</a> referencing a non-interactive,
   19632   optionally animated, image resource that is neither paged nor
   19633   scripted.</p>
   19634 
   19635   <p class=note>Images can thus be static bitmaps (e.g. PNGs, GIFs,
   19636   JPEGs), single-page vector documents (single-page PDFs, XML files
   19637   with an SVG root element), animated bitmaps (APNGs, animated GIFs),
   19638   animated vector graphics (XML files with an SVG root element that
   19639   use declarative SMIL animation), and so forth. However, this also
   19640   precludes SVG files with script, multipage PDF files, interactive
   19641   MNG files, HTML documents, plain text documents, and so forth.</p>
   19642 
   19643   <p>The requirements on the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   19644   attribute's value are described <a href=#alt>in the next
   19645   section</a>.
   19646   </p>
   19647 
   19648   <p>The <code><a href=#the-img-element>img</a></code> must not be used as a layout tool. In
   19649   particular, <code><a href=#the-img-element>img</a></code> elements should not be used to display
   19650   transparent images, as they rarely convey meaning and rarely add
   19651   anything useful to the document.</p>
   19652 
   19653   <div class=impl>
   19654 
   19655   <hr><p>Unless the user agent cannot support images, or its support for
   19656   images has been disabled, or the user agent only fetches elements on
   19657   demand, then, when an <code><a href=#the-img-element>img</a></code> is created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and whenever the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set subsequently, the
   19658   user agent must run the following steps:</p> <!-- Note how this does
   19659   NOT happen when the base URL changes. -->
   19660 
   19661   <ol><li><p>If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
   19662    attribute's value is the empty string, then <a href=#queue-a-task>queue a
   19663    task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element,
   19664    and abort these steps.</li>
   19665 
   19666    <li>
   19667 
   19668     <p>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the value
   19669     of that attribute, relative to the element, and if that is
   19670     successful must then <a href=#fetch>fetch</a> that resource.</p> <!--
   19671     http-origin privacy sensitive -->
   19672 
   19673     <!-- same text in <input type=image> section and similar text
   19674     elsewhere --> <p>Fetching the image must <a href=#delay-the-load-event>delay the load
   19675     event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
   19676     task">queued</a> by the <a href=#networking-task-source>networking task source</a>
   19677     once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.</p>
   19678 
   19679     <p class=warning>This, unfortunately, can be used to perform a
   19680     rudimentary port scan of the user's local network (especially in
   19681     conjunction with scripting, though scripting isn't actually
   19682     necessary to carry out such an attack). User agents may implement
   19683     <a href=#origin title=origin>cross-origin</a> access control policies
   19684     that mitigate this attack.</p>
   19685 
   19686    </li>
   19687 
   19688   </ol><p>If the image is in a supported image type and its dimensions are
   19689   known, then the image is said to be <dfn id=img-available title=img-available><i>available</i></dfn> (this affects exactly
   19690   what the element represents, as defined below). This can be true
   19691   even before the image is completely downloaded, if the user agent
   19692   supports incremental rendering of images; in such cases, each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
   19693   task">queued</a> by the <a href=#networking-task-source>networking task source</a> while
   19694   the image is being <a href=#fetch title=fetch>fetched</a> must update
   19695   the presentation of the image appropriately. It can also stop being
   19696   true, e.g. if the user agent finds, after obtaining the image's
   19697   dimensions, that the image data is actually fatally corrupted.</p>
   19698 
   19699   <p>If the image was not fetched (e.g. because the UA's image support
   19700   is disabled, or because the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
   19701   attribute's value is the empty string, or if the conditions in the
   19702   previous paragraph are not met, then the image is <em>not</em> <i title=img-available><a href=#img-available>available</a></i>.</p>
   19703 
   19704   <p>Whether the image is fetched successfully or not (e.g. whether
   19705   the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
   19706   ignored when determining the image's type and whether it is a valid
   19707   image.</p>
   19708 
   19709   <p class=note>This allows servers to return images with error
   19710   responses, and have them displayed.</p>
   19711 
   19712   <p>The user agents should apply the <a href=#content-type-sniffing:-image title="Content-Type
   19713   sniffing: image">image sniffing rules</a> to determine the type
   19714   of the image, with the image's <a href=#content-type title=Content-Type>associated
   19715   Content-Type headers</a> giving the <var title="">official
   19716   type</var>. If these rules are not applied, then the type of the
   19717   image must be the type given by the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>
   19718 
   19719   <p>User agents must not support non-image resources with the
   19720   <code><a href=#the-img-element>img</a></code> element (e.g. XML files whose root element is an
   19721   HTML element). User agents must not run executable code
   19722   (e.g. scripts) embedded in the image resource. User agents must only
   19723   display the first page of a multipage resource (e.g. a PDF
   19724   file). User agents must not allow the resource to act in an
   19725   interactive fashion, but should honor any animation in the
   19726   resource.</p>
   19727 
   19728   <p>This specification does not specify which image types are to be
   19729   supported.</p>
   19730 
   19731   <p id=img-load>The <a href=#concept-task title=concept-task>task</a> that is
   19732   <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking
   19733   task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a>, must act as appropriate given the
   19734   following alternatives:</p>
   19735 
   19736   <dl class=switch><dt>If the download was successful and the image is <i title=img-available><a href=#img-available>available</a></i></dt>
   19737 
   19738    <dd><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   19739    named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code>
   19740    element (this happens after <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> starts returning
   19741    true).</dd>
   19742 
   19743    <dt>Otherwise (the fetching process failed without a response from
   19744    the remote server, or completed but the image is not a supported
   19745    image)</dt>
   19746 
   19747    <dd><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   19748    named <code title=event-error>error</code> on the
   19749    <code><a href=#the-img-element>img</a></code> element.</dd>
   19750 
   19751   </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
   19752   task source</a>.</p>
   19753 
   19754   <hr><p>What an <code><a href=#the-img-element>img</a></code> element represents depends on the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
   19755 
   19756   <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   19757    and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to
   19758    the empty string</dt>
   19759 
   19760    <dd>
   19761 
   19762     <p>The image is either decorative or supplemental to the rest of
   19763     the content, redundant with some other information in the
   19764     document.</p>
   19765 
   19766     <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
   19767     user agent is configured to display that image, then the element
   19768     <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
   19769 
   19770     <p>Otherwise, the element <a href=#represents>represents</a> nothing, and may
   19771     be omitted completely from the rendering. User agents may provide
   19772     the user with a notification that an image is present but has been
   19773     omitted from the rendering.</p>
   19774 
   19775    </dd>
   19776 
   19777    <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   19778    and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a
   19779    value that isn't empty</dt>
   19780 
   19781    <dd>
   19782 
   19783     <p>The image is a key part of the content; the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute gives a textual
   19784     equivalent or replacement for the image.</p>
   19785 
   19786     <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
   19787     user agent is configured to display that image, then the element
   19788     <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
   19789 
   19790     <p>Otherwise, the element <a href=#represents>represents</a> the text given
   19791     by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute. User
   19792     agents may provide the user with a notification that an image is
   19793     present but has been omitted from the rendering.</p>
   19794 
   19795    </dd>
   19796 
   19797    <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
   19798    and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>
   19799 
   19800    <dd>
   19801 
   19802     <p>The image might be a key part of the content, and there is no
   19803     textual equivalent of the image available.</p>
   19804 
   19805     <p class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image
   19806     is a key part of the content but that a textual replacement for
   19807     the image was not available when the image was generated.</p>
   19808 
   19809     <p>If the image is <i title=img-available><a href=#img-available>available</a></i>, the
   19810     element <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
   19811 
   19812     <p>If the image is not <i title=img-available><a href=#img-available>available</a></i> or
   19813     if the user agent is not configured to display the image, then the
   19814     user agent should display some sort of indicator that there is an
   19815     image that is not being rendered, and may, if requested by the
   19816     user, or if so configured, or when required to provide contextual
   19817     information in response to navigation, provide caption information
   19818     for the image, derived as follows:</p>
   19819 
   19820     <ol><!-- when editing this list, search for the two other occurrences
   19821      of 'critical-no-alt' --><li><p>If the image has a <code title=attr-title><a href=#the-title-attribute>title</a></code>
   19822      attribute whose value is not the empty string, then the value of
   19823      that attribute is the caption information; abort these
   19824      steps.</li>
   19825 
   19826      <li><p>If the image is the child of a <code><a href=#the-figure-element>figure</a></code> element
   19827      that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, then the
   19828      contents of the first such <code><a href=#the-figcaption-element>figcaption</a></code> element are
   19829      the caption information; abort these steps.</li>
   19830 
   19831     </ol></dd>
   19832 
   19833    <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not
   19834    set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
   19835    is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>
   19836 
   19837    <dd>
   19838 
   19839     <p>The element <a href=#represents>represents</a> nothing.</p>
   19840 
   19841    </dd>
   19842 
   19843    <dt>Otherwise</dt>
   19844 
   19845    <dd>
   19846 
   19847     <p>The element <a href=#represents>represents</a> the text given by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
   19848 
   19849    </dd>
   19850 
   19851   </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not
   19852   represent advisory information. User agents must not present the
   19853   contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute in
   19854   the same way as content of the <code title=attr-title><a href=#the-title-attribute>title</a></code>
   19855   attribute.</p>
   19856 
   19857   <p>User agents may always provide the user with the option to
   19858   display any image, or to prevent any image from being
   19859   displayed. User agents may also apply heuristics to help the user
   19860   make use of the image when the user is unable to see it, e.g. due to
   19861   a visual disability or because they are using a text terminal with
   19862   no graphics capabilities. Such heuristics could include, for
   19863   instance, optical character recognition (OCR) of text found within
   19864   the image.</p>
   19865 
   19866   <p class=warning>While user agents are encouraged to repair cases
   19867   of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors
   19868   must not rely on such behavior. <a href=#alt>Requirements for
   19869   providing text to act as an alternative for images</a> are described
   19870   in detail below.</p>
   19871 
   19872   <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are
   19873   ignored for the purposes of rendering.</p>
   19874 
   19875   </div>
   19876 
   19877   <hr><p>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute,
   19878   if present, can indicate that the image has an associated
   19879   <a href=#image-map>image map</a>.</p>
   19880 
   19881   <p>The <dfn id=attr-img-ismap title=attr-img-ismap><code>ismap</code></dfn>
   19882   attribute, when used on an element that is a descendant of an
   19883   <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, indicates by its
   19884   presence that the element provides access to a server-side image
   19885   map. This affects how events are handled on the corresponding
   19886   <code><a href=#the-a-element>a</a></code> element.</p>
   19887 
   19888   <p>The <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attribute is a
   19889   <a href=#boolean-attribute>boolean attribute</a>. The attribute must not be specified
   19890   on an element that does not have an ancestor <code><a href=#the-a-element>a</a></code> element
   19891   with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</p>
   19892 
   19893   <p>The <code><a href=#the-img-element>img</a></code> element supports <a href=#dimension-attributes>dimension
   19894   attributes</a>.</p>
   19895 
   19896   <div class=impl>
   19897 
   19898   <p>The IDL attributes <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn>, and <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> each must
   19899   <a href=#reflect>reflect</a> the respective content attributes of the same
   19900   name.</p>
   19901 
   19902   </div>
   19903 
   19904   <dl class=domintro><dt><var title="">image</var> . <code title=dom-img-width><a href=#dom-img-width>width</a></code> [ = <var title="">value</var> ]</dt>
   19905    <dt><var title="">image</var> . <code title=dom-img-height><a href=#dom-img-height>height</a></code> [ = <var title="">value</var> ]</dt>
   19906 
   19907    <dd>
   19908 
   19909     <p>These attributes return the actual rendered dimensions of the
   19910     image, or zero if the dimensions are not known.</p>
   19911 
   19912     <p>They can be set, to change the corresponding content
   19913     attributes.</p>
   19914 
   19915    </dd>
   19916 
   19917    <dt><var title="">image</var> . <code title=dom-img-naturalWidth><a href=#dom-img-naturalwidth>naturalWidth</a></code></dt>
   19918    <dt><var title="">image</var> . <code title=dom-img-naturalHeight><a href=#dom-img-naturalheight>naturalHeight</a></code></dt>
   19919 
   19920    <dd>
   19921 
   19922     <p>These attributes return the intrinsic dimensions of the image,
   19923     or zero if the dimensions are not known.</p>
   19924 
   19925    </dd>
   19926 
   19927    <dt><var title="">image</var> . <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code></dt>
   19928 
   19929    <dd>
   19930 
   19931     <p>Returns true if the image has been downloaded, decoded, and
   19932     found to be valid; otherwise, returns false.</p>
   19933 
   19934    </dd>
   19935 
   19936    <dt><var title="">image</var> = new <code title=dom-image><a href=#dom-image>Image</a></code>( [ <var title="">width</var> [, <var title="">height</var> ] ] )</dt>
   19937 
   19938    <dd>
   19939 
   19940     <p>Returns a new <code><a href=#the-img-element>img</a></code> element, with 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 set to the values
   19941     passed in the relevant arguments, if applicable.</p>
   19942 
   19943    </dd>
   19944 
   19945   </dl><div class=impl>
   19946 
   19947   <p>The IDL attributes <dfn id=dom-img-width title=dom-img-width><code>width</code></dfn> and <dfn id=dom-img-height title=dom-img-height><code>height</code></dfn> must return the
   19948   rendered width and height of the image, in CSS pixels, if the image
   19949   is <a href=#being-rendered>being rendered</a>, and is being rendered to a visual
   19950   medium; or else the intrinsic width and height of the image, in CSS
   19951   pixels, if the image is <i title=img-available><a href=#img-available>available</a></i> but
   19952   not being rendered to a visual medium; or else 0, if the image is
   19953   not <i title=img-available><a href=#img-available>available</a></i>. <a href=#refsCSS>[CSS]</a></p>
   19954 
   19955   <p>On setting, they must act as if they <a href=#reflect title=reflect>reflected</a> the respective content attributes
   19956   of the same name.</p>
   19957 
   19958   <p>The IDL attributes <dfn id=dom-img-naturalwidth title=dom-img-naturalWidth><code>naturalWidth</code></dfn> and
   19959   <dfn id=dom-img-naturalheight title=dom-img-naturalHeight><code>naturalHeight</code></dfn>
   19960   must return the intrinsic width and height of the image, in CSS
   19961   pixels, if the image is <i title=img-available><a href=#img-available>available</a></i>, or
   19962   else 0. <a href=#refsCSS>[CSS]</a></p>
   19963 
   19964   <p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
   19965   true if the user agent has fetched the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and it is in a supported
   19966   image type (i.e. it was decoded without fatal errors), even if the
   19967   final <a href=#concept-task title=concept-task>task</a> queued by the
   19968   <a href=#networking-task-source>networking task source</a> for the <a href=#fetch title=fetch>fetching</a> of the image resource has not yet been
   19969   processed. Otherwise, the attribute must return false.</p>
   19970 
   19971   <p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while a
   19972   <a href=#concept-script title=concept-script>script</a> is executing.</p>
   19973 
   19974   <p>Three constructors are provided for creating
   19975   <code><a href=#htmlimageelement>HTMLImageElement</a></code> objects (in addition to the factory
   19976   methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-image title=dom-image><code>Image()</code></dfn>, <dfn id=dom-image-w title=dom-image-w><code>Image(<var title="">width</var>)</code></dfn>, and <dfn id=dom-image-wh title=dom-image-wh><code>Image(<var title="">width</var>, <var title="">height</var>)</code></dfn>. When invoked as constructors,
   19977   these must return a new <code><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
   19978   <code><a href=#the-img-element>img</a></code> element). If the <var title="">width</var> argument
   19979   is present, the new object's <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attribute must be set to
   19980   <var title="">width</var>. If the <var title="">height</var>
   19981   argument is also present, the new object's <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> content attribute must be set
   19982   to <var title="">height</var>. The element's document must be the
   19983   <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a> of
   19984   the <code><a href=#window>Window</a></code> object on which the interface object of the
   19985   invoked constructor is found.</p>
   19986 
   19987   </div>
   19988 
   19989   <div class=example>
   19990 
   19991    <p>A single image can have different appropriate alternative text
   19992    depending on the context.</p>
   19993 
   19994    <p>In each of the following cases, the same image is used, yet the
   19995    <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> text is different each
   19996    time. The image is the coat of arms of the Carouge municipality in
   19997    the canton Geneva in Switzerland.</p>
   19998 
   19999    <p>Here it is used as a supplementary icon:</p>
   20000    <pre>&lt;p&gt;I lived in &lt;img src="carouge.svg" alt=""&gt; Carouge.&lt;/p&gt;</pre>
   20001 
   20002    <p>Here it is used as an icon representing the town:</p>
   20003    <pre>&lt;p&gt;Home town: &lt;img src="carouge.svg" alt="Carouge"&gt;&lt;/p&gt;</pre>
   20004 
   20005    <p>Here it is used as part of a text on the town:</p>
   20006 
   20007    <pre>&lt;p&gt;Carouge has a coat of arms.&lt;/p&gt;
   20008 &lt;p&gt;&lt;img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."&gt;&lt;/p&gt;
   20009 &lt;p&gt;It is used as decoration all over the town.&lt;/p&gt;</pre>
   20010 
   20011    <p>Here it is used as a way to support a similar text where the
   20012    description is given as well as, instead of as an alternative to,
   20013    the image:</p>
   20014 
   20015    <pre>&lt;p&gt;Carouge has a coat of arms.&lt;/p&gt;
   20016 &lt;p&gt;&lt;img src="carouge.svg" alt=""&gt;&lt;/p&gt;
   20017 &lt;p&gt;The coat of arms depicts a lion, sitting in front of a tree.
   20018 It is used as decoration all over the town.&lt;/p&gt;</pre>
   20019 
   20020    <p>Here it is used as part of a story:</p>
   20021 
   20022    <pre>&lt;p&gt;He picked up the folder and a piece of paper fell out.&lt;/p&gt;
   20023 &lt;p&gt;&lt;img src="carouge.svg" alt="Shaped like a shield, the paper had a
   20024 red background, a green tree, and a yellow lion with its tongue
   20025 hanging out and whose tail was shaped like an S."&gt;&lt;/p&gt;
   20026 &lt;p&gt;He stared at the folder. S! The answer he had been looking for all
   20027 this time was simply the letter S! How had he not seen that before? It all
   20028 came together now. The phone call where Hector had referred to a lion's tail,
   20029 the time Marco had stuck his tongue out...&lt;/p&gt;</pre>
   20030 
   20031    <p>Here it is not known at the time of publication what the image
   20032    will be, only that it will be a coat of arms of some kind, and thus
   20033    no replacement text can be provided, and instead only a brief
   20034    caption for the image is provided, in the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute:</p>
   20035 
   20036    <pre>&lt;p&gt;The last user to have uploaded a coat of arms uploaded this one:&lt;/p&gt;
   20037 &lt;p&gt;&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."&gt;&lt;/p&gt;</pre>
   20038 
   20039    <p>Ideally, the author would find a way to provide real replacement
   20040    text even in this case, e.g. by asking the previous user. Not
   20041    providing replacement text makes the document more difficult to use
   20042    for people who are unable to view images, e.g. blind users, or
   20043    users or very low-bandwidth connections or who pay by the byte, or
   20044    users who are forced to use a text-only Web browser.</p>
   20045 
   20046   </div>
   20047 
   20048   <div class=example>
   20049 
   20050    <p>Here are some more examples showing the same picture used in
   20051    different contexts, with different appropriate alternate texts each
   20052    time.</p>
   20053 
   20054    <pre>&lt;article&gt;
   20055  &lt;h1&gt;My cats&lt;/h1&gt;
   20056  &lt;h2&gt;Fluffy&lt;/h2&gt;
   20057  &lt;p&gt;Fluffy is my favorite.&lt;/p&gt;
   20058  &lt;img src="fluffy.jpg" alt="She likes playing with a ball of yarn."&gt;
   20059  &lt;p&gt;She's just too cute.&lt;/p&gt;
   20060  &lt;h2&gt;Miles&lt;/h2&gt;
   20061  &lt;p&gt;My other cat, Miles just eats and sleeps.&lt;/p&gt;
   20062 &lt;/article&gt;</pre>
   20063 
   20064    <pre>&lt;article&gt;
   20065  &lt;h1&gt;Photography&lt;/h1&gt;
   20066  &lt;h2&gt;Shooting moving targets indoors&lt;/h2&gt;
   20067  &lt;p&gt;The trick here is to know how to anticipate; to know at what speed and
   20068  what distance the subject will pass by.&lt;/p&gt;
   20069  &lt;img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
   20070  photographed quite nicely using this technique."&gt;
   20071  &lt;h2&gt;Nature by night&lt;/h2&gt;
   20072  &lt;p&gt;To achieve this, you'll need either an extremely sensitive film, or
   20073  immense flash lights.&lt;/p&gt;
   20074 &lt;/article&gt;</pre>
   20075 
   20076    <pre>&lt;article&gt;
   20077  &lt;h1&gt;About me&lt;/h1&gt;
   20078  &lt;h2&gt;My pets&lt;/h2&gt;
   20079  &lt;p&gt;I've got a cat named Fluffy and a dog named Miles.&lt;/p&gt;
   20080  &lt;img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy."&gt;
   20081  &lt;p&gt;My dog Miles and I like go on long walks together.&lt;/p&gt;
   20082  &lt;h2&gt;music&lt;/h2&gt;
   20083  &lt;p&gt;After our walks, having emptied my mind, I like listening to Bach.&lt;/p&gt;
   20084 &lt;/article&gt;</pre>
   20085 
   20086    <pre>&lt;article&gt;
   20087  &lt;h1&gt;Fluffy and the Yarn&lt;/h1&gt;
   20088  &lt;p&gt;Fluffy was a cat who liked to play with yarn. He also liked to jump.&lt;/p&gt;
   20089  &lt;aside&gt;&lt;img src="fluffy.jpg" alt="" title="Fluffy"&gt;&lt;/aside&gt;
   20090  &lt;p&gt;He would play in the morning, he would play in the evening.&lt;/p&gt;
   20091 &lt;/article&gt;</pre>
   20092 
   20093   </div>
   20094 
   20095 
   20096 
   20097   <h5 id=alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5>
   20098 
   20099   <p>Except where otherwise specified, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be specified and its
   20100   value must not be empty; the value must be an appropriate
   20101   replacement for the image. The specific requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute depend on what the image
   20102   is intended to represent, as described in the following
   20103   sections.</p>
   20104 
   20105 
   20106   <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</h6>
   20107 
   20108   <p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
   20109   or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
   20110   contains one or more images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes must contain text that
   20111   together convey the purpose of the link or button.</p>
   20112 
   20113   <div class=example>
   20114 
   20115    <p>In this example, a user is asked to pick his preferred color
   20116    from a list of three. Each color is given by an image, but for
   20117    users who have configured their user agent not to display images,
   20118    the color names are used instead:</p>
   20119 
   20120    <pre>&lt;h1&gt;Pick your color&lt;/h1&gt;
   20121 &lt;ul&gt;
   20122  &lt;li&gt;&lt;a href="green.html"&gt;<strong>&lt;img src="green.jpeg" alt="Green"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
   20123  &lt;li&gt;&lt;a href="blue.html"&gt;<strong>&lt;img src="blue.jpeg" alt="Blue"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
   20124  &lt;li&gt;&lt;a href="red.html"&gt;<strong>&lt;img src="red.jpeg" alt="Red"&gt;</strong>&lt;/a&gt;&lt;/li&gt;
   20125 &lt;/ul&gt;</pre>
   20126 
   20127   </div>
   20128 
   20129   <div class=example>
   20130 
   20131    <p>In this example, each button has a set of images to indicate the
   20132    kind of color output desired by the user. The first image is used
   20133    in each case to give the alternative text.</p>
   20134 
   20135    <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="RGB"&gt;&lt;img src="green" alt=""&gt;&lt;img src="blue" alt=""&gt;</strong>&lt;/button&gt;
   20136 &lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="CMYK"&gt;&lt;img src="magenta" alt=""&gt;&lt;img src="yellow" alt=""&gt;&lt;img src="black" alt=""&gt;</strong>&lt;/button&gt;</pre>
   20137 
   20138    <p>Since each image represents one part of the text, it could also
   20139    be written like this:</p>
   20140 
   20141    <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="R"&gt;&lt;img src="green" alt="G"&gt;&lt;img src="blue" alt="B"&gt;</strong>&lt;/button&gt;
   20142 &lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="C"&gt;&lt;img src="magenta" alt="M"&gt;&lt;img src="yellow" alt="Y"&gt;&lt;img src="black" alt="K"&gt;</strong>&lt;/button&gt;</pre>
   20143 
   20144    <p>However, with other alternative text, this might not work, and
   20145    putting all the alternative text into one image in each case might
   20146    make more sense:</p>
   20147 
   20148    <pre>&lt;button name="rgb"&gt;<strong>&lt;img src="red" alt="sRGB profile"&gt;&lt;img src="green" alt=""&gt;&lt;img src="blue" alt=""&gt;</strong>&lt;/button&gt;
   20149 &lt;button name="cmyk"&gt;<strong>&lt;img src="cyan" alt="CMYK profile"&gt;&lt;img src="magenta" alt=""&gt;&lt;img src="yellow" alt=""&gt;&lt;img src="black" alt=""&gt;</strong>&lt;/button&gt;</pre>
   20150 
   20151   </div>
   20152 
   20153 
   20154 
   20155   <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
   20156 
   20157   <p>Sometimes something can be more clearly stated in graphical
   20158   form, for example as a flowchart, a diagram, a graph, or a simple
   20159   map showing directions. In such cases, an image can be given using
   20160   the <code><a href=#the-img-element>img</a></code> element, but the lesser textual version must
   20161   still be given, so that users who are unable to view the image
   20162   (e.g. because they have a very slow connection, or because they
   20163   are using a text-only browser, or because they are listening to
   20164   the page being read out by a hands-free automobile voice Web
   20165   browser, or simply because they are blind) are still able to
   20166   understand the message being conveyed.</p>
   20167 
   20168   <p>The text must be given in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute, and must convey the
   20169   same message as the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
   20170 
   20171   <p>It is important to realize that the alternative text is a
   20172   <em>replacement</em> for the image, not a description of the
   20173   image.</p>
   20174 
   20175   <div class=example>
   20176 
   20177    <p>In the following example we have <a href=images/parsing-model-overview.png>a flowchart</a> in image
   20178    form, with text in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20179    attribute rephrasing the flowchart in prose form:</p>
   20180 
   20181    <pre>&lt;p&gt;In the common case, the data handled by the tokenization stage
   20182 comes from the network, but it can also come from script.&lt;/p&gt;
   20183 &lt;p&gt;<strong>&lt;img src="images/parsing-model-overview.png" alt="The network
   20184 passes data to the Tokenizer stage, which passes data to the Tree
   20185 Construction stage. From there, data goes to both the DOM and to
   20186 Script Execution. Script Execution is linked to the DOM, and, using
   20187 document.write(), passes data to the Tokenizer."&gt;</strong>&lt;/p&gt;</pre>
   20188 
   20189   </div>
   20190 
   20191   <div class=example>
   20192 
   20193    <p>Here's another example, showing a good solution and a bad
   20194    solution to the problem of including an image in a
   20195    description.</p>
   20196 
   20197    <p>First, here's the good solution. This sample shows how the
   20198    alternative text should just be what you would have put in the
   20199    prose if the image had never existed.</p>
   20200 
   20201    <pre>&lt;!-- This is the correct way to do things. --&gt;
   20202 &lt;p&gt;
   20203  You are standing in an open field west of a house.
   20204  <strong>&lt;img src="house.jpeg" alt="The house is white, with a boarded front door."&gt;</strong>
   20205  There is a small mailbox here.
   20206 &lt;/p&gt;</pre>
   20207 
   20208    <p>Second, here's the bad solution. In this incorrect way of
   20209    doing things, the alternative text is simply a description of the
   20210    image, instead of a textual replacement for the image. It's bad
   20211    because when the image isn't shown, the text doesn't flow as well
   20212    as in the first example.</p>
   20213 
   20214    <pre class=bad>&lt;!-- <em>This is the wrong way to do things.</em> --&gt;
   20215 &lt;p&gt;
   20216  You are standing in an open field west of a house.
   20217  &lt;img src="house.jpeg" alt="A white house, with a boarded front door."&gt;
   20218  There is a small mailbox here.
   20219 &lt;/p&gt;</pre>
   20220 
   20221    <p>Text such as "Photo of white house with boarded door" would be
   20222    equally bad alternative text (though it could be suitable for the
   20223    <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute or in the
   20224    <code><a href=#the-figcaption-element>figcaption</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
   20225    image).</p>
   20226 
   20227   </div>
   20228 
   20229 
   20230   <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
   20231 
   20232   <p>A document can contain information in iconic form. The icon is
   20233   intended to help users of visual browsers to recognize features at
   20234   a glance.</p>
   20235 
   20236   <p>In some cases, the icon is supplemental to a text label
   20237   conveying the same meaning. In those cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be present but must
   20238   be empty.</p>
   20239 
   20240   <div class=example>
   20241 
   20242    <p>Here the icons are next to text that conveys the same meaning,
   20243    so they have an empty <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20244    attribute:</p>
   20245 
   20246    <pre>&lt;nav&gt;
   20247  &lt;p&gt;&lt;a href="/help/"&gt;<strong>&lt;img src="/icons/help.png" alt=""&gt;</strong> Help&lt;/a&gt;&lt;/p&gt;
   20248  &lt;p&gt;&lt;a href="/configure/"&gt;<strong>&lt;img src="/icons/configuration.png" alt=""&gt;</strong>
   20249  Configuration Tools&lt;/a&gt;&lt;/p&gt;
   20250 &lt;/nav&gt;</pre>
   20251 
   20252   </div>
   20253 
   20254   <p>In other cases, the icon has no text next to it describing what
   20255   it means; the icon is supposed to be self-explanatory. In those
   20256   cases, an equivalent textual label must be given in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
   20257 
   20258   <div class=example>
   20259 
   20260    <p>Here, posts on a news site are labeled with an icon
   20261    indicating their topic.</p>
   20262 
   20263    <pre>&lt;body&gt;
   20264  &lt;article&gt;
   20265   &lt;header&gt;
   20266    &lt;h1&gt;Ratatouille wins &lt;i&gt;Best Movie of the Year&lt;/i&gt; award&lt;/h1&gt;
   20267    &lt;p&gt;<strong>&lt;img src="movies.png" alt="Movies"&gt;</strong>&lt;/p&gt;
   20268   &lt;/header&gt;
   20269   &lt;p&gt;Pixar has won yet another &lt;i&gt;Best Movie of the Year&lt;/i&gt; award,
   20270   making this its 8th win in the last 12 years.&lt;/p&gt;
   20271  &lt;/article&gt;
   20272  &lt;article&gt;
   20273   &lt;header&gt;
   20274    &lt;h1&gt;Latest TWiT episode is online&lt;/h1&gt;
   20275    &lt;p&gt;<strong>&lt;img src="podcasts.png" alt="Podcasts"&gt;</strong>&lt;/p&gt;
   20276   &lt;/header&gt;
   20277   &lt;p&gt;The latest TWiT episode has been posted, in which we hear
   20278   several tech news stories as well as learning much more about the
   20279   iPhone. This week, the panelists compare how reflective their
   20280   iPhones' Apple logos are.&lt;/p&gt;
   20281  &lt;/article&gt;
   20282 &lt;/body&gt;</pre>
   20283 
   20284   </div>
   20285 
   20286   <p>Many pages include logos, insignia, flags, or emblems, which
   20287   stand for a particular entity such as a company, organization,
   20288   project, band, software package, country, or some such.</p>
   20289 
   20290   <p>If the logo is being used to represent the entity, e.g. as a page
   20291   heading, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
   20292   contain the name of the entity being represented by the logo. The
   20293   <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must <em>not</em>
   20294   contain text like the word "logo", as it is not the fact that it is
   20295   a logo that is being conveyed, it's the entity itself.</p>
   20296 
   20297   <p>If the logo is being used next to the name of the entity that
   20298   it represents, then the logo is supplemental, and its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must instead be
   20299   empty.</p>
   20300 
   20301   <p>If the logo is merely used as decorative material (as branding,
   20302   or, for example, as a side image in an article that mentions the
   20303   entity to which the logo belongs), then the entry below on purely
   20304   decorative images applies. If the logo is actually being
   20305   discussed, then it is being used as a phrase or paragraph (the
   20306   description of the logo) with an alternative graphical
   20307   representation (the logo itself), and the first entry above
   20308   applies.</p>
   20309 
   20310   <div class=example>
   20311 
   20312    <p>In the following snippets, all four of the above cases are
   20313    present. First, we see a logo used to represent a company:</p>
   20314 
   20315    <pre>&lt;h1&gt;<strong>&lt;img src="XYZ.gif" alt="The XYZ company"&gt;</strong>&lt;/h1&gt;</pre>
   20316 
   20317    <p>Next, we see a paragraph which uses a logo right next to the
   20318    company name, and so doesn't have any alternative text:
   20319 
   20320    <pre>&lt;article&gt;
   20321  &lt;h2&gt;News&lt;/h2&gt;
   20322  &lt;p&gt;We have recently been looking at buying the <strong>&lt;img src="alpha.gif"
   20323  alt=""&gt; &Alpha;&Beta;&Gamma; company</strong>, a small Greek company
   20324  specializing in our type of product.&lt;/p&gt;</pre>
   20325 
   20326    <p>In this third snippet, we have a logo being used in an aside,
   20327    as part of the larger article discussing the acquisition:</p>
   20328 
   20329 <pre> <strong>&lt;aside&gt;&lt;p&gt;&lt;img src="alpha-large.gif" alt=""&gt;&lt;/p&gt;&lt;/aside&gt;</strong>
   20330  &lt;p&gt;The &Alpha;&Beta;&Gamma; company has had a good quarter, and our
   20331  pie chart studies of their accounts suggest a much bigger blue slice
   20332  than its green and orange slices, which is always a good sign.&lt;/p&gt;
   20333 &lt;/article&gt;</pre>
   20334 
   20335    <p>Finally, we have an opinion piece talking about a logo, and
   20336    the logo is therefore described in detail in the alternative
   20337    text.</p>
   20338 
   20339    <pre>&lt;p&gt;Consider for a moment their logo:&lt;/p&gt;
   20340 
   20341 <strong>&lt;p&gt;&lt;img src="/images/logo" alt="It consists of a green circle with a
   20342 green question mark centered inside it."&gt;&lt;/p&gt;</strong>
   20343 
   20344 &lt;p&gt;How unoriginal can you get? I mean, oooooh, a question mark, how
   20345 &lt;em&gt;revolutionary&lt;/em&gt;, how utterly &lt;em&gt;ground-breaking&lt;/em&gt;, I'm
   20346 sure everyone will rush to adopt those specifications now! They could
   20347 at least have tried for some sort of, I don't know, sequence of
   20348 rounded squares with varying shades of green and bold white outlines,
   20349 at least that would look good on the cover of a blue book.&lt;/p&gt;</pre>
   20350 
   20351    <p>This example shows how the alternative text should be written
   20352    such that if the image isn't <i title=img-available><a href=#img-available>available</a></i>, and the text is used instead,
   20353    the text flows seamlessly into the surrounding text, as if the
   20354    image had never been there in the first place.</p>
   20355 
   20356   </div>
   20357 
   20358 
   20359   <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
   20360 
   20361   <p>Sometimes, an image just consists of text, and the purpose of the
   20362   image is not to highlight the actual typographic effects used to
   20363   render the text, but just to convey the text itself.</p>
   20364 
   20365   <p>In such cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20366   attribute must be present but must consist of the same text as
   20367   written in the image itself.</p>
   20368 
   20369   <div class=example>
   20370 
   20371    <p>Consider a graphic containing the text "Earth Day", but with the
   20372    letters all decorated with flowers and plants. If the text is
   20373    merely being used as a heading, to spice up the page for graphical
   20374    users, then the correct alternative text is just the same text
   20375    "Earth Day", and no mention need be made of the decorations:</p>
   20376 
   20377    <pre>&lt;h1&gt;<strong>&lt;img src="earthdayheading.png" alt="Earth Day"&gt;</strong>&lt;/h1&gt;</pre>
   20378 
   20379   </div>
   20380 
   20381 
   20382 
   20383   <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</h6>
   20384 
   20385   <p>In many cases, the image is actually just supplementary, and
   20386   its presence merely reinforces the surrounding text. In these
   20387   cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
   20388   present but its value must be the empty string.</p>
   20389 
   20390   <p>In general, an image falls into this category if removing the
   20391   image doesn't make the page any less useful, but including the
   20392   image makes it a lot easier for users of visual browsers to
   20393   understand the concept.</p>
   20394 
   20395   <div class=example>
   20396 
   20397    <p>A flowchart that repeats the previous paragraph in graphical form:</p>
   20398 
   20399    <pre>&lt;p&gt;The network passes data to the Tokenizer stage, which
   20400 passes data to the Tree Construction stage. From there, data goes
   20401 to both the DOM and to Script Execution. Script Execution is
   20402 linked to the DOM, and, using document.write(), passes data to
   20403 the Tokenizer.&lt;/p&gt;
   20404 <strong>&lt;p&gt;&lt;img src="images/parsing-model-overview.png" alt=""&gt;&lt;/p&gt;</strong></pre>
   20405 
   20406    <p>In these cases, it would be wrong to include alternative text
   20407    that consists of just a caption. If a caption is to be included,
   20408    then either the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can
   20409    be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-figcaption-element>figcaption</a></code>
   20410    elements can be used. In the latter case, the image would in fact
   20411    be a phrase or paragraph with an alternative graphical
   20412    representation, and would thus require alternative text.</p>
   20413 
   20414    <pre>&lt;!-- Using the title="" attribute --&gt;
   20415 &lt;p&gt;The network passes data to the Tokenizer stage, which
   20416 passes data to the Tree Construction stage. From there, data goes
   20417 to both the DOM and to Script Execution. Script Execution is
   20418 linked to the DOM, and, using document.write(), passes data to
   20419 the Tokenizer.&lt;/p&gt;
   20420 &lt;p&gt;<strong>&lt;img src="images/parsing-model-overview.png" alt=""
   20421         title="Flowchart representation of the parsing model."&gt;</strong>&lt;/p&gt;</pre>
   20422 
   20423    <pre>&lt;!-- Using &lt;figure&gt; and &lt;figcaption&gt; --&gt;
   20424 &lt;p&gt;The network passes data to the Tokenizer stage, which
   20425 passes data to the Tree Construction stage. From there, data goes
   20426 to both the DOM and to Script Execution. Script Execution is
   20427 linked to the DOM, and, using document.write(), passes data to
   20428 the Tokenizer.&lt;/p&gt;
   20429 &lt;figure&gt;
   20430  <strong>&lt;img src="images/parsing-model-overview.png" alt="The Network leads
   20431  to the Tokenizer, which leads to the Tree Construction. The Tree
   20432  Construction leads to two items. The first is Script Execution, which
   20433  leads via document.write() back to the Tokenizer. The second item
   20434  from which Tree Construction leads is the DOM. The DOM is related to
   20435  the Script Execution."&gt;</strong>
   20436  &lt;figcaption&gt;Flowchart representation of the parsing model.&lt;/figcaption&gt;
   20437 &lt;/figure&gt;</pre>
   20438 
   20439    <pre class=bad>&lt;!-- This is WRONG. Do not do this. Instead, do what the above examples do. --&gt;
   20440 &lt;p&gt;The network passes data to the Tokenizer stage, which
   20441 passes data to the Tree Construction stage. From there, data goes
   20442 to both the DOM and to Script Execution. Script Execution is
   20443 linked to the DOM, and, using document.write(), passes data to
   20444 the Tokenizer.&lt;/p&gt;
   20445 &lt;p&gt;&lt;img src="images/parsing-model-overview.png"
   20446         alt="Flowchart representation of the parsing model."&gt;&lt;/p&gt;
   20447 &lt;!-- Never put the image's caption in the alt="" attribute! --&gt;</pre>
   20448 
   20449   </div>
   20450 
   20451   <div class=example>
   20452 
   20453    <p>A graph that repeats the previous paragraph in graphical form:</p>
   20454 
   20455    <pre>&lt;p&gt;According to a study covering several billion pages,
   20456 about 62% of documents on the Web in 2007 triggered the Quirks
   20457 rendering mode of Web browsers, about 30% triggered the Almost
   20458 Standards mode, and about 9% triggered the Standards mode.&lt;/p&gt;
   20459 <strong>&lt;p&gt;&lt;img src="rendering-mode-pie-chart.png" alt=""&gt;&lt;/p&gt;</strong></pre>
   20460 
   20461   </div>
   20462 
   20463 
   20464 
   20465   <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</h6>
   20466 
   20467   <p>In general, if an image is decorative but isn't especially
   20468   page-specific, for example an image that forms part of a site-wide
   20469   design scheme, the image should be specified in the site's CSS,
   20470   not in the markup of the document.</p>
   20471 
   20472   <p>However, a decorative image that isn't discussed by the
   20473   surrounding text but still has some relevance can be included in a page
   20474   using the <code><a href=#the-img-element>img</a></code> element. Such images are decorative, but
   20475   still form part of the content. In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be present but its
   20476   value must be the empty string.</p>
   20477 
   20478   <div class=example>
   20479 
   20480    <p>Examples where the image is purely decorative despite being
   20481    relevant would include things like a photo of the Black Rock City
   20482    landscape in a blog post about an event at Burning Man, or an
   20483    image of a painting inspired by a poem, on a page reciting that
   20484    poem. The following snippet shows an example of the latter
   20485    case (only the first verse is included in this snippet):</p>
   20486 
   20487    <pre>&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
   20488 <strong>&lt;p&gt;&lt;img src="shalott.jpeg" alt=""&gt;&lt;/p&gt;</strong>
   20489 &lt;p&gt;On either side the river lie&lt;br&gt;
   20490 Long fields of barley and of rye,&lt;br&gt;
   20491 That clothe the wold and meet the sky;&lt;br&gt;
   20492 And through the field the road run by&lt;br&gt;
   20493 To many-tower'd Camelot;&lt;br&gt;
   20494 And up and down the people go,&lt;br&gt;
   20495 Gazing where the lilies blow&lt;br&gt;
   20496 Round an island there below,&lt;br&gt;
   20497 The island of Shalott.&lt;/p&gt;</pre>
   20498 
   20499   </div>
   20500 
   20501 
   20502 
   20503   <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</h6>
   20504 
   20505   <p>When a picture has been sliced into smaller image files that are
   20506   then displayed together to form the complete picture again, one of
   20507   the images must have its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20508   attribute set as per the relevant rules that would be appropriate
   20509   for the picture as a whole, and then all the remaining images must
   20510   have their <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute set to
   20511   the empty string.</p>
   20512 
   20513   <div class=example>
   20514 
   20515    <p>In the following example, a picture representing a company logo
   20516    for <span title="">XYZ Corp</span> has been split into two pieces,
   20517    the first containing the letters "XYZ" and the second with the word
   20518    "Corp". The alternative text ("XYZ Corp") is all in the first
   20519    image.</p>
   20520 
   20521    <pre>&lt;h1&gt;<strong>&lt;img src="logo1.png" alt="XYZ Corp"&gt;&lt;img src="logo2.png" alt=""&gt;</strong>&lt;/h1&gt;</pre>
   20522 
   20523   </div>
   20524 
   20525   <div class=example>
   20526 
   20527    <p>In the following example, a rating is shown as three filled
   20528    stars and two empty stars. While the alternative text could have
   20529    been "&#9733;&#9733;&#9733;&#9734;&#9734;", the author has
   20530    instead decided to more helpfully give the rating in the form "3
   20531    out of 5". That is the alternative text of the first image, and the
   20532    rest have blank alternative text.</p>
   20533 
   20534    <pre>&lt;p&gt;Rating: &lt;meter max=5 value=3&gt;<strong>&lt;img src="1" alt="3 out of 5"
   20535   &gt;&lt;img src="1" alt=""&gt;&lt;img src="1" alt=""&gt;&lt;img src="0" alt=""
   20536   &gt;&lt;img src="0" alt=""&gt;</strong>&lt;/meter&gt;&lt;/p&gt;</pre>
   20537 
   20538   </div>
   20539 
   20540 
   20541 
   20542   <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</h6>
   20543 
   20544   <p>Generally, <a href=#image-map title="image map">image maps</a> should be
   20545   used instead of slicing an image for links.</p>
   20546 
   20547   <p>However, if an image is indeed sliced and any of the components
   20548   of the sliced picture are the sole contents of links, then one image
   20549   per link must have alternative text in its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute representing the purpose
   20550   of the link.</p>
   20551 
   20552   <div class=example>
   20553 
   20554    <p>In the following example, a picture representing the flying
   20555    spaghetti monster emblem, with each of the left noodly appendages
   20556    and the right noodly appendages in different images, so that the
   20557    user can pick the left side or the right side in an adventure.</p>
   20558 
   20559    <pre>&lt;h1&gt;The Church&lt;/h1&gt;
   20560 &lt;p&gt;You come across a flying spaghetti monster. Which side of His
   20561 Noodliness do you wish to reach out for?&lt;/p&gt;
   20562 <strong>&lt;p&gt;&lt;a href="?go=left" &gt;&lt;img src="fsm-left.png"  alt="Left side. "&gt;&lt;/a
   20563   &gt;&lt;img src="fsm-middle.png" alt=""
   20564   &gt;&lt;a href="?go=right"&gt;&lt;img src="fsm-right.png" alt="Right side."&gt;&lt;/a&gt;&lt;/p&gt;</strong></pre>
   20565 
   20566   </div>
   20567 
   20568 
   20569 
   20570   <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</h6>
   20571 
   20572   <p>In some cases, the image is a critical part of the
   20573   content. This could be the case, for instance, on a page that is
   20574   part of a photo gallery. The image is the whole <em>point</em> of
   20575   the page containing it.</p>
   20576 
   20577   <p>How to provide alternative text for an image that is a key part
   20578   of the content depends on the image's provenance.</p>
   20579 
   20580   <dl><dt>The general case</dt>
   20581 
   20582    <dd>
   20583 
   20584     <p>When it is possible for detailed alternative text to be
   20585     provided, for example if the image is part of a series of
   20586     screenshots in a magazine review, or part of a comic strip, or is
   20587     a photograph in a blog entry about that photograph, text that can
   20588     serve as a substitute for the image must be given as the contents
   20589     of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
   20590 
   20591     <div class=example>
   20592 
   20593      <p>A screenshot in a gallery of screenshots for a new OS, with
   20594      some alternative text:</p>
   20595 
   20596      <pre>&lt;figure&gt;
   20597  <strong>&lt;img src="KDE%20Light%20desktop.png"
   20598       alt="The desktop is blue, with icons along the left hand side in
   20599            two columns, reading System, Home, K-Mail, etc. A window is
   20600            open showing that menus wrap to a second line if they
   20601            cannot fit in the window. The window has a list of icons
   20602            along the top, with an address bar below it, a list of
   20603            icons for tabs along the left edge, a status bar on the
   20604            bottom, and two panes in the middle. The desktop has a bar
   20605            at the bottom of the screen with a few buttons, a pager, a
   20606            list of open applications, and a clock."&gt;</strong>
   20607  &lt;figcaption&gt;Screenshot of a KDE desktop.&lt;/figcaption&gt;
   20608 &lt;/figure&gt;</pre>
   20609 
   20610     </div>
   20611 
   20612     <div class=example>
   20613 
   20614      <p>A graph in a financial report:</p>
   20615 
   20616      <pre><strong>&lt;img src="sales.gif"
   20617      title="Sales graph"
   20618      alt="From 1998 to 2005, sales increased by the following percentages
   20619      with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%"&gt;</strong></pre>
   20620 
   20621      <p>Note that "sales graph" would be inadequate alternative text
   20622      for a sales graph. Text that would be a good <em>caption</em> is
   20623      not generally suitable as replacement text.</p>
   20624 
   20625     </div>
   20626 
   20627    </dd>
   20628 
   20629 
   20630    <dt>Images that defy a complete description</dt>
   20631 
   20632    <dd>
   20633 
   20634     <p>In certain cases, the nature of the image might be such that
   20635     providing thorough alternative text is impractical. For example,
   20636     the image could be indistinct, or could be a complex fractal, or
   20637     could be a detailed topographical map.</p>
   20638 
   20639     <p>In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20640     attribute must contain some suitable alternative text, but it may
   20641     be somewhat brief.</p>
   20642 
   20643     <div class=example>
   20644 
   20645      <p>Sometimes there simply is no text that can do justice to an
   20646      image. For example, there is little that can be said to usefully
   20647      describe a Rorschach inkblot test. However, a description, even
   20648      if brief, is still better than nothing:</p>
   20649 
   20650      <pre>&lt;figure&gt;
   20651  <strong>&lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
   20652  symmetry with indistinct edges, with a small gap in the center, two
   20653  larger gaps offset slightly from the center, with two similar gaps
   20654  under them. The outline is wider in the top half than the bottom
   20655  half, with the sides extending upwards higher than the center, and
   20656  the center extending below the sides."&gt;</strong>
   20657  &lt;figcaption&gt;A black outline of the first of the ten cards
   20658  in the Rorschach inkblot test.&lt;/figcaption&gt;
   20659 &lt;/figure&gt;</pre>
   20660 
   20661      <p>Note that the following would be a very bad use of alternative
   20662      text:</p>
   20663 
   20664      <pre class=bad>&lt;!-- This example is wrong. Do not copy it. --&gt;
   20665 &lt;figure&gt;
   20666  &lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
   20667  of the first of the ten cards in the Rorschach inkblot test."&gt;
   20668  &lt;figcaption&gt;A black outline of the first of the ten cards
   20669  in the Rorschach inkblot test.&lt;/figcaption&gt;
   20670 &lt;/figure&gt;</pre>
   20671 
   20672      <p>Including the caption in the alternative text like this isn't
   20673      useful because it effectively duplicates the caption for users
   20674      who don't have images, taunting them twice yet not helping them
   20675      any more than if they had only read or heard the caption
   20676      once.</p>
   20677 
   20678     </div>
   20679 
   20680     <div class=example>
   20681 
   20682      <p>Another example of an image that defies full description is a
   20683      fractal, which, by definition, is infinite in detail.</p>
   20684 
   20685      <p>The following example shows one possible way of providing
   20686      alternative text for the full view of an image of the Mandelbrot
   20687      set.</p>
   20688 
   20689      <pre><strong>&lt;img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
   20690 its cusp on the real axis in the positive direction, with a smaller
   20691 bulb aligned along the same center line, touching it in the negative
   20692 direction, and with these two shapes being surrounded by smaller bulbs
   20693 of various sizes."&gt;</strong></pre>
   20694 
   20695     </div>
   20696 
   20697    </dd>
   20698 
   20699 
   20700    <dt id=unknown-images>Images whose contents are not known</dt>
   20701 
   20702    <dd>
   20703 
   20704     <p>In some unfortunate cases, there might be no alternative text
   20705     available at all, either because the image is obtained in some
   20706     automated fashion without any associated alternative text (e.g. a
   20707     Webcam), or because the page is being generated by a script using
   20708     user-provided images where the user did not provide suitable or
   20709     usable alternative text (e.g. photograph sharing sites), or
   20710     because the author does not himself know what the images represent
   20711     (e.g. a blind photographer sharing an image on his blog).</p>
   20712 
   20713     <p>In such cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20714     attribute's value may be omitted, but one of the following
   20715     conditions must be met as well:</p>
   20716 
   20717     <ul><!-- when editing this list, search for the two other occurrences
   20718      of 'critical-no-alt' --><li>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is
   20719      present and has a non-empty value.</li>
   20720 
   20721      <li>The <code><a href=#the-img-element>img</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
   20722      element that contains a <code><a href=#the-figcaption-element>figcaption</a></code> element that
   20723      contains content other than <a href=#inter-element-whitespace>inter-element
   20724      whitespace</a>.</li>
   20725 
   20726     </ul><p class=note>Such cases are to be kept to an absolute
   20727     minimum. If there is even the slightest possibility of the author
   20728     having the ability to provide real alternative text, then it would
   20729     not be acceptable to omit the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   20730     attribute.</p>
   20731 
   20732     <div class=example>
   20733 
   20734      <p>A photo on a photo-sharing site, if the site received the
   20735      image with no metadata other than the caption, could be marked up
   20736      as follows:</p>
   20737 
   20738      <pre>&lt;figure&gt;
   20739  <strong>&lt;img src="1100670787_6a7c664aef.jpg"&gt;</strong>
   20740  &lt;figcaption&gt;Bubbles traveled everywhere with us.&lt;/figcaption&gt;
   20741 &lt;/figure&gt;</pre>
   20742 
   20743      <p>It would be better, however, if a detailed description of the
   20744      important parts of the image obtained from the user and included
   20745      on the page.</p>
   20746 
   20747     </div>
   20748 
   20749     <div class=example>
   20750 
   20751      <p>A blind user's blog in which a photo taken by the user is
   20752      shown. Initially, the user might not have any idea what the photo
   20753      he took shows:</p>
   20754 
   20755      <pre>&lt;article&gt;
   20756  &lt;h1&gt;I took a photo&lt;/h1&gt;
   20757  &lt;p&gt;I went out today and took a photo!&lt;/p&gt;
   20758  &lt;figure&gt;
   20759   <strong>&lt;img src="photo2.jpeg"&gt;</strong>
   20760   &lt;figcaption&gt;A photograph taken blindly from my front porch.&lt;/figcaption&gt;
   20761  &lt;/figure&gt;
   20762 &lt;/article&gt;</pre>
   20763 
   20764      <p>Eventually though, the user might obtain a description of the
   20765      image from his friends and could then include alternative text:</p>
   20766 
   20767      <pre>&lt;article&gt;
   20768  &lt;h1&gt;I took a photo&lt;/h1&gt;
   20769  &lt;p&gt;I went out today and took a photo!&lt;/p&gt;
   20770  &lt;figure&gt;
   20771   <strong>&lt;img src="photo2.jpeg" alt="The photograph shows my hummingbird
   20772   feeder hanging from the edge of my roof. It is half full, but there
   20773   are no birds around. In the background, out-of-focus trees fill the
   20774   shot. The feeder is made of wood with a metal grate, and it contains
   20775   peanuts. The edge of the roof is wooden too, and is painted white
   20776   with light blue streaks."&gt;</strong>
   20777   &lt;figcaption&gt;A photograph taken blindly from my front porch.&lt;/figcaption&gt;
   20778  &lt;/figure&gt;
   20779 &lt;/article&gt;</pre>
   20780 
   20781     </div>
   20782 
   20783     <div class=example>
   20784 
   20785      <p>Sometimes the entire point of the image is that a textual
   20786      description is not available, and the user is to provide the
   20787      description. For instance, the point of a CAPTCHA image is to see
   20788      if the user can literally read the graphic. Here is one way to
   20789      mark up a CAPTCHA (note the <code title=attr-title><a href=#the-title-attribute>title</a></code>
   20790      attribute):</p>
   20791 
   20792      <pre>&lt;p&gt;&lt;label&gt;What does this image say?
   20793 <strong>&lt;img src="captcha.cgi?id=8934" title="CAPTCHA"&gt;</strong>
   20794 &lt;input type=text name=captcha&gt;&lt;/label&gt;
   20795 (If you cannot see the image, you can use an &lt;a
   20796 href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>
   20797 
   20798      <p>Another example would be software that displays images and
   20799      asks for alternative text precisely for the purpose of then
   20800      writing a page with correct alternative text. Such a page could
   20801      have a table of images, like this:</p>
   20802 
   20803      <pre>&lt;table&gt;
   20804  &lt;thead&gt;
   20805   &lt;tr&gt; &lt;th&gt; Image &lt;th&gt; Description
   20806  &lt;tbody&gt;
   20807   &lt;tr&gt;
   20808    &lt;td&gt; <strong>&lt;img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"&gt;</strong>
   20809    &lt;td&gt; &lt;input name="alt2421"&gt;
   20810   &lt;tr&gt;
   20811    &lt;td&gt; <strong>&lt;img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"&gt;</strong>
   20812    &lt;td&gt; &lt;input name="alt2422"&gt;
   20813 &lt;/table&gt;</pre>
   20814 
   20815      <p>Notice that even in this example, as much useful information
   20816      as possible is still included in the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute.</p>
   20817 
   20818     </div>
   20819 
   20820     <p class=note>Since some users cannot use images at all
   20821     (e.g. because they have a very slow connection, or because they
   20822     are using a text-only browser, or because they are listening to
   20823     the page being read out by a hands-free automobile voice Web
   20824     browser, or simply because they are blind), the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is only allowed to be
   20825     omitted rather than being provided with replacement text when no
   20826     alternative text is available and none can be made available, as
   20827     in the above examples. Lack of effort from the part of the author
   20828     is not an acceptable reason for omitting the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
   20829 
   20830    </dd>
   20831 
   20832   </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</h6>
   20833 
   20834   <p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
   20835   for purposes other than showing images.</p>
   20836 
   20837   <p>If an <code><a href=#the-img-element>img</a></code> element is being used for purposes other
   20838   than showing an image, e.g. as part of a service to count page
   20839   views, then the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
   20840   be the empty string.</p>
   20841 
   20842   <p>In such cases, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
   20843   <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes should both
   20844   be set to zero.</p>
   20845 
   20846 
   20847 
   20848   <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
   20849 
   20850   <p><i>This section does not apply to documents that are publicly
   20851   accessible, or whose target audience is not necessarily personally
   20852   known to the author, such as documents on a Web site, e-mails sent
   20853   to public mailing lists, or software documentation.</i></p>
   20854 
   20855   <p>When an image is included in a private communication (such as an
   20856   HTML e-mail) aimed at a specific person who is known to be able to
   20857   view images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute may
   20858   be omitted. However, even in such cases it is strongly recommended
   20859   that alternative text be included (as appropriate according to the
   20860   kind of image involved, as described in the above entries), so that
   20861   the e-mail is still usable should the user use a mail client that
   20862   does not support images, or should the document be forwarded on to
   20863   other users whose abilities might not include easily seeing
   20864   images.</p>
   20865 
   20866 
   20867 
   20868   <h6 id=general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</h6>
   20869 
   20870   <p>The most general rule to consider when writing alternative text
   20871   is the following: <strong>the intent is that replacing every image
   20872   with the text of its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
   20873   not change the meaning of the page</strong>.</p>
   20874 
   20875   <p>So, in general, alternative text can be written by considering
   20876   what one would have written had one not been able to include the
   20877   image.</p>
   20878 
   20879   <p>A corollary to this is that the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value should never
   20880   contain text that could be considered the image's <em>caption</em>,
   20881   <em>title</em>, or <em>legend</em>. It is supposed to contain
   20882   replacement text that could be used by users <em>instead</em> of the
   20883   image; it is not meant to supplement the image. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can be used for
   20884   supplemental information.</p>
   20885 
   20886   <p class=note>One way to think of alternative text is to think
   20887   about how you would read the page containing the image to someone
   20888   over the phone, without mentioning that there is an image
   20889   present. Whatever you say instead of the image is typically a good
   20890   start for writing the alternative text.</p>
   20891 
   20892 
   20893   <div class=impl>
   20894 
   20895   <h6 id=guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</h6>
   20896 
   20897   <p>Markup generators (such as WYSIWYG authoring tools) should,
   20898   wherever possible, obtain alternative text from their
   20899   users. However, it is recognized that in many cases, this will not
   20900   be possible.</p>
   20901 
   20902   <p>For images that are the sole contents of links, markup generators
   20903   should examine the link target to determine the title of the target,
   20904   or the URL of the target, and use information obtained in this
   20905   manner as the alternative text.</p>
   20906 
   20907   <p>As a last resort, implementors should either set the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute to the empty string, under
   20908   the assumption that the image is a purely decorative image that
   20909   doesn't add any information but is still specific to the surrounding
   20910   content, or omit the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
   20911   altogether, under the assumption that the image is a key part of the
   20912   content.</p>
   20913 
   20914   <p>Markup generators should generally avoid using the image's own
   20915   file name as the alternative text. Similarly, markup generators
   20916   should avoid generating alternative text from any content that will
   20917   be equally available to presentation user agents (e.g. Web
   20918   browsers).</p>
   20919 
   20920   <p class=note>This is because once a page is generated, it will
   20921   typically not be updated, whereas the browsers that later read the
   20922   page can be updated by the user, therefore the browser is likely to
   20923   have more up-to-date and finely-tuned heuristics than the markup
   20924   generator did when generating the page.</p>
   20925 
   20926   </div>
   20927 
   20928   <div class=impl>
   20929 
   20930   <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</h6>
   20931 
   20932   <p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless one of
   20933   the conditions listed below applies:</p>
   20934 
   20935   <ul><!-- when editing this list, search for the two other occurrences
   20936    of 'critical-no-alt' --><li>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is present
   20937    and has a non-empty value (as <a href=#unknown-images>described
   20938    above</a>).</li>
   20939 
   20940    <li>The <code><a href=#the-img-element>img</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
   20941    element that contains a <code><a href=#the-figcaption-element>figcaption</a></code> element that
   20942    contains content other than <a href=#inter-element-whitespace>inter-element whitespace</a>
   20943    (as <a href=#unknown-images>described above</a>).</li>
   20944 
   20945    <!-- the following are additional entries not included in the
   20946    aforementioned list, as they apply only to conformance checkers -->
   20947 
   20948    <li>The conformance checker has been configured to assume that the
   20949    document is an e-mail or document intended for a specific person
   20950    who is known to be able to view images.</li>
   20951 
   20952    <li>The document has a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute whose value is an
   20953    <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=meta-generator><a href=#meta-generator>generator</a></code>". (This case does not
   20954    represent a case where the document is conforming, only that the
   20955    generator could not determine appropriate alternative text &mdash;
   20956    validators are required to not show an error in this case to
   20957    discourage markup generators from including bogus alternative text
   20958    purely in an attempt to silence validators.)</li>
   20959 
   20960   </ul></div>
   20961 
   20962 
   20963 
   20964   <h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
   20965 
   20966   <dl class=element><dt>Categories</dt>
   20967    <dd><a href=#flow-content>Flow content</a>.</dd>
   20968    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   20969    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   20970    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   20971    <dt>Contexts in which this element may be used:</dt>
   20972    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   20973    <dt>Content model:</dt>
   20974    <dd>Text that conforms to the requirements given in the prose.</dd>
   20975    <dt>Content attributes:</dt>
   20976    <dd><a href=#global-attributes>Global attributes</a></dd>
   20977    <dd><code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code></dd>
   20978    <dd><code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code></dd>
   20979    <dd><code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code></dd>
   20980    <dd><code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code></dd>
   20981    <dd><code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code></dd>
   20982    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   20983    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   20984    <dt>DOM interface:</dt>
   20985    <dd>
   20986 <pre class=idl>interface <dfn id=htmliframeelement>HTMLIFrameElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   20987            attribute DOMString <a href=#dom-iframe-src title=dom-iframe-src>src</a>;
   20988            attribute DOMString <a href=#dom-iframe-srcdoc title=dom-iframe-srcdoc>srcdoc</a>;
   20989            attribute DOMString <a href=#dom-iframe-name title=dom-iframe-name>name</a>;
   20990   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-iframe-sandbox title=dom-iframe-sandbox>sandbox</a>;
   20991            attribute boolean <a href=#dom-iframe-seamless title=dom-iframe-seamless>seamless</a>;
   20992            attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
   20993            attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
   20994   readonly attribute Document <a href=#dom-iframe-contentdocument title=dom-iframe-contentDocument>contentDocument</a>;
   20995   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-iframe-contentwindow title=dom-iframe-contentWindow>contentWindow</a>;
   20996 };</pre>
   20997    </dd>
   20998   </dl><p>The <code><a href=#the-iframe-element>iframe</a></code> element <a href=#represents>represents</a> a
   20999   <a href=#nested-browsing-context>nested browsing context</a>.</p>
   21000 
   21001   <p>The <dfn id=attr-iframe-src title=attr-iframe-src><code>src</code></dfn> attribute
   21002   gives the address of a page that the <a href=#nested-browsing-context>nested browsing
   21003   context</a> is to contain. The attribute, if present, must be a
   21004   <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   21005   spaces</a>.</p>
   21006 
   21007   <p>The <dfn id=attr-iframe-srcdoc title=attr-iframe-srcdoc><code>srcdoc</code></dfn>
   21008   attribute gives the content of the page that the <a href=#nested-browsing-context>nested
   21009   browsing context</a> is to contain.  The value of the attribute
   21010   in is <dfn id=an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</dfn>.</p>
   21011 
   21012   <p>For <code><a href=#the-iframe-element>iframe</a></code> elements in <a href=#html-documents>HTML documents</a>,
   21013   the attribute, if present, must have a value using <a href=#syntax>the HTML
   21014   syntax</a> that consists of the following syntactic components,
   21015   in the given order:</p>
   21016 
   21017   <ol><li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   21018    <a href=#space-character title="space character">space characters</a>.</li>
   21019 
   21020    <li>Optionally, a <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>.
   21021 
   21022    <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   21023    <a href=#space-character title="space character">space characters</a>.</li>
   21024 
   21025    <li>The root element, in the form of an <code><a href=#the-html-element-0>html</a></code> <a href=#syntax-elements title=syntax-elements>element</a>.</li>
   21026 
   21027    <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   21028    <a href=#space-character title="space character">space characters</a>.</li>
   21029 
   21030   </ol><p>For <code><a href=#the-iframe-element>iframe</a></code> elements in <a href=#xml-documents>XML documents</a>,
   21031   the attribute, if present, must have a value that matches the
   21032   production labeled <code><a href=#document>document</a></code> in the XML
   21033   specification. <a href=#refsXML>[XML]</a></p>
   21034 
   21035   <p>If the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute and the
   21036   <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute are both
   21037   specified together, the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code>
   21038   attribute takes priority. This allows authors to provide a fallback
   21039   <a href=#url>URL</a> for legacy user agents that do not support the
   21040   <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute.</p>
   21041 
   21042   <div class=impl>
   21043 
   21044   <p>When an <code><a href=#the-iframe-element>iframe</a></code> element is first <a href=#insert-an-element-into-a-document title="insert
   21045   an element into a document">inserted into a document</a>, the
   21046   user agent must create a <a href=#nested-browsing-context>nested browsing context</a>, and
   21047   then <a href=#process-the-iframe-attributes>process the <code>iframe</code> attributes</a> for the
   21048   first time.</p>
   21049 
   21050   <p>Whenever an <code><a href=#the-iframe-element>iframe</a></code> element with a <a href=#nested-browsing-context>nested
   21051   browsing context</a> has its <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute set or changed,
   21052   the user agent must <a href=#process-the-iframe-attributes>process the <code>iframe</code>
   21053   attributes</a>.</p>
   21054 
   21055   <p>Similarly, whenever an <code><a href=#the-iframe-element>iframe</a></code> element with a
   21056   <a href=#nested-browsing-context>nested browsing context</a> but with no <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute specified has its
   21057   <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute set or changed,
   21058   the user agent must <a href=#process-the-iframe-attributes>process the <code>iframe</code>
   21059   attributes</a>.</p> <!-- It doesn't happen when the base URL is
   21060   changed, though. -->
   21061 
   21062   <p>When the user agent is to <dfn id=process-the-iframe-attributes>process the <code>iframe</code>
   21063   attributes</dfn>, it must run the first appropriate steps from the
   21064   following list:</p>
   21065 
   21066   <dl class=switch><dt>If the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute
   21067    is specified</dt>
   21068 
   21069    <dd><p><a href=#navigate>Navigate</a> the element's <a href=#browsing-context>browsing
   21070    context</a> to a resource whose <a href=#content-type>Content-Type</a> is
   21071    <code><a href=#text/html>text/html</a></code>, whose <a href=#url>URL</a> is
   21072    <code><a href=#about:srcdoc>about:srcdoc</a></code>, and whose data consists of the value of
   21073    the attribute.</dd>
   21074 
   21075    <dt>If the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code>
   21076    attribute is specified but the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not</dt>
   21077 
   21078    <dd>
   21079 
   21080     <ol><li><p>If the value of the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute is the empty string,
   21081      jump to the <i title="">empty</i> step below.</li>
   21082 
   21083      <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the value of
   21084      the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute, relative
   21085      to the <code><a href=#the-iframe-element>iframe</a></code> element.</li>
   21086 
   21087      <li><p>If that is not successful, then jump to the <i title="">empty</i> step below.</li>
   21088 
   21089      <li><p>If the resulting <a href=#absolute-url>absolute URL</a> is an
   21090      <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   21091      "<code><a href=#about:blank>about:blank</a></code>", and the user agent is processing this
   21092      <code><a href=#the-iframe-element>iframe</a></code>'s attributes for the first time, then jump to
   21093      the <i title="">empty</i> step below. (In cases other than the
   21094      first time, <code><a href=#about:blank>about:blank</a></code> is loaded
   21095      normally.)</li>
   21096 
   21097      <li><p><a href=#navigate>Navigate</a> the element's <a href=#browsing-context>browsing
   21098      context</a> to the resulting <a href=#absolute-url>absolute
   21099      URL</a>.</li>
   21100 
   21101     </ol><p><i>Empty</i>: When the steps above require the user agent to
   21102     jump to the <i title="">empty</i> step, if the user agent is
   21103     processing this <code><a href=#the-iframe-element>iframe</a></code>'s attributes for the first
   21104     time, then the user agent must <a href=#queue-a-task>queue a task</a> to
   21105     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the <code><a href=#the-iframe-element>iframe</a></code>
   21106     element. (After jumping to this step, the above steps are not
   21107     resumed.)</p>
   21108 
   21109    </dd>
   21110 
   21111    <dt>Otherwise</dt>
   21112 
   21113    <dd>
   21114 
   21115     <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   21116     named <code title=event-load>load</code> at the
   21117     <code><a href=#the-iframe-element>iframe</a></code> element.</p>
   21118 
   21119    </dd>
   21120 
   21121   </dl><p>Any <a href=#navigate title=navigate>navigation</a> required of the user
   21122   agent in the <a href=#process-the-iframe-attributes>process the <code>iframe</code> attributes</a>
   21123   algorithm must be completed with the <code><a href=#the-iframe-element>iframe</a></code> element's
   21124   document's <a href=#browsing-context>browsing context</a> as the <a href=#source-browsing-context>source
   21125   browsing context</a>.</p>
   21126 
   21127   <p>Furthermore, if the <a href=#process-the-iframe-attributes>process the <code>iframe</code>
   21128   attributes</a> algorithm was invoked for the first time for this
   21129   element (i.e. as a result of the element being <a href=#insert-an-element-into-a-document title="insert
   21130   an element into a document">inserted into a document</a>), then
   21131   any <a href=#navigate title=navigate>navigation</a> required of the user
   21132   agent in that algorithm must be completed with <a href=#replacement-enabled>replacement
   21133   enabled</a>.</p>
   21134 
   21135   </div>
   21136 
   21137   <p class=note>If, when the element is created, the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not set, and
   21138   the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute is either
   21139   also not set or set but its value cannot be <a href=#resolve-a-url title="resolve a
   21140   url">resolved</a>, the browsing context will remain at the
   21141   initial <code><a href=#about:blank>about:blank</a></code> page.</p>
   21142 
   21143   <p class=note>If the user <a href=#navigate title=navigate>navigates</a>
   21144   away from this page, the <code><a href=#the-iframe-element>iframe</a></code>'s corresponding
   21145   <code><a href=#windowproxy>WindowProxy</a></code> object will proxy new <code><a href=#window>Window</a></code>
   21146   objects for new <code><a href=#document>Document</a></code> objects, but the <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute will not change.</p>
   21147 
   21148   <div class=example>
   21149 
   21150    <p>Here a blog uses the <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute in conjunction
   21151    with the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> and <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attributes described
   21152    below to provide users of user agents that support this feature
   21153    with an extra layer of protection from script injection in the blog
   21154    post comments:</p>
   21155 
   21156    <pre>&lt;article&gt;
   21157  &lt;h1&gt;I got my own magazine!&lt;/h1&gt;
   21158  &lt;p&gt;After much effort, I've finally found a publisher, and so now I
   21159  have my own magazine! Isn't that awesome?! The first issue will come
   21160  out in September, and we have articles about getting food, and about
   21161  getting in boxes, it's going to be great!&lt;/p&gt;
   21162  &lt;footer&gt;
   21163   &lt;p&gt;Written by &lt;a href="/users/cap"&gt;cap&lt;/a&gt;.
   21164   &lt;time pubdate&gt;2009-08-21T23:32Z&lt;/time&gt;&lt;/p&gt;
   21165  &lt;/footer&gt;
   21166  &lt;article&gt;
   21167   &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:35Z&lt;/time&gt;, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; writes: &lt;/footer&gt;
   21168   &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;did you get a cover picture yet?"&gt;&lt;/iframe&gt;
   21169  &lt;/article&gt;
   21170  &lt;article&gt;
   21171   &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:44Z&lt;/time&gt;, &lt;a href="/users/cap"&gt;cap&lt;/a&gt; writes: &lt;/footer&gt;
   21172   &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;Yeah, you can see it &lt;a href=&amp;quot;/gallery?mode=cover&amp;amp;amp;page=1&amp;quot;&gt;in my gallery&lt;/a&gt;."&gt;&lt;/iframe&gt;
   21173  &lt;/article&gt;
   21174  &lt;article&gt;
   21175   &lt;footer&gt; At &lt;time pubdate&gt;2009-08-21T23:58Z&lt;/time&gt;, &lt;a href="/users/ch"&gt;ch&lt;/a&gt; writes: &lt;/footer&gt;
   21176   &lt;iframe seamless sandbox="allow-same-origin" srcdoc="&lt;p&gt;hey that's earl's table.
   21177 &lt;p&gt;you should get earl&amp;amp;amp;me on the next cover."&gt;&lt;/iframe&gt;
   21178  &lt;/article&gt;</pre>
   21179 
   21180    <p>Notice the way that quotes have to be escaped (otherwise the
   21181    <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute would
   21182    end prematurely), and the way raw ampersands (e.g. in URLs or in
   21183    prose) mentioned in the sandboxed content have to be
   21184    <em>doubly</em> escaped &mdash; once so that the ampersand is
   21185    preserved when originally parsing the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, and once more
   21186    to prevent the ampersand from being misinterpreted when parsing the
   21187    sandboxed content.</p>
   21188 
   21189   </div>
   21190 
   21191   <p class=note>In <a href=#syntax>the HTML syntax</a>, authors need only
   21192   remember to use U+0022 QUOTATION MARK characters (") to wrap the
   21193   attribute contents and then to escape all U+0022 QUOTATION MARK (")
   21194   and U+0026 AMPERSAND (&amp;) characters, and to specify the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, to ensure safe
   21195   embedding of content.</p>
   21196 
   21197   <p class=note>Due to restrictions of <span>the XML syntax</span>,
   21198   in XML a number of other characters need to be escaped also to
   21199   ensure correctness.</p>
   21200 
   21201   <hr><p>The <dfn id=attr-iframe-name title=attr-iframe-name><code>name</code></dfn>
   21202   attribute, if present, must be a <a href=#valid-browsing-context-name>valid browsing context
   21203   name</a>. The given value is used to name the <a href=#nested-browsing-context>nested
   21204   browsing context</a>. <span class=impl>When the browsing
   21205   context is created, if the attribute is present, the <a href=#browsing-context-name>browsing
   21206   context name</a> must be set to the value of this attribute;
   21207   otherwise, the <a href=#browsing-context-name>browsing context name</a> must be set to the
   21208   empty string.</span></p>
   21209 
   21210   <div class=impl>
   21211 
   21212   <p>Whenever the <code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code> attribute
   21213   is set, the nested <a href=#browsing-context>browsing context</a>'s <a href=#browsing-context-name title="browsing context name">name</a> must be changed to the new
   21214   value. If the attribute is removed, the <a href=#browsing-context-name>browsing context
   21215   name</a> must be set to the empty string.</p>
   21216 
   21217   <p>When content loads in an <code><a href=#the-iframe-element>iframe</a></code>, after any <code title=event-load>load</code> events are fired within the content
   21218   itself, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   21219   a simple event</a> named <code title=event-load>load</code> at
   21220   the <code><a href=#the-iframe-element>iframe</a></code> element. When content whose <a href=#url>URL</a>
   21221   has the <a href=#same-origin>same origin</a> as the <code><a href=#the-iframe-element>iframe</a></code>
   21222   element's <code><a href=#document>Document</a></code> fails to load (e.g. due to a DNS
   21223   error, network error, or if the server returned a 4xx or 5xx status
   21224   code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
   21225   equivalent</a>), then the user agent must <a href=#queue-a-task>queue a
   21226   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the element instead. (This event
   21227   does not fire for <a href=#parse-error title="parse error">parse errors</a>,
   21228   script errors, or any errors for cross-origin resources.)</p>
   21229 
   21230   <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
   21231   task source</a>.</p>
   21232 
   21233   <p class=note>A <code title=event-load>load</code> event is also
   21234   fired at the <code><a href=#the-iframe-element>iframe</a></code> element when it is created if no
   21235   other data is loaded in it.</p>
   21236 
   21237   <p>When there is an <a href=#active-parser>active parser</a> in the
   21238   <code><a href=#the-iframe-element>iframe</a></code>, and when anything in the <code><a href=#the-iframe-element>iframe</a></code> is
   21239   <a href=#delay-the-load-event title="delay the load event">delaying the load event</a> of
   21240   the <code><a href=#the-iframe-element>iframe</a></code>'s <a href=#browsing-context>browsing context</a>'s
   21241   <a href=#active-document>active document</a>, the <code><a href=#the-iframe-element>iframe</a></code> must
   21242   <a href=#delay-the-load-event>delay the load event</a> of its document.</p>
   21243 
   21244   <p class=note>If, during the handling of the <code title=event-load>load</code> event, the <a href=#browsing-context>browsing
   21245   context</a> in the <code><a href=#the-iframe-element>iframe</a></code> is again <a href=#navigate title=navigate>navigated</a>, that will further <a href=#delay-the-load-event>delay the
   21246   load event</a>.</p>
   21247 
   21248   </div>
   21249 
   21250   <hr><p>The <dfn id=attr-iframe-sandbox title=attr-iframe-sandbox><code>sandbox</code></dfn>
   21251   attribute, when specified, enables a set of extra restrictions on
   21252   any content hosted by the <code><a href=#the-iframe-element>iframe</a></code>. Its value must be an
   21253   <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The
   21254   allowed values are <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>,
   21255   <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>,
   21256   <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code>,
   21257   and <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>. When
   21258   the attribute is set, the content is treated as being from a unique
   21259   <a href=#origin>origin</a>, forms and scripts are disabled, links are
   21260   prevented from targeting other <a href=#browsing-context title="browsing
   21261   context">browsing contexts</a>, and plugins are disabled. The
   21262   <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21263   keyword allows the content to be treated as being from the same
   21264   origin instead of forcing it into a unique origin, the <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>
   21265   keyword allows the content to <a href=#navigate>navigate</a> its
   21266   <a href=#top-level-browsing-context>top-level browsing context</a>, and the <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> and <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   21267   keywords re-enable forms and scripts respectively (though scripts
   21268   are still prevented from creating popups).</p>
   21269 
   21270   <p class=warning>Setting both the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code> and
   21271   <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21272   keywords together when the embedded page has the <a href=#same-origin>same
   21273   origin</a> as the page containing the <code><a href=#the-iframe-element>iframe</a></code> allows
   21274   the embedded page to simply remove the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute.</p>
   21275 
   21276   <p class=warning>Sandboxing hostile content is of minimal help if
   21277   an attacker can convince the user to just visit the hostile content
   21278   directly, rather than in the <code><a href=#the-iframe-element>iframe</a></code>. To limit the
   21279   damage that can be caused by hostile HTML content, it should be
   21280   served using the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME type.</p>
   21281 
   21282   <div class=impl>
   21283 
   21284   <!-- v2: Add a new attribute that enables new restrictions, e.g.:
   21285        - disallow cross-origin loads of any kind (networking
   21286          override that only allows same-origin URLs or about:,
   21287          javascript:, data:)
   21288        - block access to 'parent.frames' from sandbox
   21289   -->
   21290 
   21291   <p>While the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>
   21292   attribute is specified, the <code><a href=#the-iframe-element>iframe</a></code> element's
   21293   <a href=#nested-browsing-context>nested browsing context</a> must have the flags given in
   21294   the following list set.  In addition, any browsing contexts <a href=#nested-browsing-context title="nested browsing context">nested</a> within an
   21295   <code><a href=#the-iframe-element>iframe</a></code>, either directly or indirectly, must have all
   21296   the flags set on them as were set on the <code><a href=#the-iframe-element>iframe</a></code>'s
   21297   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> when the
   21298   <code><a href=#the-iframe-element>iframe</a></code>'s <code><a href=#document>Document</a></code> was created.</p>
   21299 
   21300   <dl><dt>The <dfn id=sandboxed-navigation-browsing-context-flag>sandboxed navigation browsing context flag</dfn></dt>
   21301 
   21302    <dd>
   21303 
   21304     <p>This flag <a href=#sandboxLinks>prevents content from
   21305     navigating browsing contexts other than the sandboxed browsing
   21306     context itself</a> (or browsing contexts further nested inside
   21307     it), and the <a href=#top-level-browsing-context>top-level browsing context</a> (which is
   21308     protected by the <a href=#sandboxed-top-level-navigation-browsing-context-flag>sandboxed top-level navigation browsing
   21309     context flag</a> defined next).</p>
   21310 
   21311     <p>This flag also <a href=#sandboxWindowOpen>prevents content
   21312     from creating new auxiliary browsing contexts</a>, e.g. using the
   21313     <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute or the
   21314     <code title=dom-open><a href=#dom-open>window.open()</a></code> method.</p>
   21315 
   21316    </dd>
   21317 
   21318 
   21319    <dt>The <dfn id=sandboxed-top-level-navigation-browsing-context-flag>sandboxed top-level navigation browsing context
   21320    flag</dfn>, unless the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's value, when
   21321    <a href=#split-a-string-on-spaces title="split a string on spaces">split on spaces</a>, is
   21322    found to have the <dfn id=attr-iframe-sandbox-allow-top-navigation title=attr-iframe-sandbox-allow-top-navigation><code>allow-top-navigation</code></dfn>
   21323    keyword set</dt>
   21324 
   21325    <dd>
   21326 
   21327     <p>This flag <a href=#sandboxLinks>prevents content from
   21328     navigating their <span>top-level browsing context</span></a>.</p>
   21329 
   21330     <p>When the <code title=attr-iframe-sandbox-allow-top-navigation><a href=#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code>
   21331     is set, content can navigate its <a href=#top-level-browsing-context>top-level browsing
   21332     context</a>, but other <a href=#browsing-context title="browsing context">browsing
   21333     contexts</a> are still protected by the <a href=#sandboxed-navigation-browsing-context-flag>sandboxed
   21334     navigation browsing context flag</a> defined above.</p>
   21335 
   21336    </dd>
   21337 
   21338 
   21339    <dt>The <dfn id=sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</dfn></dt>
   21340 
   21341    <dd>
   21342 
   21343     <p>This flag prevents content from instantiating <a href=#plugin title=plugin>plugins</a>, whether using <a href=#sandboxPluginEmbed>the <code>embed</code> element</a>, <a href=#sandboxPluginObject>the <code>object</code> element</a>,
   21344     <a href=#sandboxPluginApplet>the <code>applet</code>
   21345     element</a>, or through <a href=#sandboxPluginNavigate>navigation</a> of a <a href=#nested-browsing-context>nested
   21346     browsing context</a>.</p>
   21347 
   21348    </dd>
   21349 
   21350 
   21351    <dt>The <dfn id=sandboxed-seamless-iframes-flag>sandboxed seamless iframes flag</dfn></dt>
   21352 
   21353    <dd>
   21354 
   21355     <p>This flag prevents content from using the <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attribute on
   21356     descendant <code><a href=#the-iframe-element>iframe</a></code> elements.</p>
   21357 
   21358     <p class=note>This prevents a page inserted using the <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21359     keyword from using a CSS-selector-based method of probing the DOM
   21360     of other pages on the same site (in particular, pages that contain
   21361     user-sensitive information).</p>
   21362 
   21363     <!-- http://lists.w3.org/Archives/Public/public-web-security/2009Dec/thread.html#msg51 -->
   21364 
   21365    </dd>
   21366 
   21367 
   21368    <dt>The <dfn id=sandboxed-origin-browsing-context-flag>sandboxed origin browsing context flag</dfn>, unless
   21369    the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   21370    value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   21371    spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-same-origin title=attr-iframe-sandbox-allow-same-origin><code>allow-same-origin</code></dfn>
   21372    keyword set</dt>
   21373 
   21374    <dd>
   21375 
   21376     <p>This flag <a href=#sandboxOrigin>forces content into a unique
   21377     origin</a>, thus preventing it from accessing other content from
   21378     the same <a href=#origin>origin</a>.</p>
   21379 
   21380     <p>This flag also <a href=#sandboxCookies>prevents script from
   21381     reading from or writing to the <code title=dom-document-cookie>document.cookie</code> IDL
   21382     attribute</a>, and blocks access to <code title=dom-localStorage>localStorage</code> and <code title=dom-opendatabase>openDatabase()</code>.
   21383     
   21384     <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
   21385     
   21386     <a href=#refsWEBSQL>[WEBSQL]</a>
   21387     </p>
   21388 
   21389     <div class=note>
   21390 
   21391      <p>The <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21392      attribute is intended for two cases.</p>
   21393 
   21394      <p>First, it can be used to allow content from the same site to
   21395      be sandboxed to disable scripting, while still allowing access to
   21396      the DOM of the sandboxed content.</p>
   21397 
   21398      <p>Second, it can be used to embed content from a third-party
   21399      site, sandboxed to prevent that site from opening popup windows,
   21400      etc, without preventing the embedded page from communicating back
   21401      to its originating site, using the database APIs to store data,
   21402      etc.</p>
   21403 
   21404     </div>
   21405 
   21406    </dd>
   21407 
   21408 
   21409    <dt>The <dfn id=sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</dfn>, unless
   21410    the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   21411    value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   21412    spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-forms title=attr-iframe-sandbox-allow-forms><code>allow-forms</code></dfn>
   21413    keyword set</dt>
   21414 
   21415    <dd>
   21416 
   21417     <p>This flag <a href=#sandboxSubmitBlocked>blocks form
   21418     submission</a>.</p>
   21419 
   21420    </dd>
   21421 
   21422 
   21423    <dt>The <dfn id=sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</dfn>, unless
   21424    the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's
   21425    value, when <a href=#split-a-string-on-spaces title="split a string on spaces">split on
   21426    spaces</a>, is found to have the <dfn id=attr-iframe-sandbox-allow-scripts title=attr-iframe-sandbox-allow-scripts><code>allow-scripts</code></dfn>
   21427    keyword set</dt>
   21428 
   21429    <dd>
   21430 
   21431     <p>This flag <a href=#sandboxScriptBlocked>blocks script
   21432     execution</a>.</p>
   21433 
   21434    </dd>
   21435 
   21436 
   21437    <dt>The <dfn id=sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context
   21438    flag</dfn>, unless the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute's value, when
   21439    <a href=#split-a-string-on-spaces title="split a string on spaces">split on spaces</a>, is
   21440    found to have the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   21441    keyword (defined above) set</dt>
   21442 
   21443    <dd>
   21444 
   21445     <p>This flag blocks features that trigger automatically, such as
   21446     <a href=#attr-media-autoplay title=attr-media-autoplay>automatically playing a
   21447     video</a> or <a href=#attr-fe-autofocus title=attr-fe-autofocus>automatically
   21448     focusing a form control</a>. It is relaxed by the same flag as
   21449     scripts, because when scripts are enabled these features are
   21450     trivially possible anyway, and it would be unfortunate to force
   21451     authors to use script to do them when sandboxed rather than
   21452     allowing them to use the declarative features.</p>
   21453 
   21454    </dd>
   21455 
   21456   </dl><p>These flags must not be set unless the conditions listed above
   21457   define them as being set.</p>
   21458 
   21459   <p class=warning>These flags only take effect when the
   21460   <a href=#nested-browsing-context>nested browsing context</a> of the <code><a href=#the-iframe-element>iframe</a></code> is
   21461   <a href=#navigate title=navigate>navigated</a>. Removing then, or removing
   21462   the entire <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>
   21463   attribute, has no effect on an already-loaded page.</p>
   21464 
   21465   </div>
   21466 
   21467   <div class=example>
   21468 
   21469    <p>In this example, some completely-unknown, potentially hostile,
   21470    user-provided HTML content is embedded in a page. Because it is
   21471    sandboxed, it is treated by the user agent as being from a unique
   21472    origin, despite the content being served from the same site. Thus
   21473    it is affected by all the normal cross-site restrictions. In
   21474    addition, the embedded page has scripting disabled, plugins
   21475    disabled, forms disabled, and it cannot navigate any frames or
   21476    windows other than itself (or any frames or windows it itself
   21477    embeds).</p>
   21478 
   21479    <pre>&lt;p&gt;We're not scared of you! Here is your content, unedited:&lt;/p&gt;
   21480 &lt;iframe sandbox src="getusercontent.cgi?id=12193"&gt;&lt;/iframe&gt;</pre>
   21481 
   21482    <p>Note that cookies are still sent to the server in the <code title="">getusercontent.cgi</code> request, though they are not
   21483    visible in the <code title=dom-document-cookie><a href=#dom-document-cookie>document.cookie</a></code> IDL
   21484    attribute.</p>
   21485 
   21486    <p class=warning>It is important that the server serve the
   21487    user-provided HTML using the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME
   21488    type so that if the attacker convinces the user to visit that page
   21489    directly, the page doesn't run in the context of the site's origin,
   21490    which would make the user vulnerable to any attack found in the
   21491    page.</p>
   21492 
   21493   </div>
   21494 
   21495   <div class=example>
   21496 
   21497    <p>In this example, a gadget from another site is embedded. The
   21498    gadget has scripting and forms enabled, and the origin sandbox
   21499    restrictions are lifted, allowing the gadget to communicate with
   21500    its originating server. The sandbox is still useful, however, as it
   21501    disables plugins and popups, thus reducing the risk of the user
   21502    being exposed to malware and other annoyances.</p>
   21503 
   21504    <pre>&lt;iframe sandbox="allow-same-origin allow-forms allow-scripts"
   21505         src="http://maps.example.com/embedded.html"&gt;&lt;/iframe&gt;</pre>
   21506 
   21507   </div>
   21508 
   21509   <div class=example>
   21510 
   21511    <p>Suppose a file A contained the following fragment:</p>
   21512 
   21513    <pre>&lt;iframe sandbox="allow-same-origin allow-forms" src=B&gt;&lt;/iframe&gt;</pre>
   21514 
   21515    <p>Suppose that file B contained an iframe also:</p>
   21516 
   21517    <pre>&lt;iframe sandbox="allow-scripts" src=C&gt;&lt;/iframe&gt;</pre>
   21518 
   21519    <p>Further, suppose that file C contained a link:</p>
   21520 
   21521    <pre>&lt;a href=D&gt;Link&lt;/a&gt;</pre>
   21522 
   21523    <p>For this example, suppose all the files were served as
   21524    <code><a href=#text/html>text/html</a></code>.</p>
   21525 
   21526    <p>Page C in this scenario has all the sandboxing flags
   21527    set. Scripts are disabled, because the <code><a href=#the-iframe-element>iframe</a></code> in A has
   21528    scripts disabled, and this overrides the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   21529    keyword set on the <code><a href=#the-iframe-element>iframe</a></code> in B. Forms are also
   21530    disabled, because the inner <code><a href=#the-iframe-element>iframe</a></code> (in B) does not
   21531    have the <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keyword
   21532    set.</p>
   21533 
   21534    <p>Suppose now that a script in A removes all the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attributes in A and
   21535    B. This would change nothing immediately. If the user clicked the
   21536    link in C, loading page D into the <code><a href=#the-iframe-element>iframe</a></code> in B, page D
   21537    would now act as if the <code><a href=#the-iframe-element>iframe</a></code> in B had the <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21538    and <code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keywords
   21539    set, because that was the state of the <a href=#nested-browsing-context>nested browsing
   21540    context</a> in the <code><a href=#the-iframe-element>iframe</a></code> in A when page B was
   21541    loaded.</p>
   21542 
   21543    <p>Generally speaking, dynamically removing or changing the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute is
   21544    ill-advised, because it can make it quite hard to reason about what
   21545    will be allowed and what will not.</p>
   21546 
   21547   </div>
   21548 
   21549   <p class=note>Potentially hostile files can be served from the
   21550   same server as the file containing the <code><a href=#the-iframe-element>iframe</a></code> element
   21551   by labeling them as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> instead of
   21552   <code><a href=#text/html>text/html</a></code>. This ensures that scripts in the files are
   21553   unable to attack the site (as if they were actually served from
   21554   another server), even if the user is tricked into visiting those
   21555   pages directly, without the protection of the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute.</p>
   21556 
   21557   <p class=warning>If the <code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>
   21558   keyword is set along with <code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>
   21559   keyword, and the file is from the <a href=#same-origin>same origin</a> as the
   21560   <code><a href=#the-iframe-element>iframe</a></code>'s <code><a href=#document>Document</a></code>, then a script in the
   21561   "sandboxed" iframe could just reach out, remove the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, and then
   21562   reload itself, effectively breaking out of the sandbox
   21563   altogether.</p>
   21564 
   21565 
   21566   <hr><!-- v2: Might be interesting to have a value on seamless that
   21567   allowed event propagation of some sort, maybe based on the WICD
   21568   work: http://www.w3.org/TR/WICD/ --><p>The <dfn id=attr-iframe-seamless title=attr-iframe-seamless><code>seamless</code></dfn>
   21569   attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, it
   21570   indicates that the <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#browsing-context>browsing
   21571   context</a> is to be rendered in a manner that makes it appear to
   21572   be part of the containing document (seamlessly included in the
   21573   parent document). <span class=impl>Specifically, when the
   21574   attribute is set on an <code><a href=#the-iframe-element>iframe</a></code> element whose owner
   21575   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> did not have
   21576   the <a href=#sandboxed-seamless-iframes-flag>sandboxed seamless iframes flag</a> set when that
   21577   <code><a href=#document>Document</a></code> was created, and while either the
   21578   <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active document</a> has the
   21579   <a href=#same-origin>same origin</a> as the <code><a href=#the-iframe-element>iframe</a></code> element's
   21580   document, or the <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active
   21581   document</a>'s <em><a href="#the-document's-address" title="the document's
   21582   address">address</a></em> has the <a href=#same-origin>same origin</a> as the
   21583   <code><a href=#the-iframe-element>iframe</a></code> element's document, the following requirements
   21584   apply:</span></p>
   21585 
   21586   <div class=impl>
   21587 
   21588   <ul><li><p>The user agent must set the <dfn id=seamless-browsing-context-flag>seamless browsing
   21589    context flag</dfn> to true for that <a href=#browsing-context>browsing
   21590    context</a>. This will <a href=#seamlessLinks>cause links to
   21591    open in the parent browsing context</a>.</li>
   21592 
   21593    <li><p>In a CSS-supporting user agent: the user agent must add all
   21594    the style sheets that apply to the <code><a href=#the-iframe-element>iframe</a></code> element to
   21595    the cascade of the <a href=#active-document>active document</a> of the
   21596    <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#nested-browsing-context>nested browsing context</a>,
   21597    at the appropriate cascade levels, before any style sheets
   21598    specified by the document itself.</li>
   21599 
   21600    <li><p>In a CSS-supporting user agent: the user agent must, for the
   21601    purpose of CSS property inheritance only, treat the root element of
   21602    the <a href=#active-document>active document</a> of the <code><a href=#the-iframe-element>iframe</a></code>
   21603    element's <a href=#nested-browsing-context>nested browsing context</a> as being a child of
   21604    the <code><a href=#the-iframe-element>iframe</a></code> element. (Thus inherited properties on the
   21605    root element of the document in the <code><a href=#the-iframe-element>iframe</a></code> will
   21606    inherit the computed values of those properties on the
   21607    <code><a href=#the-iframe-element>iframe</a></code> element instead of taking their initial
   21608    values.)</li>
   21609 
   21610    <li><p>In visual media, in a CSS-supporting user agent: the user agent
   21611    should set the intrinsic width of the <code><a href=#the-iframe-element>iframe</a></code> to the
   21612    width that the element would have if it was a non-replaced
   21613    block-level element with 'width: auto'.</li>
   21614 
   21615    <li><p>In visual media, in a CSS-supporting user agent: the user
   21616    agent should set the intrinsic height of the <code><a href=#the-iframe-element>iframe</a></code> to
   21617    the height of the bounding box around the content rendered in the
   21618    <code><a href=#the-iframe-element>iframe</a></code> at its current width (as given in the previous
   21619    bullet point), as it would be if the scrolling position was such
   21620    that the top of the viewport for the content rendered in the
   21621    <code><a href=#the-iframe-element>iframe</a></code> was aligned with the origin of that content's
   21622    canvas.</li>
   21623 
   21624    <li>
   21625 
   21626     <p>In visual media, in a CSS-supporting user agent: the user agent
   21627     must force the height of the initial containing block of the
   21628     <a href=#active-document>active document</a> of the <a href=#nested-browsing-context>nested browsing
   21629     context</a> of the <code><a href=#the-iframe-element>iframe</a></code> to zero.</p>
   21630 
   21631     <p class=note>This is intended to get around the otherwise
   21632     circular dependency of percentage dimensions that depend on the
   21633     height of the containing block, thus affecting the height of the
   21634     document's bounding box, thus affecting the height of the
   21635     viewport, thus affecting the size of the initial containing
   21636     block.</p>
   21637 
   21638    </li>
   21639 
   21640    <li><p>In speech media, the user agent should render the <a href=#nested-browsing-context>nested
   21641    browsing context</a> without announcing that it is a separate
   21642    document.</li>
   21643 
   21644    <li>
   21645 
   21646     <p>User agents should, in general, act as if the <a href=#active-document>active
   21647     document</a> of the <code><a href=#the-iframe-element>iframe</a></code>'s <a href=#nested-browsing-context>nested browsing
   21648     context</a> was part of the document that the
   21649     <code><a href=#the-iframe-element>iframe</a></code> is in.</p>
   21650 
   21651     <p class=example>For example if the user agent supports listing
   21652     all the links in a document, links in "seamlessly" nested
   21653     documents would be included in that list without being
   21654     significantly distinguished from links in the document itself.</p>
   21655 
   21656    </li>
   21657 
   21658   </ul><p>If the attribute is not specified, or if the <a href=#origin>origin</a>
   21659   conditions listed above are not met, then the user agent should
   21660   render the <a href=#nested-browsing-context>nested browsing context</a> in a manner that is
   21661   clearly distinguishable as a separate <a href=#browsing-context>browsing context</a>,
   21662   and the <a href=#seamless-browsing-context-flag>seamless browsing context flag</a> must be set to
   21663   false for that <a href=#browsing-context>browsing context</a>.</p>
   21664 
   21665   <p class=warning>It is important that user agents recheck the
   21666   above conditions whenever the <a href=#active-document>active document</a> of the
   21667   <a href=#nested-browsing-context>nested browsing context</a> of the <code><a href=#the-iframe-element>iframe</a></code>
   21668   changes, such that the <a href=#seamless-browsing-context-flag>seamless browsing context flag</a>
   21669   gets unset if the <a href=#nested-browsing-context>nested browsing context</a> is <a href=#navigate title=navigate>navigated</a> to another origin.</p>
   21670 
   21671   </div>
   21672 
   21673   <p class=note>The attribute can be set or removed dynamically,
   21674   with the rendering updating in tandem.</p>
   21675 
   21676   <div class=example>
   21677 
   21678    <p>In this example, the site's navigation is embedded using a
   21679    client-side include using an <code><a href=#the-iframe-element>iframe</a></code>. Any links in the
   21680    <code><a href=#the-iframe-element>iframe</a></code> will, in new user agents, be automatically
   21681    opened in the <code><a href=#the-iframe-element>iframe</a></code>'s parent browsing context; for
   21682    legacy user agents, the site could also include a <code><a href=#the-base-element>base</a></code>
   21683    element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code>
   21684    attribute with the value <code title="">_parent</code>. Similarly,
   21685    in new user agents the styles of the parent page will be
   21686    automatically applied to the contents of the frame, but to support
   21687    legacy user agents authors might wish to include the styles
   21688    explicitly.</p>
   21689 
   21690    <pre>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</pre>
   21691 
   21692   </div>
   21693 
   21694 
   21695   <hr><p>The <code><a href=#the-iframe-element>iframe</a></code> element supports <a href=#dimension-attributes>dimension
   21696   attributes</a> for cases where the embedded content has specific
   21697   dimensions (e.g. ad units have well-defined dimensions).</p>
   21698 
   21699   <p>An <code><a href=#the-iframe-element>iframe</a></code> element never has <a href=#fallback-content>fallback
   21700   content</a>, as it will always create a nested <a href=#browsing-context>browsing
   21701   context</a>, regardless of whether the specified initial contents
   21702   are successfully used.</p>
   21703 
   21704   <p>Descendants of <code><a href=#the-iframe-element>iframe</a></code> elements represent
   21705   nothing. (In legacy user agents that do not support
   21706   <code><a href=#the-iframe-element>iframe</a></code> elements, the contents would be parsed as markup
   21707   that could act as fallback content.)</p>
   21708 
   21709   <p>When used in <a href=#html-documents>HTML documents</a>, the allowed content
   21710   model of <code><a href=#the-iframe-element>iframe</a></code> elements is text, except that invoking
   21711   the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a> with the
   21712   <code><a href=#the-iframe-element>iframe</a></code> element as the <var title="">context</var>
   21713   element and the text contents as the <var title="">input</var> must
   21714   result in a list of nodes that are all <a href=#phrasing-content>phrasing
   21715   content</a>, with no <a href=#parse-error title="parse error">parse
   21716   errors</a> having occurred, with no <code><a href=#script>script</a></code> elements
   21717   being anywhere in the list or as descendants of elements in the
   21718   list, and with all the elements in the list (including their
   21719   descendants) being themselves conforming.</p>
   21720 
   21721   <p>The <code><a href=#the-iframe-element>iframe</a></code> element must be empty in <a href=#xml-documents>XML
   21722   documents</a>.</p>
   21723 
   21724   <p class=note>The <a href=#html-parser>HTML parser</a> treats markup inside
   21725   <code><a href=#the-iframe-element>iframe</a></code> elements as text.</p>
   21726 
   21727   <div class=impl>
   21728 
   21729   <p>The IDL attributes <dfn id=dom-iframe-src title=dom-iframe-src><code>src</code></dfn>, <dfn id=dom-iframe-srcdoc title=dom-iframe-srcdoc><code>srcdoc</code></dfn>, <dfn id=dom-iframe-name title=dom-iframe-name><code>name</code></dfn>, <dfn id=dom-iframe-sandbox title=dom-iframe-sandbox><code>sandbox</code></dfn>, and <dfn id=dom-iframe-seamless title=dom-iframe-seamless><code>seamless</code></dfn> must
   21730   <a href=#reflect>reflect</a> the respective content attributes of the same
   21731   name.</p>
   21732 
   21733   <p>The <dfn id=dom-iframe-contentdocument title=dom-iframe-contentDocument><code>contentDocument</code></dfn>
   21734   IDL attribute must return the <code><a href=#document>Document</a></code> object of the
   21735   <a href=#active-document>active document</a> of the <code><a href=#the-iframe-element>iframe</a></code> element's
   21736   <a href=#nested-browsing-context>nested browsing context</a>.</p>
   21737 
   21738   <p>The <dfn id=dom-iframe-contentwindow title=dom-iframe-contentWindow><code>contentWindow</code></dfn>
   21739   IDL attribute must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
   21740   <code><a href=#the-iframe-element>iframe</a></code> element's <a href=#nested-browsing-context>nested browsing
   21741   context</a>.</p>
   21742 
   21743   </div>
   21744 
   21745   <div class=example>
   21746 
   21747    <p>Here is an example of a page using an <code><a href=#the-iframe-element>iframe</a></code> to
   21748    include advertising from an advertising broker:</p>
   21749 
   21750    <pre>&lt;iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
   21751         width="468" height="60"&gt;&lt;/iframe&gt;</pre>
   21752 
   21753   </div>
   21754 
   21755 
   21756 
   21757 
   21758   <h4 id=the-embed-element><span class=secno>4.8.3 </span>The <dfn><code>embed</code></dfn> element</h4>
   21759 
   21760 <!-- (v2?)
   21761  we have all kinds of quirks we should define if they come up during
   21762  testing, as e.g. shown in:
   21763  http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsObjectFrame.cpp
   21764  http://trac.webkit.org/browser/trunk/WebCore/html/HTMLEmbedElement.cpp
   21765  http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderPartObject.cpp (updateWidget)
   21766  e.g. - 240x200 default
   21767       - the attributes/params are sent in a name/value pair list as follows (for Gecko):
   21768          + attributes of the element, in source order
   21769          + a synthesised 'src' attribute, if there was no 'src' but
   21770            there was a 'data', with the value of the 'data' attribute
   21771          + the params, in source order
   21772         (WebKit does something different still)
   21773       - the HIDDEN attribute (might be moot now)
   21774 -->
   21775 
   21776   <dl class=element><dt>Categories</dt>
   21777    <dd><a href=#flow-content>Flow content</a>.</dd>
   21778    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   21779    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   21780    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   21781    <dt>Contexts in which this element may be used:</dt>
   21782    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   21783    <dt>Content model:</dt>
   21784    <dd>Empty.</dd>
   21785    <dt>Content attributes:</dt>
   21786    <dd><a href=#global-attributes>Global attributes</a></dd>
   21787    <dd><code title=attr-embed-src><a href=#attr-embed-src>src</a></code></dd>
   21788    <dd><code title=attr-embed-type><a href=#attr-embed-type>type</a></code></dd>
   21789    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   21790    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   21791    <dd>Any other attribute that has no namespace (see prose).</dd>
   21792    <dt>DOM interface:</dt>
   21793    <dd>
   21794 <pre class=idl>interface <dfn id=htmlembedelement>HTMLEmbedElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   21795            attribute DOMString <a href=#dom-embed-src title=dom-embed-src>src</a>;
   21796            attribute DOMString <a href=#dom-embed-type title=dom-embed-type>type</a>;
   21797            attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
   21798            attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
   21799 };</pre>
   21800     <div class=impl>
   21801     <p>Depending on the type of content instantiated by the
   21802     <code><a href=#the-embed-element>embed</a></code> element, the node may also support other
   21803     interfaces.</p>
   21804     </div>
   21805    </dd>
   21806   </dl><p>The <code><a href=#the-embed-element>embed</a></code> element <a href=#represents>represents</a> an
   21807   integration point for an external (typically non-HTML) application
   21808   or interactive content.</p>
   21809 
   21810   <p>The <dfn id=attr-embed-src title=attr-embed-src><code>src</code></dfn> attribute
   21811   gives the address of the resource being embedded. The attribute, if
   21812   present, must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
   21813   surrounded by spaces</a>.</p>
   21814 
   21815   <p>The <dfn id=attr-embed-type title=attr-embed-type><code>type</code></dfn>
   21816   attribute, if present, gives the <a href=#mime-type>MIME type</a> by which the
   21817   plugin to instantiate is selected. The value must be a <a href=#valid-mime-type>valid
   21818   MIME type</a>. If both the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute and the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute are present, then the
   21819   <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute must specify the
   21820   same type as the <a href=#content-type title=Content-Type>explicit Content-Type
   21821   metadata</a> of the resource given by the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute.</p>
   21822 
   21823   <div class=impl>
   21824 
   21825   <p>When the element is created with neither a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute nor a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute, and when attributes
   21826   are removed such that neither attribute is present on the element
   21827   anymore, and when the element has a <a href=#media-element>media element</a>
   21828   ancestor, and when the element has an ancestor <code><a href=#the-object-element>object</a></code>
   21829   element that is <em>not</em> showing its <a href=#fallback-content>fallback
   21830   content</a>, any plugins instantiated for the element must be
   21831   removed, and the <code><a href=#the-embed-element>embed</a></code> element represents nothing.</p>
   21832 
   21833   <p id=sandboxPluginEmbed>If either:
   21834 
   21835   <ul><li>the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> was
   21836    set on the <a href=#browsing-context>browsing context</a> for which the
   21837    <code><a href=#the-embed-element>embed</a></code> element's <code><a href=#document>Document</a></code> is the
   21838    <a href=#active-document>active document</a> when that <code><a href=#document>Document</a></code> was
   21839    created, or</li>
   21840 
   21841    <li>the <code><a href=#the-embed-element>embed</a></code> element's <code><a href=#document>Document</a></code> was
   21842    parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type
   21843    sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is
   21844    <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></li>
   21845 
   21846   </ul><p>...then the user agent must render the <code><a href=#the-embed-element>embed</a></code> element
   21847   in a manner that conveys that the <a href=#plugin>plugin</a> was
   21848   disabled. The user agent may offer the user the option to override
   21849   the sandbox and instantiate the <a href=#plugin>plugin</a> anyway; if the
   21850   user invokes such an option, the user agent must act as if the
   21851   conditions above did not apply for the purposes of this element.</p>
   21852 
   21853   <p class=warning>Plugins are disabled in sandboxed browsing
   21854   contexts because they might not honor the restrictions imposed by
   21855   the sandbox (e.g. they might allow scripting even when scripting in
   21856   the sandbox is disabled). User agents should convey the danger of
   21857   overriding the sandbox to the user if an option to do so is
   21858   provided.</p>
   21859 
   21860   <p>An <code><a href=#the-embed-element>embed</a></code> element is said to be <dfn id=concept-embed-active title=concept-embed-active>potentially active</dfn> when the
   21861   following conditions are all met simultaneously:</p>
   21862 
   21863   <ul class=brief><li>The element is <a href=#in-a-document title="in a document">in a <code>Document</code></a>.</li>
   21864    <li>The element's <code><a href=#document>Document</a></code> is <a href=#fully-active>fully active</a>.</li>
   21865    <li>The element has either a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute set or a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute set (or both).</li>
   21866    <li>The element's <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute is either absent or its value is the empty string.</li>
   21867    <li>The element is not in a <code><a href=#document>Document</a></code> whose <a href=#browsing-context>browsing context</a> had the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> set when the <code><a href=#document>Document</a></code> was created (unless this has been overridden as described above).</li>
   21868    <li>The element's <code><a href=#document>Document</a></code> was not parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> (unless this has been overridden as described above).</li>
   21869    <li>The element is not a descendant of a <a href=#media-element>media element</a>.</li>
   21870    <li>The element is not a descendant of an <code><a href=#the-object-element>object</a></code> element that is not showing its <a href=#fallback-content>fallback content</a>.</li>
   21871   </ul><p>Whenever an <code><a href=#the-embed-element>embed</a></code> element that was not <a href=#concept-embed-active title=concept-embed-active>potentially active</a> becomes <a href=#concept-embed-active title=concept-embed-active>potentially active</a>, and whenever
   21872   a <a href=#concept-embed-active title=concept-embed-active>potentially active</a>
   21873   <code><a href=#the-embed-element>embed</a></code> element's <code title=attr-embed-type><a href=#attr-embed-type>src</a></code> attribute is set, changed, or
   21874   removed, and whenever a <a href=#concept-embed-active title=concept-embed-active>potentially active</a>
   21875   <code><a href=#the-embed-element>embed</a></code> element's <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute is set, changed, or
   21876   removed, the appropriate set of steps from the following is then
   21877   applied:</p>
   21878 
   21879   <dl class=switch><dt>If the element has a <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
   21880    attribute set</dt>
   21881 
   21882    <dd>
   21883 
   21884     <p>The user agent must <a href=#resolve-a-url title="resolve a url">resolve</a>
   21885     the value of the element's <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
   21886     attribute, relative to the element. If that is successful, the
   21887     user agent should <a href=#fetch>fetch</a> the resulting <a href=#absolute-url>absolute
   21888     URL</a>, from the element's <a href=#browsing-context-scope-origin>browsing context scope
   21889     origin</a> if it has one<!-- potentially http-origin privacy
   21890     sensitive -->. The <a href=#concept-task title=concept-task>task</a> that is
   21891     <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking
   21892     task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> must find and instantiate an
   21893     appropriate <a href=#plugin>plugin</a> based on the <a href=#concept-embed-type title=concept-embed-type>content's type</a>, and hand that
   21894     <a href=#plugin>plugin</a> the content of the resource, replacing any
   21895     previously instantiated plugin for the element.</p> <!-- Note that
   21896     this doesn't happen when the base URL changes. -->
   21897 
   21898     <p>Fetching the resource must <a href=#delay-the-load-event>delay the load event</a> of
   21899     the element's document.</p>
   21900     <!-- if we add load/error events, then replace the previous
   21901     paragraph with the text one: -->
   21902     <!-- similar text in various places -->
   21903     <!--<p>Fetching the resource must <span>delay the load
   21904     event</span> of the element's document until the final <span
   21905     title="concept-task">task</span> that is <span title="queue a
   21906     task">queued</span> by the <span>networking task source</span>
   21907     once the resource has been <span title="fetch">fetched</span> has
   21908     been run.</p>-->
   21909 
   21910    </dd>
   21911 
   21912    <dt>If the element has no <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>
   21913    attribute set</dt>
   21914 
   21915    <dd><p>The user agent should find and instantiate an appropriate
   21916    <a href=#plugin>plugin</a> based on the value of the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute.</p>
   21917 
   21918   </dl><p>Whenever an <code><a href=#the-embed-element>embed</a></code> element that was <a href=#concept-embed-active title=concept-embed-active>potentially active</a> stops being
   21919   <a href=#concept-embed-active title=concept-embed-active>potentially active</a>, any
   21920   <a href=#plugin>plugin</a> that had been instantiated for that element must
   21921   be unloaded.</p>
   21922 
   21923   <p class=note>The <code><a href=#the-embed-element>embed</a></code> element is unaffected by the
   21924   CSS 'display' property. The selected plugin is instantiated even if
   21925   the element is hidden with a 'display:none' CSS style.</p>
   21926 
   21927   <p>The <dfn id=concept-embed-type title=concept-embed-type>type of the content</dfn>
   21928   being embedded is defined as follows:</p>
   21929 
   21930   <ol><li><p>If the element has a <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute, and that attribute's
   21931    value is a type that a <a href=#plugin>plugin</a> supports, then the value
   21932    of the <code title=attr-embed-type><a href=#attr-embed-type>type</a></code> attribute is the
   21933    <a href=#concept-embed-type title=concept-embed-type>content's type</a>.</li>
   21934 
   21935    <li>
   21936 
   21937     <!-- if we get to this point we know we can successfully parsed
   21938     the URL, since this algorithm is only used after fetching the
   21939     resource in the steps above -->
   21940 
   21941     <p>Otherwise, if the <a href=#url-path title=url-path>&lt;path&gt;</a>
   21942     component of the <a href=#url>URL</a> of the specified resource (after
   21943     any redirects) matches a pattern that a <a href=#plugin>plugin</a>
   21944     supports, then the <a href=#concept-embed-type title=concept-embed-type>content's
   21945     type</a> is the type that that plugin can handle.</p>
   21946 
   21947     <p class=example>For example, a plugin might say that it can
   21948     handle resources with <a href=#url-path title=url-path>&lt;path&gt;</a>
   21949     components that end with the four character string "<code title="">.swf</code>".</p>
   21950 
   21951     <!-- it's sad that we have to do extension sniffing. sigh. -->
   21952     <!-- see also <object> which has a similar step -->
   21953 
   21954    </li>
   21955 
   21956    <li><p>Otherwise, if the specified resource has <a href=#content-type title=Content-Type>explicit Content-Type metadata</a>, then
   21957    that is the <a href=#concept-embed-type title=concept-embed-type>content's
   21958    type</a>.</li>
   21959 
   21960    <li><p>Otherwise, the content has no type and there can be no
   21961    appropriate <a href=#plugin>plugin</a> for it.</li>
   21962 
   21963    <!-- This algorithm is a monument to bad design. Go legacy! -->
   21964 
   21965   </ol><p>The <code><a href=#the-embed-element>embed</a></code> element has no <a href=#fallback-content>fallback
   21966   content</a>. If the user agent can't find a suitable plugin, then
   21967   the user agent must use a default plugin. (This default could be as
   21968   simple as saying "Unsupported Format".)</p>
   21969 
   21970   <p>Whether the resource is fetched successfully or not (e.g. whether
   21971   the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
   21972   ignored when determining the resource's type and when handing the
   21973   resource to the plugin.</p>
   21974 
   21975   <p class=note>This allows servers to return data for plugins even
   21976   with error responses (e.g. HTTP 500 Internal Server Error codes can
   21977   still contain plugin data).</p>
   21978 
   21979   </div>
   21980 
   21981   <p>Any namespace-less attribute other than <code title=attr-embed-name><a href=#attr-embed-name>name</a></code>, <code title=attr-embed-align><a href=#attr-embed-align>align</a></code>, <code title=attr-embed-hspace><a href=#attr-embed-hspace>hspace</a></code>, and <code title=attr-embed-vspace><a href=#attr-embed-vspace>vspace</a></code> <!-- when editing, see also
   21982   note below --> may be specified on the <code><a href=#the-embed-element>embed</a></code> element,
   21983   so long as its name is <a href=#xml-compatible>XML-compatible</a> and contains no
   21984   characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to
   21985   LATIN CAPITAL LETTER Z). These attributes are then passed as
   21986   parameters to the <a href=#plugin>plugin</a>.</p>
   21987 
   21988   <p class=note>All attributes in <a href=#html-documents>HTML documents</a> get
   21989   lowercased automatically, so the restriction on uppercase letters
   21990   doesn't affect such documents.</p>
   21991 
   21992   <p class=note>The four exceptions are to exclude legacy attributes
   21993   that have side-effects beyond just sending parameters to the
   21994   <a href=#plugin>plugin</a>.</p>
   21995 
   21996   <div class=impl>
   21997 
   21998   <p>The user agent should pass the names and values of all the
   21999   attributes of the <code><a href=#the-embed-element>embed</a></code> element that have no namespace
   22000   to the <a href=#plugin>plugin</a> used, when it is instantiated.</p>
   22001 
   22002   <p>If the <a href=#plugin>plugin</a> instantiated for the
   22003   <code><a href=#the-embed-element>embed</a></code> element supports a scriptable interface, the
   22004   <code><a href=#htmlembedelement>HTMLEmbedElement</a></code> object representing the element should
   22005   expose that interface while the element is instantiated.</p>
   22006 
   22007   </div>
   22008 
   22009   <p>The <code><a href=#the-embed-element>embed</a></code> element supports <a href=#dimension-attributes>dimension
   22010   attributes</a>.</p>
   22011 
   22012   <div class=impl>
   22013 
   22014   <p>The IDL attributes <dfn id=dom-embed-src title=dom-embed-src><code>src</code></dfn> and <dfn id=dom-embed-type title=dom-embed-type><code>type</code></dfn> each must
   22015   <a href=#reflect>reflect</a> the respective content attributes of the same
   22016   name.</p>
   22017 
   22018   </div>
   22019 
   22020   <div class=example>
   22021 
   22022    <p>Here's a way to embed a resource that requires a proprietary
   22023    plug-in, like Flash:</p>
   22024 
   22025    <pre>&lt;embed src="catgame.swf"&gt;</pre>
   22026 
   22027    <p>If the user does not have the plug-in (for example if the
   22028    plug-in vendor doesn't support the user's platform), then the user
   22029    will be unable to use the resource.</p>
   22030 
   22031    <p>To pass the plugin a parameter "quality" with the value "high",
   22032    an attribute can be specified:</p>
   22033 
   22034    <pre>&lt;embed src="catgame.swf" quality="high"&gt;</pre>
   22035 
   22036    <p>This would be equivalent to the following, when using an
   22037    <code><a href=#the-object-element>object</a></code> element instead:</p>
   22038 
   22039    <pre>&lt;object data="catgame.swf"&gt;
   22040  &lt;param name="quality" value="high"&gt;
   22041 &lt;/object&gt;</pre>
   22042 
   22043   </div>
   22044 
   22045 
   22046 
   22047 
   22048   <h4 id=the-object-element><span class=secno>4.8.4 </span>The <dfn><code>object</code></dfn> element</h4>
   22049 
   22050   <dl class=element><dt>Categories</dt>
   22051    <dd><a href=#flow-content>Flow content</a>.</dd>
   22052    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   22053    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   22054    <dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd> <!-- also when showing a plugin or a nested browsing context, but checking that statically is hard...) -->
   22055    <dd><a href=#category-listed title=category-listed>Listed</a>,  <a href=#category-submit title=category-submit>submittable</a>, <a href=#form-associated-element>form-associated element</a>.</dd>
   22056    <dt>Contexts in which this element may be used:</dt>
   22057    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   22058    <dt>Content model:</dt>
   22059    <dd>Zero or more <code><a href=#the-param-element>param</a></code> elements, then, <a href=#transparent>transparent</a>.</dd>
   22060    <dt>Content attributes:</dt>
   22061    <dd><a href=#global-attributes>Global attributes</a></dd>
   22062    <dd><code title=attr-object-data><a href=#attr-object-data>data</a></code></dd>
   22063    <dd><code title=attr-object-type><a href=#attr-object-type>type</a></code></dd>
   22064    <dd><code title=attr-object-name><a href=#attr-object-name>name</a></code></dd>
   22065    <dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
   22066    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   22067    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   22068    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   22069    <dt>DOM interface:</dt>
   22070    <dd>
   22071 <pre class=idl>interface <dfn id=htmlobjectelement>HTMLObjectElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   22072            attribute DOMString <a href=#dom-object-data title=dom-object-data>data</a>;
   22073            attribute DOMString <a href=#dom-object-type title=dom-object-type>type</a>;
   22074            attribute DOMString <a href=#dom-object-name title=dom-object-name>name</a>;
   22075            attribute DOMString <a href=#dom-object-usemap title=dom-object-useMap>useMap</a>;
   22076   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   22077            attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
   22078            attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
   22079   readonly attribute Document <a href=#dom-object-contentdocument title=dom-object-contentDocument>contentDocument</a>;
   22080   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-object-contentwindow title=dom-object-contentWindow>contentWindow</a>;
   22081 
   22082   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   22083   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   22084   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   22085   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   22086   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   22087 };</pre>
   22088     <div class=impl>
   22089     <p>Depending on the type of content instantiated by the
   22090     <code><a href=#the-object-element>object</a></code> element, the node also supports other
   22091     interfaces.</p>
   22092     </div>
   22093    </dd>
   22094   </dl><p>The <code><a href=#the-object-element>object</a></code> element can represent an external
   22095   resource, which, depending on the type of the resource, will either
   22096   be treated as an image, as a <a href=#nested-browsing-context>nested browsing context</a>,
   22097   or as an external resource to be processed by a
   22098   <a href=#plugin>plugin</a>.</p>
   22099 
   22100   <p>The <dfn id=attr-object-data title=attr-object-data><code>data</code></dfn>
   22101   attribute, if present, specifies the address of the resource. If
   22102   present, the attribute must be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty
   22103   URL potentially surrounded by spaces</a>.</p>
   22104 
   22105   <p>The <dfn id=attr-object-type title=attr-object-type><code>type</code></dfn>
   22106   attribute, if present, specifies the type of the resource. If
   22107   present, the attribute must be a <a href=#valid-mime-type>valid MIME type</a>.</p>
   22108 
   22109   <p>At least one of either the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute or the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute must be present.</p>
   22110 
   22111   <p>The <dfn id=attr-object-name title=attr-object-name><code>name</code></dfn>
   22112   attribute, if present, must be a <a href=#valid-browsing-context-name>valid browsing context
   22113   name</a>. The given value is used to name the <a href=#nested-browsing-context>nested
   22114   browsing context</a>, if applicable.</p>
   22115 
   22116   <div class=impl>
   22117 
   22118   <p>When the element is created, when it is popped off the
   22119   <a href=#stack-of-open-elements>stack of open elements</a> of an <a href=#html-parser>HTML parser</a>
   22120   or <a href=#xml-parser>XML parser</a>, and subsequently whenever the element is
   22121   <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted into a
   22122   document</a> or <a href=#remove-an-element-from-a-document title="remove an element from a
   22123   document">removed from a document</a>; and whenever the element's
   22124   <code><a href=#document>Document</a></code> changes whether it is <a href=#fully-active>fully
   22125   active</a>; and whenever an ancestor <code><a href=#the-object-element>object</a></code> element
   22126   changes to or from showing its <a href=#fallback-content>fallback content</a>; and
   22127   whenever the element's <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute is set,
   22128   changed, or removed; and, when its <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute is not present,
   22129   whenever its <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute is
   22130   set, changed, or removed; and, when neither its <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute nor its <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute are present, whenever
   22131   its <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute is set,
   22132   changed, or removed: the user agent must <a href=#queue-a-task>queue a task</a>
   22133   to run the following steps to (re)determine what the
   22134   <code><a href=#the-object-element>object</a></code> element represents. The <a href=#task-source>task source</a>
   22135   for this <a href=#concept-task title=concept-task>task</a> is the <a href=#dom-manipulation-task-source>DOM
   22136   manipulation task source</a>.</p> <!-- Changing the base URL
   22137   doesn't trigger this. -->
   22138 
   22139   <ol><li>
   22140 
   22141     <p>If the user has indicated a preference that this
   22142     <code><a href=#the-object-element>object</a></code> element's <a href=#fallback-content>fallback content</a> be
   22143     shown instead of the element's usual behavior, then jump to the
   22144     last step in the overall set of steps (fallback).</p>
   22145 
   22146     <p class=note>For example, a user could ask for the element's
   22147     <a href=#fallback-content>fallback content</a> to be shown because that content
   22148     uses a format that the user finds more accessible.</p>
   22149 
   22150    </li>
   22151 
   22152    <li>
   22153 
   22154     <p>If the element has an ancestor <a href=#media-element>media element</a>, or
   22155     has an ancestor <code><a href=#the-object-element>object</a></code> element that is <em>not</em>
   22156     showing its <a href=#fallback-content>fallback content</a>, or if the element is
   22157     not <a href=#in-a-document title="in a document">in a <code>Document</code></a>
   22158     with a <a href=#browsing-context>browsing context</a>, or if the element's
   22159     <code><a href=#document>Document</a></code> is not <a href=#fully-active>fully active</a>, or if the
   22160     element is still in the <a href=#stack-of-open-elements>stack of open elements</a> of an
   22161     <a href=#html-parser>HTML parser</a> or <a href=#xml-parser>XML parser</a>, then jump to
   22162     the last step in the overall set of steps (fallback).</p>
   22163 
   22164    </li>
   22165 
   22166    <li>
   22167 
   22168     <!-- what if it's not in the document? if that should prevent
   22169     plugin instantiation, then here just skip to the last step -->
   22170 
   22171     <p>If the <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code>
   22172     attribute is present, and has a value that isn't the empty string,
   22173     then: if the user agent can find a <a href=#plugin>plugin</a> suitable
   22174     according to the value of the <code title=attr-object-classid><a href=#attr-object-classid>classid</a></code> attribute, and <a href=#sandboxPluginObject>plugins aren't being sandboxed</a>,
   22175     then that <a href=#plugin>plugin</a> <a href=#object-plugin>should be
   22176     used</a>, and the value of the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute, if any, should be
   22177     passed to the <a href=#plugin>plugin</a>. If no suitable
   22178     <a href=#plugin>plugin</a> can be found, or if the <a href=#plugin>plugin</a>
   22179     reports an error, jump to the last step in the overall set of
   22180     steps (fallback).</p>
   22181 
   22182     <!--
   22183      case insensitive:
   22184       is "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" -> application/x-shockwave-flash
   22185       is "clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" -> audio/x-pn-realaudio-plugin
   22186       is "clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" -> video/quicktime
   22187       is "clsid:166b1bca-3f9c-11cf-8075-444553540000" -> application/x-director
   22188       is "clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" -> application/x-mplayer2
   22189       starts with "java:"                             -> application/x-java-vm
   22190       starts with "clsid:"                            -> application/x-oleobject
   22191     -->
   22192 
   22193    </li>
   22194 
   22195    <!-- (v2?)
   22196    we may have to define magic fallback to <param> if it turns out to
   22197    be needed in testing:
   22198    <hyatt> apparently your url can come from <param>
   22199    <hyatt> not just the data attribute
   22200    <hyatt> our code looks for params with "src", "movie", "code" and "url"
   22201    <hyatt> and also tries to find the type on a param
   22202    <Hixie> oh that's you trying to have hacky activex support
   22203    <Hixie> opera does that too
   22204    <hyatt> yeah we support activex versions of plugins that are common
   22205    <hyatt> like flash and quicktime and realaudio
   22206    <Hixie> that would be a step 1b. if no data attribute, then look for a <param> to get you a URL instead.
   22207    <Hixie> and if you find one, carry on as if that was your data="".
   22208    -->
   22209 
   22210    <li><p>If the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute
   22211    is present and its value is not the empty string, then:</p>
   22212 
   22213     <ol><li><p>If the <code title=attr-object-type><a href=#attr-object-type>type</a></code>
   22214      attribute is present and its value is not a type that the user
   22215      agent supports, and is not a type that the user agent can find a
   22216      <a href=#plugin>plugin</a> for, then the user agent may jump to the last
   22217      step in the overall set of steps (fallback) without fetching the
   22218      content to examine its real type.</li>
   22219 
   22220      <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
   22221      <a href=#url>URL</a> specified by the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute, relative to the
   22222      element.</li>
   22223 
   22224      <li><p>If that failed, <a href=#fire-a-simple-event>fire a simple event</a> named
   22225      <code title=event-error>error</code> at the element, then jump
   22226      to the last step in the overall set of steps (fallback).</li>
   22227 
   22228      <li>
   22229 
   22230       <p><a href=#fetch>Fetch</a> the resulting <a href=#absolute-url>absolute URL</a>,
   22231       from the element's <a href=#browsing-context-scope-origin>browsing context scope origin</a> if
   22232       it has one<!-- potentially http-origin privacy sensitive
   22233       -->.</p>
   22234 
   22235       <!-- similar text in various places --> <p>Fetching the resource
   22236       must <a href=#delay-the-load-event>delay the load event</a> of the element's document
   22237       until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task
   22238       source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (defined next) has been run.</p>
   22239 
   22240      </li>
   22241 
   22242      <li><p>If the resource is not yet available (e.g. because the
   22243      resource was not available in the cache, so that loading the
   22244      resource required making a request over the network), then jump
   22245      to the last step in the overall set of steps (fallback). The
   22246      <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue
   22247      a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
   22248      once the resource is available must restart this algorithm from
   22249      this step. Resources can load incrementally; user agents may opt
   22250      to consider a resource "available" whenever enough data has been
   22251      obtained to begin processing the resource.</li>
   22252 
   22253      <li><p>If the load failed (e.g. there was an HTTP 404 error,
   22254      there was a DNS error), <a href=#fire-a-simple-event>fire a simple event</a> named
   22255      <code title=event-error>error</code> at the element, then jump
   22256      to the last step in the overall set of steps (fallback).</li>
   22257 
   22258      <li id=object-type-detection>
   22259 
   22260       <p>Determine the <var title="">resource type</var>, as follows:</p>
   22261 
   22262 <!-- Hopefully this step is exactly equivalent to the following:
   22263 
   22264  START
   22265    |
   22266    V
   22267  Is there a Content-Type and is the UA going to obey it blindly?
   22268    |                   |
   22269    | YES               | NO
   22270    |                   V                                                          YES
   22271    |                 Is there a type="" attribute whose value is a plugin type? ============================================-.
   22272    |                   |                                                                                                     |
   22273    |                   | NO                                                                                                  |
   22274    |                   V                        NO                                       YES                                 |
   22275    |                 Is there a Content type? ========-> Is there a type="" attribute? ==========> Let TYPE be type=""       |
   22276    |                   |                                                           |               attribute value           |
   22277    |                   | YES                                                       | NO                    |                 |
   22278    V            NO     V                                                           |                       V                 |
   22279    +-<============== Is it text/plain or application/octet-stream?                 `==> Let TYPE be  =====>+                 |
   22280    |                   |                                     |                          Sniffed type       |                 |
   22281    |                   | text/plain                          | octet-stream                                V                 |
   22282    |                   V                              YES    V                                          Is TYPE              |
   22283    |                 Does the page sniff as binary? ======> Is there a type="" attribute?       application/octet-stream?    |
   22284    |                   |                                     |              |                      |                |        |
   22285    |                   | NO                                  | YES          | NO                   | YES            | NO     |
   22286    |                   |                                     |       YES    V                      V                |        |
   22287    |                   |                  application/octet-stream? =====> Extension that is plugin type?           |        |
   22288    |                   |                                     |                          |          |                |        |
   22289    |                   |                                     | NO                       | NO       | YES            |        |
   22290    |                   |                                     V                          |          |                |        |
   22291    |                   |                           Type attribute is XML or     YES     V          |                |        |
   22292    |                   |                           doesn't start with image/* ======> FALLBACK     |                |        |
   22293    |                   |                           and is not a plugin type?                       |                |        |
   22294    |                   |                                          |                                |                |        |
   22295    |                   |                                          | NO                             |                |        V
   22296    V                   V                                          V                                V                V       Use
   22297   Use                 Use                                        Use it (will be                  Use              Use      type=""
   22298   Content-Type        text/plain                                 bitmap or plugin)                extension        TYPE     attribute
   22299    |                   |                                          |                                |                |        |
   22300    |                   V                                          V                                V                V        |
   22301    `================->-+========================================>-+==============>-+-<============-+-<==============+-<======'
   22302                                                                                    |
   22303                                                                                    V
   22304                                                                   Continue following rules in the spec, which might
   22305                                                                   result in a plugin, a browsing context, an image,
   22306                                                                   or using fallback, depending on the UA and the type.
   22307 
   22308 
   22309    "Extension that is plugin type?" means "Is there an extension that matches one that a plugin supports?".
   22310    Plugins are not allowed to register text/plain or application/octet-stream.
   22311 
   22312 -->
   22313 
   22314       <ol><li>
   22315 
   22316         <p>Let the <var title="">resource type</var> be unknown.</p>
   22317 
   22318        </li>
   22319 
   22320        <li>
   22321 
   22322         <!-- by request: http://www.w3.org/Bugs/Public/show_bug.cgi?id=8479 -->
   22323 
   22324         <p>If the user agent is configured to strictly obey
   22325         Content-Type headers for this resource, and the resource has
   22326         <a href=#content-type title=Content-Type>associated Content-Type
   22327         metadata</a>, then let the <var title="">resource
   22328         type</var> be the type specified in <a href=#content-type title=Content-Type>the resource's Content-Type
   22329         metadata</a>, and jump to the step below labeled
   22330         <i>handler</i>.</p>
   22331 
   22332        </li>
   22333 
   22334        <li>
   22335 
   22336         <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code>
   22337         attribute present on the <code><a href=#the-object-element>object</a></code> element, and that
   22338         attribute's value is not a type that the user agent supports,
   22339         but it <em>is</em> a type that a <a href=#plugin>plugin</a> supports,
   22340         then let the <var title="">resource type</var> be the type
   22341         specified in that <code title=attr-object-type><a href=#attr-object-type>type</a></code>
   22342         attribute, and jump to the step below labeled
   22343         <i>handler</i>.</p>
   22344 
   22345        </li>
   22346 
   22347        <li>
   22348 
   22349         <p>Run the approprate set of steps from the following
   22350         list:</p>
   22351 
   22352         <dl class=switch><dt>The resource has <a href=#content-type title=Content-Type>associated
   22353          Content-Type metadata</a></dt>
   22354 
   22355          <dd>
   22356 
   22357           <ol><li>
   22358 
   22359             <p>Let <var title="">binary</var> be false.</p>
   22360 
   22361            </li>
   22362 
   22363            <li>
   22364 
   22365             <p>If the type specified in <a href=#content-type title=Content-Type>the
   22366             resource's Content-Type metadata</a> is
   22367             "<code>text/plain</code>", and the result of applying the
   22368             <a href=#content-type-sniffing:-text-or-binary title="Content-Type sniffing: text or binary">rules
   22369             for distingushing if a resource is text or binary</a>
   22370             to the resource is that the resource is not
   22371             <code>text/plain</code>, then set <var title="">binary</var> to true.</p>
   22372 
   22373            </li>
   22374 
   22375            <li>
   22376 
   22377             <p>If the type specified in <a href=#content-type title=Content-Type>the
   22378             resource's Content-Type metadata</a> is
   22379             "<code>application/octet-stream</code>", then set <var title="">binary</var> to true.</p>
   22380 
   22381            </li>
   22382 
   22383            <li>
   22384 
   22385             <p>If <var title="">binary</var> is false, then let the
   22386             <var title="">resource type</var> be the type specified in
   22387             <a href=#content-type title=Content-Type>the resource's Content-Type
   22388             metadata</a>, and jump to the step below labeled
   22389             <i>handler</i>.</p>
   22390 
   22391            </li>
   22392 
   22393            <li>
   22394 
   22395             <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute present on
   22396             the <code><a href=#the-object-element>object</a></code> element, and its value is not
   22397             <code>application/octet-stream</code>, then run the
   22398             following steps:</p>
   22399 
   22400             <ol><li>
   22401 
   22402               <p>If the attribute's value is a type that a <a href=#plugin>plugin</a> supports, or
   22403               the attribute's value is a type that starts with "<code>image/</code>" that is not also an <a href=#xml-mime-type>XML MIME type</a>,
   22404               then let the <var title="">resource type</var> be the type specified in that <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute.</p>
   22405 
   22406              </li>
   22407 
   22408              <li>
   22409 
   22410               <p>Jump to the step below labeled <i>handler</i>.</p>
   22411 
   22412              </li>
   22413 
   22414             </ol></li>
   22415 
   22416           </ol></dd>
   22417 
   22418          <dt>The resource does not have <a href=#content-type title=Content-Type>associated Content-Type
   22419          metadata</a></dt>
   22420 
   22421          <dd>
   22422 
   22423           <ol><li>
   22424 
   22425             <p>If there is a <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute present on
   22426             the <code><a href=#the-object-element>object</a></code> element, then let the <var title="">tentative type</var> be the type specified in that
   22427             <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute.</p>
   22428 
   22429             <p>Otherwise, let <var title="">tentative type</var> be the
   22430             <a href=#content-type-sniffing-0 title="content-type sniffing">sniffed type of the
   22431             resource</a>.</p>
   22432 
   22433            </li>
   22434 
   22435            <li>
   22436 
   22437             <p>If <var title="">tentative type</var> is <em>not</em>
   22438             <code>application/octet-stream</code>, then let <var title="">resource type</var> be <var title="">tentative
   22439             type</var> and jump to the step below labeled
   22440             <i>handler</i>.</p>
   22441 
   22442            </li>
   22443 
   22444           </ol></dd>
   22445 
   22446         </dl></li>
   22447 
   22448        <li>
   22449 
   22450         <!-- if we get to this point we know we can successfully
   22451         parsed the URL, since this algorithm is only used after
   22452         fetching the resource in the steps above -->
   22453 
   22454         <p>If the <a href=#url-path title=url-path>&lt;path&gt;</a> component
   22455         of the <a href=#url>URL</a> of the specified resource (after any
   22456         redirects) matches a pattern that a <a href=#plugin>plugin</a>
   22457         supports, then let <var title="">resource type</var> be the
   22458         type that that plugin can handle.</p>
   22459 
   22460         <p class=example>For example, a plugin might say that it can
   22461         handle resources with <a href=#url-path title=url-path>&lt;path&gt;</a> components that end with
   22462         the four character string "<code title="">.swf</code>".</p>
   22463 
   22464         <!-- it's sad that we have to do extension sniffing. sigh. -->
   22465         <!-- see also <embed> which has a similar step -->
   22466 
   22467        </li>
   22468 
   22469       </ol><p class=note>It is possible for this step to finish with <var title="">resource type</var> still being unknown, or for one of
   22470       the substeps above to jump straight to the next step. In both
   22471       cases, the next step will trigger fallback.</p>
   22472 
   22473      </li>
   22474 
   22475      <li><p><i>Handler</i>: Handle the content as given by the first
   22476      of the following cases that matches:</p>
   22477 
   22478       <dl class=switch><dt>If the <var title="">resource type</var> is not a type that
   22479        the user agent supports, but it <em>is</em> a type that a
   22480        <a href=#plugin>plugin</a> supports</dt>
   22481 
   22482        <dd>
   22483 
   22484         <p>If <a href=#sandboxPluginObject>plugins are being
   22485         sandboxed</a>, jump to the last step in the overall set of
   22486         steps (fallback).</p>
   22487 
   22488         <p>Otherwise, the user agent should <a href=#object-plugin>use the plugin that supports <var title="">resource type</var></a> and pass the content of the
   22489         resource to that <a href=#plugin>plugin</a>. If the
   22490         <a href=#plugin>plugin</a> reports an error, then jump to the last
   22491         step in the overall set of steps (fallback).</p>
   22492 
   22493        </dd>
   22494 
   22495 
   22496        <dt>If the <var title="">resource type</var> is an <a href=#xml-mime-type>XML MIME
   22497        type</a>, or
   22498        <!-- (redundant with the next one) if the <var title="">resource type</var> is HTML, or -->
   22499        if the <var title="">resource type</var> does not start with
   22500        "<code>image/</code>"</dt>
   22501 
   22502        <dd>
   22503 
   22504         <p>The <code><a href=#the-object-element>object</a></code> element must be associated with a
   22505         newly created <a href=#nested-browsing-context>nested browsing context</a>, if it does
   22506         not already have one.</p>
   22507 
   22508         <p>If the <a href=#url>URL</a> of the given resource is not
   22509         <code><a href=#about:blank>about:blank</a></code>, the element's <a href=#nested-browsing-context>nested browsing
   22510         context</a> must then be <a href=#navigate title=navigate>navigated</a> to that resource, with
   22511         <a href=#replacement-enabled>replacement enabled</a>, and with the
   22512         <code><a href=#the-object-element>object</a></code> element's document's <a href=#browsing-context>browsing
   22513         context</a> as the <a href=#source-browsing-context>source browsing
   22514         context</a>. (The <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute of the
   22515         <code><a href=#the-object-element>object</a></code> element doesn't get updated if the
   22516         browsing context gets further navigated to other
   22517         locations.)</p>
   22518 
   22519         <p>If the <a href=#url>URL</a> of the given resource <em>is</em>
   22520         <code><a href=#about:blank>about:blank</a></code>, then, instead, the user agent must
   22521         <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   22522         named <code title=event-load>load</code> at the
   22523         <code><a href=#the-object-element>object</a></code> element.</p>
   22524 
   22525         <p>The <code><a href=#the-object-element>object</a></code> element <a href=#represents>represents</a> the
   22526         <a href=#nested-browsing-context>nested browsing context</a>.</p>
   22527 
   22528         <p>If the <code title=attr-object-name><a href=#attr-object-name>name</a></code> attribute
   22529         is present, the <a href=#browsing-context-name>browsing context name</a> must be set
   22530         to the value of this attribute; otherwise, the <a href=#browsing-context-name>browsing
   22531         context name</a> must be set to the empty string.</p>
   22532 
   22533         <p class=note>It's possible that the <a href=#navigate title=navigate>navigation</a> of the <a href=#browsing-context>browsing
   22534         context</a> will actually obtain the resource from a
   22535         different <a href=#application-cache>application cache</a>. Even if the resource
   22536         is then found to have a different type, it is still used as
   22537         part of a <a href=#nested-browsing-context>nested browsing context</a>; this algorithm
   22538         doesn't restart with the new resource.</p>
   22539 
   22540         <!-- note that malformed XML files don't cause fallback -->
   22541 
   22542        </dd>
   22543 
   22544 
   22545        <dt>If the <var title="">resource type</var> starts with
   22546        "<code>image/</code>", and support for images has not been
   22547        disabled</dt>
   22548 
   22549        <dd>
   22550 
   22551         <p>Apply the <a href=#content-type-sniffing:-image title="content-type sniffing: image">image
   22552         sniffing</a> rules to determine the type of the image.</p>
   22553 
   22554         <p>The <code><a href=#the-object-element>object</a></code> element <a href=#represents>represents</a> the
   22555         specified image. The image is not a <a href=#nested-browsing-context>nested browsing
   22556         context</a>.</p>
   22557 
   22558         <p>If the image cannot be rendered, e.g. because it is
   22559         malformed or in an unsupported format, jump to the last step
   22560         in the overall set of steps (fallback).</p>
   22561 
   22562        </dd>
   22563 
   22564 
   22565        <dt>Otherwise</dt>
   22566 
   22567        <dd>
   22568 
   22569         <p>The given <var title="">resource type</var> is not
   22570         supported. Jump to the last step in the overall set of steps
   22571         (fallback).</p>
   22572 
   22573         <p class=note>If the previous step ended with the <var title="">resource type</var> being unknown, this is the case
   22574         that is triggered.</p>
   22575 
   22576        </dd>
   22577 
   22578       </dl></li>
   22579 
   22580      <li><p>The element's contents are not part of what the
   22581      <code><a href=#the-object-element>object</a></code> element represents.</p>
   22582 
   22583      <li>
   22584 
   22585       <p>Once the resource is completely loaded, <a href=#queue-a-task>queue a
   22586       task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load>load</code> at the element.</p>
   22587 
   22588       <p>The <a href=#task-source>task source</a> for this task<!--tasks mentioned
   22589       in this section--> is the <a href=#dom-manipulation-task-source>DOM manipulation task
   22590       source</a>.</p>
   22591 
   22592      </li>
   22593 
   22594     </ol></li>
   22595 
   22596    <li><p>If the <code title=attr-object-data><a href=#attr-object-data>data</a></code> attribute
   22597    is absent but the <code title=attr-object-type><a href=#attr-object-type>type</a></code>
   22598    attribute is present, <a href=#sandboxPluginObject>plugins aren't
   22599    being sandboxed</a>, and the user agent can find a
   22600    <a href=#plugin>plugin</a> suitable according to the value of the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute, then that
   22601    <a href=#plugin>plugin</a> <a href=#object-plugin>should be used</a>. If
   22602    no suitable <a href=#plugin>plugin</a> can be found, or if the
   22603    <a href=#plugin>plugin</a> reports an error, jump to the next step
   22604    (fallback).</li>
   22605 
   22606    <li><p>(Fallback.) The <code><a href=#the-object-element>object</a></code> element
   22607    <a href=#represents>represents</a> the element's children, ignoring any
   22608    leading <code><a href=#the-param-element>param</a></code> element children. This is the element's
   22609    <a href=#fallback-content>fallback content</a>. If the element has an instantiated
   22610    <a href=#plugin>plugin</a>, then unload it.</li>
   22611 
   22612   </ol><p id=object-plugin>When the algorithm above instantiates a
   22613   <a href=#plugin>plugin</a>, the user agent should pass to the
   22614   <a href=#plugin>plugin</a> used the names and values of all the attributes
   22615   on the element, in the order they were added to the element, with
   22616   the attributes added by the parser being ordered in source order,
   22617   followed by a parameter named "PARAM" whose value is null,
   22618   followed by all the names and values of <a href=#concept-param-parameter title=concept-param-parameter>parameters</a> given by
   22619   <code><a href=#the-param-element>param</a></code> elements that are children of the
   22620   <code><a href=#the-object-element>object</a></code> element, in <a href=#tree-order>tree order</a>. If the
   22621   <a href=#plugin>plugin</a> supports a scriptable interface, the
   22622   <code><a href=#htmlobjectelement>HTMLObjectElement</a></code> object representing the element
   22623   should expose that interface. The <code><a href=#the-object-element>object</a></code> element
   22624   <a href=#represents>represents</a> the <a href=#plugin>plugin</a>. The
   22625   <a href=#plugin>plugin</a> is not a nested <a href=#browsing-context>browsing
   22626   context</a>.</p>
   22627 
   22628   <p id=sandboxPluginObject>If either:</p>
   22629 
   22630   <ul><li>the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> was
   22631    set on the <code><a href=#the-object-element>object</a></code> element's <code><a href=#document>Document</a></code>'s
   22632    <a href=#browsing-context>browsing context</a> when the <code><a href=#document>Document</a></code> was
   22633    created, or</li>
   22634 
   22635    <li>the <code><a href=#the-object-element>object</a></code> element's <code><a href=#document>Document</a></code> was
   22636    parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type
   22637    sniffing">sniffed type</a> as determined during <a href=#navigate title=navigate>navigation</a> is
   22638    <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></li>
   22639 
   22640   </ul><p>...then the steps above must always act as if they had failed to
   22641   find a <a href=#plugin>plugin</a>, even if one would otherwise have been
   22642   used.</p>
   22643 
   22644   <p class=note>The above algorithm is independent of CSS properties
   22645   (including 'display', 'overflow', and 'visibility'). For example, it
   22646   runs even if the element is hidden with a 'display:none' CSS style,
   22647   and does not run <em>again</em> if the element's visibility
   22648   changes.</p>
   22649 
   22650   <p>Due to the algorithm above, the contents of <code><a href=#the-object-element>object</a></code>
   22651   elements act as <a href=#fallback-content>fallback content</a>, used only when
   22652   referenced resources can't be shown (e.g. because it returned a 404
   22653   error). This allows multiple <code><a href=#the-object-element>object</a></code> elements to be
   22654   nested inside each other, targeting multiple user agents with
   22655   different capabilities, with the user agent picking the first one it
   22656   supports.</p>
   22657 
   22658   <p>Whenever the <code title=attr-object-name><a href=#attr-object-name>name</a></code> attribute
   22659   is set, if the <code><a href=#the-object-element>object</a></code> element has a nested
   22660   <a href=#browsing-context>browsing context</a>, its <a href=#browsing-context-name title="browsing context
   22661   name">name</a> must be changed to the new value. If the attribute
   22662   is removed, if the <code><a href=#the-object-element>object</a></code> element has a <a href=#browsing-context>browsing
   22663   context</a>, the <a href=#browsing-context-name>browsing context name</a> must be set
   22664   to the empty string.</p>
   22665 
   22666   </div>
   22667 
   22668   <p>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute,
   22669   if present while the <code><a href=#the-object-element>object</a></code> element represents an
   22670   image, can indicate that the object has an associated <a href=#image-map>image
   22671   map</a>. <span class=impl>The attribute must be ignored if the
   22672   <code><a href=#the-object-element>object</a></code> element doesn't represent an image.</span></p>
   22673 
   22674   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   22675   explicitly associate the <code><a href=#the-object-element>object</a></code> element with its
   22676   <a href=#form-owner>form owner</a>.</p>
   22677 
   22678   <div class=impl>
   22679 
   22680   <p><strong>Constraint validation</strong>: <code><a href=#the-object-element>object</a></code>
   22681   elements are always <a href=#barred-from-constraint-validation>barred from constraint
   22682   validation</a>.</p>
   22683 
   22684   </div>
   22685 
   22686   <p>The <code><a href=#the-object-element>object</a></code> element supports <a href=#dimension-attributes>dimension
   22687   attributes</a>.</p>
   22688 
   22689   <div class=impl>
   22690 
   22691   <p>The IDL attributes <dfn id=dom-object-data title=dom-object-data><code>data</code></dfn>, <dfn id=dom-object-type title=dom-object-type><code>type</code></dfn>, <dfn id=dom-object-name title=dom-object-name><code>name</code></dfn>, and <dfn id=dom-object-usemap title=dom-object-useMap><code>useMap</code></dfn> each must
   22692   <a href=#reflect>reflect</a> the respective content attributes of the same
   22693   name.</p>
   22694 
   22695   <p>The <dfn id=dom-object-contentdocument title=dom-object-contentDocument><code>contentDocument</code></dfn>
   22696   IDL attribute must return the <code><a href=#document>Document</a></code> object of the
   22697   <a href=#active-document>active document</a> of the <code><a href=#the-object-element>object</a></code> element's
   22698   <a href=#nested-browsing-context>nested browsing context</a>, if it has one; otherwise, it
   22699   must return null.</p>
   22700 
   22701   <p>The <dfn id=dom-object-contentwindow title=dom-object-contentWindow><code>contentWindow</code></dfn>
   22702   IDL attribute must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
   22703   <code><a href=#the-object-element>object</a></code> element's <a href=#nested-browsing-context>nested browsing context</a>,
   22704   if it has one; otherwise, it must return null.</p>
   22705 
   22706   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   22707   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   22708   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   22709   <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
   22710   element's forms API.</p>
   22711 
   22712   </div>
   22713 
   22714   <div class=example>
   22715 
   22716    <p>In the following example, a Java applet is embedded in a page
   22717    using the <code><a href=#the-object-element>object</a></code> element. (Generally speaking, it is
   22718    better to avoid using applets like these and instead use native
   22719    JavaScript and HTML to provide the functionality, since that way
   22720    the application will work on all Web browsers without requiring a
   22721    third-party plugin. Many devices, especially embedded devices, do
   22722    not support third-party technologies like Java.)</p>
   22723 
   22724    <pre>&lt;figure&gt;
   22725  &lt;object type="application/x-java-applet"&gt;
   22726   &lt;param name="code" value="MyJavaClass"&gt;
   22727   &lt;p&gt;You do not have Java available, or it is disabled.&lt;/p&gt;
   22728  &lt;/object&gt;
   22729  &lt;figcaption&gt;My Java Clock&lt;/figcaption&gt;
   22730 &lt;/figure&gt;</pre>
   22731 
   22732   </div>
   22733 
   22734   <div class=example>
   22735 
   22736    <p>In this example, an HTML page is embedded in another using the
   22737    <code><a href=#the-object-element>object</a></code> element.</p>
   22738 
   22739    <pre>&lt;figure&gt;
   22740  &lt;object data="clock.html"&gt;&lt;/object&gt;
   22741  &lt;figcaption&gt;My HTML Clock&lt;/figcaption&gt;
   22742 &lt;/figure&gt;</pre>
   22743 
   22744   </div>
   22745 
   22746   <div class=example>
   22747 
   22748    <p>The following example shows how a plugin can be used in HTML (in
   22749    this case the Flash plugin, to show a video file). Fallback is
   22750    provided for users who do not have Flash enabled, in this case
   22751    using the <code><a href=#video>video</a></code> element to show the video for those
   22752    using user agents that support <code><a href=#video>video</a></code>, and finally
   22753    providing a link to the video for those who have neither Flash nor
   22754    a <code><a href=#video>video</a></code>-capable browser.</p>
   22755 
   22756    <pre>&lt;p&gt;Look at my video:
   22757  &lt;object type="application/x-shockwave-flash"&gt;
   22758   &lt;param name=movie value="http://video.example.com/library/watch.swf"&gt;
   22759   &lt;param name=allowfullscreen value=true&gt;
   22760   &lt;param name=flashvars value="http://video.example.com/vids/315981"&gt;
   22761   &lt;video controls src="http://video.example.com/vids/315981"&gt;
   22762    &lt;a href="http://video.example.com/vids/315981"&gt;View video&lt;/a&gt;.
   22763   &lt;/video&gt;
   22764  &lt;/object&gt;
   22765 &lt;/p&gt;</pre>
   22766 
   22767   </div>
   22768 
   22769 
   22770 
   22771   <h4 id=the-param-element><span class=secno>4.8.5 </span>The <dfn><code>param</code></dfn> element</h4>
   22772 
   22773   <dl class=element><dt>Categories</dt>
   22774    <dd>None.</dd>
   22775    <dt>Contexts in which this element may be used:</dt>
   22776    <dd>As a child of an <code><a href=#the-object-element>object</a></code> element, before any <a href=#flow-content>flow content</a>.</dd>
   22777    <dt>Content model:</dt>
   22778    <dd>Empty.</dd>
   22779    <dt>Content attributes:</dt>
   22780    <dd><a href=#global-attributes>Global attributes</a></dd>
   22781    <dd><code title=attr-param-name><a href=#attr-param-name>name</a></code></dd>
   22782    <dd><code title=attr-param-value><a href=#attr-param-value>value</a></code></dd>
   22783    <dt>DOM interface:</dt>
   22784    <dd>
   22785 <pre class=idl>interface <dfn id=htmlparamelement>HTMLParamElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   22786            attribute DOMString <a href=#dom-param-name title=dom-param-name>name</a>;
   22787            attribute DOMString <a href=#dom-param-value title=dom-param-value>value</a>;
   22788 };</pre>
   22789    </dd>
   22790   </dl><p>The <code><a href=#the-param-element>param</a></code> element defines parameters for plugins
   22791   invoked by <code><a href=#the-object-element>object</a></code> elements. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
   22792 
   22793   <p>The <dfn id=attr-param-name title=attr-param-name><code>name</code></dfn>
   22794   attribute gives the name of the parameter.</p>
   22795 
   22796   <p>The <dfn id=attr-param-value title=attr-param-value><code>value</code></dfn>
   22797   attribute gives the value of the parameter.</p>
   22798 
   22799   <p>Both attributes must be present. They may have any value.</p>
   22800 
   22801   <div class=impl>
   22802 
   22803   <p>If both attributes are present, and if the parent element of the
   22804   <code><a href=#the-param-element>param</a></code> is an <code><a href=#the-object-element>object</a></code> element, then the
   22805   element defines a <dfn id=concept-param-parameter title=concept-param-parameter>parameter</dfn> with the given
   22806   name/value pair.</p>
   22807 
   22808   <p>The IDL attributes <dfn id=dom-param-name title=dom-param-name><code>name</code></dfn> and <dfn id=dom-param-value title=dom-param-value><code>value</code></dfn> must both
   22809   <a href=#reflect>reflect</a> the respective content attributes of the same
   22810   name.</p>
   22811 
   22812   </div>
   22813 
   22814   <div class=example>
   22815 
   22816    <p>The following example shows how the <code><a href=#the-param-element>param</a></code> element
   22817    can be used to pass a parameter to a plugin, in this case the O3D
   22818    plugin.</p>
   22819 
   22820    <pre>&lt;!DOCTYPE HTML&gt;
   22821 &lt;html lang="en"&gt;
   22822  &lt;head&gt;
   22823   &lt;title&gt;O3D test page&lt;/title&gt;
   22824  &lt;/head&gt;
   22825  &lt;body&gt;
   22826   &lt;p&gt;
   22827    &lt;object type="application/vnd.o3d.auto"&gt;
   22828     <strong>&lt;param name="o3d_features" value="FloatingPointTextures"&gt;</strong>
   22829     This page requires the use of a proprietary technology. Since you
   22830     have not installed the software product required to view this
   22831     page, you should try visiting another site that instead uses open
   22832     vendor-neutral technologies.
   22833    &lt;/object&gt;
   22834    &lt;script src="o3dtest.js"&gt;&lt;/script&gt;
   22835   &lt;/p&gt;
   22836  &lt;/body&gt;
   22837 &lt;/html&gt;</pre>
   22838 
   22839   </div>
   22840 
   22841 
   22842   <h4 id=video><span class=secno>4.8.6 </span>The <dfn><code>video</code></dfn> element</h4>
   22843 
   22844   <dl class=element><dt>Categories</dt>
   22845    <dd><a href=#flow-content>Flow content</a>.</dd>
   22846    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   22847    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   22848    <dd>If the element has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   22849    <dt>Contexts in which this element may be used:</dt>
   22850    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   22851    <dt>Content model:</dt>
   22852    <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute:
   22853 <!--TT-->
   22854  zero or more <code><a href=#the-track-element>track</a></code> elements, then
   22855 <!--TT-->
   22856  <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   22857    <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then
   22858 <!--TT-->
   22859  zero or more <code><a href=#the-track-element>track</a></code> elements, then
   22860 <!--TT-->
   22861  <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   22862    <dt>Content attributes:</dt>
   22863    <dd><a href=#global-attributes>Global attributes</a></dd>
   22864    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
   22865    <dd><code title=attr-video-poster><a href=#attr-video-poster>poster</a></code></dd>
   22866    <dd><code title=attr-media-preload><a href=#attr-media-preload>preload</a></code></dd>
   22867    <dd><code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code></dd>
   22868    <dd><code title=attr-media-loop><a href=#attr-media-loop>loop</a></code></dd>
   22869    <dd><code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></dd>
   22870    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   22871    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   22872    <dt>DOM interface:</dt>
   22873    <dd>
   22874     <pre class=idl>interface <dfn id=htmlvideoelement>HTMLVideoElement</dfn> : <a href=#htmlmediaelement>HTMLMediaElement</a> {
   22875            attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
   22876            attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
   22877   readonly attribute unsigned long <a href=#dom-video-videowidth title=dom-video-videoWidth>videoWidth</a>;
   22878   readonly attribute unsigned long <a href=#dom-video-videoheight title=dom-video-videoHeight>videoHeight</a>;
   22879            attribute DOMString <a href=#dom-video-poster title=dom-video-poster>poster</a>;
   22880 };</pre>
   22881    </dd>
   22882   </dl><p>A <code><a href=#video>video</a></code> element is used for playing videos or
   22883   movies.</p>
   22884 
   22885   <p>Content may be provided inside the <code><a href=#video>video</a></code>
   22886   element<span class=impl>. User agents should not show this content
   22887   to the user</span>; it is intended for older Web browsers which do
   22888   not support <code><a href=#video>video</a></code>, so that legacy video plugins can be
   22889   tried, or to show text to the users of these older browsers informing
   22890   them of how to access the video contents.</p>
   22891 
   22892   <p class=note>In particular, this content is not intended to
   22893   address accessibility concerns. To make video content accessible to
   22894   the blind, deaf, and those with other physical or cognitive
   22895   disabilities, authors are expected to provide alternative media
   22896   streams and/or to embed accessibility aids (such as caption or
   22897   subtitle tracks, audio description tracks, or sign-language
   22898   overlays) into their media streams.</p>
   22899 
   22900   <p>The <code><a href=#video>video</a></code> element is a <a href=#media-element>media element</a>
   22901   whose <a href=#media-data>media data</a> is ostensibly video data, possibly
   22902   with associated audio data.</p>
   22903 
   22904   <p>The <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes title="media element attributes">the attributes common to all media
   22905   elements</a>.</p>
   22906 
   22907   <p>The <dfn id=attr-video-poster title=attr-video-poster><code>poster</code></dfn>
   22908   attribute gives the address of an image file that the user agent can
   22909   show while no video data is available. The attribute, if present,
   22910   must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   22911   spaces</a>. <span class=impl>If the specified resource is to be
   22912   used, then, when the element is created or when the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> attribute is set, if its
   22913   value is not the empty string, its value must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element, and
   22914   if that is successful, the resulting <a href=#absolute-url>absolute URL</a> must
   22915   be <a href=#fetch title=fetch>fetched</a>, from the element's
   22916   <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>; this must <a href=#delay-the-load-event>delay
   22917   the load event</a> of the element's document. The <dfn id=poster-frame>poster
   22918   frame</dfn> is then the image obtained from that resource, if
   22919   any.</span></p> <!-- thus it is unaffected by changes to the base
   22920   URL. -->
   22921 
   22922   <p class=note>The image given by the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> attribute, the <i><a href=#poster-frame>poster
   22923   frame</a></i>, is intended to be a representative frame of the video
   22924   (typically one of the first non-blank frames) that gives the user an
   22925   idea of what the video is like.</p>
   22926 
   22927   <div class=impl>
   22928 
   22929   <p>The <dfn id=dom-video-poster title=dom-video-poster><code>poster</code></dfn> IDL
   22930   attribute must <a href=#reflect>reflect</a> the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> content attribute.</p>
   22931 
   22932   <hr><p>When no video data is available (the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
   22933   <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> but no video
   22934   data has yet been obtained at all), the <code><a href=#video>video</a></code> element
   22935   <a href=#represents>represents</a> either the <a href=#poster-frame>poster frame</a>, or
   22936   nothing.</p>
   22937 
   22938   <p>When a <code><a href=#video>video</a></code> element is <a href=#dom-media-paused title=dom-media-paused>paused</a> and the <a href=#current-playback-position title="current
   22939   playback position">current playback position</a> is the first
   22940   frame of video, the element <a href=#represents>represents</a> either the frame
   22941   of video corresponding to the <a href=#current-playback-position title="current playback
   22942   position">current playback position</a> or the <a href=#poster-frame>poster
   22943   frame</a>, at the discretion of the user agent.</p>
   22944 
   22945   <p>Notwithstanding the above, the <a href=#poster-frame>poster frame</a> should
   22946   be preferred over nothing, but the <a href=#poster-frame>poster frame</a> should
   22947   not be shown again after a frame of video has been shown.</p>
   22948 
   22949   <p>When a <code><a href=#video>video</a></code> element is <a href=#dom-media-paused title=dom-media-paused>paused</a> at any other position, the
   22950   element <a href=#represents>represents</a> the frame of video corresponding to
   22951   the <a href=#current-playback-position title="current playback position">current playback
   22952   position</a>, or, if that is not yet available (e.g. because the
   22953   video is seeking or buffering), the last frame of the video to have
   22954   been rendered.</p>
   22955 
   22956   <p>When a <code><a href=#video>video</a></code> element is <a href=#potentially-playing>potentially
   22957   playing</a>, it <a href=#represents>represents</a> the frame of video at the
   22958   continuously increasing <a href=#current-playback-position title="current playback
   22959   position">"current" position</a>. When the <a href=#current-playback-position>current playback
   22960   position</a> changes such that the last frame rendered is no
   22961   longer the frame corresponding to the <a href=#current-playback-position>current playback
   22962   position</a> in the video, the new frame must be
   22963   rendered. Similarly, any audio associated with the video must, if
   22964   played, be played synchronized with the <a href=#current-playback-position>current playback
   22965   position</a>, at the specified <a href=#dom-media-volume title=dom-media-volume>volume</a> with the specified <a href=#dom-media-muted title=dom-media-muted>mute state</a>.</p>
   22966 
   22967   <p>When a <code><a href=#video>video</a></code> element is neither <a href=#potentially-playing>potentially
   22968   playing</a> nor <a href=#dom-media-paused title=dom-media-paused>paused</a>
   22969   (e.g. when seeking or stalled), the element <a href=#represents>represents</a>
   22970   the last frame of the video to have been rendered.</p>
   22971 
   22972   <p class=note>Which frame in a video stream corresponds to a
   22973   particular playback position is defined by the video stream's
   22974   format.</p>
   22975 
   22976   <p>In addition to the above, the user agent may provide messages to
   22977   the user (such as "buffering", "no video loaded", "error", or more
   22978   detailed information) by overlaying text or icons on the video or
   22979   other areas of the element's playback area, or in another
   22980   appropriate manner.</p>
   22981 
   22982   <p>User agents that cannot render the video may instead make the
   22983   element <a href=#represents title=represents>represent</a> a link to an
   22984   external video playback utility or to the video data itself.</p>
   22985 
   22986   <hr></div>
   22987 
   22988   <dl class=domintro><dt><var title="">video</var> . <code title=dom-video-videoWidth><a href=#dom-video-videowidth>videoWidth</a></code></dt>
   22989    <dt><var title="">video</var> . <code title=dom-video-videoHeight><a href=#dom-video-videoheight>videoHeight</a></code></dt>
   22990 
   22991    <dd>
   22992 
   22993     <p>These attributes return the intrinsic dimensions of the video,
   22994     or zero if the dimensions are not known.</p>
   22995 
   22996    </dd>
   22997 
   22998   </dl><div class=impl>
   22999 
   23000   <p>The <dfn id=concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic
   23001   width</dfn> and <dfn id=concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</dfn> of the
   23002   <a href=#media-resource>media resource</a> are the dimensions of the resource in
   23003   CSS pixels after taking into account the resource's dimensions,
   23004   aspect ratio, clean aperture, resolution, and so forth, as defined
   23005   for the format used by the resource. If an anamorphic format does
   23006   not define how to apply the aspect ratio to the video data's
   23007   dimensions to obtain the "correct" dimensions, then the user agent
   23008   must apply the ratio by increasing one dimension and leaving the
   23009   other unchanged.</p>
   23010 
   23011   <p>The <dfn id=dom-video-videowidth title=dom-video-videoWidth><code>videoWidth</code></dfn> IDL
   23012   attribute must return the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> of the
   23013   video in CSS pixels. The <dfn id=dom-video-videoheight title=dom-video-videoHeight><code>videoHeight</code></dfn> IDL
   23014   attribute must return the <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> of
   23015   the video in CSS pixels. If the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then the
   23016   attributes must return 0.</p>
   23017 
   23018   </div>
   23019 
   23020   <p>The <code><a href=#video>video</a></code> element supports <a href=#dimension-attributes>dimension
   23021   attributes</a>.</p>
   23022 
   23023   <div class=impl>
   23024 
   23025   <p>Video content should be rendered inside the element's playback
   23026   area such that the video content is shown centered in the playback
   23027   area at the largest possible size that fits completely within it,
   23028   with the video content's aspect ratio being preserved. Thus, if the
   23029   aspect ratio of the playback area does not match the aspect ratio of
   23030   the video, the video will be shown letterboxed or pillarboxed. Areas
   23031   of the element's playback area that do not contain the video
   23032   represent nothing.</p>
   23033 
   23034   <p>The intrinsic width of a <code><a href=#video>video</a></code> element's playback
   23035   area is the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic
   23036   width</a> of the video resource, if that is available; otherwise
   23037   it is the intrinsic width of the <a href=#poster-frame>poster frame</a>, if that
   23038   is available; otherwise it is 300 CSS pixels.</p>
   23039 
   23040   <p>The intrinsic height of a <code><a href=#video>video</a></code> element's playback
   23041   area is the <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic
   23042   height</a> of the video resource, if that is available; otherwise
   23043   it is the intrinsic height of the <a href=#poster-frame>poster frame</a>, if that
   23044   is available; otherwise it is 150 CSS pixels.</p>
   23045 
   23046   <hr><p>User agents should provide controls to enable or disable the
   23047   display of closed captions, audio description tracks, and other
   23048   additional data associated with the video stream, though such
   23049   features should, again, not interfere with the page's normal
   23050   rendering.</p>
   23051 
   23052   <p>User agents may allow users to view the video content in manners
   23053   more suitable to the user (e.g. full-screen or in an independent
   23054   resizable window). As for the other user interface features,
   23055   controls to enable this should not interfere with the page's normal
   23056   rendering unless the user agent is <a href=#expose-a-user-interface-to-the-user title="expose a user
   23057   interface to the user">exposing a user interface</a>. In such an
   23058   independent context, however, user agents may make full user
   23059   interfaces visible, with, e.g., play, pause, seeking, and volume
   23060   controls, even if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is absent.</p>
   23061 
   23062   <p>User agents may allow video playback to affect system features
   23063   that could interfere with the user's experience; for example, user
   23064   agents could disable screensavers while video playback is in
   23065   progress.</p>
   23066 
   23067   <p class=warning>User agents should not provide a public API to
   23068   cause videos to be shown full-screen. A script, combined with a
   23069   carefully crafted video file, could trick the user into thinking a
   23070   system-modal dialog had been shown, and prompt the user for a
   23071   password. There is also the danger of "mere" annoyance, with pages
   23072   launching full-screen videos when links are clicked or pages
   23073   navigated. Instead, user-agent-specific interface features may be
   23074   provided to easily allow the user to obtain a full-screen playback
   23075   mode.</p>
   23076 
   23077   </div>
   23078 
   23079   <div class=example>
   23080 
   23081    <p>This example shows how to detect when a video has failed to play
   23082    correctly:</p>
   23083 
   23084    <pre>&lt;script&gt;
   23085  function failed(e) {
   23086    // video playback failed - show a message saying why
   23087    switch (e.target.error.code) {
   23088      case e.target.error.MEDIA_ERR_ABORTED:
   23089        alert('You aborted the video playback.');
   23090        break;
   23091      case e.target.error.MEDIA_ERR_NETWORK:
   23092        alert('A network error caused the video download to fail part-way.');
   23093        break;
   23094      case e.target.error.MEDIA_ERR_DECODE:
   23095        alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
   23096        break;
   23097      case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
   23098        alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
   23099        break;
   23100      default:
   23101        alert('An unknown error occurred.');
   23102        break;
   23103    }
   23104  }
   23105 &lt;/script&gt;
   23106 &lt;p&gt;&lt;video src="tgif.vid" autoplay controls onerror="failed(event)"&gt;&lt;/video&gt;&lt;/p&gt;
   23107 &lt;p&gt;&lt;a href="tgif.vid"&gt;Download the video file&lt;/a&gt;.&lt;/p&gt;</pre>
   23108 
   23109   </div>
   23110 
   23111 
   23112 
   23113 
   23114   <!--CODECS
   23115 
   23116   <div class="impl">
   23117 
   23118   <h5>Video and audio codecs for <code>video</code> elements</h5>
   23119 
   23120   <p>User agents may support any video and audio codecs and container
   23121   formats.</p>
   23122 
   23123   <p class="note">Certain user agents might support no codecs at all,
   23124   e.g. text browsers running over SSH connections.</p>
   23125 
   23126   <!- - similar note in audio codecs section - ->
   23127   <p class="note">Implementations are free to implement support for
   23128   video codecs either natively, or using platform-specific APIs, or
   23129   using plugins: this specification does not specify how codecs are to
   23130   be implemented.</p>
   23131 
   23132   </div>
   23133 
   23134   (when replacing this text, also fix "- -" nested comments)-->
   23135 
   23136 
   23137 
   23138 
   23139 
   23140   <h4 id=audio><span class=secno>4.8.7 </span>The <dfn><code>audio</code></dfn> element</h4>
   23141 
   23142   <dl class=element><dt>Categories</dt>
   23143    <dd><a href=#flow-content>Flow content</a>.</dd>
   23144    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   23145    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   23146    <dd>If the element has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
   23147    <dt>Contexts in which this element may be used:</dt>
   23148    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   23149    <dt>Content model:</dt>
   23150    <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: 
   23151 <!--TT-->
   23152 zero or more <code><a href=#the-track-element>track</a></code> elements, then 
   23153 <!--TT-->
   23154 <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   23155    <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then
   23156 <!--TT-->
   23157  zero or more <code><a href=#the-track-element>track</a></code> elements, then
   23158 <!--TT-->
   23159  <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
   23160    <dt>Content attributes:</dt>
   23161    <dd><a href=#global-attributes>Global attributes</a></dd>
   23162    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
   23163    <dd><code title=attr-media-preload><a href=#attr-media-preload>preload</a></code></dd>
   23164    <dd><code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code></dd>
   23165    <dd><code title=attr-media-loop><a href=#attr-media-loop>loop</a></code></dd>
   23166    <dd><code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></dd>
   23167    <dt>DOM interface:</dt>
   23168    <dd>
   23169     <pre class=idl>[NamedConstructor=<a href=#dom-audio title=dom-Audio>Audio</a>(),
   23170  NamedConstructor=<a href=#dom-audio-s title=dom-Audio-s>Audio</a>(in DOMString src)]
   23171 interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href=#htmlmediaelement>HTMLMediaElement</a> {};</pre>
   23172    </dd>
   23173   </dl><p>An <code><a href=#audio>audio</a></code> element <a href=#represents>represents</a> a sound or
   23174   audio stream.</p>
   23175 
   23176   <!-- v2 (actually v3) suggestions:
   23177     * Audio syntesis. Use cases from Charles Pritchard:
   23178       > Use a sound of varying pitch to hint to a user the location of their
   23179       > mouse (is it hovering over a button, is it x/y pixels away from the edge
   23180       > of the screen, how close is it to the center).
   23181       >
   23182       > Alter the pitch of a sound to make a very cheap midi instrument.
   23183       >
   23184       > Pre-mix a few generated sounds, because the client processor is slow.
   23185       >
   23186       > Alter the pitch of an actual audio recording, and pre-mix it, to give
   23187       > different sounding voices to pre-recorded readings of a single text. As
   23188       > has been tried for "male" "female" sound fonts.
   23189       >
   23190       > Support very simple audio codecs, and programmable synthesizers.
   23191   -->
   23192 
   23193   <p>Content may be provided inside the <code><a href=#audio>audio</a></code>
   23194   element<span class=impl>. User agents should not show this content
   23195   to the user</span>; it is intended for older Web browsers which do
   23196   not support <code><a href=#audio>audio</a></code>, so that legacy audio plugins can be
   23197   tried, or to show text to the users of these older browsers informing
   23198   them of how to access the audio contents.</p>
   23199 
   23200   <p class=note>In particular, this content is not intended to
   23201   address accessibility concerns. To make audio content accessible to
   23202   the deaf or to those with other physical or cognitive disabilities,
   23203   authors are expected to provide alternative media streams and/or to
   23204   embed accessibility aids (such as transcriptions) into their media
   23205   streams.</p>
   23206 
   23207   <p>The <code><a href=#audio>audio</a></code> element is a <a href=#media-element>media element</a>
   23208   whose <a href=#media-data>media data</a> is ostensibly audio data.</p>
   23209 
   23210   <p>The <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes title="media element attributes">the attributes common to all media
   23211   elements</a>.</p>
   23212 
   23213   <div class=impl>
   23214 
   23215   <p>When an <code><a href=#audio>audio</a></code> element is <a href=#potentially-playing>potentially
   23216   playing</a>, it must have its audio data played synchronized with
   23217   the <a href=#current-playback-position>current playback position</a>, at the specified <a href=#dom-media-volume title=dom-media-volume>volume</a> with the specified <a href=#dom-media-muted title=dom-media-muted>mute state</a>.</p>
   23218 
   23219   <p>When an <code><a href=#audio>audio</a></code> element is not <a href=#potentially-playing>potentially
   23220   playing</a>, audio must not play for the element.</p>
   23221 
   23222   </div>
   23223 
   23224   <dl class=domintro><dt><var title="">audio</var> = new <code title=dom-Audio><a href=#dom-audio>Audio</a></code>( [ <var title="">url</var> ] )</dt>
   23225 
   23226    <dd>
   23227 
   23228     <p>Returns a new <code><a href=#audio>audio</a></code> element, with the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute set to the value
   23229     passed in the argument, if applicable.</p>
   23230 
   23231    </dd>
   23232 
   23233   </dl><div class=impl>
   23234 
   23235   <p>Two constructors are provided for creating
   23236   <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> objects (in addition to the factory
   23237   methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-audio title=dom-Audio><code>Audio()</code></dfn> and <dfn id=dom-audio-s title=dom-Audio-s><code>Audio(<var title="">src</var>)</code></dfn>. When invoked as constructors,
   23238   these must return a new <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> object (a new
   23239   <code><a href=#audio>audio</a></code> element). The element must have its <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute set to the
   23240   literal value "<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>". If the <var title="">src</var> argument is present, the object created must have
   23241   its <code title=attr-media-src><a href=#attr-media-src>src</a></code> content attribute set to
   23242   the provided value, and the user agent must invoke the object's
   23243   <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23244   algorithm</a> before returning. The element's document must be
   23245   the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
   23246   context</a> of the <code><a href=#window>Window</a></code> object on which the
   23247   interface object of the invoked constructor is found.</p>
   23248 
   23249   </div>
   23250 
   23251 
   23252 
   23253   <!--CODECS
   23254 
   23255   <div class="impl">
   23256 
   23257   <h5>Audio codecs for <code>audio</code> elements</h5>
   23258 
   23259   <p>User agents may support any audio codecs and container
   23260   formats.</p>
   23261 
   23262   <p>User agents must support the WAVE container format with audio
   23263   encoded using the 16 bit PCM (LE) codec, at sampling frequencies of
   23264   11.025kHz, 22.050kHz, and 44.100kHz, and for both mono and
   23265   stereo. <a href="#- -refsWAVE">[WAVE]</a></p>
   23266 
   23267   <!- -
   23268    <dt id="- -refsWAVE">WAVE</dt>
   23269    <dd>http://en.wikipedia.org/wiki/WAV? </dd>
   23270   - ->
   23271 
   23272   <!- - similar note in video codecs section - ->
   23273   <p class="note">Implementations are free to implement support for
   23274   audio codecs either natively, or using platform-specific APIs, or
   23275   using plugins: this specification does not specify how codecs are to
   23276   be implemented.</p>
   23277 
   23278   </div>
   23279 
   23280   (when replacing this text, also fix "- -" nested comments)-->
   23281 
   23282 
   23283 
   23284   <h4 id=the-source-element><span class=secno>4.8.8 </span>The <dfn><code>source</code></dfn> element</h4>
   23285 
   23286   <dl class=element><dt>Categories</dt>
   23287    <dd>None.</dd>
   23288    <dt>Contexts in which this element may be used:</dt>
   23289    <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>
   23290 <!--TT-->
   23291  or <code><a href=#the-track-element>track</a></code> elements.</dd>
   23292 <!--TT-->
   23293    <dt>Content model:</dt>
   23294    <dd>Empty.</dd>
   23295    <dt>Content attributes:</dt>
   23296    <dd><a href=#global-attributes>Global attributes</a></dd>
   23297    <dd><code title=attr-source-src><a href=#attr-source-src>src</a></code></dd>
   23298    <dd><code title=attr-source-type><a href=#attr-source-type>type</a></code></dd>
   23299    <dd><code title=attr-source-media><a href=#attr-source-media>media</a></code></dd>
   23300    <dt>DOM interface:</dt>
   23301    <dd>
   23302 <pre class=idl>interface <dfn id=htmlsourceelement>HTMLSourceElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   23303            attribute DOMString <a href=#dom-source-src title=dom-source-src>src</a>;
   23304            attribute DOMString <a href=#dom-source-type title=dom-source-type>type</a>;
   23305            attribute DOMString <a href=#dom-source-media title=dom-source-media>media</a>;
   23306 };</pre>
   23307    </dd>
   23308   </dl><p>The <code><a href=#the-source-element>source</a></code> element allows authors to specify
   23309   multiple alternative <a href=#media-resource title="media resource">media
   23310   resources</a> for <a href=#media-element title="media element">media
   23311   elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
   23312 
   23313   <p>The <dfn id=attr-source-src title=attr-source-src><code>src</code></dfn> attribute
   23314   gives the address of the <a href=#media-resource>media resource</a>. The value must
   23315   be a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   23316   spaces</a>. This attribute must be present.</p>
   23317 
   23318   <p>The <dfn id=attr-source-type title=attr-source-type><code>type</code></dfn>
   23319   attribute gives the type of the <a href=#media-resource>media resource</a>, to help
   23320   the user agent determine if it can play this <a href=#media-resource>media
   23321   resource</a> before fetching it. If specified, its value must be
   23322   a <a href=#valid-mime-type>valid MIME type</a>. The <code title="">codecs</code>
   23323   parameter may be specified and might be necessary to specify exactly
   23324   how the resource is encoded. <a href=#refsRFC4281>[RFC4281]</a></p>
   23325 
   23326   <div class=example>
   23327 
   23328    <p>The following list shows some examples of how to use the <code title="">codecs=</code> MIME parameter in the <code title=attr-source-type><a href=#attr-source-type>type</a></code> attribute.</p>
   23329 
   23330    <dl><dt>H.264 Simple baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
   23331     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;</pre></dd>
   23332 
   23333     <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
   23334     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'&gt;</pre></dd>
   23335 
   23336     <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt>
   23337     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'&gt;</pre></dd>
   23338 
   23339     <dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container</dt>
   23340     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'&gt;</pre></dd>
   23341 
   23342 
   23343     <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
   23344     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'&gt;</pre></dd>
   23345 
   23346     <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
   23347     <dd><pre>&lt;source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'&gt;</pre></dd>
   23348 
   23349     <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt>
   23350     <dd><pre>&lt;source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;</pre></dd>
   23351 
   23352 
   23353     <dt>Theora video and Vorbis audio in Ogg container</dt>
   23354     <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'&gt;</pre></dd>
   23355 
   23356     <dt>Theora video and Speex audio in Ogg container</dt>
   23357     <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="theora, speex"'&gt;</pre></dd>
   23358 
   23359     <dt>Vorbis audio alone in Ogg container</dt>
   23360     <dd><pre>&lt;source src='audio.ogg' type='audio/ogg; codecs=vorbis'&gt;</pre></dd>
   23361 
   23362     <dt>Speex audio alone in Ogg container</dt>
   23363     <dd><pre>&lt;source src='audio.spx' type='audio/ogg; codecs=speex'&gt;</pre></dd>
   23364 
   23365     <dt>FLAC audio alone in Ogg container</dt>
   23366     <dd><pre>&lt;source src='audio.oga' type='audio/ogg; codecs=flac'&gt;</pre></dd>
   23367 
   23368     <dt>Dirac video and Vorbis audio in Ogg container</dt>
   23369     <dd><pre>&lt;source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'&gt;</pre></dd>
   23370 
   23371     <dt>Theora video and Vorbis audio in Matroska container</dt>
   23372     <dd><pre>&lt;source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'&gt;</pre></dd>
   23373 
   23374 <!-- awaiting definition by the Ogg or BBC guys:
   23375     <dt>Dirac video and Vorbis audio in Matroska container</dt>
   23376     <dd><pre>&lt;source src='video.mkv' type='video/x-matroska; codecs='></pre></dd>
   23377 -->
   23378 
   23379 
   23380 <!-- awaiting definition by the Microsoft guys:
   23381 
   23382     <dt>WMV9 video and WMA 2 audio in ASF container</dt>
   23383     <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>
   23384 
   23385     <dt>WMV8 video and WMA 2 audio in ASF container</dt>
   23386     <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>
   23387 
   23388     <dt>VC-1 video and WMA 10 Pro audio in ASF container</dt>
   23389     <dd><pre>&lt;source src='video.wmv' type='video/x-ms-wmv; codecs='></pre></dd>
   23390 
   23391     <dt>XviD video and MP3 audio in AVI container</dt>
   23392     <dd><pre>&lt;source src='video.avi' type='video/x-msvideo; codecs='></pre></dd>
   23393 
   23394     <dt>Motion-JPEG video and uncompressed PCM audio in AVI container</dt>
   23395     <dd><pre>&lt;source src='video.avi' type='video/x-msvideo; codecs='></pre></dd>
   23396 
   23397 -->
   23398 
   23399 
   23400 <!-- awaiting definition by Real:
   23401     <dt>Real Video 10 video and High-Efficiency AAC audio in Real Media container</dt>
   23402     <dd><pre>&lt;source src='video.rm' type='application/vnd.rn-realmedia; codecs='></pre></dd>
   23403 -->
   23404 
   23405 
   23406 <!--  undefined:
   23407     <dt>MPEG-1 video and MPEG-1 Audio Layer II audio in MPEG-1 program stream</dt>
   23408     <dd><pre>&lt;source src='video.mpg' type='video/mpeg; codecs='></pre></dd>
   23409 -->
   23410 
   23411    </dl></div>
   23412 
   23413   <p>The <dfn id=attr-source-media title=attr-source-media><code>media</code></dfn>
   23414   attribute gives the intended media type of the <a href=#media-resource>media
   23415   resource</a>, to help the user agent determine if this
   23416   <a href=#media-resource>media resource</a> is useful to the user before fetching
   23417   it. Its value must be a <a href=#valid-media-query>valid media query</a>.</p>
   23418 
   23419   <p id=source-default-media>The default, if the <code title=attr-srouce-media>media</code> attribute is omitted, is
   23420   "<code title="">all</code>", meaning that by default the <a href=#media-resource>media
   23421   resource</a> is suitable for all media.</p>
   23422 
   23423   <div class=impl>
   23424 
   23425   <p>If a <code><a href=#the-source-element>source</a></code> element is inserted as a child of a
   23426   <a href=#media-element>media element</a> that has no <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute and whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> has the value
   23427   <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, the user
   23428   agent must invoke the <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23429   algorithm</a>.</p>
   23430 
   23431   <p>The IDL attributes <dfn id=dom-source-src title=dom-source-src><code>src</code></dfn>, <dfn id=dom-source-type title=dom-source-type><code>type</code></dfn>, and <dfn id=dom-source-media title=dom-source-media><code>media</code></dfn> must
   23432   <a href=#reflect>reflect</a> the respective content attributes of the same
   23433   name.</p>
   23434 
   23435   </div>
   23436 
   23437   <div class=example>
   23438 
   23439    <p>If the author isn't sure if the user agents will all be able to
   23440    render the media resources provided, the author can listen to the
   23441    <code title=event-error>error</code> event on the last
   23442    <code><a href=#the-source-element>source</a></code> element and trigger fallback behavior:</p>
   23443 
   23444    <pre>&lt;script&gt;
   23445  function fallback(video) {
   23446    // replace &lt;video&gt; with its contents
   23447    while (video.hasChildNodes()) {
   23448      if (video.firstChild instanceof HTMLSourceElement)
   23449        video.removeChild(video.firstChild);
   23450      else
   23451        video.parentNode.insertBefore(video.firstChild, video);
   23452    }
   23453    video.parentNode.removeChild(video);
   23454  }
   23455 &lt;/script&gt;
   23456 &lt;video controls autoplay&gt;
   23457  &lt;source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
   23458  &lt;source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
   23459          onerror="fallback(parentNode)"&gt;
   23460  ...
   23461 &lt;/video&gt;</pre>
   23462 
   23463   </div>
   23464 
   23465 
   23466 
   23467 <!--TT-->
   23468 
   23469   <h4 id=the-track-element><span class=secno>4.8.9 </span>The <dfn><code>track</code></dfn> element</h4>
   23470 
   23471   <dl class=element><dt>Categories</dt>
   23472    <dd>None.</dd>
   23473    <dt>Contexts in which this element may be used:</dt>
   23474    <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
   23475    <dt>Content model:</dt>
   23476    <dd>Empty.</dd>
   23477    <dt>Content attributes:</dt>
   23478    <dd><a href=#global-attributes>Global attributes</a></dd>
   23479    <dd><code title=attr-track-kind><a href=#attr-track-kind>kind</a></code></dd>
   23480    <dd><code title=attr-track-label><a href=#attr-track-label>label</a></code></dd>
   23481    <dd><code title=attr-track-src><a href=#attr-track-src>src</a></code></dd>
   23482    <dd><code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></dd>
   23483    <dt>DOM interface:</dt>
   23484    <dd>
   23485 <pre class=idl>interface <dfn id=htmltrackelement>HTMLTrackElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   23486            attribute DOMString <a href=#dom-track-kind title=dom-track-kind>kind</a>;
   23487            attribute DOMString <a href=#dom-track-label title=dom-track-label>label</a>;
   23488            attribute DOMString <a href=#dom-track-src title=dom-track-src>src</a>;
   23489            attribute DOMString <a href=#dom-track-srclang title=dom-track-srclang>srclang</a>;
   23490 
   23491   readonly attribute <a href=#timedtrack>TimedTrack</a> <a href=#dom-track-track title=dom-track-track>track</a>;
   23492 };</pre>
   23493    </dd>
   23494   </dl><p>The <code><a href=#the-track-element>track</a></code> element allows authors to specify explicit
   23495   external <a href=#timed-track title="timed track">timed tracks</a> for <a href=#media-element title="media element">media elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
   23496 
   23497   <p>The <dfn id=attr-track-kind title=attr-track-kind><code>kind</code></dfn>
   23498   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
   23499   table lists the keywords defined for this attribute. The keyword
   23500   given in the first cell of each row maps to the state given in the
   23501   second cell.</p>
   23502 
   23503   <table><thead><tr><th>Keywords
   23504      <th>State
   23505      <th>Brief description
   23506    <tbody><tr><td><dfn id=attr-track-kind-keyword-subtitles title=attr-track-kind-keyword-subtitles><code>subtitles</code></dfn>
   23507      <td><dfn id=attr-track-kind-subtitles title=attr-track-kind-subtitles>Subtitles</dfn>
   23508      <td>Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource>media resource</a>'s soundtrack).
   23509     <tr><td><dfn id=attr-track-kind-keyword-captions title=attr-track-kind-keyword-captions><code>captions</code></dfn>
   23510      <td><dfn id=attr-track-kind-captions title=attr-track-kind-captions>Captions</dfn>
   23511      <td>Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). 
   23512     <tr><td><dfn id=attr-track-kind-keyword-descriptions title=attr-track-kind-keyword-descriptions><code>descriptions</code></dfn>
   23513      <td><dfn id=attr-track-kind-descriptions title=attr-track-kind-descriptions>Descriptions</dfn>
   23514      <td>Textual descriptions of the video component of the <a href=#media-resource>media resource</a>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
   23515     <tr><td><dfn id=attr-track-kind-keyword-chapters title=attr-track-kind-keyword-chapters><code>chapters</code></dfn>
   23516      <td><dfn id=attr-track-kind-chapters title=attr-track-kind-chapters>Chapters</dfn>
   23517      <td>Chapter titles, intended to be used for navigating the <a href=#media-resource>media resource</a>.
   23518     <tr><td><dfn id=attr-track-kind-keyword-metadata title=attr-track-kind-keyword-metadata><code>metadata</code></dfn>
   23519      <td><dfn id=attr-track-kind-metadata title=attr-track-kind-metadata>Metadata</dfn>
   23520      <td>Tracks intended for use from script.
   23521   </table><p>The attribute may be omitted. The <i>missing value default</i> is
   23522   the <a href=#attr-track-kind-captions title=attr-track-kind-captions>captions</a> state.</p>
   23523 
   23524   <p>The <dfn id=attr-track-src title=attr-track-src><code>src</code></dfn> attribute
   23525   gives the address of the time track data. The value must be a
   23526   <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   23527   spaces</a>. This attribute must be present.</p>
   23528 
   23529   <div class=impl>
   23530 
   23531   <p>If the element has a <code title=attr-track-src><a href=#attr-track-src>src</a></code>
   23532   attribute whose value is not the empty string and whose value, when
   23533   the attribute was set, could be successfully <a href=#resolve-a-url title="resolve a
   23534   url">resolved</a> relative to the element, then the element's
   23535   <dfn id=track-url>track URL</dfn> is the resulting <a href=#absolute-url>absolute
   23536   URL</a>. Otherwise, the element's <a href=#track-url>track URL</a> is the
   23537   empty string.</p>
   23538 
   23539   </div>
   23540 
   23541   <p>The <dfn id=attr-track-srclang title=attr-track-srclang><code>srclang</code></dfn>
   23542   attribute gives the language of the time track data. The value must
   23543   be a valid BCP 47 language tag. This attribute must be present if
   23544   the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute is
   23545   in the <a href=#attr-track-kind-subtitles title=attr-track-kind-subtitles>subtitles</a>
   23546   state. <a href=#refsBCP47>[BCP47]</a></p>
   23547 
   23548   <div class=impl>
   23549 
   23550   <p>If the element has a <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> attribute whose value is
   23551   not the empty string, then the element's <dfn id=track-language>track language</dfn>
   23552   is the value of the attribute. Otherwise, the element has no
   23553   <a href=#track-language>track language</a>.</p>
   23554 
   23555   </div>
   23556 
   23557   <p>The <dfn id=attr-track-label title=attr-track-label><code>label</code></dfn>
   23558   attribute gives a user-readable title for the track.</p>
   23559 
   23560   <p>The value of the <code title=attr-track-label><a href=#attr-track-label>label</a></code>
   23561   attribute, if the attribute is present, must not be the empty
   23562   string. Furthermore, there must not be two <code><a href=#the-track-element>track</a></code>
   23563   element children of the same <a href=#media-element>media element</a> whose <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attributes are in the same
   23564   state, whose <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code>
   23565   attributes are both missing or have values that represent the same
   23566   language, and whose <code title=attr-track-label><a href=#attr-track-label>label</a></code>
   23567   attributes are again both missing or both have the same value.</p>
   23568 
   23569   <div class=impl>
   23570 
   23571   <p>If the element has a <code title=attr-track-label><a href=#attr-track-label>label</a></code>
   23572   attribute whose value is not the empty string, then the element's
   23573   <dfn id=track-label>track label</dfn> is the value of the attribute. Otherwise, the
   23574   element's <a href=#track-label>track label</a> is a user-agent defined string
   23575   (e.g. the string "untitled" in the user's locale, or a value
   23576   automatically generated from the other attributes).</p>
   23577 
   23578   </div>
   23579 
   23580   <dl class=domintro><dt><var title="">track</var> . <code title=dom-track-track><a href=#dom-track-track>track</a></code></dt>
   23581 
   23582    <dd>
   23583 
   23584     <p>Returns the <code><a href=#timedtrack>TimedTrack</a></code> object corresponding to the <a href=#timed-track>timed track</a> of the <code><a href=#the-track-element>track</a></code> element.</p>
   23585 
   23586    </dd>
   23587 
   23588   </dl><div class=impl>
   23589 
   23590   <p>The <dfn id=dom-track-track title=dom-track-track><code>track</code></dfn> IDL
   23591   attribute must, on getting, return the <code><a href=#the-track-element>track</a></code> element's
   23592   <a href=#timed-track>timed track</a>'s corresponding <code><a href=#timedtrack>TimedTrack</a></code>
   23593   object.</p>
   23594 
   23595   <p>The IDL attributes <dfn id=dom-track-kind title=dom-track-kind><code>kind</code></dfn>, <dfn id=dom-track-label title=dom-track-label><code>label</code></dfn>, <dfn id=dom-track-src title=dom-track-src><code>src</code></dfn>, and <dfn id=dom-track-srclang title=dom-track-srclang><code>srclang</code></dfn> must
   23596   <a href=#reflect>reflect</a> the respective content attributes of the same
   23597   name.</p>
   23598 
   23599   </div>
   23600 
   23601 <!--TT-->
   23602 
   23603 
   23604   <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
   23605 
   23606   <p><dfn id=media-element title="media element">Media elements</dfn> implement the
   23607   following interface:</p>
   23608 
   23609   <pre class=idl>interface <dfn id=htmlmediaelement>HTMLMediaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   23610 
   23611   // error state
   23612   readonly attribute <a href=#mediaerror>MediaError</a> <a href=#dom-media-error title=dom-media-error>error</a>;
   23613 
   23614   // network state
   23615            attribute DOMString <a href=#dom-media-src title=dom-media-src>src</a>;
   23616   readonly attribute DOMString <a href=#dom-media-currentsrc title=dom-media-currentSrc>currentSrc</a>;
   23617   const unsigned short <a href=#dom-media-network_empty title=dom-media-NETWORK_EMPTY>NETWORK_EMPTY</a> = 0;
   23618   const unsigned short <a href=#dom-media-network_idle title=dom-media-NETWORK_IDLE>NETWORK_IDLE</a> = 1;
   23619   const unsigned short <a href=#dom-media-network_loading title=dom-media-NETWORK_LOADING>NETWORK_LOADING</a> = 2;
   23620   const unsigned short <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a> = 3;
   23621   readonly attribute unsigned short <a href=#dom-media-networkstate title=dom-media-networkState>networkState</a>;
   23622            attribute DOMString <a href=#dom-media-preload title=dom-media-preload>preload</a>;
   23623 <!--v3BUF  readonly attribute float <span title="dom-media-bufferingRate">bufferingRate</span>;
   23624   readonly attribute boolean <span title="dom-media-bufferingThrottled">bufferingThrottled</span>;
   23625 -->  readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-buffered title=dom-media-buffered>buffered</a>;
   23626   void <a href=#dom-media-load title=dom-media-load>load</a>();
   23627   DOMString <a href=#dom-navigator-canplaytype title=dom-navigator-canPlayType>canPlayType</a>(in DOMString type);
   23628 
   23629   // ready state
   23630   const unsigned short <a href=#dom-media-have_nothing title=dom-media-HAVE_NOTHING>HAVE_NOTHING</a> = 0;
   23631   const unsigned short <a href=#dom-media-have_metadata title=dom-media-HAVE_METADATA>HAVE_METADATA</a> = 1;
   23632   const unsigned short <a href=#dom-media-have_current_data title=dom-media-HAVE_CURRENT_DATA>HAVE_CURRENT_DATA</a> = 2;
   23633   const unsigned short <a href=#dom-media-have_future_data title=dom-media-HAVE_FUTURE_DATA>HAVE_FUTURE_DATA</a> = 3;
   23634   const unsigned short <a href=#dom-media-have_enough_data title=dom-media-HAVE_ENOUGH_DATA>HAVE_ENOUGH_DATA</a> = 4;
   23635   readonly attribute unsigned short <a href=#dom-media-readystate title=dom-media-readyState>readyState</a>;
   23636   readonly attribute boolean <a href=#dom-media-seeking title=dom-media-seeking>seeking</a>;
   23637 
   23638   // playback state
   23639            attribute float <a href=#dom-media-currenttime title=dom-media-currentTime>currentTime</a>;
   23640   readonly attribute float <a href=#dom-media-starttime title=dom-media-startTime>startTime</a>;
   23641   readonly attribute float <a href=#dom-media-duration title=dom-media-duration>duration</a>;
   23642   readonly attribute boolean <a href=#dom-media-paused title=dom-media-paused>paused</a>;
   23643            attribute float <a href=#dom-media-defaultplaybackrate title=dom-media-defaultPlaybackRate>defaultPlaybackRate</a>;
   23644            attribute float <a href=#dom-media-playbackrate title=dom-media-playbackRate>playbackRate</a>;
   23645   readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-played title=dom-media-played>played</a>;
   23646   readonly attribute <a href=#timeranges>TimeRanges</a> <a href=#dom-media-seekable title=dom-media-seekable>seekable</a>;
   23647   readonly attribute boolean <a href=#dom-media-ended title=dom-media-ended>ended</a>;
   23648            attribute boolean <a href=#dom-media-autoplay title=dom-media-autoplay>autoplay</a>;
   23649            attribute boolean <a href=#dom-media-loop title=dom-media-loop>loop</a>;
   23650   void <a href=#dom-media-play title=dom-media-play>play</a>();
   23651   void <a href=#dom-media-pause title=dom-media-pause>pause</a>();
   23652 
   23653   // controls
   23654            attribute boolean <a href=#dom-media-controls title=dom-media-controls>controls</a>;
   23655            attribute float <a href=#dom-media-volume title=dom-media-volume>volume</a>;
   23656            attribute boolean <a href=#dom-media-muted title=dom-media-muted>muted</a>;
   23657 <!--TT-->
   23658   // timed tracks
   23659   readonly attribute <a href=#timedtrack>TimedTrack</a>[] <span title=dom-media-tracks>tracks</span>;
   23660   <a href=#mutabletimedtrack>MutableTimedTrack</a> <span title=dom-media-addTrack>addTrack</span>(in DOMString label, in DOMString kind, in DOMString language);
   23661 <!--TT-->
   23662 };</pre>
   23663 
   23664   <p>The <dfn id=media-element-attributes>media element attributes</dfn>, <code title=attr-media-src><a href=#attr-media-src>src</a></code>, <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>, <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>, and <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>, apply to all <a href=#media-element title="media element">media elements</a>. They are defined in
   23665   this section.</p>
   23666 
   23667   <!-- proposed v2 (actually v3!) features:
   23668     * frame forward / backwards / step(n) while paused
   23669     * hasAudio, hasVideo, hasCaptions, etc
   23670     * per-frame control: get current frame; set current frame
   23671     * queue of content
   23672       - pause current stream and insert content at front of queue to play immediately
   23673       - pre-download another stream
   23674       - add stream(s) to play at end of current stream
   23675       - pause playback upon reaching a certain time
   23676       - playlists, with the ability to get metadata out of them (e.g. xspf)
   23677     * general meta data, implemented as getters (don't expose the whole thing)
   23678       - getMetadata(key: string, language: string) => HTMLImageElement or string
   23679       - onmetadatachanged (no context info)
   23680       - general custom metadata store (ratings, etc.)
   23681     * video: applying CSS filters
   23682     * an event to notify people of when the video size changes
   23683       (e.g. for chained Ogg streams of multiple independent videos)
   23684     * balance and 3D position audio
   23685     * audio filters
   23686     * audio synthesis (see <audio> section for use cases)
   23687     * feedback to the script on how well the video is playing
   23688        - frames per second?
   23689        - skipped frames per second?
   23690        - an event that reports playback difficulties?
   23691        - an arbitrary quality metric?
   23692     * bufferingRate/bufferingThrottled (see v3BUF)
   23693     * events for when the user agent's controls get shown or hidden
   23694       so that the author's controls can get away of the UA's
   23695   -->
   23696 
   23697   <!-- v2 features that already have experimental implementations:
   23698     * webkitPreservesPitch (for when playbackRate != 1.0)
   23699   -->
   23700 
   23701   <p><a href=#media-element title="media element">Media elements</a> are used to
   23702   present audio data, or video and audio data, to the user. This is
   23703   referred to as <dfn id=media-data>media data</dfn> in this section, since this
   23704   section applies equally to <a href=#media-element title="media element">media
   23705   elements</a> for audio or for video. The term <dfn id=media-resource>media
   23706   resource</dfn> is used to refer to the complete set of media data,
   23707   e.g. the complete video file, or complete audio file.</p>
   23708 
   23709   <div class=impl>
   23710 
   23711   <p>Except where otherwise specified, the <a href=#task-source>task source</a>
   23712   for all the tasks <a href=#queue-a-task title="queue a task">queued</a> in this
   23713   section and its subsections is the <dfn id=media-element-event-task-source>media element event task
   23714   source</dfn>.</p>
   23715 
   23716   </div>
   23717 
   23718 
   23719 
   23720   <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>
   23721 
   23722   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
   23723 
   23724    <dd>
   23725 
   23726     <p>Returns a <code><a href=#mediaerror>MediaError</a></code> object representing the
   23727     current error state of the element.</p>
   23728 
   23729     <p>Returns null if there is no error.</p>
   23730 
   23731    </dd>
   23732 
   23733   </dl><div class=impl>
   23734 
   23735   <p>All <a href=#media-element title="media element">media elements</a> have an
   23736   associated error status, which records the last error the element
   23737   encountered since its <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23738   algorithm</a> was last invoked. The <dfn id=dom-media-error title=dom-media-error><code>error</code></dfn> attribute, on
   23739   getting, must return the <code><a href=#mediaerror>MediaError</a></code> object created for
   23740   this last error, or null if there has not been an error.</p>
   23741 
   23742   </div>
   23743 
   23744   <pre class=idl>interface <dfn id=mediaerror>MediaError</dfn> {
   23745   const unsigned short <a href=#dom-mediaerror-media_err_aborted title=dom-MediaError-MEDIA_ERR_ABORTED>MEDIA_ERR_ABORTED</a> = 1;
   23746   const unsigned short <a href=#dom-mediaerror-media_err_network title=dom-MediaError-MEDIA_ERR_NETWORK>MEDIA_ERR_NETWORK</a> = 2;
   23747   const unsigned short <a href=#dom-mediaerror-media_err_decode title=dom-MediaError-MEDIA_ERR_DECODE>MEDIA_ERR_DECODE</a> = 3;
   23748   const unsigned short <a href=#dom-mediaerror-media_err_src_not_supported title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED>MEDIA_ERR_SRC_NOT_SUPPORTED</a> = 4;
   23749   readonly attribute unsigned short <a href=#dom-mediaerror-code title=dom-MediaError-code>code</a>;
   23750 };</pre>
   23751 
   23752   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code> . <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code></dt>
   23753 
   23754    <dd>
   23755 
   23756     <p>Returns the current error's error code, from the list below.</p>
   23757 
   23758    </dd>
   23759 
   23760   </dl><div class=impl>
   23761 
   23762   <p>The <dfn id=dom-mediaerror-code title=dom-MediaError-code><code>code</code></dfn>
   23763   attribute of a <code><a href=#mediaerror>MediaError</a></code> object must return the code
   23764   for the error, which must be one of the following:</p>
   23765 
   23766   </div>
   23767 
   23768   <dl><dt><dfn id=dom-mediaerror-media_err_aborted title=dom-MediaError-MEDIA_ERR_ABORTED><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)</dt>
   23769 
   23770    <dd>The fetching process for the <a href=#media-resource>media resource</a> was
   23771    aborted by the user agent at the user's request.</dd>
   23772 
   23773    <dt><dfn id=dom-mediaerror-media_err_network title=dom-MediaError-MEDIA_ERR_NETWORK><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)</dt>
   23774 
   23775    <dd>A network error of some description caused the user agent to
   23776    stop fetching the <a href=#media-resource>media resource</a>, after the resource
   23777    was established to be usable.</dd>
   23778 
   23779    <dt><dfn id=dom-mediaerror-media_err_decode title=dom-MediaError-MEDIA_ERR_DECODE><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)</dt>
   23780 
   23781    <dd>An error of some description occurred while decoding the
   23782    <a href=#media-resource>media resource</a>, after the resource was established to
   23783    be usable.</dd>
   23784 
   23785    <dt><dfn id=dom-mediaerror-media_err_src_not_supported title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)</dt>
   23786 
   23787    <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
   23788 
   23789   </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>
   23790 
   23791   <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
   23792   attribute on <a href=#media-element title="media element">media elements</a> gives
   23793   the address of the media resource (video, audio) to show. The
   23794   attribute, if present, must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty
   23795   URL potentially surrounded by spaces</a>.</p>
   23796 
   23797   <div class=impl>
   23798 
   23799   <p>If a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute of a
   23800   <a href=#media-element>media element</a> is set or changed, the user agent must
   23801   invoke the <a href=#media-element>media element</a>'s <a href=#media-element-load-algorithm>media element load
   23802   algorithm</a>. (<em>Removing</em> the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute does not do this, even
   23803   if there are <code><a href=#the-source-element>source</a></code> elements present.)</p>
   23804 
   23805   <p>The <dfn id=dom-media-src title=dom-media-src><code>src</code></dfn> IDL
   23806   attribute on <a href=#media-element title="media element">media elements</a> must
   23807   <a href=#reflect>reflect</a> the content attribute of the same name.</p>
   23808 
   23809   </div>
   23810 
   23811   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code></dt>
   23812 
   23813    <dd>
   23814 
   23815     <p>Returns the address of the current <a href=#media-resource>media resource</a>.</p>
   23816 
   23817     <p>Returns the empty string when there is no <a href=#media-resource>media resource</a>.</p>
   23818 
   23819    </dd>
   23820 
   23821   </dl><div class=impl>
   23822 
   23823   <p>The <dfn id=dom-media-currentsrc title=dom-media-currentSrc><code>currentSrc</code></dfn> IDL
   23824   attribute is initially the empty string. Its value is changed by the
   23825   <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23826   algorithm</a> defined below.</p>
   23827 
   23828   </div>
   23829 
   23830   <p class=note>There are two ways to specify a <a href=#media-resource>media
   23831   resource</a>, the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
   23832   attribute, or <code><a href=#the-source-element>source</a></code> elements. The attribute overrides
   23833   the elements.</p>
   23834 
   23835 
   23836 
   23837   <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>
   23838 
   23839   <p>A <a href=#media-resource>media resource</a> can be described in terms of its
   23840   <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
   23841   with a <code title="">codecs</code> parameter. <a href=#refsRFC4281>[RFC4281]</a></p>
   23842 
   23843   <p>Types are usually somewhat incomplete descriptions; for example
   23844   "<code title="">video/mpeg</code>" doesn't say anything except what
   23845   the container type is, and even a type like "<code title="">video/mp4; codecs="avc1.42E01E,
   23846   mp4a.40.2"</code>" doesn't include information like the actual
   23847   bitrate (only the maximum bitrate). Thus, given a type, a user agent
   23848   can often only know whether it <em>might</em> be able to play
   23849   media of that type (with varying levels of confidence), or whether
   23850   it definitely <em>cannot</em> play media of that type.</p>
   23851 
   23852   <p><dfn id=a-type-that-the-user-agent-knows-it-cannot-render>A type that the user agent knows it cannot render</dfn> is
   23853   one that describes a resource that the user agent definitely does
   23854   not support, for example because it doesn't recognize the container
   23855   type, or it doesn't support the listed codecs.</p>
   23856 
   23857   <p>The <a href=#mime-type>MIME type</a> "<code title="">application/octet-stream</code>" with no parameters is
   23858   never <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
   23859   render</a>. User agents must treat that type as equivalent to the
   23860   lack of any explicit <a href=#content-type title=Content-Type>Content-Type
   23861   metadata</a> when it is used to label a potential <a href=#media-resource>media
   23862   resource</a>.</p>
   23863 
   23864   <p class=note>In the absence of a <!-- pretty crazy -->
   23865   specification to the contrary, the <a href=#mime-type>MIME type</a> "<code title="">application/octet-stream</code>" when used <em>with</em>
   23866   parameters, e.g. "<code title="">application/octet-stream;codecs=theora</code>", <em>is</em>
   23867   <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot render</a>.</p>
   23868 
   23869   <dl class=domintro><dt><var title="">media</var> . <code title=dom-navigator-canPlayType><a href=#dom-navigator-canplaytype>canPlayType</a></code>(<var title="">type</var>)</dt>
   23870 
   23871    <dd>
   23872 
   23873     <p>Returns the empty string (a negative response), "maybe", or
   23874     "probably" based on how confident the user agent is that it can
   23875     play media resources of the given type.</p>
   23876 
   23877    </dd>
   23878 
   23879   </dl><div class=impl>
   23880 
   23881   <p>The <dfn id=dom-navigator-canplaytype title=dom-navigator-canPlayType><code>canPlayType(<var title="">type</var>)</code></dfn> method must return the empty
   23882   string if <var title="">type</var> is <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user
   23883   agent knows it cannot render</a>; it must return "<code title="">probably</code>" if the user agent is confident that the
   23884   type represents a <a href=#media-resource>media resource</a> that it can render if
   23885   used in with this <code><a href=#audio>audio</a></code> or <code><a href=#video>video</a></code> element;
   23886   and it must return "<code title="">maybe</code>"
   23887   otherwise. Implementors are encouraged to return "<code title="">maybe</code>" unless the type can be confidently
   23888   established as being supported or not. Generally, a user agent
   23889   should never return "<code title="">probably</code>" if the type
   23890   doesn't have a <code title="">codecs</code> parameter.</p>
   23891 
   23892   </div>
   23893 
   23894   <div class=example>
   23895 
   23896    <p>This script tests to see if the user agent supports a
   23897    (fictional) new format to dynamically decide whether to use a
   23898    <code><a href=#video>video</a></code> element or a plugin:</p>
   23899 
   23900    <pre>&lt;section id="video"&gt;
   23901  &lt;p&gt;&lt;a href="playing-cats.nfv"&gt;Download video&lt;/a&gt;&lt;/p&gt;
   23902 &lt;/section&gt;
   23903 &lt;script&gt;
   23904  var videoSection = document.getElementById('video');
   23905  var videoElement = document.createElement('video');
   23906  var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
   23907  if (support != "probably" &amp;&amp; "New Fictional Video Plug-in" in navigator.plugins) {
   23908    // not confident of browser support
   23909    // but we have a plugin
   23910    // so use plugin instead
   23911    videoElement = document.createElement("embed");
   23912  } else if (support == "") {
   23913    // no support from browser and no plugin
   23914    // do nothing
   23915    videoElement = null;
   23916  }
   23917  if (videoElement) {
   23918    while (videoSection.hasChildNodes())
   23919      videoSection.removeChild(videoSection.firstChild);
   23920    videoElement.setAttribute("src", "playing-cats.nfv");
   23921    videoSection.appendChild(videoElement);
   23922  }
   23923 &lt;/script&gt;</pre>
   23924 
   23925   </div>
   23926 
   23927   <p class=note>The <code title=attr-source-type><a href=#attr-source-type>type</a></code>
   23928   attribute of the <code><a href=#the-source-element>source</a></code> element allows the user agent
   23929   to avoid downloading resources that use formats it cannot
   23930   render.</p>
   23931 
   23932 
   23933   <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>
   23934 
   23935   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
   23936 
   23937    <dd>
   23938 
   23939     <p>Returns the current state of network activity for the element,
   23940     from the codes in the list below.</p>
   23941 
   23942    </dd>
   23943 
   23944   </dl><div class=impl>
   23945 
   23946   <p>As <a href=#media-element title="media element">media elements</a> interact
   23947   with the network, their current network activity is represented by
   23948   the <dfn id=dom-media-networkstate title=dom-media-networkState><code>networkState</code></dfn>
   23949   attribute. On getting, it must return the current network state of
   23950   the element, which must be one of the following values:</p>
   23951 
   23952   </div>
   23953 
   23954   <dl><dt><dfn id=dom-media-network_empty title=dom-media-NETWORK_EMPTY><code>NETWORK_EMPTY</code></dfn> (numeric value 0)</dt>
   23955 
   23956    <dd>The element has not yet been initialized. All attributes are in
   23957    their initial states.</dd>
   23958 
   23959    <dt><dfn id=dom-media-network_idle title=dom-media-NETWORK_IDLE><code>NETWORK_IDLE</code></dfn> (numeric value 1)</dt>
   23960 
   23961    <dd>The element<span class=impl>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23962    algorithm</a> is active and</span> has selected a <a href=#media-resource title="media resource">resource</a>, but it is not actually
   23963    using the network at this time.</dd>
   23964 
   23965    <dt><dfn id=dom-media-network_loading title=dom-media-NETWORK_LOADING><code>NETWORK_LOADING</code></dfn> (numeric value 2)</dt>
   23966 
   23967    <dd>The user agent is actively trying to download data.</dd>
   23968 
   23969    <dt><dfn id=dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)</dt>
   23970 
   23971    <dd>The element<span class=impl>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23972    algorithm</a> is active, but it</span> has failed to find a
   23973    <a href=#media-resource title="media resource">resource</a> to use.</dd>
   23974 
   23975   </dl><div class=impl>
   23976 
   23977   <p>The <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   23978   algorithm</a> defined below describes exactly when the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute changes
   23979   value and what events fire to indicate changes in this state.</p>
   23980 
   23981   </div>
   23982 
   23983 
   23984 
   23985 
   23986   <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>
   23987 
   23988   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
   23989 
   23990    <dd>
   23991 
   23992     <p>Causes the element to reset and start selecting and loading a
   23993     new <a href=#media-resource>media resource</a> from scratch.</p>
   23994 
   23995    </dd>
   23996 
   23997   </dl><div class=impl>
   23998 
   23999   <p>All <a href=#media-element title="media element">media elements</a> have an
   24000   <dfn id=autoplaying-flag>autoplaying flag</dfn>, which must begin in the true state, and
   24001   a <dfn id=delaying-the-load-event-flag>delaying-the-load-event flag</dfn>, which must begin in the
   24002   false state. While the <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> is
   24003   true, the element must <a href=#delay-the-load-event>delay the load event</a> of its
   24004   document.</p>
   24005 
   24006   <p>When the <dfn id=dom-media-load title=dom-media-load><code>load()</code></dfn>
   24007   method on a <a href=#media-element>media element</a> is invoked, the user agent
   24008   must run the <a href=#media-element-load-algorithm>media element load algorithm</a>.</p>
   24009 
   24010   <p>The <dfn id=media-element-load-algorithm>media element load algorithm</dfn> consists of the
   24011   following steps.</p>
   24012 
   24013   <ol><li><p>Abort any already-running instance of the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24014    algorithm</a> for this element.</li>
   24015 
   24016    <li>
   24017 
   24018     <p>If there are any <a href=#concept-task title=concept-task>tasks</a> from
   24019     the <a href=#media-element>media element</a>'s <a href=#media-element-event-task-source>media element event task
   24020     source</a> in one of the <a href=#task-queue title="task queue">task
   24021     queues</a>, then remove those tasks.</p>
   24022 
   24023     <p class=note>Basically, pending events and callbacks for the
   24024     media element are discarded when the media element starts loading
   24025     a new resource.</p>
   24026 
   24027    </li>
   24028 
   24029    <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is set to <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, <a href=#queue-a-task>queue a
   24030    task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-abort><a href=#event-media-abort>abort</a></code> at the <a href=#media-element>media
   24031    element</a>.</li>
   24032 
   24033    <li>
   24034 
   24035     <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is not set to
   24036     <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, then
   24037     run these substeps:</p>
   24038 
   24039     <ol><li><p>If a fetching process is in progress for the <a href=#media-element>media
   24040      element</a>, the user agent should stop it.</li>
   24041 
   24042      <li><p>Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24043      <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>.</li>
   24044 
   24045 <!--TT-->
   24046      <li><p><a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's media-resource-specific
   24047      timed tracks</a>.</li>
   24048 <!--TT-->
   24049 
   24050      <li><p>If <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is
   24051      not set to <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then set it
   24052      to that state.</li>
   24053 
   24054      <li><p>If the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code>
   24055      attribute is false, then set to true.</li>
   24056 
   24057      <li><p>If <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true,
   24058      set it to false.</li>
   24059 
   24060      <li><p>Set the <a href=#current-playback-position>current playback position</a> to
   24061      0.</li>
   24062 
   24063      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24064      event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the <a href=#media-element>media
   24065      element</a>.</li>
   24066 
   24067     </ol></li>
   24068 
   24069    <li><p>Set the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute to the
   24070    value of the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
   24071    attribute.</li>
   24072 
   24073    <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code> attribute
   24074    to null and the <a href=#autoplaying-flag>autoplaying flag</a> to true.</li>
   24075 
   24076    <li><p>Invoke the <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24077    algorithm</a>.</li>
   24078 
   24079    <li>
   24080 
   24081     <p class=note>Playback of any previously playing <a href=#media-resource>media
   24082     resource</a> for this element stops.</p>
   24083 
   24084    </li>
   24085 
   24086   </ol><p>The <dfn id=concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24087   algorithm</dfn> for a <a href=#media-element>media element</a> is as follows. This
   24088   algorithm is always invoked synchronously, but one of the first
   24089   steps in the algorithm is to return and continue running the
   24090   remaining steps asynchronously, meaning that it runs in the
   24091   background with scripts and other <a href=#concept-task title=concept-task>tasks</a> running in parallel. In addition,
   24092   this algorithm interacts closely with the <a href=#event-loop>event loop</a>
   24093   mechanism; in particular, it has <a href=#synchronous-section title="synchronous
   24094   section">synchronous sections</a> (which are triggered as part of
   24095   the <a href=#event-loop>event loop</a> algorithm). Steps in such sections are
   24096   marked with &#8987;.</p>
   24097 
   24098   <ol><!-- precondition: networkState == NETWORK_EMPTY at this point --><li><p>Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_NO_SOURCE><a href=#dom-media-network_no_source>NETWORK_NO_SOURCE</a></code>.</li>
   24099 
   24100    <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
   24101    the <a href=#concept-task title=concept-task>task</a> that invoked this
   24102    algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
   24103    consists of all the remaining steps of this algorithm until the
   24104    algorithm says the <a href=#synchronous-section>synchronous section</a> has
   24105    ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
   24106    sections</a> are marked with &#8987;.)</li>
   24107 
   24108    <li>
   24109 
   24110     <p>&#8987; If the <a href=#media-element>media element</a> has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute, then let <var title="">mode</var> be <i title="">attribute</i>.</p>
   24111 
   24112     <p>&#8987; Otherwise, if the <a href=#media-element>media element</a> does not
   24113     have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute but has a
   24114     <code><a href=#the-source-element>source</a></code> element child, then let <var title="">mode</var> be <i title="">children</i> and let <var title="">candidate</var> be the first such <code><a href=#the-source-element>source</a></code>
   24115     element child in <a href=#tree-order>tree order</a>.</p>
   24116 
   24117     <p>&#8987; Otherwise the <a href=#media-element>media element</a> has neither a
   24118     <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute nor a
   24119     <code><a href=#the-source-element>source</a></code> element child: set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, and abort
   24120     these steps; the <a href=#synchronous-section>synchronous section</a> ends.</p>
   24121 
   24122    </li>
   24123 
   24124    <li><p>&#8987; Set the <a href=#media-element>media element</a>'s
   24125    <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> to true (this <a href=#delay-the-load-event title="delay the load event">delays the load event</a>), and set
   24126    its <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to
   24127    <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</li>
   24128 
   24129    <li><p>&#8987; <a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24130    event</a> named <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code> at the <a href=#media-element>media
   24131    element</a>.</li>
   24132 
   24133    <li>
   24134 
   24135     <p>If <var title="">mode</var> is <i title="">attribute</i>, then
   24136     run these substeps:</p>
   24137 
   24138     <ol><li><p>&#8987; <i>Process candidate</i>: If the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute's value is the empty
   24139      string, then end the <a href=#synchronous-section>synchronous section</a>, and jump
   24140      down to the <i title="">failed</i> step below.</li>
   24141 
   24142      <li><p>&#8987; Let <var title="">absolute URL</var> be the
   24143      <a href=#absolute-url>absolute URL</a> that would have resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> the <a href=#url>URL</a>
   24144      specified by the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
   24145      attribute's value relative to the <a href=#media-element>media element</a> when
   24146      the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was last
   24147      changed.</p> <!-- i.e. changing xml:base or <base> after src=""
   24148      has no effect -->
   24149 
   24150      <li><p>&#8987; If <var title="">absolute URL</var> was obtained
   24151      successfully, set the <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li>
   24152 
   24153      <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
   24154      remaining steps asynchronously.</li>
   24155 
   24156      <li><p>If <var title="">absolute URL</var> was obtained
   24157      successfully, run the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
   24158      algorithm</a> with <var title="">absolute URL</var>. If that
   24159      algorithm returns without aborting <em>this</em> one, then the
   24160      load failed.</li>
   24161 
   24162      <li>
   24163 
   24164       <p><i>Failed</i>: Reaching this step indicates that the media
   24165       resource failed to load or that the given <a href=#url>URL</a> could
   24166       not be <a href=#resolve-a-url title="resolve a url">resolved</a>. In one
   24167       atomic operation, run the following steps:</p>
   24168 
   24169       <ol><li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
   24170        attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
   24171        <code title=dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED><a href=#dom-mediaerror-media_err_src_not_supported>MEDIA_ERR_SRC_NOT_SUPPORTED</a></code>.</li>
   24172 
   24173 <!--TT-->
   24174        <li><p><a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's media-resource-specific
   24175        timed tracks</a>.</li>
   24176 <!--TT-->
   24177 
   24178        <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24179        the <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a>
   24180        value.</li>
   24181 
   24182       </ol></li>
   24183 
   24184      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24185      event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
   24186      at the <a href=#media-element>media element</a>.</li>
   24187 
   24188      <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a>
   24189      to false. This stops <a href=#delay-the-load-event title="delay the load event">delaying
   24190      the load event</a>.</li>
   24191 
   24192      <li><p>Abort these steps. Until the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> method is invoked or the
   24193      <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute is changed, the
   24194      element won't attempt to load another resource.</li>
   24195      <!-- it took its ball and went home, sulking. -->
   24196 
   24197     </ol><p>Otherwise, the <code><a href=#the-source-element>source</a></code> elements will be used; run
   24198     these substeps:</p>
   24199 
   24200     <ol><li>
   24201 
   24202       <p>&#8987; Let <var title="">pointer</var> be a position
   24203       defined by two adjacent nodes in the <a href=#media-element>media
   24204       element</a>'s child list, treating the start of the list
   24205       (before the first child in the list, if any) and end of the list
   24206       (after the last child in the list, if any) as nodes in their own
   24207       right. One node is the node before <var title="">pointer</var>,
   24208       and the other node is the node after <var title="">pointer</var>. Initially, let <var title="">pointer</var> be the position between the <var title="">candidate</var> node and the next node, if there are
   24209       any, or the end of the list, if it is the last node.</p>
   24210 
   24211       <p>As nodes are inserted and removed into the <a href=#media-element>media
   24212       element</a>, <var title="">pointer</var> must be updated as
   24213       follows:</p>
   24214 
   24215       <dl><dt>If a new node is inserted between the two nodes that
   24216        define <var title="">pointer</var></dt>
   24217 
   24218        <dd>Let <var title="">pointer</var> be the point between the
   24219        node before <var title="">pointer</var> and the new node. In
   24220        other words, insertions at <var title="">pointer</var> go after
   24221        <var title="">pointer</var>.</dd>
   24222 
   24223        <dt>If the node before <var title="">pointer</var> is removed</dt>
   24224 
   24225        <dd>Let <var title="">pointer</var> be the point between the
   24226        node after <var title="">pointer</var> and the node before the
   24227        node after <var title="">pointer</var>. In other words, <var title="">pointer</var> doesn't move relative to the remaining
   24228        nodes.</dd>
   24229 
   24230        <dt>If the node after <var title="">pointer</var> is removed</dt>
   24231 
   24232        <dd>Let <var title="">pointer</var> be the point between the
   24233        node before <var title="">pointer</var> and the node after the
   24234        node before <var title="">pointer</var>. Just as with the
   24235        previous case, <var title="">pointer</var> doesn't move
   24236        relative to the remaining nodes.</dd>
   24237 
   24238       </dl><p>Other changes don't affect <var title="">pointer</var>.</p>
   24239 
   24240      </li>
   24241 
   24242      <li><p>&#8987; <i>Process candidate</i>: If <var title="">candidate</var> does not have a <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute, or if its <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute's value is the empty
   24243      string, then end the <a href=#synchronous-section>synchronous section</a>, and jump
   24244      down to the <i title="">failed</i> step below.</li>
   24245 
   24246      <li><p>&#8987; Let <var title="">absolute URL</var> be the
   24247      <a href=#absolute-url>absolute URL</a> that would have resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> the <a href=#url>URL</a>
   24248      specified by <var title="">candidate</var>'s <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute's value relative to
   24249      the <var title="">candidate</var> when the <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute was last
   24250      changed.</p> <!-- i.e. changing xml:base or <base> after src=""
   24251      has no effect -->
   24252 
   24253      <li><p>&#8987; If <var title="">absolute URL</var> was not
   24254      obtained successfully, then end the <a href=#synchronous-section>synchronous
   24255      section</a>, and jump down to the <i title="">failed</i> step
   24256      below.</li>
   24257 
   24258      <li><p>&#8987; If <var title="">candidate</var> has a <code title=attr-source-type><a href=#attr-source-type>type</a></code> attribute whose value, when
   24259      parsed as a <a href=#mime-type>MIME type</a> (including any codecs
   24260      described by the <code title="">codecs</code> parameter),
   24261      represents <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
   24262      render</a>, then end the <a href=#synchronous-section>synchronous section</a>, and
   24263      jump down to the <i title="">failed</i> step below.</li>
   24264 
   24265      <li><p>&#8987; If <var title="">candidate</var> has a <code title=attr-source-media><a href=#attr-source-media>media</a></code> attribute whose value does
   24266      not <a href=#matches-the-environment title="matches the environment">match the
   24267      environment</a>, then end the <a href=#synchronous-section>synchronous
   24268      section</a>, and jump down to the <i title="">failed</i> step
   24269      below.</li>
   24270 
   24271      <li><p>&#8987; Set the <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li>
   24272 
   24273      <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
   24274      remaining steps asynchronously.</li>
   24275 
   24276      <li><p>Run the <a href=#concept-media-load-resource title=concept-media-load-resource>resource
   24277      fetch algorithm</a> with <var title="">absolute URL</var>. If
   24278      that algorithm returns without aborting <em>this</em> one, then
   24279      the load failed.</li>
   24280 
   24281      <li><p><i title="">Failed</i>: <a href=#queue-a-task>Queue a task</a> to
   24282      <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <var title="">candidate</var> element, in the context of the <a href=#fetch title=fetch>fetching process</a> that was used to try to
   24283      obtain <var title="">candidate</var>'s corresponding <a href=#media-resource>media
   24284      resource</a> in the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
   24285      algorithm</a>.</li>
   24286 
   24287      <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
   24288      <a href=#synchronous-section>synchronous section</a> consists of all the remaining
   24289      steps of this algorithm until the algorithm says the
   24290      <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are
   24291      marked with &#8987;.)</li>
   24292 
   24293 <!--TT-->
   24294      <li><p>&#8987; <a href="#forget-the-media-element's-media-resource-specific-timed-tracks">Forget the media element's
   24295      media-resource-specific timed tracks</a>.</li>
   24296 <!--TT-->
   24297 
   24298      <li><p>&#8987; <i title="">Find next candidate</i>: Let <var title="">candidate</var> be null.</li>
   24299 
   24300      <li><p>&#8987; <i title="">Search loop</i>: If the node after
   24301      <var title="">pointer</var> is the end of the list, then jump to
   24302      the <i title="">waiting</i> step below.</li>
   24303 
   24304      <li><p>&#8987; If the node after <var title="">pointer</var> is
   24305      a <code><a href=#the-source-element>source</a></code> element, let <var title="">candidate</var>
   24306      be that element.</li>
   24307 
   24308      <li><p>&#8987; Advance <var title="">pointer</var> so that the
   24309      node before <var title="">pointer</var> is now the node that was
   24310      after <var title="">pointer</var>, and the node after <var title="">pointer</var> is the node after the node that used to be
   24311      after <var title="">pointer</var>, if any.</li>
   24312 
   24313      <li><p>&#8987; If <var title="">candidate</var> is null, jump
   24314      back to the <i title="">search loop</i> step. Otherwise, jump
   24315      back to the <i title="">process candidate</i> step.</li>
   24316 
   24317      <li><p>&#8987; <i title="">Waiting</i>: Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24318      the <a href=#dom-media-network_no_source title=dom-media-NETWORK_NO_SOURCE>NETWORK_NO_SOURCE</a>
   24319      value.</li>
   24320 
   24321      <li><p>&#8987; Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24322      flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
   24323      event">delaying the load event</a>.</li>
   24324 
   24325      <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
   24326      remaining steps asynchronously.</li>
   24327 
   24328      <li><p>Wait until the node after <var title="">pointer</var> is a
   24329      node other than the end of the list. (This step might wait
   24330      forever.)</li>
   24331 
   24332      <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
   24333      <a href=#synchronous-section>synchronous section</a> consists of all the remaining
   24334      steps of this algorithm until the algorithm says the
   24335      <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are
   24336      marked with &#8987;.)</li>
   24337 
   24338      <li><p>&#8987; Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24339      flag</a> back to true (this <a href=#delay-the-load-event title="delay the load
   24340      event">delays the load event</a> again, in case it hasn't been
   24341      fired yet).</p>
   24342 
   24343      <li><p>&#8987; Set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> back to <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</li>
   24344 
   24345      <li><p>&#8987; Jump back to the <i title="">find next
   24346      candidate</i> step above.</li>
   24347 
   24348     </ol></li>
   24349 
   24350   </ol><p>The <dfn id=concept-media-load-resource title=concept-media-load-resource>resource fetch
   24351   algorithm</dfn> for a <a href=#media-element>media element</a> and a given
   24352   <a href=#absolute-url>absolute URL</a> is as follows:</p>
   24353 
   24354   <ol><li><p>Let the <var title="">current media resource</var> be the
   24355    resource given by the <a href=#absolute-url>absolute URL</a> passed to this
   24356    algorithm. This is now the element's <a href=#media-resource>media
   24357    resource</a>.</li>
   24358 
   24359    <li>
   24360 
   24361     <p>Begin to <a href=#fetch>fetch</a> the <var title="">current media
   24362     resource</var>, from the <a href=#media-element>media element</a>'s
   24363     <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>.</p> <!-- not
   24364     http-origin privacy sensitive (looking forward to CORS here) -->
   24365 
   24366     <p>Every 350ms (&plusmn;200ms) or for every byte received, whichever
   24367     is <em>least</em> frequent, <a href=#queue-a-task>queue a task</a> to
   24368     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-progress><a href=#event-media-progress>progress</a></code> at the element.</p>
   24369 
   24370     <p>If at any point the user agent has received no data for more
   24371     than about three seconds, then <a href=#queue-a-task>queue a task</a> to
   24372     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> at the element.</p>
   24373 
   24374     <p>User agents may allow users to selectively block or slow
   24375     <a href=#media-data>media data</a> downloads. When a <a href=#media-element>media
   24376     element</a>'s download has been blocked altogether, the user
   24377     agent must act as if it was stalled (as opposed to acting as if
   24378     the connection was closed). The rate of the download may also be
   24379     throttled automatically by the user agent, e.g. to balance the
   24380     download with other connections sharing the same bandwidth.</p>
   24381 
   24382     <p>User agents may decide to not download more content at any
   24383     time, e.g. after buffering five minutes of a one hour media
   24384     resource, while waiting for the user to decide whether to play the
   24385     resource or not, or while waiting for user input in an interactive
   24386     resource. When a <a href=#media-element>media element</a>'s download has been
   24387     suspended, the user agent must set the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> and <a href=#queue-a-task>queue
   24388     a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code> at the element. If and
   24389     when downloading of the resource resumes, the user agent must set
   24390     the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> to
   24391     <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</p>
   24392 
   24393     <p class=note>The <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute provides a
   24394     hint regarding how much buffering the author thinks is advisable,
   24395     even in the absence of the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute.</p>
   24396 
   24397     <p>When a user agent decides to completely stall a download,
   24398     e.g. if it is waiting until the user starts playback before
   24399     downloading any further content, the element's
   24400     <a href=#delaying-the-load-event-flag>delaying-the-load-event flag</a> must be set to
   24401     false. This stops <a href=#delay-the-load-event title="delay the load event">delaying the
   24402     load event</a>.</p>
   24403 
   24404     <p>The user agent may use whatever means necessary to fetch the
   24405     resource (within the constraints put forward by this and other
   24406     specifications); for example, reconnecting to the server in the
   24407     face of network errors, using HTTP range retrieval requests, or
   24408     switching to a streaming protocol. The user agent must consider a
   24409     resource erroneous only if it has given up trying to fetch it.</p>
   24410 
   24411     <p>The <a href=#networking-task-source>networking task source</a> <a href=#concept-task title=concept-task>tasks</a> to process the data as it is
   24412     being fetched must, when appropriate, include the relevant
   24413     substeps from the following list:</p>
   24414 
   24415     <dl class=switch><dt>If the <a href=#media-data>media data</a> cannot be fetched at all, due
   24416      to network errors, causing the user agent to give up trying to
   24417      fetch the resource</dt>
   24418 
   24419      <dt>If the <a href=#media-resource>media resource</a> is found to have <a href=#content-type title=Content-Type>Content-Type metadata</a> that, when
   24420      parsed as a <a href=#mime-type>MIME type</a> (including any codecs
   24421      described by the <code title="">codecs</code> parameter),
   24422      represents <a href=#a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
   24423      render</a> (even if the actual <a href=#media-data>media data</a> is in a
   24424      supported format)</dt>
   24425 
   24426      <dt>If the <a href=#media-data>media data</a> can be fetched but is found by
   24427      inspection to be in an unsupported format, or can otherwise not
   24428      be rendered at all</dt>
   24429 
   24430      <dd>
   24431 
   24432       <p>DNS errors, HTTP 4xx and 5xx errors (and equivalents in
   24433       other protocols), and other fatal network errors that occur
   24434       before the user agent has established whether the <var title="">current media resource</var> is usable, as well as
   24435       the file using an unsupported container format, or using
   24436       unsupported codecs for all the data, must cause the user agent
   24437       to execute the following steps:</p>
   24438 
   24439       <ol><li><p>The user agent should cancel the fetching
   24440        process.</li>
   24441 
   24442        <li><p>Abort this subalgorithm, returning to the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24443        algorithm</a>.</p>
   24444 
   24445       </ol></dd>
   24446 
   24447 
   24448      <!-- insert content sniffing here if we want to define that -->
   24449      <!-- (in practice I don't think that's necessary since it's not
   24450      like you can do anything with the resource if you sniff it as the
   24451      wrong type) -->
   24452 
   24453 
   24454      <dt id=getting-media-metadata>Once enough of the <a href=#media-data>media
   24455      data</a> has been fetched to determine the duration of the
   24456      <a href=#media-resource>media resource</a>, its dimensions, and other
   24457      metadata,
   24458 <!--TT-->
   24459      and once <a href=#the-timed-tracks-are-ready>the timed tracks are ready</a>
   24460 <!--TT-->
   24461      </dt>
   24462 
   24463      <dd>
   24464 
   24465       <p>This indicates that the resource is usable. The user agent
   24466       must follow these substeps:</p>
   24467 
   24468       <ol><li><p>Set the <a href=#current-playback-position>current playback position</a> to the
   24469        <a href=#earliest-possible-position>earliest possible position</a>.</li>
   24470 
   24471        <li><p>Set the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute to
   24472        <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>.</li>
   24473 
   24474        <li><p>For <code><a href=#video>video</a></code> elements, set the <code title=dom-video-videoWidth><a href=#dom-video-videowidth>videoWidth</a></code> and <code title=dom-video-videoHeight><a href=#dom-video-videoheight>videoHeight</a></code>
   24475        attributes.</li>
   24476 
   24477        <li>
   24478 
   24479         <p>Set the <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code>
   24480         attribute to the duration of the resource.</p>
   24481 
   24482         <p class=note>The user agent <a href=#durationChange>will</a> <a href=#queue-a-task>queue a task</a> to
   24483         <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> at the
   24484         element at this point.</p>
   24485 
   24486        </li>
   24487 
   24488        <li id=fire-loadedmetadata>
   24489 
   24490         <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24491         event</a> named <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> at the
   24492         element.</p>
   24493 
   24494         <p class=note>Before this task is run, as part of the event
   24495         loop mechanism, the rendering will have been updated to resize
   24496         the <code><a href=#video>video</a></code> element if appropriate.</p>
   24497 
   24498        </li>
   24499 
   24500        <li>
   24501 
   24502         <p>If either the <a href=#media-resource>media resource</a> or the address
   24503         of the <var title="">current media resource</var> indicate a
   24504         particular start time, then <a href=#dom-media-seek title=dom-media-seek>seek</a> to that time. Ignore any
   24505         resulting exceptions (if the position is out of range, it is
   24506         effectively ignored).</p>
   24507 
   24508         <p class=example>For example, a fragment identifier could be
   24509         used to indicate a start position.</p>
   24510 
   24511        </li>
   24512 
   24513        <li>
   24514 
   24515         <p>Once the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute
   24516         reaches <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
   24517         <a href=#fire-loadeddata>after the <code title=event-media-loadeddata>loadeddata</code> event has been
   24518         fired</a>, set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24519         flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
   24520         event">delaying the load event</a>.</p>
   24521 
   24522         <p class=note>A user agent that is attempting to reduce
   24523         network usage while still fetching the metadata for each
   24524         <a href=#media-resource>media resource</a> would also stop buffering at this
   24525         point, causing the <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute
   24526         to switch to the <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value.</p>
   24527 
   24528        </li>
   24529 
   24530       </ol><p class=note>The user agent is <em>required</em> to
   24531       determine the duration of the <a href=#media-resource>media resource</a> and
   24532       go through this step before playing.</p> <!-- actually defined
   24533       in the 'duration' section -->
   24534 
   24535      </dd>
   24536 
   24537 
   24538      <dt>Once the entire <a href=#media-resource>media resource</a> has been <a href=#fetch title=fetch>fetched</a> (but potentially before any of it
   24539      has been decoded)</dt>
   24540 
   24541      <dd>
   24542 
   24543       <p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   24544       named <code title=event-media-progress><a href=#event-media-progress>progress</a></code> at the
   24545       <a href=#media-element>media element</a>.</p>
   24546 
   24547      </dd>
   24548 
   24549 
   24550      <dt>If the connection is interrupted, causing the user agent to
   24551      give up trying to fetch the resource</dt>
   24552 
   24553      <dd>
   24554 
   24555       <p>Fatal network errors that occur after the user agent has
   24556       established whether the <var title="">current media
   24557       resource</var> is usable must cause the user agent to execute
   24558       the following steps:</p>
   24559 
   24560       <ol><li><p>The user agent should cancel the fetching
   24561        process.</li>
   24562 
   24563        <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
   24564        attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
   24565        <code title=dom-MediaError-MEDIA_ERR_NETWORK><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code>.</li>
   24566 
   24567        <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24568        event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
   24569        at the <a href=#media-element>media element</a>.</li>
   24570 
   24571        <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24572        the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
   24573        value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24574        event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the
   24575        element.</li> <!-- XXX shouldn't this be _IDLE? see
   24576        aborted-by-user state below -->
   24577 
   24578        <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24579        flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
   24580        event">delaying the load event</a>.</li>
   24581 
   24582        <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24583        algorithm</a>.</li>
   24584 
   24585       </ol></dd>
   24586 
   24587 
   24588      <dt id=fatal-decode-error>If the <a href=#media-data>media data</a> is
   24589      corrupted</dt>
   24590 
   24591      <dd>
   24592 
   24593       <p>Fatal errors in decoding the <a href=#media-data>media data</a> that
   24594       occur after the user agent has established whether the <var title="">current media resource</var> is usable must cause the
   24595       user agent to execute the following steps:</p>
   24596 
   24597       <ol><li><p>The user agent should cancel the fetching
   24598        process.</li>
   24599 
   24600        <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
   24601        attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
   24602        <code title=dom-MediaError-MEDIA_ERR_DECODE><a href=#dom-mediaerror-media_err_decode>MEDIA_ERR_DECODE</a></code>.</li>
   24603 
   24604        <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24605        event</a> named <code title=event-media-error><a href=#event-media-error>error</a></code>
   24606        at the <a href=#media-element>media element</a>.</li>
   24607 
   24608        <li><p>Set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24609        the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
   24610        value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24611        event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the
   24612        element.</li> <!-- XXX shouldn't this be _IDLE? see
   24613        aborted-by-user case below -->
   24614 
   24615        <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24616        flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
   24617        event">delaying the load event</a>.</li>
   24618 
   24619        <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24620        algorithm</a>.</li>
   24621 
   24622       </ol></dd>
   24623 
   24624 
   24625      <dt>If the <a href=#media-data>media data</a> fetching process is aborted by
   24626      the user</dt>
   24627 
   24628      <dd>
   24629 
   24630       <p>The fetching process is aborted by the user, e.g. because the
   24631       user navigated the browsing context to another page, the user
   24632       agent must execute the following steps. These steps are not
   24633       followed if the <code title=dom-media-load><a href=#dom-media-load>load()</a></code>
   24634       method itself is invoked while these steps are running, as the
   24635       steps above handle that particular kind of abort.</p>
   24636 
   24637       <ol><li><p>The user agent should cancel the fetching
   24638        process.</li>
   24639 
   24640        <li><p>Set the <code title=dom-media-error><a href=#dom-media-error>error</a></code>
   24641        attribute to a new <code><a href=#mediaerror>MediaError</a></code> object whose <code title=dom-MediaError-code><a href=#dom-mediaerror-code>code</a></code> attribute is set to
   24642        <code title=dom-MediaError-MEDIA_ERR_ABORTED><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>.</li>
   24643 
   24644        <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24645        event</a> named <code title=event-media-abort><a href=#event-media-abort>abort</a></code>
   24646        at the <a href=#media-element>media element</a>.</li>
   24647 
   24648        <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has a
   24649        value equal to <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, set the
   24650        element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24651        the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>
   24652        value and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   24653        event</a> named <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code>
   24654        at the element. Otherwise, set the element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute to
   24655        the <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>
   24656        value.</li>
   24657 
   24658        <li><p>Set the element's <a href=#delaying-the-load-event-flag>delaying-the-load-event
   24659        flag</a> to false. This stops <a href=#delay-the-load-event title="delay the load
   24660        event">delaying the load event</a>.</li>
   24661 
   24662        <li><p>Abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24663        algorithm</a>.</li>
   24664 
   24665       </ol></dd>
   24666 
   24667 
   24668      <dt id=non-fatal-media-error>If the <a href=#media-data>media data</a> can
   24669      be fetched but has non-fatal errors or uses, in part, codecs that
   24670      are unsupported, preventing the user agent from rendering the
   24671      content completely correctly but not preventing playback
   24672      altogether</dt>
   24673 
   24674      <dd>
   24675 
   24676       <p>The server returning data that is partially usable but cannot
   24677       be optimally rendered must cause the user agent to render just
   24678       the bits it can handle, and ignore the rest.</p>
   24679 
   24680       <!-- v2: fire a 'warning' event and set the 'error' flag to 'MEDIA_ERR_SUBOPTIMAL' or something -->
   24681 
   24682      </dd>
   24683 
   24684 
   24685 <!--TT-->
   24686      <dt id=found-a-media-resource-specific-timed-track>If the <a href=#media-resource>media resource</a> is found to declare a <a href=#media-resource-specific-timed-track>media-resource-specific timed track</a> that the user agent supports</dt>
   24687 
   24688      <dd>
   24689 
   24690       <p>Run the <a href=#steps-to-expose-a-media-resource-specific-timed-track>steps to expose a media-resource-specific timed
   24691       track</a> with the relevant data.</p>
   24692 
   24693      </dd>
   24694 <!--TT-->
   24695 
   24696     </dl><p>When the <a href=#networking-task-source>networking task source</a> has <a href=#queue-a-task title="queue a task">queued</a> the last <a href=#concept-task title=concept-task>task</a> as part of <a href=#fetch title=fetch>fetching</a> the <a href=#media-resource>media resource</a>
   24697     (i.e. once the download has completed), if the fetching process
   24698     completes without errors, including decoding the media data, and
   24699     if all of the data is available to the user agent without network
   24700     access, then, the user agent must move on to the next step. This
   24701     might never happen, e.g. when streaming an infinite resource such
   24702     as Web radio, or if the resource is longer than the user agent's
   24703     ability to cache data.</p>
   24704 
   24705     <p>While the user agent might still need network access to obtain
   24706     parts of the <a href=#media-resource>media resource</a>, the user agent must
   24707     remain on this step.</p>
   24708 
   24709     <p class=example>For example, if the user agent has discarded
   24710     the first half of a video, the user agent will remain at this step
   24711     even once the <a href=#ended-playback title="ended playback">playback has
   24712     ended</a>, because there is always the chance the user will
   24713     seek back to the start. In fact, in this situation, once <a href=#ended-playback title="ended playback">playback has ended</a>, the user agent
   24714     will end up dispatching a <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> event, as described
   24715     earlier.</p>
   24716 
   24717    </li>
   24718 
   24719    <li><p>If the user agent ever reaches this step (which can only
   24720    happen if the entire resource gets loaded and kept available):
   24721    abort the overall <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   24722    algorithm</a>.</li>
   24723 
   24724   </ol></div>
   24725 
   24726   <hr><p>The <dfn id=attr-media-preload title=attr-media-preload><code>preload</code></dfn>
   24727   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following table
   24728   lists the keywords and states for the attribute &mdash; the keywords
   24729   in the left column map to the states in the cell in the second
   24730   column on the same row as the keyword.</p>
   24731 
   24732   <table><thead><tr><th> Keyword
   24733      <th> State
   24734      <th> Brief description
   24735    <tbody><tr><td><dfn id=attr-media-preload-none title=attr-media-preload-none><code>none</code></dfn>
   24736      <td><dfn id=attr-media-preload-none-state title=attr-media-preload-none-state>None</dfn>
   24737      <td>Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic.
   24738     <tr><td><dfn id=attr-media-preload-metadata title=attr-media-preload-metadata><code>metadata</code></dfn>
   24739      <td><dfn id=attr-media-preload-metadata-state title=attr-media-preload-metadata-state>Metadata</dfn>
   24740      <td>Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, first frame, track list, duration, etc) is reasonable.
   24741     <tr><td><dfn id=attr-media-preload-auto title=attr-media-preload-auto><code>auto</code></dfn>
   24742      <td><dfn id=attr-media-preload-auto-state title=attr-media-preload-auto-state>Automatic</dfn>
   24743      <td>Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
   24744   </table><p>The empty string is also a valid keyword, and maps to the <a href=#attr-media-preload-auto-state title=attr-media-preload-auto-state>Automatic</a> state. The
   24745   attribute's <i>missing value default</i> is user-agent defined,
   24746   though the <a href=#attr-media-preload-auto-state title=attr-media-preload-auto-state>Metadata</a> state is
   24747   suggested as a compromise between reducing server load and providing
   24748   an optimal user experience.</p>
   24749 
   24750   <div class=impl>
   24751 
   24752   <p>The <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute is
   24753   intended to provide a hint to the user agent about what the author
   24754   thinks will lead to the best user experience. The attribute may be
   24755   ignored altogether, for example based on explicit user preferences
   24756   or based on the available connectivity.</p>
   24757 
   24758   <p>The <dfn id=dom-media-preload title=dom-media-preload><code>preload</code></dfn> IDL
   24759   attribute must <a href=#reflect>reflect</a> the content attribute of the
   24760   same name.</p>
   24761 
   24762   </div>
   24763 
   24764   <p class=note>The <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute can overrride
   24765   the <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute (since
   24766   if the media plays, it naturally has to buffer first, regardless of
   24767   the hint given by the <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute). Including
   24768   both is not an error, however.</p>
   24769 
   24770   <hr><!--v3BUF (when readding this, also add a domintro block)
   24771   <p>The <dfn
   24772   title="dom-media-bufferingRate"><code>bufferingRate</code></dfn>
   24773   attribute must return the average number of bits received per second
   24774   for the current download over the past few seconds. If there is no
   24775   download in progress, the attribute must return 0.</p>
   24776 
   24777   <p>The <dfn
   24778   title="dom-media-bufferingThrottled"><code>bufferingThrottled</code></dfn>
   24779   attribute must return true if the user agent is intentionally
   24780   throttling the bandwidth used by the download (including when
   24781   throttling to zero to pause the download altogether), and false
   24782   otherwise.</p>
   24783 
   24784   <hr>
   24785 --><dl class=domintro><dt><var title="">media</var> . <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code></dt>
   24786 
   24787    <dd>
   24788 
   24789     <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
   24790     ranges of the <a href=#media-resource>media resource</a> that the user agent has
   24791     buffered.</p>
   24792 
   24793    </dd>
   24794 
   24795   </dl><div class=impl>
   24796 
   24797   <p>The <dfn id=dom-media-buffered title=dom-media-buffered><code>buffered</code></dfn>
   24798   attribute must return a new static <a href=#normalized-timeranges-object>normalized
   24799   <code>TimeRanges</code> object</a> that represents the ranges of
   24800   the <a href=#media-resource>media resource</a>, if any, that the user agent has
   24801   buffered, at the time the attribute is evaluated. Users agents must
   24802   accurately determine the ranges available, even for media streams
   24803   where this can only be determined by tedious inspection.</p>
   24804 
   24805   <p class=note>Typically this will be a single range anchored at
   24806   the zero point, but if, e.g. the user agent uses HTTP range requests
   24807   in response to seeking, then there could be multiple ranges.</p>
   24808 
   24809   <p>User agents may discard previously buffered data.</p>
   24810 
   24811   <p class=note>Thus, a time position included within a range of the
   24812   objects return by the <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code> attribute at one time can
   24813   end up being not included in the range(s) of objects returned by the
   24814   same attribute at later times.</p>
   24815 
   24816   </div>
   24817 
   24818 
   24819 
   24820   <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>
   24821 
   24822   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
   24823 
   24824    <dd>
   24825 
   24826     <p>Returns the length of the <a href=#media-resource>media resource</a>, in
   24827     seconds.</p>
   24828 
   24829     <p>Returns NaN if the duration isn't available.<p>
   24830 
   24831     <p>Returns Infinity for unbounded streams.</p>
   24832 
   24833    </dd>
   24834 
   24835    <dt><var title="">media</var> . <code title=dom-media-currentTime><a href=#dom-media-currenttime>currentTime</a></code> [ = <var title="">value</var> ]</dt>
   24836 
   24837    <dd>
   24838 
   24839     <p>Returns the <a href=#current-playback-position>current playback position</a>, in seconds.</p>
   24840 
   24841     <p>Can be set, to seek to the given time.<p>
   24842 
   24843     <p>Will throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there
   24844     is no selected <a href=#media-resource>media resource</a>. Will throw an
   24845     <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given time is not
   24846     within the ranges to which the user agent can seek.</p>
   24847 
   24848    </dd>
   24849 
   24850    <dt><var title="">media</var> . <code title=dom-media-startTime><a href=#dom-media-starttime>startTime</a></code></dt>
   24851 
   24852    <dd>
   24853 
   24854     <p>Returns the <a href=#earliest-possible-position>earliest possible position</a>, in
   24855     seconds. This is the time for the start of the current clip. It
   24856     might not be zero if the clip's timeline is not zero-based, or if
   24857     the resource is a streaming resource (in which case it gives the
   24858     earliest time that the user agent is able to seek back to).</p>
   24859 
   24860    </dd>
   24861 
   24862   </dl><div class=impl>
   24863 
   24864   <p>The <dfn id=dom-media-duration title=dom-media-duration><code>duration</code></dfn>
   24865   attribute must return the length of the <a href=#media-resource>media resource</a>,
   24866   in seconds. If no <a href=#media-data>media data</a> is available, then the
   24867   attributes must return the Not-a-Number (NaN) value. If the
   24868   <a href=#media-resource>media resource</a> is known to be unbounded (e.g. a
   24869   streaming radio), then the attribute must return the positive
   24870   Infinity value.</p>
   24871 
   24872   <p>The user agent must determine the duration of the <a href=#media-resource>media
   24873   resource</a> before playing any part of the <a href=#media-data>media
   24874   data</a> and before setting <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> to a value equal to
   24875   or greater than <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, even if doing
   24876   so requires seeking to multiple parts of the resource.</p>
   24877 
   24878   <p id=durationChange>When the length of the <a href=#media-resource>media
   24879   resource</a> changes (e.g. from being unknown to known, or from a
   24880   previously established length to a new length) the user agent must
   24881   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
   24882   <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> at the
   24883   <a href=#media-element>media element</a>.</p>
   24884 
   24885   <p class=example>If an "infinite" stream ends for some reason,
   24886   then the duration would change from positive Infinity to the time of
   24887   the last frame or sample in the stream, and the <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event would be
   24888   fired. Similarly, if the user agent initially estimated the
   24889   <a href=#media-resource>media resource</a>'s duration instead of determining it
   24890   precisely, and later revises the estimate based on new information,
   24891   then the duration would change and the <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event would be
   24892   fired.</p>
   24893 
   24894   <p><a href=#media-element title="media element">Media elements</a> have a
   24895   <dfn id=current-playback-position>current playback position</dfn>, which must initially be
   24896   zero. The current position is a time.</p>
   24897 
   24898   <p>The <dfn id=dom-media-currenttime title=dom-media-currentTime><code>currentTime</code></dfn>
   24899   attribute must, on getting, return the <a href=#current-playback-position>current playback
   24900   position</a>, expressed in seconds. On setting, the user agent
   24901   must <a href=#dom-media-seek title=dom-media-seek>seek</a> to the new value
   24902   (which might raise an exception).</p>
   24903 
   24904   <p>If the <a href=#media-resource>media resource</a> is a streaming resource, then
   24905   the user agent might be unable to obtain certain parts of the
   24906   resource after it has expired from its buffer. Similarly, some <a href=#media-resource title="media resource">media resources</a> might have a timeline
   24907   that doesn't start at zero. The <dfn id=earliest-possible-position>earliest possible
   24908   position</dfn> is the earliest position in the stream or resource
   24909   that the user agent can ever obtain again.</p>
   24910 
   24911   <p>The <dfn id=dom-media-starttime title=dom-media-startTime><code>startTime</code></dfn>
   24912   attribute must, on getting, return the <a href=#earliest-possible-position>earliest possible
   24913   position</a>, expressed in seconds.</p>
   24914 
   24915   <p>When the <a href=#earliest-possible-position>earliest possible position</a> changes, then:
   24916   if the <a href=#current-playback-position>current playback position</a> is before the
   24917   <a href=#earliest-possible-position>earliest possible position</a>, the user agent must <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
   24918   position</a>; otherwise, if the user agent has not fired a <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event at the
   24919   element in the past 15 to 250ms and is not still running event
   24920   handlers for such an event, then the user agent must <a href=#queue-a-task>queue a
   24921   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>
   24922 
   24923   <p class=note>Because of the above requirement and the requirement
   24924   in the <a href=#concept-media-load-resource title=concept-media-load-resource>resource fetch
   24925   algorithm</a> that kicks in <a href=#getting-media-metadata>when the metadata of the clip becomes
   24926   known</a>, the <a href=#current-playback-position>current playback position</a> can never be
   24927   less than the <a href=#earliest-possible-position>earliest possible position</a>.</p>
   24928 
   24929   <p>User agents must act as if the timeline of the <a href=#media-resource>media
   24930   resource</a> increases linearly starting from the <a href=#earliest-possible-position>earliest
   24931   possible position</a>, even if the underlying <a href=#media-data>media
   24932   data</a> has out-of-order or even overlapping time codes.</p>
   24933 
   24934   <p class=example>For example, if two clips have been concatenated
   24935   into one video file, but the video format exposes the original times
   24936   for the two clips, the video data might expose a timeline that goes,
   24937   say, 00:15..00:29 and then 00:05..00:38. However, the user agent
   24938   would not expose those times; it would instead expose the times as
   24939   00:15..00:29 and 00:29..01:02, as a single video.</p>
   24940 
   24941   </div>
   24942 
   24943   <p>The <dfn id=attr-media-loop title=attr-media-loop><code>loop</code></dfn>
   24944   attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if specified,
   24945   indicates that the <a href=#media-element>media element</a> is to seek back to the
   24946   start of the <a href=#media-resource>media resource</a> upon reaching the end.</p>
   24947 
   24948   <div class=impl>
   24949 
   24950   <p>The <dfn id=dom-media-loop title=dom-media-loop><code>loop</code></dfn> IDL
   24951   attribute must <a href=#reflect>reflect</a> the content attribute of the
   24952   same name.</p>
   24953 
   24954   </div>
   24955 
   24956 
   24957 
   24958   <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>
   24959 
   24960   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
   24961 
   24962    <dd>
   24963 
   24964     <p>Returns a value that expresses the current state of the element
   24965     with respect to rendering the <a href=#current-playback-position>current playback
   24966     position</a>, from the codes in the list below.</p>
   24967 
   24968    </dd>
   24969 
   24970   </dl><div class=impl>
   24971 
   24972   <p><a href=#media-element title="media element">Media elements</a> have a
   24973   <i>ready state</i>, which describes to what degree they are ready
   24974   to be rendered at the <a href=#current-playback-position>current playback position</a>. The
   24975   possible values are as follows; the ready state of a media element
   24976   at any particular time is the greatest value describing the state of
   24977   the element:</p>
   24978 
   24979   </div>
   24980 
   24981   <dl><dt><dfn id=dom-media-have_nothing title=dom-media-HAVE_NOTHING><code>HAVE_NOTHING</code></dfn> (numeric value 0)</dt>
   24982 
   24983    <dd>No information regarding the <a href=#media-resource>media resource</a> is
   24984    available. No data for the <a href=#current-playback-position>current playback position</a>
   24985    is available. <a href=#media-element title="media element">Media elements</a>
   24986    whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code>
   24987    attribute are set to <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> are always in
   24988    the <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>
   24989    state.</dd>
   24990 
   24991    <dt><dfn id=dom-media-have_metadata title=dom-media-HAVE_METADATA><code>HAVE_METADATA</code></dfn> (numeric value 1)</dt>
   24992 
   24993    <dd>Enough of the resource has been obtained that the duration of
   24994    the resource is available. In the case of a <code><a href=#video>video</a></code>
   24995    element, the dimensions of the video are also available. The API
   24996    will no longer raise an exception when seeking. No <a href=#media-data>media
   24997    data</a> is available for the immediate <a href=#current-playback-position>current playback
   24998    position</a>.
   24999 <!--TT-->
   25000    The <a href=#timed-track title="timed track">timed tracks</a>
   25001    are <a href=#the-timed-tracks-are-ready title="the timed tracks are ready">ready</a>.
   25002 <!--TT-->
   25003    </dd>
   25004 
   25005    <dt><dfn id=dom-media-have_current_data title=dom-media-HAVE_CURRENT_DATA><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)</dt>
   25006 
   25007    <dd>Data for the immediate <a href=#current-playback-position>current playback position</a>
   25008    is available, but either not enough data is available that the user
   25009    agent could successfully advance the <a href=#current-playback-position>current playback
   25010    position</a> in the <a href=#direction-of-playback>direction of playback</a> at all
   25011    without immediately reverting to the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, or
   25012    there is no more data to obtain in the <a href=#direction-of-playback>direction of
   25013    playback</a>. For example, in video this corresponds to the user
   25014    agent having data from the current frame, but not the next frame;
   25015    and to when <a href=#ended-playback title="ended playback">playback has
   25016    ended</a>.</dd>
   25017 
   25018    <dt><dfn id=dom-media-have_future_data title=dom-media-HAVE_FUTURE_DATA><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)</dt>
   25019 
   25020    <dd>Data for the immediate <a href=#current-playback-position>current playback position</a>
   25021    is available, as well as enough data for the user agent to advance
   25022    the <a href=#current-playback-position>current playback position</a> in the <a href=#direction-of-playback>direction
   25023    of playback</a> at least a little without immediately reverting
   25024    to the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>
   25025    state. For example, in video this corresponds to the user agent
   25026    having data for at least the current frame and the next frame. The
   25027    user agent cannot be in this state if <a href=#ended-playback title="ended
   25028    playback">playback has ended</a>, as the <a href=#current-playback-position>current playback
   25029    position</a> can never advance in this case.</dd>
   25030 
   25031    <dt><dfn id=dom-media-have_enough_data title=dom-media-HAVE_ENOUGH_DATA><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)</dt>
   25032 
   25033    <dd>All the conditions described for the <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> state
   25034    are met, and, in addition, the user agent estimates that data is
   25035    being fetched at a rate where the <a href=#current-playback-position>current playback
   25036    position</a>, if it were to advance at the rate given by the
   25037    <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
   25038    attribute, would not overtake the available data before playback
   25039    reaches the end of the <a href=#media-resource>media resource</a>.</dd>
   25040 
   25041   </dl><div class=impl>
   25042 
   25043   <p>When the ready state of a <a href=#media-element>media element</a> whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is not <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> changes, the
   25044   user agent must follow the steps given below:</p>
   25045 
   25046   <dl class=switch><!-- going up to metadata --><dt>If the previous ready state was <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, and the new
   25047    ready state is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code></dt>
   25048 
   25049    <dd>
   25050 
   25051     <p class=note>A <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> DOM event <a href=#fire-loadedmetadata>will be fired</a> as part of the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> algorithm.</p>
   25052 
   25053    </dd>
   25054 
   25055    <!-- going up to current for the first time -->
   25056 
   25057    <dt id=handling-first-frame-available>If the previous ready state
   25058    was <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> and
   25059    the new ready state is <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   25060    greater</dt>
   25061 
   25062    <dd>
   25063 
   25064     <p id=fire-loadeddata>If this is the first time this occurs for
   25065     this <a href=#media-element>media element</a> since the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> algorithm was last invoked,
   25066     the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
   25067     simple event</a> named <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code> at the element.</p>
   25068 
   25069     <p>If the new ready state is <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
   25070     <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>,
   25071     then the relevant steps below must then be run also.</p>
   25072 
   25073    </dd>
   25074 
   25075    <!-- going down -->
   25076    <dt>If the previous ready state was <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or more,
   25077    and the new ready state is <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   25078    less</dt>
   25079 
   25080    <dd>
   25081 
   25082     <p class=note>A <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> DOM
   25083     event <a href=#fire-waiting-when-waiting>can be fired</a>,
   25084     depending on the current state of playback.</p>
   25085 
   25086    </dd>
   25087 
   25088    <!-- going up to future -->
   25089    <dt>If the previous ready state was <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   25090    less, and the new ready state is <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code></dt>
   25091 
   25092    <dd>
   25093 
   25094     <p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
   25095     simple event</a> named <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>.</p>
   25096 
   25097     <p>If the element is <a href=#potentially-playing>potentially playing</a>, the user
   25098     agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25099     event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>
   25100 
   25101    </dd>
   25102 
   25103    <!-- going up to enough -->
   25104    <dt>If the new ready state is <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code></dt>
   25105 
   25106    <dd>
   25107 
   25108     <p>If the previous ready state was <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or
   25109     less, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   25110     a simple event</a> named <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>, and, if the element is also
   25111     <a href=#potentially-playing>potentially playing</a>, <a href=#queue-a-task>queue a task</a> to
   25112     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>
   25113 
   25114     <p>If the <a href=#autoplaying-flag>autoplaying flag</a> is true, and the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is true, and the
   25115     <a href=#media-element>media element</a> has an <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute specified,
   25116     and the <a href=#media-element>media element</a> is in a <code><a href=#document>Document</a></code>
   25117     whose <a href=#browsing-context>browsing context</a> did not have the
   25118     <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context flag</a>
   25119     set when the <code><a href=#document>Document</a></code> was created, then the user
   25120     agent may also set the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute to false,
   25121     <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   25122     named <code title=event-media-play><a href=#event-media-play>play</a></code>, and <a href=#queue-a-task>queue
   25123     a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-playing><a href=#event-media-playing>playing</a></code>.</p>
   25124 
   25125     <p class=note>User agents are not required to autoplay, and it
   25126     is suggested that user agents honor user preferences on the
   25127     matter. Authors are urged to use the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute rather than
   25128     using script to force the video to play, so as to allow the user
   25129     to override the behavior if so desired.</p>
   25130 
   25131     <p>In any case, the user agent must finally <a href=#queue-a-task>queue a
   25132     task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>.</p>
   25133 
   25134    </dd>
   25135 
   25136   </dl></div>
   25137 
   25138   <p class=note>It is possible for the ready state of a media
   25139   element to jump between these states discontinuously. For example,
   25140   the state of a media element can jump straight from <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> to <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> without
   25141   passing through the <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> and
   25142   <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>
   25143   states.</p>
   25144 
   25145   <div class=impl>
   25146 
   25147   <p>The <dfn id=dom-media-readystate title=dom-media-readyState><code>readyState</code></dfn> IDL
   25148   attribute must, on getting, return the value described above that
   25149   describes the current ready state of the <a href=#media-element>media
   25150   element</a>.</p>
   25151 
   25152   </div>
   25153 
   25154   <p>The <dfn id=attr-media-autoplay title=attr-media-autoplay><code>autoplay</code></dfn>
   25155   attribute is a <a href=#boolean-attribute>boolean attribute</a>. When present, the
   25156   user agent <span class=impl>(as described in the algorithm
   25157   described herein)</span> will automatically begin playback of the
   25158   <a href=#media-resource>media resource</a> as soon as it can do so without
   25159   stopping.</p>
   25160 
   25161   <p class=note>Authors are urged to use the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute rather than
   25162   using script to trigger automatic playback, as this allows the user
   25163   to override the automatic playback when it is not desired, e.g. when
   25164   using a screen reader. Authors are also encouraged to consider not
   25165   using the automatic playback behavior at all, and instead to let the
   25166   user agent wait for the user to start playback explicitly.</p>
   25167 
   25168   <div class=impl>
   25169 
   25170   <p>The <dfn id=dom-media-autoplay title=dom-media-autoplay><code>autoplay</code></dfn>
   25171   IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
   25172   same name.</p>
   25173 
   25174   </div>
   25175 
   25176 
   25177 
   25178   <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>
   25179 
   25180   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
   25181 
   25182    <dd>
   25183 
   25184     <p>Returns true if playback is paused; false otherwise.</p>
   25185 
   25186    </dd>
   25187 
   25188    <dt><var title="">media</var> . <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code></dt>
   25189 
   25190    <dd>
   25191 
   25192     <p>Returns true if playback has reached the end of the <a href=#media-resource>media resource</a>.</p>
   25193 
   25194    </dd>
   25195 
   25196    <dt><var title="">media</var> . <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>
   25197 
   25198    <dd>
   25199 
   25200     <p>Returns the default rate of playback, for when the user is not
   25201     fast-forwarding or reversing through the <a href=#media-resource>media
   25202     resource</a>.</p>
   25203 
   25204     <p>Can be set, to change the default rate of playback.</p>
   25205 
   25206     <p>The default rate has no direct effect on playback, but if the
   25207     user switches to a fast-forward mode, when they return to the
   25208     normal playback mode, it is expected that the rate of playback
   25209     will be returned to the default rate of playback.</p>
   25210 
   25211    </dd>
   25212 
   25213    <dt><var title="">media</var> . <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> [ = <var title="">value</var> ]</dt>
   25214 
   25215    <dd>
   25216 
   25217     <p>Returns the current rate playback, where 1.0 is normal speed.</p>
   25218 
   25219     <p>Can be set, to change the rate of playback.</p>
   25220 
   25221    </dd>
   25222 
   25223    <dt><var title="">media</var> . <code title=dom-media-played><a href=#dom-media-played>played</a></code></dt>
   25224 
   25225    <dd>
   25226 
   25227     <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
   25228     ranges of the <a href=#media-resource>media resource</a> that the user agent has
   25229     played.</p>
   25230 
   25231    </dd>
   25232 
   25233    <dt><var title="">media</var> . <code title=dom-media-play><a href=#dom-media-play>play</a></code>()</dt>
   25234 
   25235    <dd>
   25236 
   25237     <p>Sets the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute
   25238     to false, loading the <a href=#media-resource>media resource</a> and beginning
   25239     playback if necessary. If the playback had ended, will restart it
   25240     from the start.</p>
   25241 
   25242    </dd>
   25243 
   25244    <dt><var title="">media</var> . <code title=dom-media-pause><a href=#dom-media-pause>pause</a></code>()</dt>
   25245 
   25246    <dd>
   25247 
   25248     <p>Sets the <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute
   25249     to true, loading the <a href=#media-resource>media resource</a> if necessary.</p>
   25250 
   25251    </dd>
   25252 
   25253   </dl><div class=impl>
   25254 
   25255   <p>The <dfn id=dom-media-paused title=dom-media-paused><code>paused</code></dfn>
   25256   attribute represents whether the <a href=#media-element>media element</a> is
   25257   paused or not. The attribute must initially be true.</p>
   25258 
   25259   <p>A <a href=#media-element>media element</a> is said to be <dfn id=potentially-playing>potentially
   25260   playing</dfn> when its <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code>
   25261   attribute is false, the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
   25262   <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
   25263   <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>,
   25264   the element has not <a href=#ended-playback>ended playback</a>, playback has not
   25265   <a href=#stopped-due-to-errors>stopped due to errors</a>, and the element has not <a href=#paused-for-user-interaction>paused
   25266   for user interaction</a>.</p>
   25267 
   25268   <p>A <a href=#media-element>media element</a> is said to have <dfn id=ended-playback>ended
   25269   playback</dfn> when the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and
   25270   either the <a href=#current-playback-position>current playback position</a> is the end of the
   25271   <a href=#media-resource>media resource</a> and the <a href=#direction-of-playback>direction of
   25272   playback</a> is forwards and the <a href=#media-element>media element</a> does
   25273   not have a <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute
   25274   specified, or the <a href=#current-playback-position>current playback position</a> is the
   25275   <a href=#earliest-possible-position>earliest possible position</a> and the <a href=#direction-of-playback>direction of
   25276   playback</a> is backwards.</p>
   25277 
   25278   <p>The <dfn id=dom-media-ended title=dom-media-ended><code>ended</code></dfn>
   25279   attribute must return true if the <a href=#media-element>media element</a> has
   25280   <a href=#ended-playback>ended playback</a> and the <a href=#direction-of-playback>direction of
   25281   playback</a> is forwards, and false otherwise.</p>
   25282 
   25283   <p>A <a href=#media-element>media element</a> is said to have <dfn id=stopped-due-to-errors>stopped due to
   25284   errors</dfn> when the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and
   25285   the user agent <a href=#non-fatal-media-error>encounters a
   25286   non-fatal error</a> during the processing of the <a href=#media-data>media
   25287   data</a>, and due to that error, is not able to play the content
   25288   at the <a href=#current-playback-position>current playback position</a>.</p>
   25289 
   25290   <p>A <a href=#media-element>media element</a> is said to have <dfn id=paused-for-user-interaction>paused for user
   25291   interaction</dfn> when its <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, the <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
   25292   <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
   25293   <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> and
   25294   the user agent has reached a point in the <a href=#media-resource>media
   25295   resource</a> where the user has to make a selection for the
   25296   resource to continue.</p>
   25297 
   25298   <p>It is possible for a <a href=#media-element>media element</a> to have both
   25299   <a href=#ended-playback>ended playback</a> and <a href=#paused-for-user-interaction>paused for user
   25300   interaction</a> at the same time.</p>
   25301 
   25302   <p>When a <a href=#media-element>media element</a> that is <a href=#potentially-playing>potentially
   25303   playing</a> stops playing because it has <a href=#paused-for-user-interaction>paused for user
   25304   interaction</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
   25305   <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>
   25306 
   25307   <p id=fire-waiting-when-waiting>When a <a href=#media-element>media element</a>
   25308   that is <a href=#potentially-playing>potentially playing</a> stops playing because its
   25309   <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute
   25310   changes to a value lower than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, without
   25311   the element having <a href=#ended-playback>ended playback</a>, or playback having
   25312   <a href=#stopped-due-to-errors>stopped due to errors</a>, or playback having <a href=#paused-for-user-interaction>paused
   25313   for user interaction</a>, or the <a href=#dom-media-seek title=dom-media-seek>seeking algorithm</a> being invoked, the
   25314   user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25315   event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code>
   25316   at the element, and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25317   event</a> named <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at
   25318   the element.</p>
   25319 
   25320   <p>When the <a href=#current-playback-position>current playback position</a> reaches the end
   25321   of the <a href=#media-resource>media resource</a> when the <a href=#direction-of-playback>direction of
   25322   playback</a> is forwards, then the user agent must follow these
   25323   steps:</p>
   25324 
   25325   <ol><li><p>If the <a href=#media-element>media element</a> has a <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute specified, then <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
   25326    position</a> of the <a href=#media-resource>media resource</a> and abort these
   25327    steps.</li> <!-- v2/v3: We should fire a 'looping' event here
   25328    to explain why this immediately fires a 'playing' event, otherwise
   25329    the 'playing' event that fires from the readyState going from
   25330    HAVE_CURRENT_DATA back to HAVE_FUTURE_DATA will seem inexplicable
   25331    (since the normally matching 'ended' given below event doesn't fire
   25332    in the loop case). -->
   25333 
   25334    <li><p>Stop playback.<p class=note>The <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code> attribute becomes
   25335    true.</li>
   25336 
   25337    <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   25338    a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</li>
   25339 
   25340    <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   25341    a simple event</a> named <code title=event-media-ended><a href=#event-media-ended>ended</a></code>
   25342    at the element.</li>
   25343 
   25344   </ol><p>When the <a href=#current-playback-position>current playback position</a> reaches the
   25345   <a href=#earliest-possible-position>earliest possible position</a> of the <a href=#media-resource>media
   25346   resource</a> when the <a href=#direction-of-playback>direction of playback</a> is
   25347   backwards, then the user agent must follow these steps:</p>
   25348 
   25349   <ol><li><p>Stop playback.</li>
   25350 
   25351    <li><p>The user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   25352    a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</li>
   25353 
   25354   </ol><p>The <dfn id=dom-media-defaultplaybackrate title=dom-media-defaultPlaybackRate><code>defaultPlaybackRate</code></dfn>
   25355   attribute gives the desired speed at which the <a href=#media-resource>media
   25356   resource</a> is to play, as a multiple of its intrinsic
   25357   speed. The attribute is mutable: on getting it must return the last
   25358   value it was set to, or 1.0 if it hasn't yet been set; on setting
   25359   the attribute must be set to the new value.</p>
   25360 
   25361   <p>The <dfn id=dom-media-playbackrate title=dom-media-playbackRate><code>playbackRate</code></dfn>
   25362   attribute gives the speed at which the <a href=#media-resource>media resource</a>
   25363   plays, as a multiple of its intrinsic speed. If it is not equal to
   25364   the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>,
   25365   then the implication is that the user is using a feature such as
   25366   fast forward or slow motion playback. The attribute is mutable: on
   25367   getting it must return the last value it was set to, or 1.0 if it
   25368   hasn't yet been set; on setting the attribute must be set to the new
   25369   value, and the playback must change speed (if the element is
   25370   <a href=#potentially-playing>potentially playing</a>).</p>
   25371 
   25372   <p>If the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
   25373   is positive or zero, then the <dfn id=direction-of-playback>direction of playback</dfn> is
   25374   forwards. Otherwise, it is backwards.</p>
   25375 
   25376   <p>The "play" function in a user agent's interface must set the
   25377   <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute
   25378   to the value of the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>
   25379   attribute before invoking the <code title=dom-media-play><a href=#dom-media-play>play()</a></code> method's steps. Features such
   25380   as fast-forward or rewind must be implemented by only changing the
   25381   <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
   25382   attribute.</p>
   25383 
   25384   <p id=rateUpdate>When the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or
   25385   <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attributes
   25386   change value (either by being set by script or by being changed
   25387   directly by the user agent, e.g. in response to user control) the
   25388   user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25389   event</a> named <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code>
   25390   at the <a href=#media-element>media element</a>.</p>
   25391 
   25392   <p>The <dfn id=dom-media-played title=dom-media-played><code>played</code></dfn>
   25393   attribute must return a new static <a href=#normalized-timeranges-object>normalized
   25394   <code>TimeRanges</code> object</a> that represents the ranges of
   25395   the <a href=#media-resource>media resource</a>, if any, that the user agent has so
   25396   far rendered, at the time the attribute is evaluated.</p>
   25397 
   25398   <hr><p>When the <dfn id=dom-media-play title=dom-media-play><code>play()</code></dfn>
   25399   method on a <a href=#media-element>media element</a> is invoked, the user agent
   25400   must run the following steps.</p>
   25401 
   25402   <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute has
   25403    the value <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the
   25404    <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   25405    algorithm</a>.</li>
   25406 
   25407    <li>
   25408 
   25409     <p>If the <a href=#ended-playback title="ended playback">playback has ended</a>
   25410     and the <a href=#direction-of-playback>direction of playback</a> is forwards, <a href=#dom-media-seek title=dom-media-seek>seek</a> to the <a href=#earliest-possible-position>earliest possible
   25411     position</a> of the <a href=#media-resource>media resource</a>.</p>
   25412 
   25413     <p class=note>This <a href=#seekUpdate>will cause</a> the user
   25414     agent to <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25415     event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the <a href=#media-element>media
   25416     element</a>.</p> <!-- if we're already playing at this point,
   25417     it might also fire 'waiting' -->
   25418 
   25419    </li>
   25420 
   25421    <li>
   25422 
   25423     <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is true, run
   25424     the following substeps:</p>
   25425 
   25426     <ol><li><p>Change the value of <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> to false.</li>
   25427 
   25428      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   25429      named <code title=event-media-play><a href=#event-media-play>play</a></code> at the element.</li>
   25430 
   25431      <li>
   25432 
   25433       <p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has the
   25434       value <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>,
   25435       <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, or
   25436       <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
   25437       <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   25438       named <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at the
   25439       element.</p>
   25440 
   25441       <p>Otherwise, the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute has the
   25442       value <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or
   25443       <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>;
   25444       <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   25445       named <code title=event-media-playing><a href=#event-media-playing>playing</a></code> at the
   25446       element.</p>
   25447 
   25448      </li>
   25449 
   25450     </ol></li>
   25451 
   25452    <li><p>Set the <a href=#media-element>media element</a>'s <a href=#autoplaying-flag>autoplaying
   25453    flag</a> to false.</li>
   25454 
   25455   </ol><hr><p>When the <dfn id=dom-media-pause title=dom-media-pause><code>pause()</code></dfn>
   25456   method is invoked, the user agent must run the following steps:</p>
   25457 
   25458   <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute has
   25459    the value <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the
   25460    <a href=#media-element>media element</a>'s <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   25461    algorithm</a>.</li>
   25462 
   25463    <li><p>Set the <a href=#media-element>media element</a>'s <a href=#autoplaying-flag>autoplaying
   25464    flag</a> to false.</li>
   25465 
   25466    <li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, run the
   25467    following steps:</p>
   25468 
   25469     <ol><li><p>Change the value of <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> to true.</li>
   25470 
   25471      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25472      event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
   25473      element.</li>
   25474 
   25475      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25476      event</a> named <code title=event-media-pause><a href=#event-media-pause>pause</a></code>
   25477      at the element.</li>
   25478 
   25479     </ol></li>
   25480 
   25481   </ol><hr><p id=media-playback>When a <a href=#media-element>media element</a> is
   25482   <a href=#potentially-playing>potentially playing</a> and its <code><a href=#document>Document</a></code> is a
   25483   <a href=#fully-active>fully active</a> <code><a href=#document>Document</a></code>, its <a href=#current-playback-position>current
   25484   playback position</a> must increase monotonically at <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> units of media
   25485   time per unit time of wall clock time.</p>
   25486 
   25487   <p class=note>This specification doesn't define how the user agent
   25488   achieves the appropriate playback rate &mdash; depending on the
   25489   protocol and media available, it is plausible that the user agent
   25490   could negotiate with the server to have the server provide the media
   25491   data at the appropriate rate, so that (except for the period between
   25492   when the rate is changed and when the server updates the stream's
   25493   playback rate) the client doesn't actually have to drop or
   25494   interpolate any frames.</p>
   25495 
   25496   <p>When the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
   25497   is negative (playback is backwards), any corresponding audio must be
   25498   muted. When the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is so low or so
   25499   high that the user agent cannot play audio usefully, the
   25500   corresponding audio must also be muted. If the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is not 1.0, the
   25501   user agent may apply pitch adjustments to the audio as necessary to
   25502   render it faithfully.</p>
   25503 
   25504   <p>The <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> can
   25505   be 0.0, in which case the <a href=#current-playback-position>current playback position</a>
   25506   doesn't move, despite playback not being paused (<code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> doesn't become true, and the
   25507   <code title=event-media-pause><a href=#event-media-pause>pause</a></code> event doesn't fire).</p>
   25508 
   25509   <p><a href=#media-element title="media element">Media elements</a> that are
   25510   <a href=#potentially-playing>potentially playing</a> while not <a href=#in-a-document>in a
   25511   <code>Document</code></a> must not play any video, but should
   25512   play any audio component. Media elements must not stop playing just
   25513   because all references to them have been removed; only once a media
   25514   element to which no references exist has reached a point where no
   25515   further audio remains to be played for that element (e.g. because
   25516   the element is paused, or because the end of the clip has been
   25517   reached, or because its <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> is 0.0) may the
   25518   element be garbage collected.</p>
   25519 
   25520   <hr><p>When the <a href=#current-playback-position>current playback position</a> of a <a href=#media-element>media
   25521   element</a> changes (e.g. due to playback or seeking), the user
   25522   agent must run the following steps. If the <a href=#current-playback-position>current playback
   25523   position</a> changes while the steps are running, then the user
   25524   agent must wait for the steps to complete, and then must immediately
   25525   rerun the steps. (These steps are thus run as often as possible or
   25526   needed &mdash; if one iteration takes a long time, this can cause
   25527   certain ranges to be skipped over as the user agent rushes ahead to
   25528   "catch up".)</p>
   25529 
   25530   <ol><!--XXXTT - the text below is wrong, but we need to do something similar, updating the timed tracks, pausing if necessary (more below)
   25531    <li><p>Let <var title="">current ranges</var> be an ordered list of
   25532    <span title="cue range">cue ranges</span>, initialized to contain
   25533    all the <span title="cue range">cue ranges</span> of the
   25534    <span>media element</span> whose start times are less than or equal
   25535    to the <span>current playback position</span> and whose end times
   25536    are greater than the <span>current playback position</span>, in the
   25537    order they were added to the element.</p></li>
   25538 
   25539    <li><p>Let <var title="">other ranges</var> be an ordered list of
   25540    <span title="cue range">cue ranges</span>, initialized to contain
   25541    all the <span title="cue range">cue ranges</span> of the
   25542    <span>media element</span> that are not present in <var
   25543    title="">current ranges</var>, in the order they were added to the
   25544    element.</p></li>
   25545 --><li><p>If the time was reached through the usual monotonic increase
   25546    of the current playback position during normal playback, and if the
   25547    user agent has not fired a <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event at the
   25548    element in the past 15 to 250ms and is not still running event
   25549    handlers for such an event, then the user agent must <a href=#queue-a-task>queue a
   25550    task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
   25551    element. (In the other cases, such as explicit seeks, relevant
   25552    events get fired as part of the overall process of changing the
   25553    current playback position.)</p>
   25554 
   25555    <p class=note>The event thus is not to be fired faster than about
   25556    66Hz or slower than 4Hz (assuming the event handlers don't take
   25557    longer than 250ms to run). User agents are encouraged to vary the
   25558    frequency of the event based on the system load and the average
   25559    cost of processing the event each time, so that the UI updates are
   25560    not any more frequent than the user agent can comfortably handle
   25561    while decoding the video.</li>
   25562 
   25563 <!--XXXTT [beware - - nested comments]
   25564    <li><p>If none of the <span title="cue range">cue ranges</span> in
   25565    <var title="">current ranges</var> have their "active" boolean set
   25566    to "false" (inactive) and none of the <span title="cue range">cue
   25567    ranges</span> in <var title="">other ranges</var> have their
   25568    "active" boolean set to "true" (active), then abort these
   25569    steps.</p></li>
   25570 
   25571    <li><p>If the time was reached through the usual monotonic increase
   25572    of the current playback position during normal playback, and there
   25573    are <span title="cue range">cue ranges</span> in <var
   25574    title="">other ranges</var> that have both their "active" boolean
   25575    and their "pause" boolean set to "true", then immediately act as if
   25576    the element's <code title="dom-media-pause">pause()</code> method
   25577    had been invoked. <!- - pause() can in theory call load(), but never
   25578    can it do so as part of this invokation, since we wouldn't be in
   25579    this algorithm if the media element was empty. So, no need to couch
   25580    all this in a task. - -> (In the other cases, such as explicit
   25581    seeks, playback is not paused by exiting a cue range, even if that
   25582    cue range has its "pause" boolean set to "true".)</p></li>
   25583 
   25584    <li><p>For each non-null "exit" callback of the <span
   25585    title="cue range">cue ranges</span> in <var title="">other
   25586    ranges</var> that have their "active" boolean set to "true"
   25587    (active), in list order, <span>queue a task</span> that invokes the
   25588    callback, passing the cue range's identifier as the callback's only
   25589    argument.</p></li>
   25590 
   25591    <li><p>For each non-null "enter" callback of the <span title="cue
   25592    range">cue ranges</span> in <var title="">current ranges</var> that
   25593    have their "active" boolean set to "false" (inactive), in list
   25594    order, <span>queue a task</span> that invokes the callback, passing
   25595    the cue range's identifier as the callback's only
   25596    argument.</p></li>
   25597 
   25598    <li><p>Set the "active" boolean of all the <span title="cue
   25599    range">cue ranges</span> in the <var title="">current ranges</var>
   25600    list to "true" (active), and the "active" boolean of all the <span
   25601    title="cue range">cue ranges</span> in the <var title="">other
   25602    ranges</var> list to "false" (inactive).</p></li>
   25603 -->
   25604   </ol><p>When a <a href=#media-element>media element</a> is <a href=#remove-an-element-from-a-document title="remove an
   25605   element from a document">removed from a
   25606   <code>Document</code></a>, if the <a href=#media-element>media element</a>'s
   25607   <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute
   25608   has a value other than <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> then the user
   25609   agent must act as if the <code title=dom-media-pause><a href=#dom-media-pause>pause()</a></code> method had been invoked.</p>
   25610 
   25611   <p class=note>If the <a href=#media-element>media element</a>'s
   25612   <code><a href=#document>Document</a></code> stops being a <a href=#fully-active>fully active</a>
   25613   document, then the playback will <a href=#media-playback>stop</a>
   25614   until the document is active again.</p>
   25615 
   25616   </div>
   25617 
   25618 
   25619 
   25620   <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>
   25621 
   25622   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
   25623 
   25624    <dd>
   25625 
   25626     <p>Returns true if the user agent is currently seeking.</p>
   25627 
   25628    </dd>
   25629 
   25630    <dt><var title="">media</var> . <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code></dt>
   25631 
   25632    <dd>
   25633 
   25634     <p>Returns a <code><a href=#timeranges>TimeRanges</a></code> object that represents the
   25635     ranges of the <a href=#media-resource>media resource</a> to which it is possible
   25636     for the user agent to seek.</p>
   25637 
   25638    </dd>
   25639 
   25640   </dl><div class=impl>
   25641 
   25642   <p>The <dfn id=dom-media-seeking title=dom-media-seeking><code>seeking</code></dfn>
   25643   attribute must initially have the value false.</p>
   25644 
   25645   <p>When the user agent is required to <dfn id=dom-media-seek title=dom-media-seek>seek</dfn> to a particular <var title="">new
   25646   playback position</var> in the <a href=#media-resource>media resource</a>, it means
   25647   that the user agent must run the following steps. This algorithm
   25648   interacts closely with the <a href=#event-loop>event loop</a> mechanism; in
   25649   particular, it has a <a href=#synchronous-section>synchronous
   25650   section</a> (which is triggered as part of the <a href=#event-loop>event
   25651   loop</a> algorithm). Steps in that section are marked with
   25652   &#8987;.</p>
   25653 
   25654   <ol><li><p>If the <a href=#media-element>media element</a>'s <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then raise an
   25655    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception (if the seek was in
   25656    response to a DOM method call or setting of an IDL attribute), and
   25657    abort these steps.</li>
   25658 
   25659    <li><p>If the element's <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute is true,
   25660    then another instance of this algorithm is already running. Abort
   25661    that other instance of the algorithm without waiting for the step
   25662    that it is running to complete.</li>
   25663 
   25664    <li><p>Set the <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL
   25665    attribute to true.</li>
   25666 
   25667    <li id=seekUpdate><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a
   25668    simple event</a> named <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the
   25669    element.</li>
   25670 
   25671    <li><p>If the seek was in response to a DOM method call or setting
   25672    of an IDL attribute, then continue the script. The remainder of
   25673    these steps must be run asynchronously. With the exception of the
   25674    steps marked with &#8987;, they could be aborted at any time by
   25675    another instance of this algorithm being invoked.</li>
   25676 
   25677    <li><p>If the <var title="">new playback position</var> is later
   25678    than the end of the <a href=#media-resource>media resource</a>, then let it be the
   25679    end of the <a href=#media-resource>media resource</a> instead.</li>
   25680 
   25681    <li><p>If the <var title="">new playback position</var> is less
   25682    than the <a href=#earliest-possible-position>earliest possible position</a>, let it be that
   25683    position instead.</li>
   25684 
   25685    <li><p>If the (possibly now changed) <var title="">new playback
   25686    position</var> is not in one of the ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute, then let it
   25687    be the position in one of the ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute that is the
   25688    nearest to the <var title="">new playback position</var>. If two
   25689    positions both satisfy that constraint (i.e. the <var title="">new
   25690    playback position</var> is exactly in the middle between two ranges
   25691    in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute)
   25692    then use the position that is closest to the <a href=#current-playback-position>current playback
   25693    position</a>. If there are no ranges given in the <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute then set the
   25694    <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute to
   25695    false and abort these steps.</li>
   25696 
   25697    <li><p>Set the <a href=#current-playback-position>current playback position</a> to the given
   25698    <var title="">new playback position</var>.</li>
   25699 
   25700    <li><p>If the <a href=#media-element>media element</a> was <a href=#potentially-playing>potentially
   25701    playing</a> immediately before it started seeking, but seeking
   25702    caused its <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
   25703    attribute to change to a value lower than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, then
   25704    <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
   25705    <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> at the
   25706    element.</li>
   25707 
   25708    <li><p>If, when it reaches this step, the user agent has still not
   25709    established whether or not the <a href=#media-data>media data</a> for the <var title="">new playback position</var> is available, and, if it is,
   25710    decoded enough data to play back that position, then <a href=#queue-a-task>queue a
   25711    task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code> at the element.</li>
   25712 
   25713    <li><p>Wait until it has established whether or not the <a href=#media-data>media
   25714    data</a> for the <var title="">new playback position</var> is
   25715    available, and, if it is, until it has decoded enough data to play
   25716    back that position.</li>
   25717 
   25718    <li><p><a href=#await-a-stable-state>Await a stable state</a>. The <a href=#synchronous-section>synchronous
   25719    section</a> consists of all the remaining steps of this
   25720    algorithm. (Steps in the <a href=#synchronous-section>synchronous section</a> are
   25721    marked with &#8987;.)</li>
   25722 
   25723    <li><p>&#8987; Set the <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute to
   25724    false.</li>
   25725 
   25726    <li><p>&#8987; <a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   25727    event</a> named <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code>
   25728    at the element.</li>
   25729 
   25730   </ol><p>The <dfn id=dom-media-seekable title=dom-media-seekable><code>seekable</code></dfn>
   25731   attribute must return a new static <a href=#normalized-timeranges-object>normalized
   25732   <code>TimeRanges</code> object</a> that represents the ranges of
   25733   the <a href=#media-resource>media resource</a>, if any, that the user agent is able
   25734   to seek to, at the time the attribute is evaluated.</p>
   25735 
   25736   <p class=note>If the user agent can seek to anywhere in the
   25737   <a href=#media-resource>media resource</a>, e.g. because it a simple movie file and
   25738   the user agent and the server support HTTP Range requests, then the
   25739   attribute would return an object with one range, whose start is the
   25740   time of the first frame (typically zero), and whose end is the same
   25741   as the time of the first frame plus the <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute's value (which
   25742   would equal the time of the last frame).</p>
   25743 
   25744   <p class=note>The range might be continuously changing, e.g. if
   25745   the user agent is buffering a sliding window on an infinite
   25746   stream. This is the behavior seen with DVRs viewing live TV, for
   25747   instance.</p>
   25748 
   25749   <p><a href=#media-resource title="media resource">Media resources</a> might be
   25750   internally scripted or interactive. Thus, a <a href=#media-element>media
   25751   element</a> could play in a non-linear fashion. If this happens,
   25752   the user agent must act as if the algorithm for <a href=#dom-media-seek title=dom-media-seek>seeking</a> was used whenever the
   25753   <a href=#current-playback-position>current playback position</a> changes in a discontinuous
   25754   fashion (so that the relevant events fire).</p>
   25755 
   25756   </div>
   25757 
   25758 
   25759 <!--TT-->
   25760   <h5 id=timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</h5>
   25761 
   25762   <h6 id=timed-track-model><span class=secno>4.8.10.10.1 </span>Timed track model</h6>
   25763 
   25764   <p>A <a href=#media-element>media element</a> can have a group of associated <dfn id=timed-track title="timed track">timed tracks</dfn>, known as the <a href=#media-element>media
   25765   element</a>'s <dfn id=list-of-timed-tracks>list of timed tracks</dfn>. The <a href=#timed-track title="timed track">timed tracks</a> are sorted as follows:</p>
   25766 
   25767   <ol class=brief><li>The <a href=#timed-track title="timed track">timed tracks</a> corresponding
   25768    to <code><a href=#the-track-element>track</a></code> element children of the <a href=#media-element>media
   25769    element</a>, in <a href=#tree-order>tree order</a>.</li>
   25770 
   25771    <li>Any <a href=#timed-track title="timed track">timed tracks</a> added using
   25772    the <code title=dom-media-addTrack>addTrack()</code> method, in
   25773    the order they were added, oldest first.</li>
   25774 
   25775    <li>Any <a href=#media-resource-specific-timed-track title="media-resource-specific timed
   25776    track">media-resource-specific timed tracks</a> (<a href=#timed-track title="timed track">timed tracks</a> corresponding to data in
   25777    the <a href=#media-resource>media resource</a>), in the order defined by the
   25778    <a href=#media-resource>media resource</a>'s format specification.</li>
   25779 
   25780   </ol><p>A <a href=#timed-track>timed track</a> consists of:</p>
   25781 
   25782   <dl><dt><dfn id=timed-track-kind title="timed track kind">The kind of timed track</dfn>
   25783 
   25784    <dd>
   25785 
   25786     <p>This decides how the track is handled by the user agent. The
   25787     kind is represented by a string. The possible strings are:</p>
   25788 
   25789     <ul class=brief><li><dfn id=dom-timedtrack-kind-subtitles title=dom-TimedTrack-kind-subtitles><code>subtitles</code></dfn>
   25790      <li><dfn id=dom-timedtrack-kind-captions title=dom-TimedTrack-kind-captions><code>captions</code></dfn>
   25791      <li><dfn id=dom-timedtrack-kind-descriptions title=dom-TimedTrack-kind-descriptions><code>descriptions</code></dfn>
   25792      <li><dfn id=dom-timedtrack-kind-chapters title=dom-TimedTrack-kind-chapters><code>chapters</code></dfn>
   25793      <li><dfn id=dom-timedtrack-kind-metadata title=dom-TimedTrack-kind-metadata><code>metadata</code></dfn>
   25794     </ul><p>The <a href=#timed-track-kind title="timed track kind">kind of track</a> can
   25795     change dynamically, in the case of a <a href=#timed-track>timed track</a>
   25796     corresponding to a <code><a href=#the-track-element>track</a></code> element.</p>
   25797 
   25798    </dd>
   25799 
   25800    <dt><dfn id=timed-track-label title="timed track label">A label</dfn>
   25801 
   25802    <dd>
   25803 
   25804     <p>This is a human-readable string intended to identify the track
   25805     for the user. In certain cases, the label might be generated
   25806     automatically.</p>
   25807 
   25808     <p>The <a href=#timed-track-label title="timed track label">label of a track</a> can
   25809     change dynamically, in the case of a <a href=#timed-track>timed track</a>
   25810     corresponding to a <code><a href=#the-track-element>track</a></code> element or in the case of an
   25811     automatically-generated label whose value depends on variable
   25812     factors such as the user's preferred user interface language.</p>
   25813 
   25814    </dd>
   25815 
   25816    <dt><dfn id=timed-track-language title="timed track language">A language</dfn>
   25817 
   25818    <dd>
   25819 
   25820     <p>This is a string (a BCP 47 language tag) representing the
   25821     language of the timed track's cues. <a href=#refsBCP47>[BCP47]</a></p>
   25822 
   25823     <p>The <a href=#timed-track-language title="timed track language">language of a timed
   25824     track</a> can change dynamically, in the case of a <a href=#timed-track>timed
   25825     track</a> corresponding to a <code><a href=#the-track-element>track</a></code> element.</p>
   25826 
   25827    </dd>
   25828 
   25829    <dt><dfn id=timed-track-readiness-state title="timed track readiness state">A readiness state</dfn>
   25830 
   25831    <dd>
   25832 
   25833     <p>One of the following:</p>
   25834 
   25835     <dl><dt><dfn id=timed-track-not-loaded title="timed track not loaded">Not loaded</dfn>
   25836 
   25837      <dd>
   25838 
   25839       <p>Indicates that the timed track is known to exist (e.g. it has
   25840       been declared with a <code><a href=#the-track-element>track</a></code> element), but its cues
   25841       have not been obtained.</p>
   25842 
   25843      </dd>
   25844 
   25845      <dt><dfn id=timed-track-loading title="timed track loading">Loading</dfn>
   25846 
   25847      <dd>
   25848 
   25849       <p>Indicates that the timed track is loading and there have been
   25850       no fatal errors encountered so far. Further cues might still be
   25851       added to the track.</p>
   25852 
   25853      </dd>
   25854 
   25855      <dt><dfn id=timed-track-loaded title="timed track loaded">Loaded</dfn>
   25856 
   25857      <dd>
   25858 
   25859       <p>Indicates that the timed track has been loaded with no fatal
   25860       errors. No new cues will be added to the track except if the
   25861       <a href=#timed-track>timed track</a> corresponds to a
   25862       <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code> object.</p>
   25863 
   25864      </dd>
   25865 
   25866      <dt><dfn id=timed-track-failed-to-load title="timed track failed to load">Failed to load</dfn>
   25867 
   25868      <dd>
   25869 
   25870       <p>Indicates that the timed track was enabled, but when the user
   25871       agent attempted to obtain it, this failed in some way
   25872       (e.g. <a href=#url>URL</a> could not be <a href=#resolve-a-url title="resolve a
   25873       url">resolved</a>, network error, unknown timed track
   25874       format). Some or all of the cues are likely missing and will not
   25875       be obtained.</p>
   25876 
   25877      </dd>
   25878 
   25879     </dl><p>The <a href=#timed-track-readiness-state title="timed track readiness state">readiness
   25880     state</a> of a <a href=#timed-track>timed track</a> changes dynamically as
   25881     the track is obtained.</p>
   25882 
   25883    </dd>
   25884 
   25885    <dt><dfn id=timed-track-mode title="timed track mode">A mode</dfn>
   25886 
   25887    <dd>
   25888 
   25889     <p>One of the following:</p>
   25890 
   25891     <dl><dt><dfn id=timed-track-disabled title="timed track disabled">Disabled</dfn>
   25892 
   25893      <dd>
   25894 
   25895       <p>Indicates that the timed track is not active. Other than for
   25896       the purposes of exposing the track in the DOM, the user agent is
   25897       ignoring the timed track. No cues are active, no events are
   25898       fired, and the user agent will not attempt to obtain the track's
   25899       cues.</p>
   25900 
   25901      </dd>
   25902 
   25903      <dt><dfn id=timed-track-hidden title="timed track hidden">Hidden</dfn>
   25904 
   25905      <dd>
   25906 
   25907       <p>Indicates that the timed track is active, but that the user
   25908       agent is not actively displaying the cues. If no attempt has yet
   25909       been made to obtain the track's cues, the user will perform such
   25910       an attempt momentarily. The user agent is maintaining a list of
   25911       which cues are active, and events are being fired
   25912       accordingly.</p>
   25913 
   25914      </dd>
   25915 
   25916      <dt><dfn id=timed-track-showing title="timed track showing">Showing</dfn>
   25917 
   25918      <dd>
   25919 
   25920       <p>Indicates that the timed track is active. If no attempt has
   25921       yet been made to obtain the track's cues, the user will perform
   25922       such an attempt momentarily. The user agent is maintaining a
   25923       list of which cues are active, and events are being fired
   25924       accordingly. In addition, for timed tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-subtitles>subtitles</code> or <code title=dom-mediatrack-kind-captions>captions</code>, the cues
   25925       are being displayed over the video as appropriate; for timed
   25926       tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-descriptions>descriptions</code>,
   25927       the user agent is making the cues available to the user in a
   25928       non-visual fashion; and for timed tracks whose <a href=#timed-track-kind title="timed track kind">kind</a> is <code title=dom-mediatrack-kind-chapters>chapters</code>, the user
   25929       agent is making available to the user a mechanism by which the
   25930       user can navigate to any point in the <a href=#media-resource>media
   25931       resource</a> by selecting a cue.</p>
   25932 
   25933      </dd>
   25934 
   25935     </dl></dd>
   25936 
   25937    <dt><dfn id=timed-track-list-of-cues title="timed track list of cues">A list of zero or more cues</dfn>
   25938 
   25939    <dd>
   25940 
   25941     <p>A list of <a href=#timed-track-cue title="timed track cue">timed track cues</a>.</p>
   25942 
   25943     <p>The <a href=#timed-track-list-of-cues title="timed track list of cues">list of cues of a
   25944     timed track</a> can change dynamically, either because the
   25945     <a href=#timed-track>timed track</a> has <a href=#timed-track-not-loaded title="timed track not
   25946     loaded">not yet been loaded</a> or is still <a href=#timed-track-loading title="timed
   25947     track loading">loading</a>, or in the case of a <a href=#timed-track>timed
   25948     track</a> corresponding to a <code><a href=#mutabletimedtrack>MutableTimedTrack</a></code>
   25949     object, where individual cues can be added or removed
   25950     dynamically using the API.</p>
   25951 
   25952    </dd>
   25953 
   25954   </dl><p>Each <a href=#timed-track>timed track</a> has a corresponding
   25955   <code><a href=#timedtrack>TimedTrack</a></code> object.</p>
   25956 
   25957   <p>A <dfn id=timed-track-cue>timed track cue</dfn> is the unit of time-sensitive data
   25958   in a <a href=#timed-track>timed track</a>, corresponding for instance for
   25959   subtitles and captions to the text that appears at a particular time
   25960   and disappears at another time.</p>
   25961 
   25962   <p>Each <a href=#timed-track-cue>timed track cue</a> consists of:</p>
   25963 
   25964   <dl><dt><dfn id=timed-track-cue-identifier title="timed track cue identifier">An identifier</dfn>
   25965    <dd>
   25966     <p>An arbitrary string.</p>
   25967    </dd>
   25968 
   25969    <dt><dfn id=timed-track-cue-start-time title="timed track cue start time">A start time</dfn>
   25970    <dd>
   25971     <p>A time, in seconds and fractions of a second, at which the cue
   25972     becomes relevant.</p>
   25973    </dd>
   25974 
   25975    <dt><dfn id=timed-track-cue-end-time title="timed track cue end time">An end time</dfn>
   25976    <dd>
   25977     <p>A time, in seconds and fractions of a second, at which the cue
   25978     stops being relevant.</p>
   25979    </dd>
   25980 
   25981    <dt><dfn id=timed-track-cue-pause-on-exit-flag title="timed track cue pause-on-exit flag">A pause-on-exit flag</dfn>
   25982    <dd>
   25983     <p>A boolean indicating whether playback of the <a href=#media-resource>media
   25984     resource</a> is to pause when the cue stops being relevant.</p>
   25985    </dd>
   25986 
   25987    <dt><dfn id=timed-track-cue-writing-direction title="timed track cue writing direction">A writing direction</dfn>
   25988    <dd>
   25989     <p>A writing direction, either <dfn id=timed-track-cue-horizontal-writing-direction title="timed track cue
   25990     horizontal writing direction">horizontal</dfn> (a line extends
   25991     horizontally and is positioned vertically, with consecutive lines
   25992     displayed below each other), <dfn id=timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical
   25993     growing right writing direction">vertical growing right</dfn> (a
   25994     line extends vertically and is positioned horizontally, with
   25995     consecutive lines displayed to the right of each other<!-- used
   25996     for east asian-->), or <dfn id=timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical
   25997     growing left writing direction">vertical growing left</dfn> (a
   25998     line extends vertically and is positioned horizontally, with
   25999     consecutive lines displayed to the left of each other<!-- used for
   26000     mongolian -->).</p>
   26001    </dd>
   26002 
   26003    <dt><dfn id=timed-track-cue-snap-to-lines-flag title="timed track cue snap-to-lines flag">A snap-to-lines flag</dfn>
   26004    <dd>
   26005     <p>A boolean indicating whether the <a href=#timed-track-cue-line-position title="timed track cue
   26006     line position">line's position</a> is a line position
   26007     (positioned to a multiple of the line dimensions of the first line
   26008     of the cue), or whether it is a percentage of the dimension of the
   26009     video.</p>
   26010    </dd>
   26011 
   26012    <dt><dfn id=timed-track-cue-line-position title="timed track cue line position">A line position</dfn>
   26013    <dd>
   26014     <p>A number giving the position of the lines of the cue, to be
   26015     interpreted as defined by the <a href=#timed-track-cue-writing-direction title="timed track cue writing
   26016     direction">writing direction</a> and <a href=#timed-track-cue-snap-to-lines-flag title="timed track
   26017     cue snap-to-lines flag">snap-to-lines flag</a> of the cue.</p>
   26018    </dd>
   26019 
   26020    <dt><dfn id=timed-track-cue-text-position title="timed track cue text position">A text position</dfn>
   26021    <dd>
   26022     <p>A number giving the position of the text of the cue within each
   26023     line, to be interpreted as a percentage of the video, as defined
   26024     by the <a href=#timed-track-cue-writing-direction title="timed track cue writing direction">writing
   26025     direction</a>.</p>
   26026    </dd>
   26027 
   26028    <dt><dfn id=timed-track-cue-size title="timed track cue size">A size</dfn>
   26029    <dd>
   26030     <p>A number giving the size of the box within which the text of
   26031     each line of the cue is to be aligned, to be interpreted as a
   26032     percentage of the video, as defined by the <a href=#timed-track-cue-writing-direction title="timed
   26033     track cue writing direction">writing direction</a>.</p>
   26034    </dd>
   26035 
   26036    <dt><dfn id=timed-track-cue-alignment title="timed track cue alignment">An alignment</dfn>
   26037    <dd>
   26038     <p>An alignment for the text of each line of the cue, either <dfn id=timed-track-cue-start-alignment title="timed track cue start alignment">start alignment</dfn> (the
   26039     text is aligned towards its start side), <dfn id=timed-track-cue-middle-alignment title="timed track
   26040     cue middle alignment">middle alignment</dfn> (the text is aligned
   26041     centered between its start and end sides), <dfn id=timed-track-cue-end-alignment title="timed track
   26042     cue end alignment">end alignment</dfn> (the text is aligned
   26043     towards its end side). Which sides are the start and end sides
   26044     depends on the Unicode bidirectional algorithm and the <a href=#timed-track-cue-writing-direction title="timed track cue writing direction">writing
   26045     direction</a>. <a href=#refsBIDI>[BIDI]</a></p>
   26046    </dd>
   26047 
   26048    <dt><dfn id=timed-track-cue-voice-identifier title="timed track cue voice identifier">A voice identifier</dfn>
   26049    <dd>
   26050     <p>A string identifying the voice with which the cue is associated.</p>
   26051    </dd>
   26052 
   26053    <dt><dfn id=timed-track-cue-text title="timed track cue text">The text of the cue</dfn>
   26054    <dd>
   26055     <p>The raw text of the cue, and rules for its interpretation,
   26056     allowing the text to be converted to an equivalent fragment of
   26057     HTML.</p>
   26058    </dd>
   26059 
   26060   </dl><p>A <a href=#timed-track-cue>timed track cue</a> is immutable.</p>
   26061 
   26062   <p>Each <a href=#timed-track-cue>timed track cue</a> has a corresponding
   26063   <code><a href=#timedtrackcue>TimedTrackCue</a></code> object, and can be associated with a
   26064   particular <a href=#timed-track>timed track</a>. Once a <a href=#timed-track-cue>timed track
   26065   cue</a> is associated with a particular <a href=#timed-track>timed track</a>,
   26066   the association is permanent.</p>
   26067 
   26068   <p>The <a href=#timed-track title="timed track">timed tracks</a> of a
   26069   <a href=#media-element>media element</a> are <dfn id=the-timed-tracks-are-ready title="the timed tracks are
   26070   ready">ready</dfn> if all the <a href=#timed-track title="timed track">timed
   26071   tracks</a> whose <a href=#timed-track-mode title="timed track mode">mode</a> was
   26072   not in the <a href=#timed-track-disabled title="timed track disabled">disabled</a> state
   26073   when the element's <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection
   26074   algorithm</a> last started now have a <a href=#timed-track-readiness-state>timed track readiness
   26075   state</a> of <a href=#timed-track-loaded title="timed track loaded">loaded</a> or
   26076   <a href=#timed-track-failed-to-load title="timed track failed to load">failed to load</a>.</p>
   26077 
   26078 
   26079   <h6 id=sourcing-in-band-timed-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band timed tracks</h6>
   26080 
   26081   <p>A <dfn id=media-resource-specific-timed-track>media-resource-specific timed track</dfn> is a <a href=#timed-track>timed
   26082   track</a> that corresponds to data found in the <a href=#media-resource>media
   26083   resource</a>.</p>
   26084 
   26085 
   26086   <div class=impl>
   26087 
   26088   <p>Rules for processing and rendering such data are defined by the
   26089   relevant specifications, e.g. the specification of the video format
   26090   if the <a href=#media-resource>media resource</a> is a video.</p>
   26091 
   26092   <p>When a <a href=#media-resource>media resource</a> contains data that the user
   26093   agent recognises and supports as being equivalent to a <a href=#timed-track>timed
   26094   track</a>, the user agent <a href=#found-a-media-resource-specific-timed-track>runs</a> the
   26095   <dfn id=steps-to-expose-a-media-resource-specific-timed-track>steps to expose a media-resource-specific timed track</dfn>
   26096   with the relevant data, as follows:</p>
   26097 
   26098   <ol><li><p>Associate the relevant data with a new <a href=#timed-track>timed
   26099    track</a> and its corresponding new <code><a href=#timedtrack>TimedTrack</a></code>
   26100    object. The <a href=#timed-track>timed track</a> is a
   26101    <a href=#media-resource-specific-timed-track>media-resource-specific timed track</a>.</li>
   26102 
   26103    <li><p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-kind title="timed track
   26104    kind">kind</a>, <a href=#timed-track-label title="timed track label">label</a>,
   26105    and <a href=#timed-track-language title="timed track language">language</a> based on the
   26106    semantics of the relevant data, as defined by the relevant
   26107    specification.</li>
   26108 
   26109    <li><p>Populate the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-list-of-cues title="timed track list of cues">list of cues</a> with the cues
   26110    parsed so far, folllowing the <a href=#guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues>guidelines for exposing
   26111    cues</a>, and begin updating it dynamically as
   26112    necessary.</li>
   26113 
   26114    <li>
   26115 
   26116     <p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-readiness-state title="timed track
   26117     readiness state">readiness state</a> to the value that most
   26118     correctly describes the current state, and begin updating it
   26119     dynamically as necessary.</p>
   26120 
   26121     <p class=example>For example, if the relevant data in the
   26122     <a href=#media-resource>media resource</a> has been fully parsed and completely
   26123     describes the cues, then the <a href=#timed-track>timed track</a> would be
   26124     <a href=#timed-track-loaded title="timed track loaded">loaded</a>. On the other hand,
   26125     if the data for the cues is interleaved with the <a href=#media-data>media
   26126     data</a>, and the <a href=#media-resource>media resource</a> as a whole is
   26127     still being downloaded, then the <a href=#timed-track-loading title="timed track
   26128     loading">loading</a> state might be more accurate.</p>
   26129 
   26130    </li>
   26131 
   26132    <li><p>Set the new <a href=#timed-track>timed track</a>'s <a href=#timed-track-mode title="timed
   26133    track mode">mode</a> to the mode consistent with the user's
   26134    preferences and the requirements of the relevant specification for
   26135    the data.</li>
   26136 
   26137    <li><p>Add the new <a href=#timed-track>timed track</a> to the <a href=#media-element>media
   26138    element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>.</li>
   26139 
   26140   </ol><p>When a <a href=#media-element>media element</a> is to <dfn id="forget-the-media-element's-media-resource-specific-timed-tracks">forget the media
   26141   element's media-resource-specific timed tracks</dfn>, the user
   26142   agent must remove from the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list
   26143   of timed tracks</a> all the <a href=#media-resource-specific-timed-track title="media-resource-specific
   26144   timed track">media-resource-specific timed tracks</a>.</p>
   26145 
   26146   </div>
   26147 
   26148 
   26149 
   26150   <div class=impl>
   26151 
   26152   <h6 id=sourcing-out-of-band-timed-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band timed tracks</h6>
   26153 
   26154   <p>When a <code><a href=#the-track-element>track</a></code> element is created, it must be
   26155   associated with a new <a href=#timed-track>timed track</a> and its corresponding
   26156   new <code><a href=#timedtrack>TimedTrack</a></code> object.</p>
   26157 
   26158   <p>The <a href=#timed-track-kind>timed track kind</a> is determined from the state of
   26159   the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute
   26160   according to the following table; for a state given in a cell of the
   26161   first column, the <a href=#timed-track-kind title="timed track kind">kind</a> is the
   26162   string given in the second column:</p>
   26163 
   26164   <table><thead><tr><th>State
   26165      <th>String
   26166    <tbody><tr><td><a href=#attr-track-kind-subtitles title=attr-track-kind-subtitles>Subtitles</a>
   26167      <td><code title=dom-track-kind-subtitles>subtitles</code>
   26168     <tr><td><a href=#attr-track-kind-captions title=attr-track-kind-captions>Captions</a>
   26169      <td><code title=dom-track-kind-captions>captions</code>
   26170     <tr><td><a href=#attr-track-kind-descriptions title=attr-track-kind-descriptions>Descriptions</a>
   26171      <td><code title=dom-track-kind-descriptions>descriptions</code>
   26172     <tr><td><a href=#attr-track-kind-chapters title=attr-track-kind-chapters>Chapters</a>
   26173      <td><code title=dom-track-kind-chapters>chapters</code>
   26174     <tr><td><a href=#attr-track-kind-metadata title=attr-track-kind-metadata>Metadata</a>
   26175      <td><code title=dom-track-kind-metadata>metadata</code>
   26176   </table><p>The <a href=#timed-track-label>timed track label</a> is the element's <a href=#track-label>track
   26177   label</a>.</p>
   26178 
   26179   <p>The <a href=#timed-track-language>timed track language</a> is the element's
   26180   <a href=#track-language>track language</a>, if any, or the empty string
   26181   otherwise.</p>
   26182 
   26183   <p>As the <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>, <code title=attr-track-label><a href=#attr-track-label>label</a></code>, and <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> attributes are added,
   26184   removed, or changed, the <a href=#timed-track>timed track</a> must update
   26185   accordingly, as per the definitions above.</p>
   26186 
   26187   <p class=note>Changes to the <a href=#track-url>track URL</a> are handled in
   26188   the algorithm below.</p>
   26189 
   26190   <p class=XXX>...cues...</p>
   26191 
   26192   <p>When a <code><a href=#the-track-element>track</a></code> element's parent element changes and
   26193   the new parent is a <a href=#media-element>media element</a>, then add the
   26194   <code><a href=#the-track-element>track</a></code> element's corresponding <a href=#timed-track>timed track</a>
   26195   to the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed
   26196   tracks</a>.</p>
   26197 
   26198   <p>When a <code><a href=#the-track-element>track</a></code> element's parent element changes and
   26199   the old parent was a <a href=#media-element>media element</a>, then remove the
   26200   <code><a href=#the-track-element>track</a></code> element's corresponding <a href=#timed-track>timed track</a>
   26201   from the <a href=#media-element>media element</a>'s <a href=#list-of-timed-tracks>list of timed
   26202   tracks</a>.</p>
   26203 
   26204   <p>When a <a href=#timed-track>timed track</a> corresponding to a
   26205   <code><a href=#the-track-element>track</a></code> element is added to a <a href=#media-element>media
   26206   element</a>'s <a href=#list-of-timed-tracks>list of timed tracks</a>, <span class=XXX>update the mode appropriately</span>.</p>
   26207 
   26208   <p>When a <a href=#timed-track>timed track</a> corresponding to a
   26209   <code><a href=#the-track-element>track</a></code> element is created with <a href=#timed-track-mode>timed track
   26210   mode</a> set to <a href=#timed-track-hidden title="timed track hidden">hidden</a> or
   26211   <a href=#timed-track-showing title="timed track showing">showing</a>, and when a
   26212   <a href=#timed-track>timed track</a> corresponding to a <code><a href=#the-track-element>track</a></code>
   26213   element is created with <a href=#timed-track-mode>timed track mode</a> set to <a href=#timed-track-disabled title="timed track disabled">disabled</a> and subsequently
   26214   changes its <a href=#timed-track-mode>timed track mode</a> to <a href=#timed-track-hidden title="timed
   26215   track hidden">hidden</a> or <a href=#timed-track-showing title="timed track
   26216   showing">showing</a> for the first time, the user agent must
   26217   immediately and synchronously run the 
   26218   following steps:</p>
   26219 
   26220   <ol><li><p>Set the <a href=#timed-track-readiness-state>timed track readiness state</a> to <a href=#timed-track-loading title="timed track loading">loading</a>.</li>
   26221 
   26222    <li><p>Let <var title="">URL</var> be the <a href=#track-url>track URL</a> of
   26223    the <code><a href=#the-track-element>track</a></code> element.</li>
   26224 
   26225    <li><p>Asynchronously run the remaining steps, while continuing
   26226    with whatever task was responsible for creating the <a href=#timed-track>timed
   26227    track</a> or changing the <a href=#timed-track-mode>timed track
   26228    mode</a>.</li>
   26229 
   26230    <li>
   26231 
   26232     <p><i>Download</i>: <a href=#fetch>Fetch</a> <var title="">URL</var>, if
   26233     it isn't the empty string.</p><!-- http-origin privacy sensitive
   26234     -->
   26235 
   26236     <p>The <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue
   26237     a task">queued</a> by the <a href=#fetch title=fetch>fetching
   26238     algorithm</a> on the <a href=#networking-task-source>networking task source</a> to
   26239     process the data as it is being fetched must <span class=XXX>...this is where cross-origin checks go</span>.</p>
   26240 
   26241     <p>If the <a href=#fetch title=fetch>fetching algorithm</a> fails for
   26242     any reason (network error, the server returns an error code, the
   26243     cross-origin checks mentioned above fail, etc), or if <var title="">URL</var> is the empty string, then <a href=#queue-a-task>queue a
   26244     task</a> to first change the <a href=#timed-track-readiness-state>timed track readiness state</a>
   26245     to <a href=#timed-track-failed-to-load title="timed track failed to load">failed to load</a>
   26246     and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-track-element>track</a></code>
   26247     element; and then, once that <a href=#concept-task title=concept-task>task</a> is <a href=#queue-a-task title="queue a
   26248     task">queued</a>, move on to the step below labeled
   26249     <i>monitoring</i>.</p>
   26250 
   26251     <p>If the <a href=#fetch title=fetch>fetching algorithm</a> does not
   26252     fail, then, when it completes, <a href=#queue-a-task>queue a task</a> to first
   26253     change the <a href=#timed-track-readiness-state>timed track readiness state</a> to <a href=#timed-track-loaded title="timed track loaded">loaded</a> and then <a href=#fire-a-simple-event>fire a
   26254     simple event</a> named <code title=event-load>load</code> at
   26255     the <code><a href=#the-track-element>track</a></code> element; and then, once that <a href=#concept-task title=concept-task>task</a> is <a href=#queue-a-task title="queue a
   26256     task">queued</a>, move on to the step below labeled
   26257     <i>monitoring</i>.</p>
   26258 
   26259     <p>If, while the <a href=#fetch title=fetch>fetching algorithm</a> is
   26260     active, either:</p>
   26261 
   26262     <ul><li>the <a href=#track-url>track URL</a> changes so that it is no longer
   26263      equal to <var title="">URL</var>, while the <a href=#timed-track-mode>timed track
   26264      mode</a> is set to <a href=#timed-track-hidden title="timed track
   26265      hidden">hidden</a> or <a href=#timed-track-showing title="timed track
   26266      showing">showing</a>; or</li>
   26267 
   26268      <li>the <a href=#timed-track-mode>timed track mode</a> changes to <a href=#timed-track-hidden title="timed track hidden">hidden</a> or <a href=#timed-track-showing title="timed
   26269      track showing">showing</a>, while the <a href=#track-url>track URL</a> is
   26270      not equal to <var title="">URL</var></li>
   26271 
   26272     </ul><p>...then the user agent must run the following steps:</p>
   26273 
   26274     <ol><li><p>Abort the <a href=#fetch title=fetch>fetching
   26275      algorithm</a>.</li>
   26276 
   26277      <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   26278      event</a> named <code title=event-abort>abort</code> at
   26279      the <code><a href=#the-track-element>track</a></code> element.</li>
   26280 
   26281      <li><p>Let <var title="">URL</var> be the new <a href=#track-url>track
   26282      URL</a>.</li>
   26283 
   26284      <li><p>Jump back to the top of the step labeled
   26285      <i>download</i>.</li>
   26286 
   26287     </ol></li>
   26288 
   26289    <li><p><i>Monitoring</i>: Wait until the <a href=#track-url>track URL</a> is
   26290    no longer equal to <var title="">URL</var>, at the same time as the
   26291    <a href=#timed-track-mode>timed track mode</a> is set to <a href=#timed-track-hidden title="timed track
   26292    hidden">hidden</a> or <a href=#timed-track-showing title="timed track
   26293    showing">showing</a>.</li>
   26294 
   26295    <li><p>Jump to the step labeled <i>download</i>.</li>
   26296 
   26297   </ol></div>
   26298 
   26299 
   26300   <div class=impl>
   26301 
   26302   <h6 id=guidelines-for-exposing-cues-in-various-formats-as-timed-track-cues><span class=secno>4.8.10.10.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
   26303   <a href=#timed-track-cue title="timed track cue">timed track cues</a></h6>
   26304 
   26305   <p class=XXX>...also, how to handle discarding cues that are
   26306   before startTime, for cues that are in-band</p>
   26307 
   26308   </div>
   26309 
   26310 
   26311   <h6 id=timed-track-api><span class=secno>4.8.10.10.5 </span>Timed track API</h6>
   26312 
   26313 <!--
   26314   // timed tracks
   26315   readonly attribute <span>TimedTrack</span>[] <span title="dom-media-tracks">tracks</span>;
   26316   <span>MutableTimedTrack</span> <span title="dom-media-addTrack">addTrack</span>(in DOMString label, in DOMString kind, in DOMString language);
   26317 -->
   26318 
   26319   <pre class=idl>interface <dfn id=timedtrack>TimedTrack</dfn> {
   26320   readonly attribute DOMString <span title=dom-TimedTrack-kind>kind</span>;
   26321   readonly attribute DOMString <span title=dom-TimedTrack-label>label</span>;
   26322   readonly attribute DOMString <span title=dom-TimedTrack-language>language</span>;
   26323 
   26324   const unsigned short <span title=dom-TimedTrack-NONE>NONE</span> = 0;
   26325   const unsigned short <span title=dom-TimedTrack-LOADING>LOADING</span> = 1;
   26326   const unsigned short <span title=dom-TimedTrack-LOADED>LOADED</span> = 2;
   26327   const unsigned short <span title=dom-TimedTrack-ERROR>ERROR</span> = 3;
   26328   readonly attribute unsigned short <span title=dom-TimedTrack-readyState>readyState</span>;
   26329   readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onload>onload</span>;
   26330   readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onerror>onerror</span>;
   26331 
   26332   const unsigned short <span title=dom-TimedTrack-OFF>OFF</span> = 0;
   26333   const unsigned short <span title=dom-TimedTrack-HIDDEN>HIDDEN</span> = 1;
   26334   const unsigned short <span title=dom-TimedTrack-SHOWING>SHOWING</span> = 2;
   26335            attribute unsigned short <span title=dom-TimedTrack-mode>mode</span>;
   26336 
   26337   readonly attribute <a href=#timedtrackcuelist>TimedTrackCueList</a> <span title=dom-TimedTrack-cues>cues</span>;
   26338   readonly attribute <a href=#timedtrackcuelist>TimedTrackCueList</a> <span title=dom-TimedTrack-activeCues>activeCues</span>;
   26339   readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onentercue>onentercue</span>;
   26340   readonly attribute <a href=#function>Function</a> <span title=dom-TimedTrack-onexitcue>onexitcue</span>;
   26341 };
   26342 
   26343 interface <dfn id=mutabletimedtrack>MutableTimedTrack</dfn> : <a href=#timedtrack>TimedTrack</a> {
   26344  void <span title=dom-MutableTimedTrack-addCue>addCue</span>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
   26345  void <span title=dom-MutableTimedTrack-removeCue>removeCue</span>(in <a href=#timedtrackcue>TimedTrackCue</a> cue);
   26346 };
   26347 
   26348 interface <dfn id=timedtrackcuelist>TimedTrackCueList</dfn> {
   26349   readonly attribute unsigned long <span title=dom-TimedTrackCueList-length>length</span>;
   26350   getter <a href=#timedtrackcue>TimedTrackCue</a> (in unsigned long index);
   26351   <a href=#timedtrackcue>TimedTrackCue</a> getCueById(in DOMString id);
   26352 };
   26353 
   26354 [Constructor(in DOMString id, in float startTime, in float endTime, in DOMString settings, in DOMString text, in optional boolean pauseOnExit)]
   26355 interface <dfn id=timedtrackcue>TimedTrackCue</dfn> {
   26356   readonly attribute <a href=#timedtrack>TimedTrack</a> <span title=dom-TimedTrackCue-track>track</span>;
   26357   readonly attribute DOMString <span title=dom-TimedTrackCue-id>id</span>;
   26358 
   26359   readonly attribute float <span title=dom-TimedTrackCue-startTime>startTime</span>;
   26360   readonly attribute float <span title=dom-TimedTrackCue-endTime>endTime</span>;
   26361   readonly attribute boolean <span title=dom-TimedTrackCue-pauseOnExit>pauseOnExit</span>;
   26362 
   26363   readonly attribute DOMString <span title=dom-TimedTrackCue-direction>direction</span>;
   26364   readonly attribute boolean <span title=dom-TimedTrackCue-snapToLines>snapToLines</span>;
   26365   readonly attribute long <span title=dom-TimedTrackCue-linePosition>linePosition</span>;
   26366   readonly attribute long <span title=dom-TimedTrackCue-textPosition>textPosition</span>;
   26367   readonly attribute long <span title=dom-TimedTrackCue-size>size</span>;
   26368   readonly attribute DOMString <span title=dom-TimedTrackCue-alignment>alignment</span>;
   26369 
   26370   readonly attribute DOMString <span title=dom-TimedTrackCue-voice>voice</span>;
   26371   DOMString <span title=dom-TimedTrackCue-getCueAsSource()>getCueAsSource</span>();
   26372   <a href=#documentfragment>DocumentFragment</a> <span title=dom-TimedTrackCue-getCueAsHTML()>getCueAsHTML</span>();
   26373 };</pre>
   26374 
   26375   <p class=XXX>domintro
   26376 
   26377   <div class=impl>
   26378 
   26379   <p class=XXX>...
   26380 
   26381   <!-- XXX
   26382    Make sure that .cues and .activeCues doesn't change while script is
   26383    running, except for addCue/removeCue and the removal of all cues in
   26384    the face of a dynamic track.src change.
   26385   -->
   26386 
   26387   </div>
   26388 
   26389 
   26390   <h6 id=cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</h6>
   26391 
   26392   <p class=XXX>...
   26393 
   26394 <!-- XXX
   26395 CueEvent
   26396  readonly attribute TimedTrackCue cue;
   26397 -->
   26398 
   26399 
   26400   <h5 id=websrt><span class=secno>4.8.10.11 </span>WebSRT</h5>
   26401 
   26402   <p>The WebSRT format (Web Subtitle Resource Tracks) is a format
   26403   intended for marking up external timed track resources.</p>
   26404 
   26405 
   26406   <h6 id=syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</h6>
   26407 
   26408   <p>A <dfn id=websrt-file>WebSRT file</dfn> must consist of a <a href=#websrt-file-body>WebSRT file
   26409   body</a> encoded as UTF-8.</p>
   26410 
   26411   <p>A <dfn id=websrt-file-body>WebSRT file body</dfn> consists of zero or more <a href=#websrt-cue title="WebSRT cue">WebSRT cues</a> separated from each other by
   26412   two or more <a href=#websrt-line-terminator title="WebSRT line terminator">WebSRT line
   26413   terminators</a>.</p>
   26414 
   26415   <p>A <dfn id=websrt-cue>WebSRT cue</dfn> consists of the following components, in
   26416   the given order:</p>
   26417 
   26418   <ol><li>Optionally, a <a href=#websrt-cue-identifier>WebSRT cue identifier</a>.</li>
   26419    <li><a href=#websrt-cue-timings>WebSRT cue timings</a>.</li>
   26420    <li>Optionally, <a href=#websrt-cue-settings>WebSRT cue settings</a>.</li>
   26421    <li>A <a href=#websrt-line-terminator>WebSRT line terminator</a>.</li>
   26422    <li>Optionally, a <a href=#websrt-voice-declaration>WebSRT voice declaration</a>.</li>
   26423    <li>One or more <a href=#websrt-cue-text-line title="WebSRT cue text line">WebSRT cue text lines</a>, each separated from the next by a <a href=#websrt-line-terminator>WebSRT line terminator</a>.</li>
   26424    <li>Zero or more <a href=#websrt-line-terminator title="WebSRT line terminator">WebSRT line terminators</a>.</li>
   26425   </ol><p>A <dfn id=websrt-line-terminator>WebSRT line terminator</dfn> consists of one of the
   26426   following:</p>
   26427 
   26428   <ul class=brief><li>A U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.</li>
   26429    <li>A single U+000A LINE FEED (LF) character.</li>
   26430    <li>A single U+000D CARRIAGE RETURN (CR) character.</li>
   26431   </ul><p>A <dfn id=websrt-cue-identifier>WebSRT cue identifier</dfn> is any sequence of one or more
   26432   characters not containing the substring "<code title="">--&gt;</code>"
   26433   (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN
   26434   SIGN).</p>
   26435 
   26436   <p>The <dfn id=websrt-cue-timings>WebSRT cue timings</dfn> part of a <a href=#websrt-cue>WebSRT
   26437   cue</a> consists of the following components, in the given
   26438   order:</p>
   26439 
   26440   <ol><li>A <a href=#websrt-timestamp>WebSRT timestamp</a> representing the start time
   26441    offset of the cue.</li>
   26442 
   26443    <li>Optionally, a U+0020 SPACE character.</li>
   26444 
   26445    <li>The string "<code title="">--&gt;</code>" (U+002D HYPHEN-MINUS,
   26446    U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</li>
   26447 
   26448    <li>Optionally, a U+0020 SPACE character.</li>
   26449 
   26450    <li>A <a href=#websrt-timestamp>WebSRT timestamp</a> representing the end time
   26451    offset of the cue.</li>
   26452 
   26453   </ol><p>The <dfn id=websrt-cue-settings>WebSRT cue settings</dfn> part of a <a href=#websrt-cue>WebSRT
   26454   cue</a> consists of the following components, in the given
   26455   order:</p>
   26456 
   26457   <ol><li class=XXX>...
   26458 
   26459   </ol><p class=XXX><dfn id=websrt-voice-declaration>WebSRT voice declaration</dfn>; <dfn id=websrt-cue-text-line>WebSRT cue text line</dfn>; <dfn id=websrt-timestamp>WebSRT timestamp</dfn></p>
   26460 
   26461 
   26462   <div class=impl>
   26463 
   26464   <h6 id=parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</h6>
   26465 
   26466   <p>A <dfn id=websrt-parser>WebSRT parser</dfn>, given an input byte stream and a
   26467   <a href=#timed-track-list-of-cues>timed track list of cues</a> <var title="">output</var>,
   26468   must convert the bytes into a string of Unicode characters by
   26469   interpreting them as UTF-8, and then must parse the resulting string
   26470   according to the <a href=#websrt-parser-algorithm>WebSRT parser algorithm</a> below. A
   26471   <a href=#websrt-parser>WebSRT parser</a>, specifically its conversion and parsing
   26472   steps, is typically run asynchronously, with the input byte stream
   26473   being updated incrementally as the resource is downloaded; this is
   26474   called an <dfn id=incremental-websrt-parser>incremental WebSRT parser</dfn>.</p>
   26475 
   26476   <p>When convering the bytes into Unicode characters, bytes or
   26477   sequences of bytes that are not valid UTF-8 sequences must be
   26478   interpreted as a U+FFFD REPLACEMENT CHARACTER, and all U+0000 NULL
   26479   characters must be replaced by U+FFFD REPLACEMENT CHARACTERs.</p>
   26480 
   26481   <p>The <dfn id=websrt-parser-algorithm>WebSRT parser algorithm</dfn> is as follows:</p>
   26482 
   26483   <ol><li><p>Let <var title="">input</var> be the string being
   26484    parsed.</li>
   26485 
   26486    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   26487    string. In an <a href=#incremental-websrt-parser>incremental WebSRT parser</a>, when this
   26488    algorithm (or further algorithms that it uses) moves the <var title="">position</var> pointer, the user agent must wait until
   26489    appropriate further characters from the byte stream have been added
   26490    to <var title="">input</var> before moving the pointer, so that the
   26491    algorithm never reads past the end of the <var title="">input</var>
   26492    string. Once the byte stream has ended, and all characters have
   26493    been added to <var title="">input</var>, then the <var title="">position</var> pointer may, when so instructed by the
   26494    algorithms, be moved past the end of <var title="">input</var>.</li>
   26495 
   26496    <li><p><i>Cue loop</i>: <a href=#collect-a-sequence-of-characters>Collect a sequence of
   26497    characters</a> that are either U+000D CARRIAGE RETURN (CR) or
   26498    U+000A LINE FEED (LF) characters.</li>
   26499 
   26500    <li><p>Let <var title="">id</var> be the empty string.</li>
   26501 
   26502    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   26503    <em>not</em> U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF)
   26504    characters. Let <var title="">line</var> be those characters, if
   26505    any.</li>
   26506 
   26507    <li><p>If <var title="">line</var> is the empty string, then jump
   26508    to the step labeled <i>end</i>.</li>
   26509 
   26510    <li><p>If <var title="">line</var> contains the three-character
   26511    substring "<code title="">--&gt;</code>" (U+002D HYPHEN-MINUS, U+002D
   26512    HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then jump to the step
   26513    labeled <i>timing</i> below.</li>
   26514 
   26515    <li><p>Let <var title="">id</var> be <var title="">line</var>.<p></li>
   26516 
   26517    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled
   26518    <i>end</i>.</li>
   26519 
   26520    <li><p>If the character indicated by <var title="">position</var>
   26521    is a U+000D CARRIAGE RETURN (CR) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>
   26522 
   26523    <li><p>If the character indicated by <var title="">position</var>
   26524    is a U+000A LINE FEED (LF) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>
   26525 
   26526    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   26527    <em>not</em> U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF)
   26528    characters. Let <var title="">line</var> be those characters, if
   26529    any.</li>
   26530 
   26531    <li><p>If <var title="">line</var> is the empty string, then jump
   26532    to the step labeled <i>cue loop</i>.</li>
   26533 
   26534    <li><p><i>Timings</i>: <span class=XXX>...</span></li>
   26535 
   26536    <li><p><i>End</i>: The file has ended. Abort these steps. The
   26537    <a href=#websrt-parser>WebSRT parser</a> has finished.</li>
   26538 
   26539   </ol></div>
   26540 
   26541 <!--TT-->
   26542 
   26543 
   26544   <h5 id=user-interface><span class=secno>4.8.10.12 </span>User interface</h5>
   26545 
   26546   <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
   26547   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
   26548   indicates that the author has not provided a scripted controller and
   26549   would like the user agent to provide its own set of controls.</p>
   26550 
   26551   <div class=impl>
   26552 
   26553   <p>If the attribute is present, or if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   26554   <a href=#media-element>media element</a>, then the user agent should <dfn id=expose-a-user-interface-to-the-user>expose a
   26555   user interface to the user</dfn>. This user interface should include
   26556   features to begin playback, pause playback, seek to an arbitrary
   26557   position in the content (if the content supports arbitrary seeking),
   26558   change the volume, change the display of closed captions
   26559 
   26560   <!-- XXX update this to mention timed tracks -->
   26561 
   26562   or embedded
   26563   sign-language tracks, select different audio tracks or turn on audio
   26564   descriptions, and show the media content in manners more suitable to
   26565   the user (e.g. full-screen video or in an independent resizable
   26566   window). Other controls may also be made available.</p>
   26567 
   26568   <p>Even when the attribute is absent, however, user agents may
   26569   provide controls to affect playback of the media resource
   26570   (e.g. play, pause, seeking, and volume controls), but such features
   26571   should not interfere with the page's normal rendering. For example,
   26572   such features could be exposed in the <a href=#media-element>media element</a>'s
   26573   context menu.</p>
   26574 
   26575   <p>Where possible (specifically, for starting, stopping, pausing,
   26576   and unpausing playback, for muting or changing the volume of the
   26577   audio, and for seeking), user interface features exposed by the user
   26578   agent must be implemented in terms of the DOM API described above,
   26579   so that, e.g., all the same events fire.</p>
   26580 
   26581   <p>The <dfn id=dom-media-controls title=dom-media-controls><code>controls</code></dfn>
   26582   IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
   26583   same name.</p>
   26584 
   26585   <hr></div>
   26586 
   26587   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> [ = <var title="">value</var> ]</dt>
   26588 
   26589    <dd>
   26590 
   26591     <p>Returns the current playback volume, as a number in the range
   26592     0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.</p>
   26593 
   26594     <p>Can be set, to change the volume.</p>
   26595 
   26596     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the new value is not
   26597     in the range 0.0 .. 1.0.</p>
   26598 
   26599    </dd>
   26600 
   26601    <dt><var title="">media</var> . <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> [ = <var title="">value</var> ]</dt>
   26602 
   26603    <dd>
   26604 
   26605     <p>Returns true if audio is muted, overriding the <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute, and false if the
   26606     <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute is being
   26607     honored.</p>
   26608 
   26609     <p>Can be set, to change whether the audio is muted or not.</p>
   26610 
   26611    </dd>
   26612 
   26613   </dl><div class=impl>
   26614 
   26615   <p>The <dfn id=dom-media-volume title=dom-media-volume><code>volume</code></dfn>
   26616   attribute must return the playback volume of any audio portions of
   26617   the <a href=#media-element>media element</a>, in the range 0.0 (silent) to 1.0
   26618   (loudest). Initially, the volume must be 1.0, but user agents may
   26619   remember the last set value across sessions, on a per-site basis or
   26620   otherwise, so the volume may start at other values. On setting, if
   26621   the new value is in the range 0.0 to 1.0 inclusive, the attribute
   26622   must be set to the new value and the playback volume must be
   26623   correspondingly adjusted as soon as possible after setting the
   26624   attribute, with 0.0 being silent, and 1.0 being the loudest setting,
   26625   values in between increasing in loudness. The range need not be
   26626   linear. The loudest setting may be lower than the system's loudest
   26627   possible setting; for example the user could have set a maximum
   26628   volume. If the new value is outside the range 0.0 to 1.0 inclusive,
   26629   then, on setting, an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be
   26630   raised instead.</p>
   26631 
   26632   <p>The <dfn id=dom-media-muted title=dom-media-muted><code>muted</code></dfn>
   26633   attribute must return true if the audio channels are muted and false
   26634   otherwise. Initially, the audio channels should not be muted
   26635   (false), but user agents may remember the last set value across
   26636   sessions, on a per-site basis or otherwise, so the muted state may
   26637   start as muted (true). On setting, the attribute must be set to the
   26638   new value; if the new value is true, audio playback for this
   26639   <a href=#media-resource>media resource</a> must then be muted, and if false, audio
   26640   playback must then be enabled.</p>
   26641 
   26642   <p>Whenever either the <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> or
   26643   <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attributes are changed,
   26644   the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   26645   event</a> named <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> at the <a href=#media-element>media
   26646   element</a>.</p>
   26647 
   26648   </div>
   26649 
   26650 
   26651 
   26652 
   26653   <h5 id=time-ranges><span class=secno>4.8.10.13 </span>Time ranges</h5>
   26654 
   26655   <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
   26656   represent a list of ranges (periods) of time.</p>
   26657 
   26658   <pre class=idl>interface <dfn id=timeranges>TimeRanges</dfn> {
   26659   readonly attribute unsigned long <a href=#dom-timeranges-length title=dom-TimeRanges-length>length</a>;
   26660   float <a href=#dom-timeranges-start title=dom-TimeRanges-start>start</a>(in unsigned long index);
   26661   float <a href=#dom-timeranges-end title=dom-TimeRanges-end>end</a>(in unsigned long index);
   26662 };</pre>
   26663 
   26664   <dl class=domintro><dt><var title="">media</var> . <code title=dom-TimeRanges-length><a href=#dom-timeranges-length>length</a></code></dt>
   26665 
   26666    <dd>
   26667 
   26668     <p>Returns the number of ranges in the object.</p>
   26669 
   26670    </dd>
   26671 
   26672    <dt><var title="">time</var> = <var title="">media</var> . <code title=dom-TimeRanges-start><a href=#dom-timeranges-start>start</a></code>(<var title="">index</var>)</dt>
   26673 
   26674    <dd>
   26675 
   26676     <p>Returns the time for the start of the range with the given index.</p>
   26677 
   26678     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the index is out of range.</p>
   26679 
   26680    </dd>
   26681 
   26682    <dt><var title="">time</var> = <var title="">media</var> . <code title=dom-TimeRanges-end><a href=#dom-timeranges-end>end</a></code>(<var title="">index</var>)</dt>
   26683 
   26684    <dd>
   26685 
   26686     <p>Returns the time for the end of the range with the given index.</p>
   26687 
   26688     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the index is out of range.</p>
   26689 
   26690    </dd>
   26691 
   26692   </dl><div class=impl>
   26693 
   26694   <p>The <dfn id=dom-timeranges-length title=dom-TimeRanges-length><code>length</code></dfn>
   26695   IDL attribute must return the number of ranges represented by the object.</p>
   26696 
   26697   <p>The <dfn id=dom-timeranges-start title=dom-TimeRanges-start><code>start(<var title="">index</var>)</code></dfn> method must return the position
   26698   of the start of the <var title="">index</var>th range represented by
   26699   the object, in seconds measured from the start of the timeline that
   26700   the object covers.</p>
   26701 
   26702   <p>The <dfn id=dom-timeranges-end title=dom-TimeRanges-end><code>end(<var title="">index</var>)</code></dfn> method must return the position
   26703   of the end of the <var title="">index</var>th range represented by
   26704   the object, in seconds measured from the start of the timeline that
   26705   the object covers.</p>
   26706 
   26707   <p>These methods must raise <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exceptions
   26708   if called with an <var title="">index</var> argument greater than or
   26709   equal to the number of ranges represented by the object.</p>
   26710 
   26711   <p>When a <code><a href=#timeranges>TimeRanges</a></code> object is said to be a
   26712   <dfn id=normalized-timeranges-object>normalized <code>TimeRanges</code> object</dfn>, the ranges it
   26713   represents must obey the following criteria:</p>
   26714 
   26715   <ul><li>The start of a range must be greater than the end of all
   26716    earlier ranges.</li>
   26717 
   26718    <li>The start of a range must be less than the end of that same
   26719    range.</li>
   26720 
   26721   </ul><p>In other words, the ranges in such an object are ordered, don't
   26722   overlap, aren't empty, and don't touch (adjacent ranges are folded
   26723   into one bigger range).</p>
   26724 
   26725   <p>The timelines used by the objects returned by the <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>, <code title=dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> and <code title=dom-media-played><a href=#dom-media-played>played</a></code> IDL attributes of <a href=#media-element title="media element">media elements</a> must be the same as that
   26726   element's <a href=#media-resource>media resource</a>'s timeline.</p>
   26727 
   26728   </div>
   26729 
   26730 
   26731   <h5 id=mediaevents><span class=secno>4.8.10.14 </span>Event summary</h5>
   26732 
   26733   <p><i>This section is non-normative.</i></p>
   26734 
   26735   <p>The following events fire on <a href=#media-element title="media element">media
   26736   elements</a> as part of the processing model described above:</p>
   26737 
   26738   <table><thead><tr><th>Event name
   26739      <th>Interface
   26740      <th>Dispatched when...
   26741      <th>Preconditions
   26742 
   26743    <tbody><tr><td><dfn id=event-media-loadstart title=event-media-loadstart><code>loadstart</code></dfn>
   26744      <td><code><a href=#event>Event</a></code>
   26745      <td>The user agent begins looking for <a href=#media-data>media data</a>, as part of the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection algorithm</a>.
   26746      <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>
   26747     <tr><td><dfn id=event-media-progress title=event-media-progress><code>progress</code></dfn>
   26748      <td><code><a href=#event>Event</a></code>
   26749      <td>The user agent is fetching <a href=#media-data>media data</a>.
   26750      <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>
   26751     <tr><td><dfn id=event-media-suspend title=event-media-suspend><code>suspend</code></dfn>
   26752      <td><code><a href=#event>Event</a></code>
   26753      <td>The user agent is intentionally not currently fetching <a href=#media-data>media data</a>, but does not have the entire <a href=#media-resource>media resource</a> downloaded.
   26754      <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>
   26755     <tr><td><dfn id=event-media-abort title=event-media-abort><code>abort</code></dfn>
   26756      <td><code><a href=#event>Event</a></code>
   26757      <td>The user agent stops fetching the <a href=#media-data>media data</a> before it is completely downloaded, but not due to an error.
   26758      <td><code title=dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code title=dom-MediaError-MEDIA_ERR_ABORTED><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>.
   26759          <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals either <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.
   26760     <tr><td><dfn id=event-media-error title=event-media-error><code>error</code></dfn>
   26761      <td><code><a href=#event>Event</a></code>
   26762      <td>An error occurs while fetching the <a href=#media-data>media data</a>.
   26763      <td><code title=dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code title=dom-MediaError-MEDIA_ERR_NETWORK><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code> or higher.
   26764          <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> equals either <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code title=dom-media-NETWORK_IDLE><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.
   26765     <tr><td><dfn id=event-media-emptied title=event-media-emptied><code>emptied</code></dfn>
   26766      <td><code><a href=#event>Event</a></code>
   26767      <td>A <a href=#media-element>media element</a> whose <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> was previously not in the <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the <code title=dom-media-load><a href=#dom-media-load>load()</a></code> method was invoked while the <a href=#concept-media-load-algorithm title=concept-media-load-algorithm>resource selection algorithm</a> was already running).
   26768      <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>; all the IDL attributes are in their initial states.
   26769     <tr><td><dfn id=event-media-stalled title=event-media-stalled><code>stalled</code></dfn>
   26770      <td><code><a href=#event>Event</a></code>
   26771      <td>The user agent is trying to fetch <a href=#media-data>media data</a>, but data is unexpectedly not forthcoming.
   26772      <td><code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> is <code title=dom-media-NETWORK_LOADING><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.
   26773 
   26774    <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
   26775      <td><code><a href=#event>Event</a></code>
   26776      <td>Playback has begun. Fired after the <code title=dom-media-play><a href=#dom-media-play>play()</a></code> method has returned, or when the <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute has caused playback to begin.
   26777      <td><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
   26778     <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
   26779      <td><code><a href=#event>Event</a></code>
   26780      <td>Playback has been paused. Fired after the <code title=dom-media-pause><a href=#dom-media-pause>pause()</a></code> method has returned.
   26781      <td><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.
   26782 
   26783    <tbody><tr><td><dfn id=event-media-loadedmetadata title=event-media-loadedmetadata><code>loadedmetadata</code></dfn>
   26784      <td><code><a href=#event>Event</a></code>
   26785      <td>The user agent has just determined the duration and dimensions of the <a href=#media-resource>media resource</a>
   26786 <!--TT-->
   26787  and <a href=#the-timed-tracks-are-ready>the timed tracks are ready</a>.
   26788 <!--TT-->
   26789      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater for the first time.
   26790     <tr><td><dfn id=event-media-loadeddata title=event-media-loadeddata><code>loadeddata</code></dfn>
   26791      <td><code><a href=#event>Event</a></code>
   26792      <td>The user agent can render the <a href=#media-data>media data</a> at the <a href=#current-playback-position>current playback position</a> for the first time.
   26793      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> newly increased to <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater for the first time.
   26794     <tr><td><dfn id=event-media-waiting title=event-media-waiting><code>waiting</code></dfn>
   26795      <td><code><a href=#event>Event</a></code>
   26796      <td>Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.
   26797      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to or less than <code title=dom-media-HAVE_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, and <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is false. Either <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true, or the <a href=#current-playback-position>current playback position</a> is not contained in any of the ranges in <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>. It is possible for playback to stop for two other reasons without <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> being false, but those two reasons do not fire this event: maybe <a href=#ended-playback title="ended playback">playback ended</a>, or playback <a href=#stopped-due-to-errors>stopped due to errors</a>.
   26798     <tr><td><dfn id=event-media-playing title=event-media-playing><code>playing</code></dfn>
   26799      <td><code><a href=#event>Event</a></code>
   26800      <td>Playback has started.
   26801      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to or greater than <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is false, <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is false, or the <a href=#current-playback-position>current playback position</a> is contained in one of the ranges in <code title=dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>.
   26802     <tr><td><dfn id=event-media-canplay title=event-media-canplay><code>canplay</code></dfn>
   26803      <td><code><a href=#event>Event</a></code>
   26804      <td>The user agent can resume playback of the <a href=#media-data>media data</a>, but estimates that if playback were to be started now, the <a href=#media-resource>media resource</a> could not be rendered at the current playback rate up to its end without having to stop for further buffering of content.
   26805      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> newly increased to <code title=dom-media-HAVE_FUTURE_DATA><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or greater.
   26806     <tr><td><dfn id=event-media-canplaythrough title=event-media-canplaythrough><code>canplaythrough</code></dfn>
   26807      <td><code><a href=#event>Event</a></code>
   26808      <td>The user agent estimates that if playback were to be started now, the <a href=#media-resource>media resource</a> could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
   26809      <td><code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code title=dom-media-HAVE_ENOUGH_DATA><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>.
   26810 
   26811    <tbody><tr><td><dfn id=event-media-seeking title=event-media-seeking><code>seeking</code></dfn>
   26812      <td><code><a href=#event>Event</a></code>
   26813      <td>The <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
   26814      <td>
   26815     <tr><td><dfn id=event-media-seeked title=event-media-seeked><code>seeked</code></dfn>
   26816      <td><code><a href=#event>Event</a></code>
   26817      <td>The <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to false.
   26818      <td>
   26819     <tr><td><dfn id=event-media-timeupdate title=event-media-timeupdate><code>timeupdate</code></dfn>
   26820      <td><code><a href=#event>Event</a></code>
   26821      <td>The <a href=#current-playback-position>current playback position</a> changed as part of normal playback or in an especially interesting way, for example discontinuously.
   26822      <td>
   26823     <tr><td><dfn id=event-media-ended title=event-media-ended><code>ended</code></dfn>
   26824      <td><code><a href=#event>Event</a></code>
   26825      <td>Playback has stopped because the end of the <a href=#media-resource>media resource</a> was reached.
   26826      <td><code title=dom-media-currentTime><a href=#dom-media-currenttime>currentTime</a></code> equals the end of the <a href=#media-resource>media resource</a>; <code title=dom-media-ended><a href=#dom-media-ended>ended</a></code> is true.
   26827 
   26828    <tbody><tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
   26829      <td><code><a href=#event>Event</a></code>
   26830      <td>Either the <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute has just been updated.
   26831      <td>
   26832     <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
   26833      <td><code><a href=#event>Event</a></code>
   26834      <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
   26835      <td>
   26836     <tr><td><dfn id=event-media-volumechange title=event-media-volumechange><code>volumechange</code></dfn>
   26837      <td><code><a href=#event>Event</a></code>
   26838      <td>Either the <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute or the <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code> attribute has changed. Fired after the relevant attribute's setter has returned.
   26839      <td>
   26840   </table><div class=impl>
   26841 
   26842   <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</h5>
   26843 
   26844   <p>The main security and privacy implications of the
   26845   <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
   26846   ability to embed media cross-origin. There are two directions that
   26847   threats can flow: from hostile content to a victim page, and from a
   26848   hostile page to victim content.</p>
   26849 
   26850   <hr><p>If a victim page embeds hostile content, the threat is that the
   26851   content might contain scripted code that attempts to interact with
   26852   the <code><a href=#document>Document</a></code> that embeds the content. To avoid this,
   26853   user agents must ensure that there is no access from the content to
   26854   the embedding page. In the case of media content that uses DOM
   26855   concepts, the embedded content must be treated as if it was in its
   26856   own unrelated <a href=#top-level-browsing-context>top-level browsing context</a>.</p>
   26857 
   26858   <p class=example>For instance, if an SVG animation was embedded in
   26859   a <code><a href=#video>video</a></code> element, the user agent would not give it
   26860   access to the DOM of the outer page. From the perspective of scripts
   26861   in the SVG resource, the SVG file would appear to be in a lone
   26862   top-level browsing context with no parent.</p>
   26863 
   26864   <hr><p>If a hostile page embeds victim content, the threat is that the
   26865   embedding page could obtain information from the content that it
   26866   would not otherwise have access to. The API does expose some
   26867   information: the existence of the media, its type, its duration, its
   26868   size, and the performance characteristics of its host. Such
   26869   information is already potentially problematic, but in practice the
   26870   same information can more or less be obtained using the
   26871   <code><a href=#the-img-element>img</a></code> element, and so it has been deemed acceptable.</p>
   26872 
   26873   <p>However, significantly more sensitive information could be
   26874   obtained if the user agent further exposes metadata within the
   26875   content such as subtitles or chapter titles. This version of the API
   26876   does not expose such information. Future extensions to this API will
   26877   likely reuse a mechanism such as CORS to check that the embedded
   26878   content's site has opted in to exposing such information. <a href=#refsCORS>[CORS]</a></p> <!-- v2 -->
   26879 
   26880   <p class=example>An attacker could trick a user running within a
   26881   corporate network into visiting a site that attempts to load a video
   26882   from a previously leaked location on the corporation's intranet. If
   26883   such a video included confidential plans for a new product, then
   26884   being able to read the subtitles would present a confidentiality
   26885   breach.</p>
   26886 
   26887   </div>
   26888 
   26889 
   26890   <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
   26891 
   26892   <dl class=element><dt>Categories</dt>
   26893    <dd><a href=#flow-content>Flow content</a>.</dd>
   26894    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   26895    <dd><a href=#embedded-content>Embedded content</a>.</dd>
   26896    <dt>Contexts in which this element may be used:</dt>
   26897    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
   26898    <dt>Content model:</dt>
   26899    <dd><a href=#transparent>Transparent</a>.</dd>
   26900    <dt>Content attributes:</dt>
   26901    <dd><a href=#global-attributes>Global attributes</a></dd>
   26902    <dd><code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code></dd>
   26903    <dd><code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></dd>
   26904    <dt>DOM interface:</dt>
   26905    <dd>
   26906     <pre class=idl>interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   26907            attribute unsigned long <a href=#dom-canvas-width title=dom-canvas-width>width</a>;
   26908            attribute unsigned long <a href=#dom-canvas-height title=dom-canvas-height>height</a>;
   26909 
   26910   DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(in optional DOMString type, in any... args);
   26911 
   26912   object <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(in DOMString contextId);
   26913 };</pre>
   26914    </dd>
   26915   </dl><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a
   26916   resolution-dependent bitmap canvas, which can be used for rendering
   26917   graphs, game graphics, or other visual images on the fly.</p>
   26918 
   26919   <p>Authors should not use the <code><a href=#the-canvas-element>canvas</a></code> element in a
   26920   document when a more suitable element is available. For example, it
   26921   is inappropriate to use a <code><a href=#the-canvas-element>canvas</a></code> element to render a
   26922   page heading: if the desired presentation of the heading is
   26923   graphically intense, it should be marked up using appropriate
   26924   elements (typically <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) and then styled using CSS and
   26925   supporting technologies such as XBL.</p>
   26926 
   26927   <p>When authors use the <code><a href=#the-canvas-element>canvas</a></code> element, they must also
   26928   provide content that, when presented to the user, conveys
   26929   essentially the same function or purpose as the bitmap canvas. This
   26930   content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code>
   26931   element. The contents of the <code><a href=#the-canvas-element>canvas</a></code> element, if any,
   26932   are the element's <a href=#fallback-content>fallback content</a>.</p>
   26933 
   26934   <p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   26935   <code><a href=#the-canvas-element>canvas</a></code> element, and if support for <code><a href=#the-canvas-element>canvas</a></code>
   26936   elements has been enabled, the <code><a href=#the-canvas-element>canvas</a></code> element
   26937   <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> consisting of
   26938   a dynamically created image.</p>
   26939 
   26940   <p>In non-interactive, static, visual media, if the
   26941   <code><a href=#the-canvas-element>canvas</a></code> element has been previously painted on (e.g. if
   26942   the page was viewed in an interactive visual medium and is now being
   26943   printed, or if some script that ran during the page layout process
   26944   painted on the element), then the <code><a href=#the-canvas-element>canvas</a></code> element
   26945   <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> with the
   26946   current image and size. Otherwise, the element represents its
   26947   <a href=#fallback-content>fallback content</a> instead.</p>
   26948 
   26949   <p>In non-visual media, and in visual media if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
   26950   <code><a href=#the-canvas-element>canvas</a></code> element or if support for <code><a href=#the-canvas-element>canvas</a></code>
   26951   elements has been disabled, the <code><a href=#the-canvas-element>canvas</a></code> element
   26952   <a href=#represents>represents</a> its <a href=#fallback-content>fallback content</a>
   26953   instead.</p>
   26954 
   26955   <!-- CANVAS-FOCUS-FALLBACK -->
   26956   <p>When a <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a>
   26957   <a href=#embedded-content>embedded content</a>, the user can still focus descendants
   26958   of the <code><a href=#the-canvas-element>canvas</a></code> element (in the <a href=#fallback-content>fallback
   26959   content</a>). This allows authors to make an interactive canvas
   26960   keyboard-focusable: authors should have a one-to-one mapping of
   26961   interactive regions to focusable elements in the <a href=#fallback-content>fallback
   26962   content</a>.</p>
   26963 
   26964   <p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the
   26965   size of the coordinate space: <dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These
   26966   attributes, when specified, must have values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative
   26967   integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing
   26968   non-negative integers</a> must be used to obtain their numeric
   26969   values. If an attribute is missing, or if parsing its value returns
   26970   an error, then the default value must be used instead.</span> The
   26971   <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> attribute defaults to
   26972   300, and the <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
   26973   attribute defaults to 150.</p>
   26974 
   26975   <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element equal
   26976   the size of the coordinate space, with the numbers interpreted in
   26977   CSS pixels. However, the element can be sized arbitrarily by a
   26978   style sheet. During rendering, the image is scaled to fit this layout
   26979   size.</p>
   26980 
   26981   <div class=impl>
   26982 
   26983   <p>The size of the coordinate space does not necessarily represent
   26984   the size of the actual bitmap that the user agent will use
   26985   internally or during rendering. On high-definition displays, for
   26986   instance, the user agent may internally use a bitmap with two device
   26987   pixels per unit in the coordinate space, so that the rendering
   26988   remains at high quality throughout.</p>
   26989 
   26990   <p>When the <code><a href=#the-canvas-element>canvas</a></code> element is created, and subsequently
   26991   whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes are set (whether
   26992   to a new value or to the previous value), the bitmap and any
   26993   associated contexts must be cleared back to their initial state and
   26994   reinitialized with the newly specified coordinate space
   26995   dimensions.</p>
   26996 
   26997   <p>When the canvas is initialized, its bitmap must be cleared to
   26998   transparent black.</p>
   26999 
   27000   <p>The <dfn id=dom-canvas-width title=dom-canvas-width><code>width</code></dfn> and
   27001   <dfn id=dom-canvas-height title=dom-canvas-height><code>height</code></dfn> IDL
   27002   attributes must <a href=#reflect>reflect</a> the respective content
   27003   attributes of the same name.</p>
   27004 
   27005   </div>
   27006 
   27007   <div class=example>
   27008    <p>Only one square appears to be drawn in the following example:</p>
   27009    <pre>  // canvas is a reference to a &lt;canvas&gt; element
   27010   var context = canvas.getContext('2d');
   27011   context.fillRect(0,0,50,50);
   27012   canvas.setAttribute('width', '300'); // clears the canvas
   27013   context.fillRect(0,100,50,50);
   27014   canvas.width = canvas.width; // clears the canvas
   27015   context.fillRect(100,0,50,50); // only this square remains</pre>
   27016   </div>
   27017 
   27018   <p>To draw on the canvas, authors must first obtain a reference to a
   27019   <dfn id=context>context</dfn> using the <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>)</code></dfn> method of the
   27020   <code><a href=#the-canvas-element>canvas</a></code> element.</p>
   27021 
   27022   <dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var>)</dt>
   27023 
   27024    <dd>
   27025 
   27026     <p>Returns an object that exposes an API for drawing on the canvas.</p>
   27027 
   27028     <p>Returns null if the given context ID is not supported.</p>
   27029 
   27030    </dd>
   27031 
   27032   </dl><p>This specification only defines one context, with the name "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>". <span class=impl>If <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> is called with
   27033   that exact string for its <var title="">contextId</var> argument,
   27034   then the UA must return a reference to an object implementing
   27035   <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>. Other specifications may
   27036   define their own contexts, which would return different
   27037   objects.</span></p>
   27038 
   27039   
   27040 
   27041   <div class=impl>
   27042 
   27043   <p>Vendors may also define experimental contexts using the syntax
   27044   <code><var title="">vendorname</var>-<var title="">context</var></code>, for example, <code>moz-3d</code>.</p>
   27045 
   27046   <p>When the UA is passed an empty string or a string specifying a
   27047   context that it does not support, then it must return null. String
   27048   comparisons must be <a href=#case-sensitive>case-sensitive</a>.</p>
   27049 
   27050   </div>
   27051 
   27052   <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ])</dt>
   27053 
   27054    <dd>
   27055 
   27056     <p>Returns a <code title="">data:</code> URL for the image in the
   27057     canvas.</p>
   27058 
   27059     <p>The first argument, if provided, controls the type of the image
   27060     to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
   27061     type isn't supported. The other arguments are specific to the
   27062     type, and control the way that the image is generated, as given in
   27063     the table below.</p>
   27064 
   27065    </dd>
   27066 
   27067   </dl><div class=impl>
   27068 
   27069   <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method
   27070   must, when called with no arguments, return a <code title="">data:</code> URL containing a representation of the image
   27071   as a PNG file. <a href=#refsPNG>[PNG]</a></p>
   27072 
   27073   <p>If the canvas has no pixels (i.e. either its horizontal dimension
   27074   or its vertical dimension is zero) then the method must return the
   27075   string "<code title="">data:,</code>". (This is the shortest <code title="">data:</code> URL; it represents the empty string in a <code title="">text/plain</code> resource.)</p>
   27076 
   27077   <p>When the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL(<var title="">type</var>)</a></code> method is called with one <em>or
   27078   more</em> arguments, it must return a <code title="">data:</code>
   27079   URL containing a representation of the image in the format given by
   27080   <var title="">type</var>. The possible values are <a href=#mime-type title="MIME
   27081   type">MIME types</a> with no parameters, for example
   27082   <code>image/png</code>, <code>image/jpeg</code>, or even maybe
   27083   <code>image/svg+xml</code> if the implementation actually keeps
   27084   enough information to reliably render an SVG image from the
   27085   canvas.</p>
   27086 
   27087   <p>For image types that do not support an alpha channel, the image
   27088   must be composited onto a solid black background using the
   27089   source-over operator, and the resulting image must be the one used
   27090   to create the <code title="">data:</code> URL.</p>
   27091 
   27092   <p>Only support for <code>image/png</code> is required. User agents
   27093   may support other types. If the user agent does not support the
   27094   requested type, it must return the image using the PNG format.</p>
   27095 
   27096   <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">convert the
   27097   provided type to ASCII lowercase</a> before establishing if they
   27098   support that type and before creating the <code title="">data:</code> URL.</p>
   27099 
   27100   </div>
   27101 
   27102   <p class=note>When trying to use types other than
   27103   <code>image/png</code>, authors can check if the image was really
   27104   returned in the requested format by checking to see if the returned
   27105   string starts with one the exact strings "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". If it does, the image is PNG, and
   27106   thus the requested type was not supported. (The one exception to
   27107   this is if the canvas has either no height or no width, in which
   27108   case the result might simply be "<code title="">data:,</code>".)</p>
   27109 
   27110   <div class=impl>
   27111 
   27112   <p>If the method is invoked with the first argument giving a type
   27113   corresponding to one of the types given in the first column of the
   27114   following table, and the user agent supports that type, then the
   27115   subsequent arguments, if any, must be treated as described in the
   27116   second cell of that row.</p>
   27117 
   27118   </div>
   27119 
   27120   <table><thead><tr><th> Type <th> Other arguments
   27121    <tbody><tr><td> image/jpeg
   27122      <td> The second argument<span class=impl>, if it</span> is a
   27123      number in the range 0.0 to 1.0 inclusive<span class=impl>, must
   27124      be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the
   27125      user agent must use its default value, as if the argument had
   27126      been omitted.</span>
   27127   </table><div class=impl>
   27128 
   27129   <p>For the purposes of these rules, an argument is considered to be
   27130   a number if it is converted to an IDL double value by the rules for
   27131   handling arguments of type <code title="">any</code> in the Web IDL
   27132   specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
   27133 
   27134   <p>Other arguments must be ignored and must not cause the user agent
   27135   to raise an exception. A future version of this specification will
   27136   probably define other parameters to be passed to <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> to allow authors to
   27137   more carefully control compression settings, image metadata,
   27138   etc.</p>
   27139 
   27140   </div>
   27141 
   27142   
   27143 
   27144   <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
   27145 
   27146   <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
   27147 
   27148   <!-- v2: we're on v4. suggestions for next version are marked v5. -->
   27149 
   27150   <p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
   27151   method of a <code><a href=#the-canvas-element>canvas</a></code> element is invoked with <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> as the argument, a
   27152   <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is returned.</p>
   27153 
   27154   
   27155 
   27156   <div class=impl>
   27157 
   27158 
   27159   <p>There is only one <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
   27160   per canvas, so calling the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method with the
   27161   <code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code> argument a second time
   27162   must return the same object.</p>
   27163 
   27164   </div>
   27165 
   27166   <p>The 2D context represents a flat Cartesian surface whose origin
   27167   (0,0) is at the top left corner, with the coordinate space having
   27168   <var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down.</p>
   27169 
   27170   <pre class=idl>interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
   27171 
   27172   // back-reference to the canvas
   27173   readonly attribute <a href=#htmlcanvaselement>HTMLCanvasElement</a> <a href=#dom-context-2d-canvas title=dom-context-2d-canvas>canvas</a>;
   27174 
   27175   // state
   27176   void <a href=#dom-context-2d-save title=dom-context-2d-save>save</a>(); // push state on state stack
   27177   void <a href=#dom-context-2d-restore title=dom-context-2d-restore>restore</a>(); // pop state stack and restore state
   27178 <!--
   27179   // v5 we've also received requests for:
   27180           attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
   27181   // when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
   27182   // useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
   27183 -->
   27184   // transformations (default transform is the identity matrix)
   27185   void <a href=#dom-context-2d-scale title=dom-context-2d-scale>scale</a>(in float x, in float y);
   27186   void <a href=#dom-context-2d-rotate title=dom-context-2d-rotate>rotate</a>(in float angle);
   27187   void <a href=#dom-context-2d-translate title=dom-context-2d-translate>translate</a>(in float x, in float y);
   27188   void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
   27189   void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
   27190 <!--
   27191   // v5 we've also received requests for:
   27192   void skew(...);
   27193   void reflect(...); // or mirror(...)
   27194 -->
   27195   // compositing
   27196            attribute float <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
   27197            attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
   27198 <!--
   27199   // v5 we've also received requests for:
   27200   - turning off antialiasing to avoid seams when patterns are painted next to each other
   27201     - might be better to overdraw?
   27202     - might be better to just draw at a higher res then downsample, like for 3d?
   27203   - nested layers
   27204     - the ability to composite an entire set of drawing operations with one shadow all at once
   27205       http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
   27206 -->
   27207   // colors and styles
   27208            attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
   27209            attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
   27210   <a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(in float x0, in float y0, in float x1, in float y1);
   27211   <a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
   27212   <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in DOMString repetition);
   27213   <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in DOMString repetition);
   27214   <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in DOMString repetition);
   27215 
   27216   // line caps/joins
   27217            attribute float <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
   27218            attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
   27219            attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
   27220            attribute float <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
   27221 
   27222   // shadows
   27223            attribute float <a href=#dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX>shadowOffsetX</a>; // (default 0)
   27224            attribute float <a href=#dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY>shadowOffsetY</a>; // (default 0)
   27225            attribute float <a href=#dom-context-2d-shadowblur title=dom-context-2d-shadowBlur>shadowBlur</a>; // (default 0)
   27226            attribute DOMString <a href=#dom-context-2d-shadowcolor title=dom-context-2d-shadowColor>shadowColor</a>; // (default transparent black)
   27227 
   27228   // rects
   27229   void <a href=#dom-context-2d-clearrect title=dom-context-2d-clearRect>clearRect</a>(in float x, in float y, in float w, in float h);
   27230   void <a href=#dom-context-2d-fillrect title=dom-context-2d-fillRect>fillRect</a>(in float x, in float y, in float w, in float h);
   27231   void <a href=#dom-context-2d-strokerect title=dom-context-2d-strokeRect>strokeRect</a>(in float x, in float y, in float w, in float h);
   27232 
   27233   // path API
   27234   void <a href=#dom-context-2d-beginpath title=dom-context-2d-beginPath>beginPath</a>();
   27235   void <a href=#dom-context-2d-closepath title=dom-context-2d-closePath>closePath</a>();
   27236   void <a href=#dom-context-2d-moveto title=dom-context-2d-moveTo>moveTo</a>(in float x, in float y);
   27237   void <a href=#dom-context-2d-lineto title=dom-context-2d-lineTo>lineTo</a>(in float x, in float y);
   27238   void <a href=#dom-context-2d-quadraticcurveto title=dom-context-2d-quadraticCurveTo>quadraticCurveTo</a>(in float cpx, in float cpy, in float x, in float y);
   27239   void <a href=#dom-context-2d-beziercurveto title=dom-context-2d-bezierCurveTo>bezierCurveTo</a>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
   27240   void <a href=#dom-context-2d-arcto title=dom-context-2d-arcTo>arcTo</a>(in float x1, in float y1, in float x2, in float y2, in float radius);
   27241   void <a href=#dom-context-2d-rect title=dom-context-2d-rect>rect</a>(in float x, in float y, in float w, in float h);
   27242   void <a href=#dom-context-2d-arc title=dom-context-2d-arc>arc</a>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
   27243   void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>();
   27244   void <a href=#dom-context-2d-stroke title=dom-context-2d-stroke>stroke</a>();
   27245   void <a href=#dom-context-2d-clip title=dom-context-2d-clip>clip</a>();
   27246   boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(in float x, in float y);
   27247 
   27248   // focus management
   27249   boolean <a href=#dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing>drawFocusRing</a>(in <a href=#element>Element</a> element, in float xCaret, in float yCaret, in optional boolean canDrawCustom);
   27250 
   27251   // text
   27252            attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
   27253            attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
   27254            attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
   27255   void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);
   27256   void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v5DVT
   27257   void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight);
   27258   void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight); -->
   27259   <a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(in DOMString text);
   27260 
   27261   // drawing images
   27262   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
   27263   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
   27264   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
   27265   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
   27266   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float dx, in float dy, in optional float dw, in float dh);
   27267   void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
   27268 
   27269   // pixel manipulation
   27270   <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(in float sw, in float sh);
   27271   <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(in <a href=#imagedata>ImageData</a> imagedata);
   27272   <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedata title=dom-context-2d-getImageData>getImageData</a>(in float sx, in float sy, in float sw, in float sh);
   27273   void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(in <a href=#imagedata>ImageData</a> imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
   27274 };
   27275 
   27276 interface <dfn id=canvasgradient>CanvasGradient</dfn> {
   27277   // opaque object
   27278   void <a href=#dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop>addColorStop</a>(in float offset, in DOMString color);
   27279 };
   27280 
   27281 interface <dfn id=canvaspattern>CanvasPattern</dfn> {
   27282   // opaque object
   27283 };
   27284 
   27285 interface <dfn id=textmetrics>TextMetrics</dfn> {
   27286   readonly attribute float <a href=#dom-textmetrics-width title=dom-textmetrics-width>width</a>;
   27287 };
   27288 
   27289 interface <dfn id=imagedata>ImageData</dfn> {
   27290   readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
   27291   readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
   27292   readonly attribute <a href=#canvaspixelarray>CanvasPixelArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
   27293 };
   27294 
   27295 interface <dfn id=canvaspixelarray>CanvasPixelArray</dfn> {
   27296   readonly attribute unsigned long <a href=#dom-canvaspixelarray-length title=dom-canvaspixelarray-length>length</a>;
   27297   <a href=#dom-canvaspixelarray-get title=dom-CanvasPixelArray-get>getter</a> octet (in unsigned long index);
   27298   <a href=#dom-canvaspixelarray-set title=dom-CanvasPixelArray-set>setter</a> void (in unsigned long index, in octet value);
   27299 };</pre>
   27300 
   27301   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>
   27302 
   27303    <dd>
   27304 
   27305     <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
   27306 
   27307    </dd>
   27308 
   27309   </dl><div class=impl>
   27310 
   27311   <p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn>
   27312   attribute must return the <code><a href=#the-canvas-element>canvas</a></code> element that the
   27313   context paints on.</p>
   27314 
   27315   <p>Except where otherwise specified, for the 2D context interface,
   27316   any method call with a numeric argument whose value is infinite or a
   27317   NaN value must be ignored.</p>
   27318 
   27319   <!--
   27320    Philip Taylor wrote:
   27321    > My experience with some 3d canvas code is that infinities come up in
   27322    > naturally harmless places, e.g. having a function that scales by x then
   27323    > translates by 1/x and wanting it to work when x=0 (which ought to draw
   27324    > nothing, since anything it draws is zero pixels wide), and it's a bit
   27325    > annoying to track down and fix those issues, so I'd probably like it if
   27326    > they were harmless in canvas methods. Opera appears to silently not draw
   27327    > anything if the transformation matrix is not finite, but Firefox throws
   27328    > exceptions when passing in non-finite arguments.
   27329   -->
   27330 
   27331   <p>Whenever the CSS value <code title="">currentColor</code> is used
   27332   as a color in this API, the "computed value of the 'color' property"
   27333   for the purposes of determining the computed value of the <code title="">currentColor</code> keyword is the computed value of the
   27334   'color' property on the element in question at the time that the
   27335   color is specified (e.g. when the appropriate attribute is set, or
   27336   when the method is called; not when the color is rendered or
   27337   otherwise used). If the computed value of the 'color' property is
   27338   undefined for a particular case (e.g. because the element is not
   27339   <a href=#in-a-document>in a <code>Document</code></a>), then the "computed value
   27340   of the 'color' property" for the purposes of determining the
   27341   computed value of the <code title="">currentColor</code> keyword is
   27342   fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
   27343 
   27344   </div>
   27345 
   27346 
   27347 
   27348   <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>
   27349 
   27350   <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
   27351 
   27352   <ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
   27353    <li>The current <a href=#clipping-region>clipping region</a>.</li>
   27354    <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>.</li>
   27355   </ul><p class=note>The current path and the current bitmap are not part
   27356   of the drawing state. The current path is persistent, and can only
   27357   be reset using the <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The
   27358   current bitmap is a property of the canvas, not the context.</p>
   27359 
   27360   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-save><a href=#dom-context-2d-save>save</a></code>()</dt>
   27361 
   27362    <dd>
   27363 
   27364     <p>Pushes the current state onto the stack.</p>
   27365 
   27366    </dd>
   27367 
   27368    <dt><var title="">context</var> . <code title=dom-context-2d-restore><a href=#dom-context-2d-restore>restore</a></code>()</dt>
   27369 
   27370    <dd>
   27371 
   27372     <p>Pops the top state on the stack, restoring the context to that state.</p>
   27373 
   27374    </dd>
   27375 
   27376   </dl><div class=impl>
   27377 
   27378   <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn>
   27379   method must push a copy of the current drawing state onto the
   27380   drawing state stack.</p>
   27381 
   27382   <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method
   27383   must pop the top entry in the drawing state stack, and reset the
   27384   drawing state it describes. If there is no saved state, the method
   27385   must do nothing.</p>
   27386 
   27387   <!-- v5
   27388 idea from Mihai:
   27389 > 5. Drawing states should be saveable with IDs, and for easier restoring.
   27390 >
   27391 > save(id)
   27392 > restore(id)
   27393 >
   27394 > If id is not provided, then save() works as defined now. The same for
   27395 > restore().
   27396 >
   27397 > Currently, it's not trivial to save and restore a specific state.
   27398 ...and from Philip:
   27399 > I think a more convenient syntax would be:
   27400 >   var state = ctx.save();
   27401 >   ctx.restore(state);
   27402 > But how would it interact with normal calls to ctx.restore()?
   27403   -->
   27404 
   27405   </div>
   27406 
   27407 
   27408   <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
   27409 
   27410   <p>The transformation matrix is applied to coordinates when creating
   27411   shapes and paths.</p> <!-- conformance criteria for actual drawing
   27412   are described in the various sections below -->
   27413 
   27414   <div class=impl>
   27415 
   27416   <p>When the context is created, the transformation matrix must
   27417   initially be the identity transform. It may then be adjusted using
   27418   the transformation methods.</p>
   27419 
   27420   <p>The transformations must be performed in reverse order. For
   27421   instance, if a scale transformation that doubles the width is
   27422   applied, followed by a rotation transformation that rotates drawing
   27423   operations by a quarter turn, and a rectangle twice as wide as it is
   27424   tall is then drawn on the canvas, the actual result will be a
   27425   square.</p>
   27426 
   27427   </div>
   27428 
   27429   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
   27430 
   27431    <dd>
   27432 
   27433     <p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>
   27434 
   27435    </dd>
   27436 
   27437    <dt><var title="">context</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
   27438 
   27439    <dd>
   27440 
   27441     <p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>
   27442 
   27443    </dd>
   27444 
   27445    <dt><var title="">context</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
   27446 
   27447    <dd>
   27448 
   27449     <p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>
   27450 
   27451    </dd>
   27452 
   27453    <dt><var title="">context</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
   27454 
   27455    <dd>
   27456 
   27457     <p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>
   27458 
   27459    </dd>
   27460 
   27461    <dt><var title="">context</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
   27462 
   27463    <dd>
   27464 
   27465     <p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>
   27466 
   27467    </dd>
   27468 
   27469   </dl><div class=impl>
   27470 
   27471   <p>The <dfn id=dom-context-2d-scale title=dom-context-2d-scale><code>scale(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   27472   add the scaling transformation described by the arguments to the
   27473   transformation matrix. The <var title="">x</var> argument represents
   27474   the scale factor in the horizontal direction and the <var title="">y</var> argument represents the scale factor in the
   27475   vertical direction. The factors are multiples.</p>
   27476 
   27477   <p>The <dfn id=dom-context-2d-rotate title=dom-context-2d-rotate><code>rotate(<var title="">angle</var>)</code></dfn> method must add the rotation
   27478   transformation described by the argument to the transformation
   27479   matrix. The <var title="">angle</var> argument represents a
   27480   clockwise rotation angle expressed in radians.</p>
   27481 
   27482   <p>The <dfn id=dom-context-2d-translate title=dom-context-2d-translate><code>translate(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   27483   add the translation transformation described by the arguments to the
   27484   transformation matrix. The <var title="">x</var> argument represents
   27485   the translation distance in the horizontal direction and the <var title="">y</var> argument represents the translation distance in the
   27486   vertical direction. The arguments are in coordinate space units.</p>
   27487 
   27488   <p>The <dfn id=dom-context-2d-transform title=dom-context-2d-transform><code>transform(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
   27489   <var title="">dy</var>)</code></dfn> method must multiply the
   27490   current transformation matrix with the matrix described by:</p>
   27491 
   27492   </div>
   27493 
   27494   <table class=matrix><tr><td><var title="">m11</var></td>
   27495     <td><var title="">m21</var></td>
   27496     <td><var title="">dx</var></td>
   27497    <tr><td><var title="">m12</var></td>
   27498     <td><var title="">m22</var></td>
   27499     <td><var title="">dy</var></td>
   27500    <tr><td>0</td>
   27501     <td>0</td>
   27502     <td>1</td>
   27503    </table><div class=impl>
   27504 
   27505   <p>The <dfn id=dom-context-2d-settransform title=dom-context-2d-setTransform><code>setTransform(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
   27506   <var title="">dy</var>)</code></dfn> method must reset the current
   27507   transform to the identity matrix, and then invoke the <code><a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
   27508   <var title="">dy</var>)</code> method with the same arguments.</p>
   27509 
   27510   </div>
   27511 
   27512 
   27513   <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
   27514 
   27515   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
   27516 
   27517    <dd>
   27518 
   27519     <p>Returns the current alpha value applied to rendering operations.</p>
   27520 
   27521     <p>Can be set, to change the alpha value. Values outside of the
   27522     range 0.0 .. 1.0 are ignored.</p>
   27523 
   27524    </dd>
   27525 
   27526 
   27527    <dt><var title="">context</var> . <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
   27528 
   27529    <dd>
   27530 
   27531     <p>Returns the current composition operation, from the list below.</p>
   27532 
   27533     <p>Can be set, to change the composition operation. Unknown values
   27534     are ignored.</p>
   27535 
   27536    </dd>
   27537 
   27538   </dl><div class=impl>
   27539 
   27540   <p>All drawing operations are affected by the global compositing
   27541   attributes, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>.</p>
   27542 
   27543   <!-- conformance criteria for painting are described in the "drawing
   27544   model" section below -->
   27545 
   27546   <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
   27547   attribute gives an alpha value that is applied to shapes and images
   27548   before they are composited onto the canvas. The value must be in the
   27549   range from 0.0 (fully transparent) to 1.0 (no additional
   27550   transparency). If an attempt is made to set the attribute to a value
   27551   outside this range, including Infinity and Not-a-Number (NaN)
   27552   values, the attribute must retain its previous value. When the
   27553   context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
   27554   initially have the value 1.0.</p>
   27555 
   27556   <p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
   27557   attribute sets how shapes and images are drawn onto the existing
   27558   bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
   27559   current transformation matrix applied. It must be set to a value
   27560   from the following list. In the descriptions below, the source
   27561   image, <var title="">A</var>, is the shape or image being rendered,
   27562   and the destination image, <var title="">B</var>, is the current
   27563   state of the bitmap.</p>
   27564 
   27565   </div>
   27566 
   27567   <dl><dt><dfn id=gcop-source-atop title=gcop-source-atop><code>source-atop</code></dfn></dt>
   27568 
   27569    <dd><var title="">A</var> atop <var title="">B</var>. Display the
   27570    source image wherever both images are opaque. Display the
   27571    destination image wherever the destination image is opaque but the
   27572    source image is transparent. Display transparency elsewhere.</dd>
   27573 
   27574    <dt><dfn id=gcop-source-in title=gcop-source-in><code>source-in</code></dfn></dt>
   27575 
   27576    <dd><var title="">A</var> in <var title="">B</var>. Display the
   27577    source image wherever both the source image and destination image
   27578    are opaque. Display transparency elsewhere.</dd>
   27579 
   27580    <dt><dfn id=gcop-source-out title=gcop-source-out><code>source-out</code></dfn></dt>
   27581 
   27582    <dd><var title="">A</var> out <var title="">B</var>. Display the
   27583    source image wherever the source image is opaque and the
   27584    destination image is transparent. Display transparency
   27585    elsewhere.</dd>
   27586 
   27587    <dt><dfn id=gcop-source-over title=gcop-source-over><code>source-over</code></dfn> (default)</dt>
   27588 
   27589    <dd><var title="">A</var> over <var title="">B</var>. Display the
   27590    source image wherever the source image is opaque. Display the
   27591    destination image elsewhere.</dd>
   27592 
   27593 
   27594    <dt><dfn id=gcop-destination-atop title=gcop-destination-atop><code>destination-atop</code></dfn></dt>
   27595 
   27596    <dd><var title="">B</var> atop <var title="">A</var>. Same as <code title=gcop-source-atop><a href=#gcop-source-atop>source-atop</a></code> but using the
   27597    destination image instead of the source image and vice versa.</dd>
   27598 
   27599    <dt><dfn id=gcop-destination-in title=gcop-destination-in><code>destination-in</code></dfn></dt>
   27600 
   27601    <dd><var title="">B</var> in <var title="">A</var>. Same as <code title=gcop-source-in><a href=#gcop-source-in>source-in</a></code> but using the destination
   27602    image instead of the source image and vice versa.</dd>
   27603 
   27604    <dt><dfn id=gcop-destination-out title=gcop-destination-out><code>destination-out</code></dfn></dt>
   27605 
   27606    <dd><var title="">B</var> out <var title="">A</var>. Same as <code title=gcop-source-out><a href=#gcop-source-out>source-out</a></code> but using the destination
   27607    image instead of the source image and vice versa.</dd>
   27608 
   27609    <dt><dfn id=gcop-destination-over title=gcop-destination-over><code>destination-over</code></dfn></dt>
   27610 
   27611    <dd><var title="">B</var> over <var title="">A</var>. Same as <code title=gcop-source-over><a href=#gcop-source-over>source-over</a></code> but using the
   27612    destination image instead of the source image and vice versa.</dd>
   27613 
   27614 
   27615 <!-- no clear definition of this operator (doesn't correspond to a PorterDuff operator)
   27616    <dt><dfn title="gcop-darker"><code>darker</code></dfn></dt>
   27617 
   27618    <dd>Display the sum of the source image and destination image,
   27619    with color values approaching 0 as a limit.</dd>
   27620 -->
   27621 
   27622    <dt><dfn id=gcop-lighter title=gcop-lighter><code>lighter</code></dfn></dt>
   27623 
   27624    <dd><var title="">A</var> plus <var title="">B</var>. Display the
   27625    sum of the source image and destination image, with color values
   27626    approaching 1 as a limit.</dd>
   27627 
   27628 
   27629    <dt><dfn id=gcop-copy title=gcop-copy><code>copy</code></dfn></dt>
   27630 
   27631    <dd><var title="">A</var> (<var title="">B</var> is
   27632    ignored). Display the source image instead of the destination
   27633    image.</dd>
   27634 
   27635 
   27636    <dt><dfn id=gcop-xor title=gcop-xor><code>xor</code></dfn></dt>
   27637 
   27638    <dd><var title="">A</var> xor <var title="">B</var>. Exclusive OR
   27639    of the source image and destination image.</dd>
   27640 
   27641 
   27642    <dt class=impl><code><var title="">vendorName</var>-<var title="">operationName</var></code></dt>
   27643 
   27644    <dd class=impl>Vendor-specific extensions to the list of
   27645    composition operators should use this syntax.</dd>
   27646 
   27647   </dl><div class=impl>
   27648 
   27649   <p>These values are all case-sensitive &mdash; they must be used
   27650   exactly as shown. User agents must not recognize values that are not
   27651   a <a href=#case-sensitive>case-sensitive</a> match for one of the values given
   27652   above.</p>
   27653 
   27654   <p>The operators in the above list must be treated as described by
   27655   the Porter-Duff operator given at the start of their description
   27656   (e.g. <var title="">A</var> over <var title="">B</var>). <a href=#refsPORTERDUFF>[PORTERDUFF]</a></p>
   27657 
   27658   <p>On setting, if the user agent does not recognize the specified
   27659   value, it must be ignored, leaving the value of <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
   27660   unaffected.</p>
   27661 
   27662   <p>When the context is created, the <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
   27663   attribute must initially have the value
   27664   <code>source-over</code>.</p>
   27665 
   27666   </div>
   27667 
   27668 
   27669   <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
   27670 
   27671   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
   27672 
   27673    <dd>
   27674 
   27675     <p>Returns the current style used for stroking shapes.</p>
   27676 
   27677     <p>Can be set, to change the stroke style.</p>
   27678 
   27679     <p>The style can be either a string containing a CSS color, or a
   27680     <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
   27681     object. Invalid values are ignored.</p>
   27682 
   27683    </dd>
   27684 
   27685    <dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
   27686 
   27687    <dd>
   27688 
   27689     <p>Returns the current style used for filling shapes.</p>
   27690 
   27691     <p>Can be set, to change the fill style.</p>
   27692 
   27693     <p>The style can be either a string containing a CSS color, or a
   27694     <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>
   27695     object. Invalid values are ignored.</p>
   27696 
   27697    </dd>
   27698 
   27699   </dl><div class=impl>
   27700 
   27701   <!-- v5 feature requests:
   27702 
   27703    * Getting and setting colours by component to bypass the CSS value parsing.
   27704 
   27705      Either:
   27706         context.fillStyle.red += 1;
   27707 
   27708      Or:
   27709         var array = context.fillStyle;
   27710         array[1] += 1;
   27711         context.fillStyle = array;
   27712 
   27713    * A more performant way of setting colours in general, e.g.:
   27714 
   27715        context.setFillColor(r,g,b,a) // already supported by webkit
   27716 
   27717      Or:
   27718 
   27719        context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
   27720 
   27721    * fill rule for deciding between winding and even-odd algorithms.
   27722      SVG has fill-rule: nonzero | evenodd
   27723        http://www.w3.org/TR/SVG/painting.html#FillProperties
   27724 
   27725   -->
   27726 
   27727   <p>The <dfn id=dom-context-2d-strokestyle title=dom-context-2d-strokeStyle><code>strokeStyle</code></dfn>
   27728   attribute represents the color or style to use for the lines around
   27729   shapes, and the <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
   27730   attribute represents the color or style to use inside the
   27731   shapes.</p>
   27732 
   27733   <p>Both attributes can be either strings,
   27734   <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
   27735   setting, strings must be parsed as CSS &lt;color&gt; values and the
   27736   color assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
   27737   <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
   27738   is not a valid color, or is neither a string, a
   27739   <code><a href=#canvasgradient>CanvasGradient</a></code>, nor a <code><a href=#canvaspattern>CanvasPattern</a></code>, then
   27740   it must be ignored, and the attribute must retain its previous
   27741   value.</p>
   27742 
   27743   <p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
   27744   <code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
   27745   <a href=#live>live</a>, meaning that changes made to the object after the
   27746   assignment do affect subsequent stroking or filling of shapes.</p>
   27747 
   27748   <p>On getting, if the value is a color, then the <a href=#serialization-of-a-color title="serialization of a color">serialization of the color</a>
   27749   must be returned. Otherwise, if it is not a color but a
   27750   <code><a href=#canvasgradient>CanvasGradient</a></code> or <code><a href=#canvaspattern>CanvasPattern</a></code>, then the
   27751   respective object must be returned. (Such objects are opaque and
   27752   therefore only useful for assigning to other attributes or for
   27753   comparison to other gradients or patterns.)</p>
   27754 
   27755   <p>The <dfn id=serialization-of-a-color>serialization of a color</dfn> for a color value is a
   27756   string, computed as follows: if it has alpha equal to 1.0, then the
   27757   string is a lowercase six-digit hex value, prefixed with a "#"
   27758   character (U+0023 NUMBER SIGN), with the first two digits
   27759   representing the red component, the next two digits representing the
   27760   green component, and the last two digits representing the blue
   27761   component, the digits being in the range 0-9 a-f (U+0030 to U+0039
   27762   and U+0061 to U+0066). Otherwise, the color value has alpha less
   27763   than 1.0, and the string is the color value in the CSS <code title="">rgba()</code> functional-notation format: the literal
   27764   string <code title="">rgba</code> (U+0072 U+0067 U+0062 U+0061)
   27765   followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the
   27766   range 0-255 representing the red component (using digits 0-9, U+0030
   27767   to U+0039, in the shortest form possible), a literal U+002C COMMA
   27768   and U+0020 SPACE, an integer for the green component, a comma and a
   27769   space, an integer for the blue component, another comma and space, a
   27770   U+0030 DIGIT ZERO, a U+002E FULL STOP (representing the decimal
   27771   point), one or more digits in the range 0-9 (U+0030 to U+0039)
   27772   representing the fractional part of the alpha value, and finally a
   27773   U+0029 RIGHT PARENTHESIS.</p>
   27774 
   27775   <p>When the context is created, the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attributes must
   27776   initially have the string value <code title="">#000000</code>.</p>
   27777 
   27778   </div>
   27779 
   27780   <hr><p>There are two types of gradients, linear gradients and radial
   27781   gradients, both represented by objects implementing the opaque
   27782   <code><a href=#canvasgradient>CanvasGradient</a></code> interface.</p>
   27783 
   27784   <p id=interpolation>Once a gradient has been created (see below),
   27785   stops are placed along it to define how the colors are distributed
   27786   along the gradient. <span class=impl>The color of the gradient at
   27787   each stop is the color specified for that stop. Between each such
   27788   stop, the colors and the alpha component must be linearly
   27789   interpolated over the RGBA space without premultiplying the alpha
   27790   value to find the color to use at that offset. Before the first
   27791   stop, the color must be the color of the first stop. After the last
   27792   stop, the color must be the color of the last stop. When there are
   27793   no stops, the gradient is transparent black.</span></p>
   27794 
   27795   <dl class=domintro><dt><var title="">gradient</var> . <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
   27796 
   27797    <dd>
   27798 
   27799     <p>Adds a color stop with the given color to the gradient at the
   27800     given offset. 0.0 is the offset at one end of the gradient, 1.0 is
   27801     the offset at the other end.</p>
   27802 
   27803     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the offset
   27804     is out of range. Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the
   27805     color cannot be parsed.</p>
   27806 
   27807    </dd>
   27808 
   27809    <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
   27810 
   27811    <dd>
   27812 
   27813     <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
   27814     linear gradient that paints along the line given by the
   27815     coordinates represented by the arguments.</p>
   27816 
   27817     <p>If any of the arguments are not finite numbers, throws a
   27818     <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception.</p>
   27819 
   27820    </dd>
   27821 
   27822    <dt><var title="">gradient</var> = <var title="">context</var> . <code title=dom-context-2d-createRadialGradient><a href=#dom-context-2d-createradialgradient>createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
   27823 
   27824    <dd>
   27825 
   27826     <p>Returns a <code><a href=#canvasgradient>CanvasGradient</a></code> object that represents a
   27827     radial gradient that paints along the cone given by the circles
   27828     represented by the arguments.</p>
   27829 
   27830     <p>If any of the arguments are not finite numbers, throws a
   27831     <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception. If either of the radii
   27832     are negative, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   27833 
   27834    </dd>
   27835 
   27836   </dl><div class=impl>
   27837 
   27838   <p>The <dfn id=dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
   27839   method on the <code><a href=#canvasgradient>CanvasGradient</a></code> interface adds a new stop
   27840   to a gradient. If the <var title="">offset</var> is less than 0,
   27841   greater than 1, infinite, or NaN, then an
   27842   <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised. If the <var title="">color</var> cannot be parsed as a CSS color, then a
   27843   <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception must be raised. Otherwise, the
   27844   gradient must have a new stop placed, at offset <var title="">offset</var> relative to the whole gradient, and with the
   27845   color obtained by parsing <var title="">color</var> as a CSS
   27846   &lt;color&gt; value. If multiple stops are added at the same offset
   27847   on a gradient, they must be placed in the order added, with the
   27848   first one closest to the start of the gradient, and each subsequent
   27849   one infinitesimally further along towards the end point (in effect
   27850   causing all but the first and last stop added at each point to be
   27851   ignored).</p>
   27852 
   27853   <p>The <dfn id=dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient><code>createLinearGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>,
   27854   <var title="">y1</var>)</code></dfn> method takes four arguments
   27855   that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title=dom-context-2d-createLinearGradient><a href=#dom-context-2d-createlineargradient>createLinearGradient()</a></code>
   27856   are infinite or NaN, the method must raise a
   27857   <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception. Otherwise, the method must
   27858   return a linear <code><a href=#canvasgradient>CanvasGradient</a></code> initialized with the
   27859   specified line.</p>
   27860 
   27861   <p>Linear gradients must be rendered such that all points on a line
   27862   perpendicular to the line that crosses the start and end points have
   27863   the color at the point where those two lines cross (with the colors
   27864   coming from the <a href=#interpolation>interpolation and
   27865   extrapolation</a> described above). The points in the linear
   27866   gradient must be transformed as described by the <a href=#transformations title=dom-context-2d-transformation>current transformation
   27867   matrix</a> when rendering.</p>
   27868 
   27869   <p>If <span title=""><var title="">x0</var>&nbsp;=&nbsp;<var title="">x1</var></span> and <span title=""><var title="">y0</var>&nbsp;=&nbsp;<var title="">y1</var></span>, then
   27870   the linear gradient must paint nothing.</p>
   27871 
   27872   <p>The <dfn id=dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient><code>createRadialGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>,
   27873   <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</code></dfn> method takes six arguments, the
   27874   first three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
   27875   with origin (<var title="">x1</var>, <var title="">y1</var>) and
   27876   radius <var title="">r1</var>. The values are in coordinate space
   27877   units. If any of the arguments are infinite or NaN, a
   27878   <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception must be raised. If either
   27879   of <var title="">r0</var> or <var title="">r1</var> are negative, an
   27880   <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised. Otherwise,
   27881   the method must return a radial <code><a href=#canvasgradient>CanvasGradient</a></code>
   27882   initialized with the two specified circles.</p>
   27883 
   27884   <p>Radial gradients must be rendered by following these steps:</p>
   27885 
   27886   <ol><li><p>If <span title=""><var title="">x<sub>0</sub></var>&nbsp;=&nbsp;<var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var>&nbsp;=&nbsp;<var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var>&nbsp;=&nbsp;<var title="">r<sub>1</sub></var></span>, then the radial gradient must
   27887    paint nothing. Abort these steps.</li>
   27888 
   27889    <li>
   27890 
   27891     <p>Let <span title="">x(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">x<sub>1</sub></var>-<var title="">x<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">x<sub>0</sub></var></span></p>
   27892 
   27893     <p>Let <span title="">y(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">y<sub>1</sub></var>-<var title="">y<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">y<sub>0</sub></var></span></p>
   27894 
   27895     <p>Let <span title="">r(<var title="">&omega;</var>)&nbsp;=&nbsp;(<var title="">r<sub>1</sub></var>-<var title="">r<sub>0</sub></var>)<var title="">&omega;</var>&nbsp;+&nbsp;<var title="">r<sub>0</sub></var></span></p>
   27896 
   27897     <p>Let the color at <var title="">&omega;</var> be the color at
   27898     that position on the gradient (with the colors coming from the <a href=#interpolation>interpolation and extrapolation</a>
   27899     described above).</p>
   27900 
   27901    </li>
   27902 
   27903    <li><p>For all values of <var title="">&omega;</var> where <span title="">r(<var title="">&omega;</var>)&nbsp;&gt;&nbsp;0</span>,
   27904    starting with the value of <var title="">&omega;</var> nearest to
   27905    positive infinity and ending with the value of <var title="">&omega;</var> nearest to negative infinity, draw the
   27906    circumference of the circle with radius <span title="">r(<var title="">&omega;</var>)</span> at position (<span title="">x(<var title="">&omega;</var>)</span>, <span title="">y(<var title="">&omega;</var>)</span>), with the color at <var title="">&omega;</var>, but only painting on the parts of the
   27907    canvas that have not yet been painted on by earlier circles in this
   27908    step for this rendering of the gradient.</li>
   27909 
   27910   </ol><p class=note>This effectively creates a cone, touched by the two
   27911   circles defined in the creation of the gradient, with the part of
   27912   the cone before the start circle (0.0) using the color of the first
   27913   offset, the part of the cone after the end circle (1.0) using the
   27914   color of the last offset, and areas outside the cone untouched by
   27915   the gradient (transparent black).</p>
   27916 
   27917   <p>The points in the radial gradient must be transformed as
   27918   described by the <a href=#transformations title=dom-context-2d-transformation>current
   27919   transformation matrix</a> when rendering.</p>
   27920 
   27921   <p>Gradients must be painted only where the relevant stroking or
   27922   filling effects requires that they be drawn.</p>
   27923 
   27924 <!--
   27925   <p>Support for actually painting gradients is optional. Instead of
   27926   painting the gradients, user agents may instead just paint the first
   27927   stop's color. However, <code
   27928   title="dom-context-2d-createLinearGradient">createLinearGradient()</code>
   27929   and <code
   27930   title="dom-context-2d-createRadialGradient">createRadialGradient()</code>
   27931   must always return objects when passed valid arguments.</p>
   27932 -->
   27933 
   27934   </div>
   27935 
   27936   <hr><p>Patterns are represented by objects implementing the opaque
   27937   <code><a href=#canvaspattern>CanvasPattern</a></code> interface.</p>
   27938 
   27939   <dl class=domintro><dt><var title="">pattern</var> = <var title="">context</var> . <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
   27940 
   27941    <dd>
   27942 
   27943     <p>Returns a <code><a href=#canvaspattern>CanvasPattern</a></code> object that uses the given image
   27944     and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
   27945 
   27946     <p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty or null, the value
   27947     <code title="">repeat</code> is used.</p>
   27948 
   27949     <p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
   27950     <code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
   27951     <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. If the image has no
   27952     image data, throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. If
   27953     the second argument isn't one of the allowed values, throws a
   27954     <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception. If the image isn't yet fully
   27955     decoded, then the method returns null.</p>
   27956 
   27957    </dd>
   27958 
   27959   </dl><div class=impl>
   27960 
   27961   <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
   27962   method is used. The first argument gives the image to use as the
   27963   pattern (either an <code><a href=#htmlimageelement>HTMLImageElement</a></code>,
   27964   <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
   27965   object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
   27966   must not affect the pattern. The second argument must be a string
   27967   with one of the following values: <code title="">repeat</code>,
   27968   <code title="">repeat-x</code>, <code title="">repeat-y</code>,
   27969   <code title="">no-repeat</code>. If the empty string or null is
   27970   specified, <code title="">repeat</code> must be assumed. If an
   27971   unrecognized value is given, then the user agent must raise a
   27972   <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception. User agents must recognize the
   27973   four values described above exactly (e.g. they must not do case
   27974   folding). The method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
   27975   suitably initialized.</p>
   27976 
   27977   <p>The <var title="">image</var> argument is an instance of either
   27978   <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
   27979   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>. If the <var title="">image</var> is
   27980   null, the implementation must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code>
   27981   exception.</p> <!-- drawImage() has an equivalent paragraph -->
   27982 
   27983   <p>If the <var title="">image</var> argument is an
   27984   <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false, or
   27985   if the <var title="">image</var> argument is an
   27986   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
   27987   <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
   27988   implementation must return null.</p>
   27989   <!-- drawImage() has an equivalent paragraph -->
   27990 
   27991   <p>If the <var title="">image</var> argument is an
   27992   <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
   27993   dimension or a vertical dimension equal to zero, then the
   27994   implementation must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   27995   exception.</p>
   27996   <!-- drawImage() has an equivalent paragraph -->
   27997 
   27998   <p>Patterns must be painted so that the top left of the first image
   27999   is anchored at the origin of the coordinate space, and images are
   28000   then repeated horizontally to the left and right (if the
   28001   <code>repeat-x</code> string was specified) or vertically up and
   28002   down (if the <code>repeat-y</code> string was specified) or in all
   28003   four directions all over the canvas (if the <code>repeat</code>
   28004   string was specified). The images are not scaled by this process;
   28005   one CSS pixel of the image must be painted on one coordinate space
   28006   unit. Of course, patterns must actually be painted only where the
   28007   stroking or filling effect requires that they be drawn, and are
   28008   affected by the current transformation matrix.</p>
   28009 
   28010   <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
   28011   is passed an animated image as its <var title="">image</var>
   28012   argument, the user agent must use the poster frame of the animation,
   28013   or, if there is no poster frame, the first frame of the
   28014   animation.</p>
   28015   <!-- drawImage() has an equivalent paragraph -->
   28016 
   28017   <p>When the <var title="">image</var> argument is an
   28018   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
   28019   playback position</a> must be used as the source image, and the
   28020   source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
   28021   <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
   28022   of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
   28023   correction has been applied).</p>
   28024   <!-- drawImage() has an equivalent paragraph -->
   28025 
   28026   <!--
   28027    Requests for v5 features:
   28028     * apply transforms to patterns, so you don't have to create
   28029       transformed patterns manually by rendering them to an off-screen
   28030       canvas then using that canvas as the pattern.
   28031   -->
   28032 
   28033   </div>
   28034 
   28035 
   28036 
   28037   <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
   28038 
   28039   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
   28040 
   28041    <dd>
   28042 
   28043     <p>Returns the current line width.</p>
   28044 
   28045     <p>Can be set, to change the line width. Values that are not
   28046     finite values greater than zero are ignored.</p>
   28047 
   28048    </dd>
   28049 
   28050    <dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
   28051 
   28052    <dd>
   28053 
   28054     <p>Returns the current line cap style.</p>
   28055 
   28056     <p>Can be set, to change the line cap style.</p>
   28057 
   28058     <p>The possible line cap styles are <code>butt</code>,
   28059     <code>round</code>, and <code>square</code>. Other values are
   28060     ignored.</p>
   28061 
   28062    </dd>
   28063 
   28064    <dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
   28065 
   28066    <dd>
   28067 
   28068     <p>Returns the current line join style.</p>
   28069 
   28070     <p>Can be set, to change the line join style.</p>
   28071 
   28072     <p>The possible line join styles are <code>bevel</code>,
   28073     <code>round</code>, and <code>miter</code>. Other values are
   28074     ignored.</p>
   28075 
   28076    </dd>
   28077 
   28078    <dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
   28079 
   28080    <dd>
   28081 
   28082     <p>Returns the current miter limit ratio.</p>
   28083 
   28084     <p>Can be set, to change the miter limit ratio. Values that are
   28085     not finite values greater than zero are ignored.</p>
   28086 
   28087    </dd>
   28088 
   28089   </dl><div class=impl>
   28090 
   28091   <p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
   28092   attribute gives the width of lines, in coordinate space units. On
   28093   getting, it must return the current value. On setting, zero,
   28094   negative, infinite, and NaN values must be ignored, leaving the
   28095   value unchanged; other values must change the current value to the
   28096   new value.</p>
   28097 
   28098   <p>When the context is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
   28099   initially have the value <code>1.0</code>.</p>
   28100 
   28101   <hr><p>The <dfn id=dom-context-2d-linecap title=dom-context-2d-lineCap><code>lineCap</code></dfn> attribute
   28102   defines the type of endings that UAs will place on the end of
   28103   lines. The three valid values are <code>butt</code>,
   28104   <code>round</code>, and <code>square</code>. The <code>butt</code>
   28105   value means that the end of each line has a flat edge perpendicular
   28106   to the direction of the line (and that no additional line cap is
   28107   added). The <code>round</code> value means that a semi-circle with
   28108   the diameter equal to the width of the line must then be added on to
   28109   the end of the line. The <code>square</code> value means that a
   28110   rectangle with the length of the line width and the width of half
   28111   the line width, placed flat against the edge perpendicular to the
   28112   direction of the line, must be added at the end of each line.</p>
   28113 
   28114   <p>On getting, it must return the current value. On setting, if the
   28115   new value is one of the literal strings <code>butt</code>,
   28116   <code>round</code>, and <code>square</code>, then the current value
   28117   must be changed to the new value; other values must ignored, leaving
   28118   the value unchanged.</p>
   28119 
   28120   <p>When the context is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
   28121   initially have the value <code>butt</code>.</p>
   28122 
   28123   <hr><p>The <dfn id=dom-context-2d-linejoin title=dom-context-2d-lineJoin><code>lineJoin</code></dfn>
   28124   attribute defines the type of corners that UAs will place where two
   28125   lines meet. The three valid values are <code>bevel</code>,
   28126   <code>round</code>, and <code>miter</code>.</p>
   28127 
   28128   <p>On getting, it must return the current value. On setting, if the
   28129   new value is one of the literal strings <code>bevel</code>,
   28130   <code>round</code>, and <code>miter</code>, then the current value
   28131   must be changed to the new value; other values must be ignored,
   28132   leaving the value unchanged.</p>
   28133 
   28134   <p>When the context is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
   28135   initially have the value <code>miter</code>.</p>
   28136 
   28137   <hr><p>A join exists at any point in a subpath shared by two consecutive
   28138   lines. When a subpath is closed, then a join also exists at its
   28139   first point (equivalent to its last point) connecting the first and
   28140   last lines in the subpath.</p>
   28141 
   28142   <p>In addition to the point where the join occurs, two additional
   28143   points are relevant to each join, one for each line: the two corners
   28144   found half the line width away from the join point, one
   28145   perpendicular to each line, each on the side furthest from the other
   28146   line.</p>
   28147 
   28148   <p>A filled triangle connecting these two opposite corners with a
   28149   straight line, with the third point of the triangle being the join
   28150   point, must be rendered at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
   28151   whether anything else is rendered. The three aforementioned values
   28152   have the following meanings:</p>
   28153 
   28154   <p>The <code>bevel</code> value means that this is all that is
   28155   rendered at joins.</p>
   28156 
   28157   <p>The <code>round</code> value means that a filled arc connecting
   28158   the two aforementioned corners of the join, abutting (and not
   28159   overlapping) the aforementioned triangle, with the diameter equal to
   28160   the line width and the origin at the point of the join, must be
   28161   rendered at joins.</p>
   28162 
   28163   <p>The <code>miter</code> value means that a second filled triangle
   28164   must (if it can given the miter length) be rendered at the join,
   28165   with one line being the line between the two aforementioned corners,
   28166   abutting the first triangle, and the other two being continuations of
   28167   the outside edges of the two joining lines, as long as required to
   28168   intersect without going over the miter length.</p>
   28169 
   28170   <p>The miter length is the distance from the point where the join
   28171   occurs to the intersection of the line edges on the outside of the
   28172   join. The miter limit ratio is the maximum allowed ratio of the
   28173   miter length to half the line width. If the miter length would cause
   28174   the miter limit ratio to be exceeded, this second triangle must not
   28175   be rendered.</p>
   28176 
   28177   <p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
   28178   attribute. On getting, it must return the current value. On setting,
   28179   zero, negative, infinite, and NaN values must be ignored, leaving
   28180   the value unchanged; other values must change the current value to
   28181   the new value.</p>
   28182 
   28183   <p>When the context is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
   28184   initially have the value <code>10.0</code>.</p>
   28185 
   28186   <!--
   28187 v5: dashed lines have been requested. Philip Taylor provides these
   28188 notes on what would need to be defined for dashed lines:
   28189 > I don't think it's entirely trivial to add, to the detail that's
   28190 > necessary in a specification. The common graphics APIs (at least
   28191 > Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
   28192 > have dashes specified by passing an array of dash lengths (alternating
   28193 > on/off), so that should be alright as long as you define what units
   28194 > it's measured in and what happens when you specify an odd number of
   28195 > values and how errors are handled and what happens if you update the
   28196 > array later. But after that, what does it do when stroking multiple
   28197 > subpaths, in terms of offsetting the dashes? When you use strokeRect,
   28198 > where is offset 0? Does moveTo reset the offset? How does it interact
   28199 > with lineCap/lineJoin? All the potential issues need test cases too,
   28200 > and the implementations need to make sure they handle any edge cases
   28201 > that the underlying graphics library does differently. (SVG Tiny 1.2
   28202 > appears to skip some of the problems by leaving things undefined and
   28203 > allowing whatever behavior the graphics library has.)
   28204 
   28205 Another request has been for hairline width lines, that remain
   28206 hairline width with transform. ack Shaun Morris.
   28207   -->
   28208 
   28209   </div>
   28210 
   28211 
   28212   <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
   28213 
   28214   <p>All drawing operations are affected by the four global shadow
   28215   attributes.</p>
   28216 
   28217   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> [ = <var title="">value</var> ]</dt>
   28218 
   28219    <dd>
   28220 
   28221     <p>Returns the current shadow color.</p>
   28222 
   28223     <p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
   28224 
   28225    </dd>
   28226 
   28227    <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
   28228    <dt><var title="">context</var> . <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
   28229 
   28230    <dd>
   28231 
   28232     <p>Returns the current shadow offset.</p>
   28233 
   28234     <p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
   28235 
   28236    </dd>
   28237 
   28238    <dt><var title="">context</var> . <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
   28239 
   28240    <dd>
   28241 
   28242     <p>Returns the current level of blur applied to shadows.</p>
   28243 
   28244     <p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
   28245 
   28246    </dd>
   28247 
   28248   </dl><div class=impl>
   28249 
   28250   <p>The <dfn id=dom-context-2d-shadowcolor title=dom-context-2d-shadowColor><code>shadowColor</code></dfn>
   28251   attribute sets the color of the shadow.</p>
   28252 
   28253   <p>When the context is created, the <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> attribute
   28254   initially must be fully-transparent black.</p>
   28255 
   28256   <p>On getting, the <a href=#serialization-of-a-color title="serialization of a
   28257   color">serialization of the color</a> must be returned.</p>
   28258 
   28259   <p>On setting, the new value must be parsed as a CSS &lt;color&gt;
   28260   value and the color assigned. If the value is not a valid color,
   28261   then it must be ignored, and the attribute must retain its previous
   28262   value. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
   28263 
   28264   <p>The <dfn id=dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX><code>shadowOffsetX</code></dfn>
   28265   and <dfn id=dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY><code>shadowOffsetY</code></dfn>
   28266   attributes specify the distance that the shadow will be offset in
   28267   the positive horizontal and positive vertical distance
   28268   respectively. Their values are in coordinate space units. They are
   28269   not affected by the current transformation matrix.</p>
   28270 
   28271   <p>When the context is created, the shadow offset attributes must
   28272   initially have the value <code>0</code>.</p>
   28273 
   28274   <p>On getting, they must return their current value. On setting, the
   28275   attribute being set must be set to the new value, except if the
   28276   value is infinite or NaN, in which case the new value must be
   28277   ignored.</p>
   28278 
   28279   <p>The <dfn id=dom-context-2d-shadowblur title=dom-context-2d-shadowBlur><code>shadowBlur</code></dfn>
   28280   attribute specifies the size of the blurring effect. (The units do
   28281   not map to coordinate space units, and are not affected by the
   28282   current transformation matrix.)</p>
   28283 
   28284   <p>When the context is created, the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> attribute must
   28285   initially have the value <code>0</code>.</p>
   28286 
   28287   <p>On getting, the attribute must return its current value. On
   28288   setting the attribute must be set to the new value, except if the
   28289   value is negative, infinite or NaN, in which case the new value must
   28290   be ignored.</p>
   28291 
   28292   <p><dfn id=when-shadows-are-drawn title="when shadows are drawn">Shadows are only drawn
   28293   if</dfn> the opacity component of the alpha component of the color
   28294   of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code> is
   28295   non-zero and either the <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is non-zero, or
   28296   the <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>
   28297   is non-zero, or the <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> is
   28298   non-zero.</p>
   28299 
   28300   <p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, they must be rendered as follows:</p>
   28301 
   28302   <ol><li> <p>Let <var title="">A</var> be an infinite transparent black
   28303    bitmap on which the source image for which a shadow is being
   28304    created has been rendered.</p> </li>
   28305 
   28306    <li> <p>Let <var title="">B</var> be an infinite transparent black
   28307    bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
   28308 
   28309    <li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code> in the
   28310    positive <var title="">x</var> direction, and <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code> in the
   28311    positive <var title="">y</var> direction.</p> </li>
   28312 
   28313    <li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is greater than
   28314    0:</p>
   28315 
   28316     <ol><li> <p>If <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> is less than
   28317      8, let <var title="">&sigma;</var> be half the value of <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>; otherwise,
   28318      let <var title="">&sigma;</var> be the square root of multiplying
   28319      the value of <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code> by
   28320      2.</li>
   28321 
   28322      <li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
   28323      using <var title="">&sigma;</var> as the standard deviation.</p>
   28324      <!-- wish i could find a reference for this --> </li>
   28325 
   28326     </ol><p>User agents may limit values of <var title="">&sigma;</var> to
   28327     an implementation-specific maximum value to avoid exceeding
   28328     hardware limitations during the Gaussian blur operation.</p>
   28329 
   28330    </li>
   28331 
   28332    <li> <p>Set the red, green, and blue components of every pixel in
   28333    <var title="">B</var> to the red, green, and blue components
   28334    (respectively) of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
   28335 
   28336    <li> <p>Multiply the alpha component of every pixel in <var title="">B</var> by the alpha component of the color of <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>.</p> </li>
   28337 
   28338    <li> <p>The shadow is in the bitmap <var title="">B</var>, and is
   28339    rendered as part of the drawing model described below.</p> </li>
   28340 
   28341   </ol></div>
   28342 
   28343   <p>If the current composition operation is <code title=gcop-copy><a href=#gcop-copy>copy</a></code>, shadows effectively won't render
   28344   (since the shape will overwrite the shadow).</p>
   28345 
   28346 
   28347   <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
   28348 
   28349   <p>There are three methods that immediately draw rectangles to the
   28350   bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
   28351   left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
   28352   respectively.</p>
   28353 
   28354   <div class=impl>
   28355 
   28356   <p>The <a href=#transformations title=dom-context-2d-transformation>current
   28357   transformation matrix</a> must be applied to the following four
   28358   coordinates, which form the path that must then be closed to get the
   28359   specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
   28360   <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
   28361   <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
   28362   <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
   28363 
   28364   <p>Shapes are painted without affecting the current path, and are
   28365   subject to the <a href=#clipping-region title="clipping region">clipping region</a>,
   28366   and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   28367   operators</a>.</p>
   28368 
   28369   </div>
   28370 
   28371   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
   28372 
   28373    <dd>
   28374 
   28375     <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
   28376 
   28377    </dd>
   28378 
   28379    <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
   28380 
   28381    <dd>
   28382 
   28383     <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
   28384 
   28385    </dd>
   28386 
   28387    <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
   28388 
   28389    <dd>
   28390 
   28391     <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
   28392 
   28393    </dd>
   28394 
   28395   </dl><div class=impl>
   28396 
   28397   <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
   28398   specified rectangle that also intersect the current clipping region
   28399   to a fully transparent black, erasing any previous image. If either
   28400   height or width are zero, this method has no effect.</p>
   28401 
   28402   <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
   28403   rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
   28404   or width are zero, this method has no effect.</p>
   28405 
   28406   <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
   28407   rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
   28408   appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
   28409   both height and width are zero, this method has no effect, since
   28410   there is no path to stroke (it's a point). If only one of the two is
   28411   zero, then the method will draw a line instead (the path for the
   28412   outline is just a straight line along the non-zero dimension).</p>
   28413 
   28414   </div>
   28415 
   28416 
   28417   <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
   28418 
   28419   <p>The context always has a current path. There is only one current
   28420   path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
   28421 
   28422   <p>A <dfn id=path>path</dfn> has a list of zero or more subpaths. Each
   28423   subpath consists of a list of one or more points, connected by
   28424   straight or curved lines, and a flag indicating whether the subpath
   28425   is closed or not. A closed subpath is one where the last point of
   28426   the subpath is connected to the first point of the subpath by a
   28427   straight line. Subpaths with fewer than two points are ignored when
   28428   painting the path.</p>
   28429 
   28430   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
   28431 
   28432    <dd>
   28433 
   28434     <p>Resets the current path.</p>
   28435 
   28436    </dd>
   28437 
   28438    <dt><var title="">context</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
   28439 
   28440    <dd>
   28441 
   28442     <p>Creates a new subpath with the given point.</p>
   28443 
   28444    </dd>
   28445 
   28446    <dt><var title="">context</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>
   28447 
   28448    <dd>
   28449 
   28450     <p>Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.</p>
   28451 
   28452    </dd>
   28453 
   28454    <dt><var title="">context</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
   28455 
   28456    <dd>
   28457 
   28458     <p>Adds the given point to the current subpath, connected to the previous one by a straight line.</p>
   28459 
   28460    </dd>
   28461 
   28462    <dt><var title="">context</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
   28463 
   28464    <dd>
   28465 
   28466     <p>Adds the given point to the current path, connected to the previous one by a quadratic B&eacute;zier curve with the given control point.</p>
   28467 
   28468    </dd>
   28469 
   28470    <dt><var title="">context</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
   28471 
   28472    <dd>
   28473 
   28474     <p>Adds the given point to the current path, connected to the previous one by a cubic B&eacute;zier curve with the given control points.</p>
   28475 
   28476    </dd>
   28477 
   28478    <dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
   28479 
   28480    <dd>
   28481 
   28482     <p>Adds a point to the current path, connected to the previous one
   28483     by a straight line, then adds a second point to the current path,
   28484     connected to the previous one by an arc whose properties are
   28485     described by the arguments.</p>
   28486 
   28487     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given
   28488     radius is negative.</p>
   28489 
   28490    </dd>
   28491 
   28492    <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>
   28493 
   28494    <dd>
   28495 
   28496     <p>Adds points to the subpath such that the arc described by the
   28497     circumference of the circle described by the arguments, starting
   28498     at the given start angle and ending at the given end angle, going
   28499     in the given direction, is added to the path, connected to the
   28500     previous point by a straight line.</p>
   28501 
   28502     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given
   28503     radius is negative.</p>
   28504 
   28505    </dd>
   28506 
   28507    <dt><var title="">context</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
   28508 
   28509    <dd>
   28510 
   28511     <p>Adds a new closed subpath to the path, representing the given rectangle.</p>
   28512 
   28513    </dd>
   28514 
   28515    <dt><var title="">context</var> . <code title=dom-context-2d-fill><a href=#dom-context-2d-fill>fill</a></code>()</dt>
   28516 
   28517    <dd>
   28518 
   28519     <p>Fills the subpaths with the current fill style.</p>
   28520 
   28521    </dd>
   28522 
   28523    <dt><var title="">context</var> . <code title=dom-context-2d-stroke><a href=#dom-context-2d-stroke>stroke</a></code>()</dt>
   28524 
   28525    <dd>
   28526 
   28527     <p>Strokes the subpaths with the current stroke style.</p>
   28528 
   28529    </dd>
   28530 
   28531    <dt><var title="">context</var> . <code title=dom-context-2d-clip><a href=#dom-context-2d-clip>clip</a></code>()</dt>
   28532 
   28533    <dd>
   28534 
   28535     <p>Further constrains the clipping region to the given path.</p>
   28536 
   28537    </dd>
   28538 
   28539    <dt><var title="">context</var> . <code title=dom-context-2d-isPointInPath><a href=#dom-context-2d-ispointinpath>isPointInPath</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
   28540 
   28541    <dd>
   28542 
   28543     <p>Returns true if the given point is in the current path.</p>
   28544 
   28545    </dd>
   28546 
   28547   </dl><div class=impl>
   28548 
   28549   <p>Initially, the context's path must have zero subpaths.</p>
   28550 
   28551   <p>The points and lines added to the path by these methods must be
   28552   transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
   28553   matrix</a> as they are added.</p>
   28554 
   28555 
   28556   <p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
   28557   method must empty the list of subpaths so that the context once
   28558   again has zero subpaths.</p>
   28559 
   28560 
   28561   <p>The <dfn id=dom-context-2d-moveto title=dom-context-2d-moveTo><code>moveTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   28562   create a new subpath with the specified point as its first (and
   28563   only) point.</p>
   28564 
   28565   <p>When the user agent is to <dfn id=ensure-there-is-a-subpath>ensure there is a subpath</dfn>
   28566   for a coordinate (<var title="">x</var>, <var title="">y</var>), the
   28567   user agent must check to see if the context has any subpaths, and if
   28568   it does not, then the user agent must create a new subpath with the
   28569   point (<var title="">x</var>, <var title="">y</var>) as its first
   28570   (and only) point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> method had been
   28571   called.</p>
   28572 
   28573 
   28574   <p>The <dfn id=dom-context-2d-closepath title=dom-context-2d-closePath><code>closePath()</code></dfn>
   28575   method must do nothing if the context has no subpaths. Otherwise, it
   28576   must mark the last subpath as closed, create a new subpath whose
   28577   first point is the same as the previous subpath's first point, and
   28578   finally add this new subpath to the path.</p>
   28579 
   28580   <p class=note>If the last subpath had more than one point in its
   28581   list of points, then this is equivalent to adding a straight line
   28582   connecting the last point back to the first point, thus "closing"
   28583   the shape, and then repeating the last (possibly implied) <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> call.</p>
   28584 
   28585 
   28586   <p>New points and the lines connecting them are added to subpaths
   28587   using the methods described below. In all cases, the methods only
   28588   modify the last subpath in the context's paths.</p>
   28589 
   28590 
   28591   <p>The <dfn id=dom-context-2d-lineto title=dom-context-2d-lineTo><code>lineTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   28592   <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x</var>, <var title="">y</var>)</span> if the context has
   28593   no subpaths. Otherwise, it must connect the last point in the
   28594   subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a straight line, and must then add the given
   28595   point (<var title="">x</var>, <var title="">y</var>) to the
   28596   subpath.</p>
   28597 
   28598 
   28599   <p>The <dfn id=dom-context-2d-quadraticcurveto title=dom-context-2d-quadraticCurveTo><code>quadraticCurveTo(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>,
   28600   <var title="">y</var>)</code></dfn> method must <a href=#ensure-there-is-a-subpath>ensure there
   28601   is a subpath</a> for <span title="">(<var title="">cpx</var>,
   28602   <var title="">cpy</var>)</span>, and then must connect the last
   28603   point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a quadratic B&eacute;zier curve with control
   28604   point (<var title="">cpx</var>, <var title="">cpy</var>), and must
   28605   then add the given point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>
   28606 
   28607 
   28608   <p>The <dfn id=dom-context-2d-beziercurveto title=dom-context-2d-bezierCurveTo><code>bezierCurveTo(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   28609   <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">cp1x</var>, <var title="">cp1y</var>)</span>, and then must
   28610   connect the last point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a cubic B&eacute;zier
   28611   curve with control points (<var title="">cp1x</var>, <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href=#refsBEZIER>[BEZIER]</a></p>
   28612 
   28613   <hr><p>The <dfn id=dom-context-2d-arcto title=dom-context-2d-arcTo><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
   28614   <var title="">y2</var>, <var title="">radius</var>)</code></dfn>
   28615   method must first <a href=#ensure-there-is-a-subpath>ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>. Then, the behavior depends on the
   28616   arguments and the last point in the subpath, as described below.</p>
   28617 
   28618   <p>Negative values for <var title="">radius</var> must cause the
   28619   implementation to raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   28620   exception.</p>
   28621 
   28622   <p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
   28623   the last point in the subpath.</p>
   28624 
   28625   <p>If the point (<var title="">x0</var>, <var title="">y0</var>) is
   28626   equal to the point (<var title="">x1</var>, <var title="">y1</var>),
   28627   or if the point (<var title="">x1</var>, <var title="">y1</var>) is
   28628   equal to the point (<var title="">x2</var>, <var title="">y2</var>),
   28629   or if the radius <var title="">radius</var> is zero, then the method
   28630   must add the point (<var title="">x1</var>, <var title="">y1</var>)
   28631   to the subpath, and connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.</p>
   28632 
   28633   <p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>, <var title="">y2</var>) all lie on a single straight line, then the
   28634   method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the
   28635   previous point (<var title="">x0</var>, <var title="">y0</var>) by a
   28636   straight line.</p>
   28637 
   28638   <p>Otherwise, let <var title="">The Arc</var> be the shortest arc
   28639   given by circumference of the circle that has radius <var title="">radius</var>, and that has one point tangent to the
   28640   half-infinite line that crosses the point (<var title="">x0</var>,
   28641   <var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
   28642   point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
   28643   (<var title="">x2</var>, <var title="">y2</var>). The points at
   28644   which this circle touches these two lines are called the start and
   28645   end tangent points respectively. The method must connect the point
   28646   (<var title="">x0</var>, <var title="">y0</var>) to the start
   28647   tangent point by a straight line, adding the start tangent point to
   28648   the subpath, and then must connect the start tangent point to the
   28649   end tangent point by <var title="">The Arc</var>, adding the end
   28650   tangent point to the subpath.</p>
   28651 
   28652   <hr><p>The <dfn id=dom-context-2d-arc title=dom-context-2d-arc><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>,
   28653   <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> method draws an arc. If
   28654   the context has any subpaths, then the method must add a straight
   28655   line from the last point in the subpath to the start point of the
   28656   arc. In any case, it must draw the arc between the start point of
   28657   the arc and the end point of the arc, and add the start and end
   28658   points of the arc to the subpath. The arc and its start and end
   28659   points are defined as follows:</p>
   28660 
   28661   <p>Consider a circle that has its origin at (<var title="">x</var>,
   28662   <var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
   28663   and <var title="">endAngle</var> along this circle's circumference,
   28664   measured in radians clockwise from the positive x-axis, are the
   28665   start and end points respectively.</p>
   28666 
   28667   <p>If the <var title="">anticlockwise</var> argument is false and
   28668   <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than
   28669   <span title="">2&pi;</span>, or, if the <var title="">anticlockwise</var>
   28670   argument is <em>true</em> and <span title=""><var title="">startAngle</var>-<var title="">endAngle</var></span> is
   28671   equal to or greater than <span title="">2&pi;</span>, then the arc is the
   28672   whole circumference of this circle.</p>
   28673 
   28674   <!--alternatively (this is not equivalent, but might make more
   28675   sense, if browsers are willing to change to it: <p>If the absolute
   28676   magnitude of the difference between the <var
   28677   title="">startAngle</var> and <var title="">endAngle</var> angles is
   28678   equal to or greater than <span title="">2&pi;</span>, then the arc is the
   28679   whole circumference of this circle.</p>-->
   28680 
   28681   <p>Otherwise, the arc is the path along the circumference of this
   28682   circle from the start point to the end point, going anti-clockwise
   28683   if the <var title="">anticlockwise</var> argument is true, and
   28684   clockwise otherwise. Since the points are on the circle, as opposed
   28685   to being simply angles from zero, the arc can never cover an angle
   28686   greater than <span title="">2&pi;</span> radians. If the two points are the
   28687   same, or if the radius is zero, then the arc is defined as being of
   28688   zero length in both directions.</p>
   28689 
   28690   <p>Negative values for <var title="">radius</var> must cause the
   28691   implementation to raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   28692   exception.</p>
   28693 
   28694   <hr><p>The <dfn id=dom-context-2d-rect title=dom-context-2d-rect><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath
   28695   containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,
   28696   <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>, <var title="">y</var>+<var title="">h</var>),
   28697   (<var title="">x</var>, <var title="">y</var>+<var title="">h</var>), with those four points connected by straight
   28698   lines, and must then mark the subpath as closed. It must then create
   28699   a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as the only point in the subpath.</p>
   28700 
   28701 
   28702   <!-- v5 feature request:
   28703         * points as a primitive shape
   28704           http://home.comcast.net/~urbanjost/canvas/vogle4.html
   28705   -->
   28706 
   28707 
   28708   <p>The <dfn id=dom-context-2d-fill title=dom-context-2d-fill><code>fill()</code></dfn>
   28709   method must fill all the subpaths of the current path, using
   28710   <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using
   28711   the non-zero winding number rule. Open subpaths must be implicitly
   28712   closed when being filled (without affecting the actual
   28713   subpaths).</p>
   28714 
   28715   <p class=note>Thus, if two overlapping but otherwise independent
   28716   subpaths have opposite windings, they cancel out and result in no
   28717   fill. If they have the same winding, that area just gets painted
   28718   once.</p>
   28719 
   28720   <p>The <dfn id=dom-context-2d-stroke title=dom-context-2d-stroke><code>stroke()</code></dfn> method
   28721   must calculate the strokes of all the subpaths of the current path,
   28722   using the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
   28723   <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
   28724   appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes, and
   28725   then fill the combined stroke area using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>
   28726   attribute.</p>
   28727 
   28728   <p class=note>Since the subpaths are all stroked as one,
   28729   overlapping parts of the paths in one stroke operation are treated
   28730   as if their union was what was painted.</p>
   28731 
   28732   <p>Paths, when filled or stroked, must be painted without affecting
   28733   the current path, and must be subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   28734   operators</a>. (Transformations affect the path when the path is
   28735   created, not when it is painted, though the stroke <em>style</em> is
   28736   still affected by the transformation during painting.)</p>
   28737 
   28738   <p>Zero-length line segments must be pruned before stroking a
   28739   path. Empty subpaths must be ignored.</p>
   28740 
   28741 
   28742   <p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn>
   28743   method must create a new <dfn id=clipping-region>clipping region</dfn> by calculating
   28744   the intersection of the current clipping region and the area
   28745   described by the current path, using the non-zero winding number
   28746   rule. Open subpaths must be implicitly closed when computing the
   28747   clipping region, without affecting the actual subpaths. The new
   28748   clipping region replaces the current clipping region.</p>
   28749 
   28750   <p>When the context is initialized, the clipping region must be set
   28751   to the rectangle with the top left corner at (0,0) and the width and
   28752   height of the coordinate space.</p>
   28753 
   28754   <!-- v5
   28755    Jordan OSETE suggests:
   28756     * support ways of extending the clipping region (union instead of intersection)
   28757        - also "add", "subtract", "replace", "intersect" and "xor"
   28758     * support ways of resetting the clipping region without save/restore
   28759   -->
   28760 
   28761 
   28762   <p>The <dfn id=dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath><code>isPointInPath(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
   28763   return true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the method, when treated as
   28764   coordinates in the canvas coordinate space unaffected by the current
   28765   transformation, is inside the current path as determined by the
   28766   non-zero winding number rule; and must return false
   28767   otherwise. Points on the path itself are considered to be inside the
   28768   path. If either of the arguments is infinite or NaN, then the method
   28769   must return false.</p>
   28770 
   28771   </div>
   28772 
   28773 
   28774   <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
   28775 
   28776   <p>When a canvas is interactive, authors should include focusable
   28777   elements in the element's fallback content corresponding to each
   28778   focusable part of the canvas.</p>
   28779 
   28780   <p>To indicate which focusable part of the canvas is currently
   28781   focused, authors should use the <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing()</a></code> method,
   28782   passing it the element for which a ring is being drawn. This method
   28783   only draws the focus ring if the element is focused, so that it can
   28784   simply be called whenever drawing the element, without checking
   28785   whether the element is focused or not first. The position of the
   28786   center of the control, or of the editing caret if the control has
   28787   one, should be given in the <var title="">x</var> and <var title="">y</var> arguments.</p>
   28788 
   28789   <dl class=domintro><dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [ <var title="">canDrawCustom</var> ])</dt>
   28790 
   28791    <dd>
   28792 
   28793     <p>If the given element is focused, draws a focus ring around the
   28794     current path, following the platform conventions for focus
   28795     rings. The given coordinate is used if the user's attention needs
   28796     to be brought to a particular position (e.g. if a magnifier is
   28797     following the editing caret in a text field).</p>
   28798 
   28799     <p>If the <var title="">canDrawCustom</var> argument is true, then
   28800     the focus ring is only drawn if the user has configured his system
   28801     to draw focus rings in a particular manner. (For example, high
   28802     contrast focus rings.)</p>
   28803 
   28804     <p>Returns true if the given element is focused, the <var title="">canDrawCustom</var> argument is true, and the user has
   28805     not configured his system to draw focus rings in a particular
   28806     manner. Otherwise, returns false.</p>
   28807 
   28808     <p>When the method returns true, the author is expected to
   28809     manually draw a focus ring.</p>
   28810 
   28811    </dd>
   28812 
   28813   </dl><div class=impl>
   28814 
   28815   <p>The <dfn id=dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing><code>drawFocusRing(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [<var title="">canDrawCustom</var>])</code></dfn>
   28816   method, when invoked, must run the following steps:</p>
   28817 
   28818   <ol><li><p>If <var title="">element</var> is not focused or is not a
   28819    descendant of the element with whose context the method is
   28820    associated, then return false and abort these steps.</li>
   28821 
   28822    <li><p>Transform the given point (<var title="">x</var>, <var title="">y</var>) according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
   28823    matrix</a>.</li>
   28824 
   28825    <li><p>Optionally, inform the user that the focus is at the given
   28826    (transformed) coordinate on the canvas. (For example, this could
   28827    involve moving the user's magnification tool.)</li>
   28828 
   28829    <li>
   28830 
   28831     <p>If the user has requested the use of particular focus rings
   28832     (e.g. high-contrast focus rings), or if the <var title="">canDrawCustom</var> argument is absent or false, then
   28833     draw a focus ring of the appropriate style along the path,
   28834     following platform conventions, return false, and abort these
   28835     steps.</p>
   28836 
   28837     <p>The focus ring should not be subject to the <a href=#shadows title=shadows>shadow effects</a>, the <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, or the <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   28838     operators</a>, but <em>should</em> be subject to the <a href=#clipping-region title="clipping region">clipping region</a>.</p>
   28839 
   28840    </li>
   28841 
   28842    <li><p>Return true.</li>
   28843 
   28844   </ol></div>
   28845 
   28846   <div class=example>
   28847 
   28848    <p>This <code><a href=#the-canvas-element>canvas</a></code> element has a couple of checkboxes:</p>
   28849 
   28850    <pre>&lt;canvas height=400 width=750&gt;
   28851  &lt;label&gt;&lt;input type=checkbox id=showA&gt; Show As&lt;/label&gt;
   28852  &lt;label&gt;&lt;input type=checkbox id=showB&gt; Show Bs&lt;/label&gt;
   28853  &lt;!-- ... --&gt;
   28854 &lt;/canvas&gt;
   28855 &lt;script&gt;
   28856  function drawCheckbox(context, element, x, y) {
   28857    context.save();
   28858    context.font = '10px sans-serif';
   28859    context.textAlign = 'left';
   28860    context.textBaseline = 'middle';
   28861    var metrics = context.measureText(element.labels[0].textContent);
   28862    context.beginPath();
   28863    context.strokeStyle = 'black';
   28864    context.rect(x-5, y-5, 10, 10);
   28865    context.stroke();
   28866    if (element.checked) {
   28867      context.fillStyle = 'black';
   28868      context.fill();
   28869    }
   28870    context.fillText(element.labels[0].textContent, x+5, y);
   28871    context.beginPath();
   28872    context.rect(x-7, y-7, 12 + metrics.width+2, 14);
   28873    if (context.drawFocusRing(element, x, y, true)) {
   28874      context.strokeStyle = 'silver';
   28875      context.stroke();
   28876    }
   28877    context.restore();
   28878  }
   28879  function drawBase() { /* ... */ }
   28880  function drawAs() { /* ... */ }
   28881  function drawBs() { /* ... */ }
   28882  function redraw() {
   28883    var canvas = document.getElementsByTagName('canvas')[0];
   28884    var context = canvas.getContext('2d');
   28885    context.clearRect(0, 0, canvas.width, canvas.height);
   28886    drawCheckbox(context, document.getElementById('showA'), 20, 40);
   28887    drawCheckbox(context, document.getElementById('showB'), 20, 60);
   28888    drawBase();
   28889    if (document.getElementById('showA').checked)
   28890      drawAs();
   28891    if (document.getElementById('showB').checked)
   28892      drawBs();
   28893  }
   28894  function processClick(event) {
   28895    var canvas = document.getElementsByTagName('canvas')[0];
   28896    var context = canvas.getContext('2d');
   28897    var x = event.clientX - canvas.offsetLeft;
   28898    var y = event.clientY - canvas.offsetTop;
   28899    drawCheckbox(context, document.getElementById('showA'), 20, 40);
   28900    if (context.isPointInPath(x, y))
   28901      document.getElementById('showA').checked = !(document.getElementById('showA').checked);
   28902    drawCheckbox(context, document.getElementById('showB'), 20, 60);
   28903    if (context.isPointInPath(x, y))
   28904      document.getElementById('showB').checked = !(document.getElementById('showB').checked);
   28905    redraw();
   28906  }
   28907  document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
   28908  document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
   28909  document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
   28910  document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
   28911  redraw();
   28912 &lt;/script&gt;</pre>
   28913 <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
   28914 
   28915   </div>
   28916 
   28917 
   28918   <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
   28919 
   28920   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
   28921 
   28922    <dd>
   28923 
   28924     <p>Returns the current font settings.</p>
   28925 
   28926     <p>Can be set, to change the font. The syntax is the same as for
   28927     the CSS 'font' property; values that cannot be parsed as CSS font
   28928     values are ignored.</p>
   28929 
   28930     <p>Relative keywords and lengths are computed relative to the font
   28931     of the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
   28932 
   28933    </dd>
   28934 
   28935    <dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
   28936 
   28937    <dd>
   28938 
   28939     <p>Returns the current text alignment settings.</p>
   28940 
   28941     <p>Can be set, to change the alignment. The possible values are
   28942     <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
   28943     <code title="">start</code>.</p>
   28944 
   28945    </dd>
   28946 
   28947    <dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
   28948 
   28949    <dd>
   28950 
   28951     <p>Returns the current baseline alignment settings.</p>
   28952 
   28953     <p>Can be set, to change the baseline alignment. The possible
   28954     values and their meanings are given below. Other values are
   28955     ignored. The default is <code title="">alphabetic</code>.</p>
   28956 
   28957    </dd>
   28958 
   28959    <dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
   28960    <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
   28961 
   28962    <dd>
   28963 
   28964     <p>Fills or strokes (respectively) the given text at the given
   28965     position. If a maximum width is provided, the text will be scaled
   28966     to fit that width if necessary.</p>
   28967 
   28968    </dd>
   28969 
   28970    <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>
   28971 
   28972    <dd>
   28973 
   28974     <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
   28975 
   28976    </dd>
   28977 
   28978    <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
   28979 
   28980    <dd>
   28981 
   28982     <p>Returns the advance width of the text that was passed to the
   28983     <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
   28984     method.</p>
   28985 
   28986    </dd>
   28987 
   28988   </dl><div class=impl>
   28989 
   28990   <p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
   28991   attribute, on setting, must be parsed the same way as the 'font'
   28992   property of CSS (but without supporting property-independent style
   28993   sheet syntax like 'inherit'), and the resulting font must be
   28994   assigned to the context, with the 'line-height' component forced to
   28995   'normal', with the 'font-size' component converted to CSS pixels,
   28996   and with system fonts being computed to explicit values. If the new
   28997   value is syntactically incorrect (including using
   28998   property-independent style sheet syntax like 'inherit' or
   28999   'initial'), then it must be ignored, without assigning a new font
   29000   value. <a href=#refsCSS>[CSS]</a></p>
   29001 
   29002   <p>Font names must be interpreted in the context of the
   29003   <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
   29004   <code title="">@font-face</code> must therefore be available once
   29005   they are loaded. (If a font is referenced before it is fully loaded,
   29006   then it must be treated as if it was an unknown font, falling back
   29007   to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
   29008 
   29009   <p>Only vector fonts should be used by the user agent; if a user
   29010   agent were to use bitmap fonts then transformations would likely
   29011   make the font look very ugly.</p>
   29012 
   29013   <p>On getting, the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>
   29014   attribute must return the <span title="serializing a CSS
   29015   value">serialized form</span> of the current font of the context
   29016   (with no 'line-height' component). <a href=#refsCSSOM>[CSSOM]</a></p>
   29017 
   29018   <div class=example>
   29019 
   29020    <p>For example, after the following statement:</p>
   29021 
   29022    <pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
   29023 
   29024    <p>...the expression <code title="">context.font</code> would
   29025    evaluate to the string "<code title="">italic&nbsp;12px&nbsp;"Unknown&nbsp;Font",&nbsp;sans-serif</code>". The
   29026    "400" font-weight doesn't appear because that is the default
   29027    value. The line-height doesn't appear because it is forced to
   29028    "normal", the default value.</p>
   29029 
   29030   </div>
   29031 
   29032   <p>When the context is created, the font of the context must be set
   29033   to 10px sans-serif. When the 'font-size' component is set to lengths
   29034   using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
   29035   keywords, these must be interpreted relative to the computed value
   29036   of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
   29037   element at the time that the attribute is set. When the
   29038   'font-weight' component is set to the relative values 'bolder' and
   29039   'lighter', these must be interpreted relative to the computed value
   29040   of the 'font-weight' property of the corresponding
   29041   <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is
   29042   set. If the computed values are undefined for a particular case
   29043   (e.g. because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
   29044   <code>Document</code></a>), then the relative keywords must be
   29045   interpreted relative to the normal-weight 10px sans-serif
   29046   default.</p>
   29047 
   29048   <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
   29049   attribute, on getting, must return the current value. On setting, if
   29050   the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
   29051   value must be changed to the new value. Otherwise, the new value
   29052   must be ignored. When the context is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
   29053   initially have the value <code title="">start</code>.</p>
   29054 
   29055   <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
   29056   IDL attribute, on getting, must return the current value. On
   29057   setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
   29058   <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
   29059   or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
   29060   then the value must be changed to the new value. Otherwise, the new
   29061   value must be ignored. When the context is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
   29062   must initially have the value <code title="">alphabetic</code>.</p>
   29063 
   29064   </div>
   29065 
   29066   <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
   29067   attribute's allowed keywords correspond to alignment points in the
   29068   font:</p>
   29069 
   29070   <p><img alt="The top of the em square is
   29071   roughly at the top of the glyphs in a font, the hanging baseline is
   29072   where some glyphs like &#2310; are anchored, the middle is half-way
   29073   between the top of the em square and the bottom of the em square,
   29074   the alphabetic baseline is where characters like &Aacute;, &yuml;,
   29075   f, and &Omega; are anchored, the ideographic baseline is
   29076   where glyphs like &#31169; and &#36948; are anchored, and the bottom
   29077   of the em square is roughly at the bottom of the glyphs in a
   29078   font. The top and bottom of the bounding box can be far from these
   29079   baselines, due to glyphs extending far outside the em square." src=images/baselines.png></p>
   29080 
   29081   <p>The keywords map to these alignment points as follows:</p>
   29082 
   29083   <dl><dt><dfn id=dom-context-2d-textbaseline-top title=dom-context-2d-textBaseline-top><code>top</code></dfn>
   29084    <dd>The top of the em square</dd>
   29085 
   29086    <dt><dfn id=dom-context-2d-textbaseline-hanging title=dom-context-2d-textBaseline-hanging><code>hanging</code></dfn>
   29087    <dd>The hanging baseline</dd>
   29088 
   29089    <dt><dfn id=dom-context-2d-textbaseline-middle title=dom-context-2d-textBaseline-middle><code>middle</code></dfn>
   29090    <dd>The middle of the em square</dd>
   29091 
   29092    <dt><dfn id=dom-context-2d-textbaseline-alphabetic title=dom-context-2d-textBaseline-alphabetic><code>alphabetic</code></dfn>
   29093    <dd>The alphabetic baseline</dd>
   29094 
   29095    <dt><dfn id=dom-context-2d-textbaseline-ideographic title=dom-context-2d-textBaseline-ideographic><code>ideographic</code></dfn>
   29096    <dd>The ideographic baseline</dd>
   29097 
   29098    <dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
   29099    <dd>The bottom of the em square</dd>
   29100 
   29101   </dl><div class=impl>
   29102 
   29103   <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
   29104   <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
   29105   methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
   29106   than <var title="">maxWidth</var> if specified, using the current
   29107   <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
   29108   values. Specifically, when the methods are called, the user agent
   29109   must run the following steps:</p>
   29110 
   29111   <ol><li><p>Let <var title="">font</var> be the current font of the
   29112    context, as given by the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>
   29113 
   29114    <li><p>Replace all the <a href=#space-character title="space character">space
   29115    characters</a> in <var title="">text</var> with U+0020 SPACE
   29116    characters.</li>
   29117 
   29118    <li><p>Form a hypothetical infinitely wide CSS line box containing
   29119    a single inline box containing the text <var title="">text</var>,
   29120    with all the properties at their initial values except the 'font'
   29121    property of the inline box set to <var title="">font</var> and the
   29122    'direction' property of the inline box set to <a href=#the-directionality>the
   29123    directionality</a> of the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSS>[CSS]</a></li>
   29124 
   29125    <!-- if you insert a step here, make sure to adjust the next step's
   29126    final words -->
   29127 
   29128    <li><p>If the <var title="">maxWidth</var> argument was specified
   29129    and the hypothetical width of the inline box in the hypothetical
   29130    line box is greater than <var title="">maxWidth</var> CSS pixels,
   29131    then change <var title="">font</var> to have a more condensed font
   29132    (if one is available or if a reasonably readable one can be
   29133    synthesized by applying a horizontal scale factor to the font) or a
   29134    smaller font, and return to the previous step.</li>
   29135 
   29136    <li>
   29137 
   29138     <p>Let the <var title="">anchor point</var> be a point on the
   29139     inline box, determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values, as
   29140     follows:</p>
   29141 
   29142     <p>Horizontal position:</p>
   29143 
   29144     <dl><dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">left</code></dt>
   29145      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
   29146      <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
   29147      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
   29148      <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
   29149 
   29150      <dd>Let the <var title="">anchor point</var>'s horizontal
   29151      position be the left edge of the inline box.</dd>
   29152 
   29153 
   29154      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">right</code></dt>
   29155      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and  <a href=#the-directionality>the directionality</a> of the
   29156      <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
   29157      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
   29158      <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
   29159 
   29160      <dd>Let the <var title="">anchor point</var>'s horizontal
   29161      position be the right edge of the inline box.</dd>
   29162 
   29163 
   29164      <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">center</code></dt>
   29165 
   29166      <dd>Let the <var title="">anchor point</var>'s horizontal
   29167      position be half way between the left and right edges of the
   29168      inline box.</dd>
   29169 
   29170     </dl><p>Vertical position:</p>
   29171 
   29172     <dl><dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>
   29173 
   29174      <dd>Let the <var title="">anchor point</var>'s vertical position
   29175      be the top of the em box of the first available font of the
   29176      inline box.</dd>
   29177 
   29178 
   29179      <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>
   29180 
   29181      <dd>Let the <var title="">anchor point</var>'s vertical position
   29182      be the hanging baseline of the first available font of the inline
   29183      box.</dd>
   29184 
   29185 
   29186      <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>
   29187 
   29188      <dd>Let the <var title="">anchor point</var>'s vertical position
   29189      be half way between the bottom and the top of the em box of the
   29190      first available font of the inline box.</dd>
   29191 
   29192 
   29193      <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>
   29194 
   29195      <dd>Let the <var title="">anchor point</var>'s vertical position
   29196      be the alphabetic baseline of the first available font of the inline
   29197      box.</dd>
   29198 
   29199 
   29200      <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>
   29201 
   29202      <dd>Let the <var title="">anchor point</var>'s vertical position
   29203      be the ideographic baseline of the first available font of the inline
   29204      box.</dd>
   29205 
   29206 
   29207      <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>
   29208 
   29209      <dd>Let the <var title="">anchor point</var>'s vertical position
   29210      be the bottom of the em box of the first available font of the
   29211      inline box.</dd>
   29212 
   29213     </dl></li>
   29214 
   29215    <li>
   29216 
   29217     <p>Paint the hypothetical inline box as the shape given by the
   29218     text's glyphs, as transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
   29219     matrix</a>, and anchored and sized so that before applying the
   29220     <a href=#transformations title=dom-context-2d-transformation>current transformation
   29221     matrix</a>, the <var title="">anchor point</var> is at (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
   29222     mapped to one coordinate space unit.</p>
   29223 
   29224     <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>
   29225     <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
   29226     applied to the glyphs and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
   29227     ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> the reverse
   29228     holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
   29229     applied to the glyph outlines and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
   29230     ignored.</p>
   29231 
   29232     <p>Text is painted without affecting the current path, and is
   29233     subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   29234     operators</a>.</p>
   29235 
   29236    </li>
   29237 
   29238   </ol><!--v5DVT - this is commented out until CSS can get its act together
   29239 enough to actual specify vertical text rendering (how long have we
   29240 been waiting now?)
   29241 
   29242 WHEN EDITING THIS, FIX THE PARTS MARKED "&#x0058;&#x0058;&#x0058;" BELOW
   29243 
   29244   <p>The <dfn
   29245   title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
   29246   and <dfn
   29247   title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
   29248   methods take three or four arguments, <var title="">text</var>, <var
   29249   title="">x</var>, <var title="">y</var>, and optionally <var
   29250   title="">maxHeight</var>, and render the given <var
   29251   title="">text</var> as vertical text at the given (<var
   29252   title="">x</var>, <var title="">y</var>) coordinates ensuring that
   29253   the text isn't taller than <var title="">maxHeight</var> if
   29254   specified, using the current <code
   29255   title="dom-context-2d-font">font</code> and <code
   29256   title="dom-context-2d-textAlign">textAlign</code>
   29257   values. Specifically, when the methods are called, the user agent
   29258   must run the following steps:</p>
   29259 
   29260   <ol>
   29261 
   29262    <li><p>Let <var title="">font</var> be the current font of the
   29263    context, as given by the <code
   29264    title="dom-context-2d-font">font</code> attribute.</p></li>
   29265 
   29266    <li><p>Replace all the <span title="space character">space
   29267    characters</span> in <var title="">text</var> with U+0020 SPACE
   29268    characters.</p></li>
   29269 
   29270    <li><p>Form a <em class="&#x0058;&#x0058;&#x0058;">whatever CSS ends up calling
   29271    vertical line boxes and inline boxes</em> containing the text <var
   29272    title="">text</var>, with all the properties at their initial
   29273    values except the 'font' property of the inline box set to <var
   29274    title="">font</var> and the 'direction' property of the inline
   29275    box set to <span>the directionality</span> of the <code>canvas</code>
   29276    element.</p></li>
   29277 
   29278    <!- - if you insert a step here, make sure to adjust the next step's
   29279    final words - ->
   29280 
   29281    <li><p>If the <var title="">maxHeight</var> argument was specified
   29282    and the hypothetical height of the <em class="&#x0058;&#x0058;&#x0058;">box</em>
   29283    in the hypothetical line box is greater than <var
   29284    title="">maxHeight</var> CSS pixels, then change <var
   29285    title="">font</var> to have a more condensed font (if one is
   29286    available or if a reasonably readable one can be synthesized by
   29287    applying an appropriate scale factor to the font) or a smaller
   29288    font, and return to the previous step.</p></li>
   29289 
   29290    <li>
   29291 
   29292     <p>Let the <var title="">anchor point</var> be a point on the <em
   29293     class="&#x0058;&#x0058;&#x0058;">inline box</var>, determined by the <code
   29294     title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
   29295 
   29296     <p>Vertical position:</p>
   29297 
   29298     <dl>
   29299 
   29300      <dt> If <code
   29301      title="dom-context-2d-textAlign">textAlign</code> is <code
   29302      title="">start</code></dt>
   29303      <dt> If <code
   29304      title="dom-context-2d-textAlign">textAlign</code> is <code
   29305      title="">left</code> and <span>the directionality</span> of the
   29306      <code>canvas</code> element is 'ltr'</dt>
   29307      <dt> If <code
   29308      title="dom-context-2d-textAlign">textAlign</code> is <code
   29309      title="">right</code> and <span>the directionality</span> of the
   29310      <code>canvas</code> element is 'rtl'</dt>
   29311 
   29312      <dd>Let the <var title="">anchor point</var>'s vertical
   29313      position be the top edge of the <em class="&#x0058;&#x0058;&#x0058;">inline
   29314      box</em>.</dd>
   29315 
   29316      <dt> If <code
   29317      title="dom-context-2d-textAlign">textAlign</code> is <code
   29318      title="">end</code></dt>
   29319      <dt> If <code
   29320      title="dom-context-2d-textAlign">textAlign</code> is <code
   29321      title="">right</code> and <span>the directionality</span> of the
   29322      <code>canvas</code> element is 'ltr'</dt>
   29323      <dt> If <code
   29324      title="dom-context-2d-textAlign">textAlign</code> is <code
   29325      title="">left</code> and <span>the directionality</span> of the
   29326      <code>canvas</code> element is 'rtl'</dt>
   29327 
   29328      <dd>Let the <var title="">anchor point</var>'s vertical
   29329      position be the bottom edge of the <em class="&#x0058;&#x0058;&#x0058;">inline
   29330      box</em>.</dd>
   29331 
   29332 
   29333      <dt> If <code
   29334      title="dom-context-2d-textAlign">textAlign</code> is <code
   29335      title="">center</code></dt>
   29336 
   29337      <dd>Let the <var title="">anchor point</var>'s vertical position
   29338      be half way between the top and bottom edges of the <em
   29339      class="&#x0058;&#x0058;&#x0058;">inline box</em>.</dd>
   29340 
   29341     </dl>
   29342 
   29343     <p>Let the horizontal position be half way between the left and
   29344     right edges of the em box of the first available font of the <em
   29345     class="&#x0058;&#x0058;&#x0058;">inline box</em>.</p>
   29346 
   29347    </li>
   29348 
   29349    <li>
   29350 
   29351     <p>Paint the hypothetical inline box as the shape given by the
   29352     text's glyphs, as transformed by the <span
   29353     title="dom-context-2d-transformation">current transformation
   29354     matrix</span>, and anchored and sized so that before applying the
   29355     <span title="dom-context-2d-transformation">current transformation
   29356     matrix</span>, the <var title="">anchor point</var> is at (<var
   29357     title="">x</var>, <var title="">y</var>) and each CSS pixel is
   29358     mapped to one coordinate space unit.</p>
   29359 
   29360     <p>For <code
   29361     title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
   29362     <code title="dom-context-2d-fillStyle">fillStyle</code> must be
   29363     applied and <code
   29364     title="dom-context-2d-strokeStyle">strokeStyle</code> must be
   29365     ignored. For <code
   29366     title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
   29367     the reverse holds and <code
   29368     title="dom-context-2d-strokeStyle">strokeStyle</code> must be
   29369     applied and <code
   29370     title="dom-context-2d-fillStyle">fillStyle</code> must be
   29371     ignored.</p>
   29372 
   29373     <p>Text is painted without affecting the current path, and is
   29374     subject to <span title="shadows">shadow effects</span>, <span
   29375     title="dom-context-2d-globalAlpha">global alpha</span>, the <span
   29376     title="clipping region">clipping region</span>, and <span
   29377     title="dom-context-2d-globalCompositeOperation">global composition
   29378     operators</span>.</p>
   29379 
   29380    </li>
   29381 
   29382   </ol>
   29383 
   29384 v5DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
   29385   method takes one argument, <var title="">text</var>. When the method
   29386   is invoked, the user agent must replace all the <a href=#space-character title="space
   29387   character">space characters</a> in <var title="">text</var> with
   29388   U+0020 SPACE characters, and then must form a hypothetical
   29389   infinitely wide CSS line box containing a single inline box
   29390   containing the text <var title="">text</var>, with all the
   29391   properties at their initial values except the 'font' property of the
   29392   inline element set to the current font of the context, as given by
   29393   the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
   29394   must then return a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
   29395   <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
   29396   the width of that inline box, in CSS pixels. <a href=#refsCSS>[CSS]</a></p>
   29397 
   29398   <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
   29399   returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
   29400   attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
   29401   by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
   29402   method.</p>
   29403 
   29404   <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
   29405   of the box given by the font size (the em square size) and the width
   29406   returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
   29407   width). This version of the specification does not provide a way to
   29408   obtain the bounding box dimensions of the text. If the text is to be
   29409   rendered and removed, care needs to be taken to replace the entire
   29410   area of the canvas that the clipping region covers, not just the box
   29411   given by the em square height and measured text width.</p>
   29412 
   29413   <!-- v5: Drawing text along a given path -->
   29414   <!-- v5: Adding text to a path -->
   29415   <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
   29416   <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
   29417 
   29418   </div>
   29419 
   29420   <p class=note>A future version of the 2D context API may provide a
   29421   way to render fragments of documents, rendered using CSS, straight
   29422   to the canvas. This would be provided in preference to a dedicated
   29423   way of doing multiline layout.</p>
   29424 
   29425 
   29426 
   29427   <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
   29428 
   29429   <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
   29430   can be used.</p>
   29431 
   29432   <p>This method can be invoked with three different sets of arguments:</p>
   29433 
   29434   <ul class=brief><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
   29435    <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
   29436    <li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
   29437   </ul><!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard --><p>Each of those three can take either an
   29438   <code><a href=#htmlimageelement>HTMLImageElement</a></code>, an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
   29439   an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> for the <var title="">image</var>
   29440   argument.</p>
   29441 
   29442   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
   29443    <dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
   29444    <dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
   29445 
   29446    <dd>
   29447 
   29448     <p>Draws the given image onto the canvas. The arguments are
   29449     interpreted as follows:</p>
   29450 
   29451     <p><img alt="The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle." src=images/drawImage.png></p>
   29452 
   29453     <p>If the first argument isn't an <code><a href=#the-img-element>img</a></code>,
   29454     <code><a href=#the-canvas-element>canvas</a></code>, or <code><a href=#video>video</a></code> element, throws a
   29455     <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. If the image has no
   29456     image data, throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. If
   29457     the numeric arguments don't make sense (e.g. the destination is a
   29458     0&times;0 rectangle), throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   29459     exception. If the image isn't yet fully decoded, then nothing is
   29460     drawn.</p>
   29461 
   29462    </dd>
   29463 
   29464   </dl><div class=impl>
   29465 
   29466   <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
   29467   one CSS pixel in the image is treated as one unit in the canvas
   29468   coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are omitted, they must default to 0, 0,
   29469   the image's intrinsic width in image pixels, and the image's
   29470   intrinsic height in image pixels, respectively.</p>
   29471 
   29472   <p>The <var title="">image</var> argument is an instance of either
   29473   <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
   29474   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>. If the <var title="">image</var> is
   29475   null, the implementation must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code>
   29476   exception.</p> <!-- createPattern() has an equivalent paragraph -->
   29477 
   29478   <p>If the <var title="">image</var> argument is an
   29479   <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false, or
   29480   if the <var title="">image</var> argument is an
   29481   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
   29482   <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
   29483   implementation must return without drawing anything.</p>
   29484   <!-- createPattern() has an equivalent paragraph -->
   29485 
   29486   <p>If the <var title="">image</var> argument is an
   29487   <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
   29488   dimension or a vertical dimension equal to zero, then the
   29489   implementation must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   29490   exception.</p>
   29491   <!-- createPattern() has an equivalent paragraph -->
   29492 
   29493   <p>The source rectangle is the rectangle whose corners are the four
   29494   points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
   29495 
   29496   <p>If the source rectangle is not entirely within the source image,
   29497   or if one of the <var title="">sw</var> or <var title="">sh</var>
   29498   arguments is zero, the implementation must raise an
   29499   <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   29500 
   29501   <p>The destination rectangle is the rectangle whose corners are the
   29502   four points (<var title="">dx</var>, <var title="">dy</var>),
   29503   (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
   29504 
   29505   <p>When <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> is
   29506   invoked, the region of the image specified by the source rectangle
   29507   must be painted on the region of the canvas specified by the
   29508   destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current transformation
   29509   matrix</a> to the points of the destination rectangle.</p>
   29510 
   29511   <p>The original image data of the source image must be used, not the
   29512   image as it is rendered (e.g. <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 on the source
   29513   element have no effect). The image data must be processed in the
   29514   original direction, even if the dimensions given are negative. <!--
   29515   remove that last sentence if it causes confusion. Someone once
   29516   suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
   29517   to clarify that this is no the case. --></p>
   29518 
   29519   <p class=note>This specification does not define the algorithm to
   29520   use when scaling the image, if necessary.</p>
   29521 
   29522   <p class=note>When a canvas is drawn onto itself, the drawing
   29523   model requires the source to be copied before the image is drawn
   29524   back onto the canvas, so it is possible to copy parts of a canvas
   29525   onto overlapping parts of itself.</p>
   29526 
   29527   <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method
   29528   is passed an animated image as its <var title="">image</var>
   29529   argument, the user agent must use the poster frame of the animation,
   29530   or, if there is no poster frame, the first frame of the
   29531   animation.</p>
   29532   <!-- createPattern() has an equivalent paragraph -->
   29533 
   29534   <p>When the <var title="">image</var> argument is an
   29535   <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
   29536   playback position</a> must be used as the source image, and the
   29537   source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
   29538   <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
   29539   of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
   29540   correction has been applied).</p>
   29541   <!-- createPattern() has an equivalent paragraph -->
   29542 
   29543   <p>Images are painted without affecting the current path, and are
   29544   subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   29545   operators</a>.</p>
   29546 
   29547   </div>
   29548 
   29549 
   29550 
   29551   <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
   29552 
   29553   <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
   29554 
   29555    <dd>
   29556 
   29557     <p>Returns an <code><a href=#imagedata>ImageData</a></code> object with the given
   29558     dimensions in CSS pixels (which might map to a different number of
   29559     actual device pixels exposed by the object itself). All the pixels
   29560     in the returned object are transparent black.</p>
   29561 
   29562    </dd>
   29563 
   29564    <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">imagedata</var>)</dt>
   29565 
   29566    <dd>
   29567 
   29568     <p>Returns an <code><a href=#imagedata>ImageData</a></code> object with the same
   29569     dimensions as the argument. All the pixels in the returned object
   29570     are transparent black.</p>
   29571 
   29572     <p>Throws a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if the
   29573     argument is null.</p>
   29574 
   29575    </dd>
   29576 
   29577    <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData</a></code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
   29578 
   29579    <dd>
   29580 
   29581     <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
   29582     data for the given rectangle of the canvas.</p>
   29583 
   29584     <p>Throws a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if any of the
   29585     arguments are not finite. Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   29586     exception if the either of the width or height arguments are
   29587     zero.</p>
   29588 
   29589    </dd>
   29590 
   29591    <dt><var title="">imagedata</var> . <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code></dt>
   29592    <dt><var title="">imagedata</var> . <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code></dt>
   29593 
   29594    <dd>
   29595 
   29596     <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in device pixels.</p>
   29597 
   29598    </dd>
   29599 
   29600    <dt><var title="">imagedata</var> . <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code></dt>
   29601 
   29602    <dd>
   29603 
   29604     <p>Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.</p>
   29605 
   29606    </dd>
   29607 
   29608    <dt><var title="">context</var> . <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData</a></code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
   29609 
   29610    <dd>
   29611 
   29612     <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
   29613     onto the canvas. If a dirty rectangle is provided, only the pixels
   29614     from that rectangle are painted.</p>
   29615 
   29616     <p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
   29617     and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
   29618     attributes, as well as the shadow attributes, are ignored for the
   29619     purposes of this method call; pixels in the canvas are replaced
   29620     wholesale, with no composition, alpha blending, no shadows,
   29621     etc.</p>
   29622 
   29623     <p>If the first argument isn't an <code><a href=#imagedata>ImageData</a></code> object,
   29624     throws a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception. Throws a
   29625     <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception if any of the other
   29626     arguments are not finite.</p>
   29627 
   29628    </dd>
   29629 
   29630   </dl><div class=impl>
   29631 
   29632   <p>The <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn>
   29633   method is used to instantiate new blank <code><a href=#imagedata>ImageData</a></code>
   29634   objects. When the method is invoked with two arguments <var title="">sw</var> and <var title="">sh</var>, it must return an
   29635   <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width
   29636   in CSS pixels equal to the absolute magnitude of <var title="">sw</var> and a height in CSS pixels equal to the absolute
   29637   magnitude of <var title="">sh</var>. When invoked with a single <var title="">imagedata</var> argument, it must return an
   29638   <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with the same
   29639   dimensions as the <code><a href=#imagedata>ImageData</a></code> object passed as the
   29640   argument. The <code><a href=#imagedata>ImageData</a></code> object return must be filled
   29641   with transparent black.</p>
   29642 
   29643   <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
   29644   <var title="">sh</var>)</code></dfn> method must return an
   29645   <code><a href=#imagedata>ImageData</a></code> object representing the underlying pixel data
   29646   for the area of the canvas denoted by the rectangle whose corners are
   29647   the four points (<var title="">sx</var>, <var title="">sy</var>),
   29648   (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas
   29649   coordinate space units. Pixels outside the canvas must be returned
   29650   as transparent black. Pixels must be returned as non-premultiplied
   29651   alpha values.</p>
   29652 
   29653   <p>If any of the arguments to <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> or
   29654   <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> are
   29655   infinite or NaN, or if the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code>
   29656   method is invoked with only one argument but that argument is null,
   29657   the method must instead raise a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code>
   29658   exception. If either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, the method must instead raise
   29659   an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   29660 
   29661   <p><code><a href=#imagedata>ImageData</a></code> objects must be initialized so that their
   29662   <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn> attribute
   29663   is set to <var title="">w</var>, the number of physical device
   29664   pixels per row in the image data, their <dfn id=dom-imagedata-height title=dom-imagedata-height><code>height</code></dfn> attribute is
   29665   set to <var title="">h</var>, the number of rows in the image data,
   29666   and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn>
   29667   attribute is initialized to a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object
   29668   holding the image data. At least one pixel's worth of image data
   29669   must be returned.</p>
   29670 
   29671   <p>The <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object provides ordered,
   29672   indexed access to the color components of each pixel of the image
   29673   data. The data must be represented in left-to-right order, row by
   29674   row top to bottom, starting with the top left, with each pixel's
   29675   red, green, blue, and alpha components being given in that order for
   29676   each pixel. Each component of each device pixel represented in this
   29677   array must be in the range 0..255, representing the 8 bit value for
   29678   that component. The components must be assigned consecutive indices
   29679   starting with 0 for the top left pixel's red component.</p>
   29680 
   29681   <p>The <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object thus represents <var title="">h</var>&times;<var title="">w</var>&times;4 integers. The
   29682   <dfn id=dom-canvaspixelarray-length title=dom-canvaspixelarray-length><code>length</code></dfn>
   29683   attribute of a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object must return this
   29684   number.</p>
   29685 
   29686   <p>The object's <span>indices of the supported indexed
   29687   properties</span> are the numbers in the range 0 .. <span title=""><var title="">h</var>&times;<var title="">w</var>&times;4-1</span>.</p>
   29688 
   29689   <p>When a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object is <dfn id=dom-canvaspixelarray-get title=dom-CanvasPixelArray-get>indexed to retrieve an indexed
   29690   property</dfn> <var title="">index</var>, the value returned must be
   29691   the value of the <var title="">index</var>th component in the
   29692   array.</p>
   29693 
   29694   <p>When a <code><a href=#canvaspixelarray>CanvasPixelArray</a></code> object is <dfn id=dom-canvaspixelarray-set title=dom-CanvasPixelArray-set>indexed to modify an indexed
   29695   property</dfn> <var title="">index</var> with value <var title="">value</var>, the value of the <var title="">index</var>th
   29696   component in the array must be set to <var title="">value</var>.</p>
   29697 
   29698   <p class=note>The width and height (<var title="">w</var> and <var title="">h</var>) might be different from the <var title="">sw</var>
   29699   and <var title="">sh</var> arguments to the above methods, e.g. if
   29700   the canvas is backed by a high-resolution bitmap, or if the <var title="">sw</var> and <var title="">sh</var> arguments are
   29701   negative.</p>
   29702 
   29703   <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var>)</code></dfn> method writes data from
   29704   <code><a href=#imagedata>ImageData</a></code> structures back to the canvas.</p>
   29705 
   29706   <p>If any of the arguments to the method are infinite or NaN, the
   29707   method must raise a <code><a href=#not_supported_err>NOT_SUPPORTED_ERR</a></code> exception.</p>
   29708 
   29709   <p>If the first argument to the method is null or not an
   29710   <code><a href=#imagedata>ImageData</a></code> object then the <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> method
   29711   must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception.</p>
   29712 
   29713   <p>When the last four arguments are omitted, they must be assumed to
   29714   have the values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> member of the <var title="">imagedata</var> structure, respectively.</p>
   29715 
   29716   <p>When invoked with arguments that do not, per the last few
   29717   paragraphs, cause an exception to be raised, the <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> method
   29718   must act as follows:</p>
   29719 
   29720   <ol><li>
   29721 
   29722     <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
   29723     of the device pixel in the underlying pixel data of the canvas
   29724     corresponding to the <var title="">dx</var> coordinate in the
   29725     canvas coordinate space.</p>
   29726 
   29727     <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
   29728     of the device pixel in the underlying pixel data of the canvas
   29729     corresponding to the <var title="">dy</var> coordinate in the
   29730     canvas coordinate space.</p>
   29731 
   29732    </li>
   29733 
   29734    <li>
   29735 
   29736     <p>If <var title="">dirtyWidth</var> is negative, let <var title="">dirtyX</var> be <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>, and let <var title="">dirtyWidth</var> be equal to the absolute magnitude of
   29737     <var title="">dirtyWidth</var>.</p>
   29738 
   29739     <p>If <var title="">dirtyHeight</var> is negative, let <var title="">dirtyY</var> be <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>, and let <var title="">dirtyHeight</var> be equal to the absolute magnitude of
   29740     <var title="">dirtyHeight</var>.</p>
   29741 
   29742    </li>
   29743 
   29744    <li>
   29745 
   29746     <p>If <var title="">dirtyX</var> is negative, let <var title="">dirtyWidth</var> be <span title=""><var title="">dirtyWidth</var>+<var title="">dirtyX</var></span>, and
   29747     let <var title="">dirtyX</var> be zero.</p>
   29748 
   29749     <p>If <var title="">dirtyY</var> is negative, let <var title="">dirtyHeight</var> be <span title=""><var title="">dirtyHeight</var>+<var title="">dirtyY</var></span>, and
   29750     let <var title="">dirtyY</var> be zero.</p>
   29751 
   29752    </li>
   29753 
   29754    <li>
   29755 
   29756     <p>If <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span> is greater than the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyWidth</var> be the value of that <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> attribute, minus the
   29757     value of <var title="">dirtyX</var>.</p>
   29758 
   29759     <p>If <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span> is greater than the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyHeight</var> be the value of that <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> attribute, minus the
   29760     value of <var title="">dirtyY</var>.</p>
   29761 
   29762    </li>
   29763 
   29764    <li>
   29765 
   29766     <p>If, after those changes, either <var title="">dirtyWidth</var>
   29767     or <var title="">dirtyHeight</var> is negative or zero, stop these
   29768     steps without affecting the canvas.</p>
   29769 
   29770    </li>
   29771 
   29772    <li><p>Otherwise, for all integer values of <var title="">x</var>
   29773    and <var title="">y</var> where <span title=""><var title="">dirtyX</var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
   29774    and <span title=""><var title="">dirtyY</var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of
   29775    the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in the <var title="">imagedata</var> data
   29776    structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
   29777    <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the underlying pixel data of the
   29778    canvas.</li>
   29779 
   29780   </ol><p>The handling of pixel rounding when the specified coordinates do
   29781   not exactly map to the device coordinate space is not defined by
   29782   this specification, except that the following must result in no
   29783   visible changes to the rendering:</p>
   29784 
   29785   <pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>
   29786 
   29787   <p>...for any value of <var title="">x</var>, <var title="">y</var>,
   29788   <var title="">w</var>, and <var title="">h</var> and where <var title="">p</var> is the smaller of <var title="">x</var> and the sum
   29789   of <var title="">x</var> and <var title="">w</var>, and <var title="">q</var> is the smaller of <var title="">y</var> and the sum
   29790   of <var title="">y</var> and <var title="">h</var>; and except that
   29791   the following two calls:</p>
   29792 
   29793   <pre>context.createImageData(w, h);
   29794 context.getImageData(0, 0, w, h);</pre>
   29795 
   29796   <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same
   29797   dimensions, for any value of <var title="">w</var> and <var title="">h</var>. In other words, while user agents may round the
   29798   arguments of these methods so that they map to device pixel
   29799   boundaries, any rounding performed must be performed consistently
   29800   for all of the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>createImageData()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code>
   29801   operations.</p>
   29802 
   29803   <p class=note>Due to the lossy nature of converting to and from
   29804   premultiplied alpha color values, pixels that have just been set
   29805   using <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> might be
   29806   returned to an equivalent <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> as
   29807   different values.</p>
   29808 
   29809   <p>The current path, <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>,
   29810   <a href=#shadows title=shadows>shadow attributes</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
   29811   operator</a> must not affect the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code>
   29812   methods.</p>
   29813 
   29814   </div>
   29815 
   29816   <div class=example>
   29817 
   29818    <p>The data returned by <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> is at the
   29819    resolution of the canvas backing store, which is likely to not be
   29820    one device pixel to each CSS pixel if the display used is a high
   29821    resolution display.</p>
   29822 
   29823    <p>In the following example, the script generates an
   29824    <code><a href=#imagedata>ImageData</a></code> object so that it can draw onto it.</p>
   29825 
   29826    <pre>// canvas is a reference to a &lt;canvas&gt; element
   29827 var context = canvas.getContext('2d');
   29828 
   29829 // create a blank slate
   29830 var data = context.createImageData(canvas.width, canvas.height);
   29831 
   29832 // create some plasma
   29833 FillPlasma(data, 'green'); // green plasma
   29834 
   29835 // add a cloud to the plasma
   29836 AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
   29837 
   29838 // paint the plasma+cloud on the canvas
   29839 context.putImageData(data, 0, 0);
   29840 
   29841 // support methods
   29842 function FillPlasma(data, color) { ... }
   29843 function AddCloud(data, x, y) { ... }</pre>
   29844 
   29845   </div>
   29846 
   29847   <div class=example>
   29848 
   29849    <p>Here is an example of using <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> to
   29850    implement an edge detection filter.</p>
   29851 
   29852    <pre>&lt;!DOCTYPE HTML&gt;
   29853 &lt;html&gt;
   29854  &lt;head&gt;
   29855   &lt;title&gt;Edge detection demo&lt;/title&gt;
   29856   &lt;script&gt;
   29857    var image = new Image();
   29858    function init() {
   29859      image.onload = demo;
   29860      image.src = "image.jpeg";
   29861    }
   29862    function demo() {
   29863      var canvas = document.getElementsByTagName('canvas')[0];
   29864      var context = canvas.getContext('2d');
   29865 
   29866      // draw the image onto the canvas
   29867      context.drawImage(image, 0, 0);
   29868 
   29869      // get the image data to manipulate
   29870      var input = context.getImageData(0, 0, canvas.width, canvas.height);
   29871 
   29872      // get an empty slate to put the data into
   29873      var output = context.createImageData(canvas.width, canvas.height);
   29874 
   29875      // alias some variables for convenience
   29876      // notice that we are using input.width and input.height here
   29877      // as they might not be the same as canvas.width and canvas.height
   29878      // (in particular, they might be different on high-res displays)
   29879      var w = input.width, h = input.height;
   29880      var inputData = input.data;
   29881      var outputData = output.data;
   29882 
   29883      // edge detection
   29884      for (var y = 1; y &lt; h-1; y += 1) {
   29885        for (var x = 1; x &lt; w-1; x += 1) {
   29886          for (var c = 0; c &lt; 3; c += 1) {
   29887            var i = (y*w + x)*4 + c;
   29888            outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
   29889                                  -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
   29890                                  -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
   29891          }
   29892          outputData[(y*w + x)*4 + 3] = 255; // alpha
   29893        }
   29894      }
   29895 
   29896      // put the image data back after manipulation
   29897      context.putImageData(output, 0, 0);
   29898    }
   29899   &lt;/script&gt;
   29900  &lt;/head&gt;
   29901  &lt;body onload="init()"&gt;
   29902   &lt;canvas&gt;&lt;/canvas&gt;
   29903  &lt;/body&gt;
   29904 &lt;/html&gt;</pre>
   29905 
   29906   </div>
   29907 
   29908 
   29909   <div class=impl>
   29910 
   29911   <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
   29912 
   29913   <p>When a shape or image is painted, user agents must follow these
   29914   steps, in the order given (or act as if they do):</p>
   29915 
   29916   <ol><li><p>Render the shape or image onto an infinite transparent black
   29917    bitmap, creating image <var title="">A</var>, as described in the
   29918    previous sections. For shapes, the current fill, stroke, and line
   29919    styles must be honored, and the stroke must itself also be
   29920    subjected to the current transformation matrix.</li>
   29921 
   29922    <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, render the shadow from
   29923    image <var title="">A</var>, using the current shadow styles,
   29924    creating image <var title="">B</var>.</li>
   29925 
   29926    <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, multiply the alpha
   29927    component of every pixel in <var title="">B</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
   29928 
   29929    <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the clipping region over the current canvas
   29930    bitmap using the current composition operator.</li>
   29931 
   29932    <li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
   29933 
   29934    <li><p>Composite <var title="">A</var> within the clipping region
   29935    over the current canvas bitmap using the current composition
   29936    operator.</li>
   29937 
   29938   </ol></div>
   29939 
   29940 
   29941   <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
   29942 
   29943   <p><i>This section is non-normative.</i></p>
   29944 
   29945   <p>Here is an example of a script that uses canvas to draw pretty
   29946   glowing lines.</p>
   29947 
   29948   <pre>&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
   29949 &lt;script&gt;
   29950 
   29951  var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   29952 
   29953  var lastX = context.canvas.width * Math.random();
   29954  var lastY = context.canvas.height * Math.random();
   29955  var hue = 0;
   29956  function line() {
   29957    context.save();
   29958    context.translate(context.canvas.width/2, context.canvas.height/2);
   29959    context.scale(0.9, 0.9);
   29960    context.translate(-context.canvas.width/2, -context.canvas.height/2);
   29961    context.beginPath();
   29962    context.lineWidth = 5 + Math.random() * 10;
   29963    context.moveTo(lastX, lastY);
   29964    lastX = context.canvas.width * Math.random();
   29965    lastY = context.canvas.height * Math.random();
   29966    context.bezierCurveTo(context.canvas.width * Math.random(),
   29967                          context.canvas.height * Math.random(),
   29968                          context.canvas.width * Math.random(),
   29969                          context.canvas.height * Math.random(),
   29970                          lastX, lastY);
   29971 
   29972    hue = hue + 10 * Math.random();
   29973    context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   29974    context.shadowColor = 'white';
   29975    context.shadowBlur = 10;
   29976    context.stroke();
   29977    context.restore();
   29978  }
   29979  setInterval(line, 50);
   29980 
   29981  function blank() {
   29982    context.fillStyle = 'rgba(0,0,0,0.1)';
   29983    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
   29984  }
   29985  setInterval(blank, 40);
   29986 
   29987 &lt;/script&gt;</pre>
   29988 
   29989   
   29990 
   29991   </div><!--data-component-->
   29992 
   29993   
   29994 
   29995   <div class=impl>
   29996 
   29997   <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
   29998 
   29999   <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
   30000   only two points: when rendering images with their own gamma
   30001   correction and color space information onto the canvas, to convert
   30002   the image to the color space used by the canvas (e.g. using the 2D
   30003   Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code>
   30004   method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> object), and when
   30005   rendering the actual canvas bitmap to the output device.</p>
   30006 
   30007   <p class=note>Thus, in the 2D context, colors used to draw shapes
   30008   onto the canvas will exactly match colors obtained through the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
   30009   method.</p>
   30010 
   30011   <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method
   30012   must not include color space information in the resource
   30013   returned. Where the output format allows it, the color of pixels in
   30014   resources created by <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> must match those
   30015   returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
   30016   method.</p>
   30017 
   30018   <p>In user agents that support CSS, the color space used by a
   30019   <code><a href=#the-canvas-element>canvas</a></code> element must match the color space used for
   30020   processing any colors for that element in CSS.</p>
   30021 
   30022   <p>The gamma correction and color space information of images must
   30023   be handled in such a way that an image rendered directly using an
   30024   <code><a href=#the-img-element>img</a></code> element would use the same colors as one painted on
   30025   a <code><a href=#the-canvas-element>canvas</a></code> element that is then itself
   30026   rendered. Furthermore, the rendering of images that have no color
   30027   correction information (such as those returned by the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method) must be
   30028   rendered with no color correction.</p>
   30029 
   30030   <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render
   30031   the output of the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method to the
   30032   canvas, given the appropriate dimensions, has no visible effect.</p>
   30033 
   30034   </div>
   30035 
   30036 
   30037   <div class=impl>
   30038 
   30039   <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
   30040 
   30041   <p><strong>Information leakage</strong> can occur if scripts from
   30042   one <a href=#origin>origin</a> can access information (e.g. read pixels)
   30043   from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>
   30044 
   30045   <p>To mitigate this, <code><a href=#the-canvas-element>canvas</a></code> elements are defined to
   30046   have a flag indicating whether they are <i>origin-clean</i>. All
   30047   <code><a href=#the-canvas-element>canvas</a></code> elements must start with their
   30048   <i>origin-clean</i> set to true. The flag must be set to false if
   30049   any of the following actions occur:</p>
   30050 
   30051   <ul><li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
   30052    called with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an
   30053    <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not the
   30054    <a href=#same-origin title="same origin">same</a> as that of the
   30055    <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
   30056    element.</li>
   30057 
   30058    <li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
   30059    called with an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose
   30060    <i>origin-clean</i> flag is false.</li>
   30061 
   30062    <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
   30063    to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   30064    <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
   30065    whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
   30066    origin">same</a> as that of the <code><a href=#document>Document</a></code> object
   30067    that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
   30068    created.</li>
   30069 
   30070    <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
   30071    to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   30072    <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   30073    false when the pattern was created.</li>
   30074 
   30075    <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
   30076    set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   30077    <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
   30078    whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
   30079    origin">same</a> as that of the <code><a href=#document>Document</a></code> object
   30080    that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
   30081    created.</li>
   30082 
   30083    <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
   30084    set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
   30085    <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
   30086    false when the pattern was created.</li>
   30087 
   30088   </ul><p>Whenever the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method of a
   30089   <code><a href=#the-canvas-element>canvas</a></code> element whose <i>origin-clean</i> flag is set to
   30090   false is called, the method must raise a <code><a href=#security_err>SECURITY_ERR</a></code>
   30091   exception.</p>
   30092 
   30093   <p>Whenever the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method of
   30094   the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element whose
   30095   <i>origin-clean</i> flag is set to false is called with otherwise
   30096   correct arguments, the method must raise a <code><a href=#security_err>SECURITY_ERR</a></code>
   30097   exception.</p>
   30098 
   30099   <p class=note>Even resetting the canvas state by changing its
   30100   <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
   30101   the <i>origin-clean</i> flag.</p>
   30102 
   30103   </div>
   30104 
   30105 
   30106 
   30107   <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>
   30108 
   30109   <dl class=element><dt>Categories</dt>
   30110    <dd><a href=#flow-content>Flow content</a>.</dd>
   30111    <dd>When the element only contains <a href=#phrasing-content>phrasing content</a>: <a href=#phrasing-content>phrasing content</a>.</dd>
   30112    <dt>Contexts in which this element may be used:</dt>
   30113    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   30114    <dt>Content model:</dt>
   30115    <dd><a href=#transparent>Transparent</a>.</dd>
   30116    <dt>Content attributes:</dt>
   30117    <dd><a href=#global-attributes>Global attributes</a></dd>
   30118    <dd><code title=attr-map-name><a href=#attr-map-name>name</a></code></dd>
   30119    <dt>DOM interface:</dt>
   30120    <dd>
   30121 <pre class=idl>interface <dfn id=htmlmapelement>HTMLMapElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   30122            attribute DOMString <a href=#dom-map-name title=dom-map-name>name</a>;
   30123   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-map-areas title=dom-map-areas>areas</a>;
   30124   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-map-images title=dom-map-images>images</a>;
   30125 };</pre>
   30126    </dd>
   30127   </dl><p>The <code><a href=#the-map-element>map</a></code> element, in conjunction with any
   30128   <code><a href=#the-area-element>area</a></code> element descendants, defines an <a href=#image-map>image
   30129   map</a>. The element <a href=#represents>represents</a> its children.</p>
   30130 
   30131   <p>The <dfn id=attr-map-name title=attr-map-name><code>name</code></dfn> attribute
   30132   gives the map a name so that it can be referenced. The attribute
   30133   must be present and must have a non-empty value with no <a href=#space-character title="space character">space characters</a>. The value of the
   30134   <code title=attr-map-name><a href=#attr-map-name>name</a></code> attribute must not be a
   30135   <a href=#compatibility-caseless title="compatibility caseless">compatibility-caseless</a>
   30136   match for the value of the <code title=attr-map-name><a href=#attr-map-name>name</a></code>
   30137   attribute of another <code><a href=#the-map-element>map</a></code> element in the same
   30138   document. If the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute is also
   30139   specified, both attributes must have the same value.</p>
   30140 
   30141   <dl class=domintro><dt><var title="">map</var> . <code title=dom-map-areas><a href=#dom-map-areas>areas</a></code></dt>
   30142 
   30143    <dd>
   30144 
   30145     <p>Returns an <code><a href=#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>
   30146 
   30147    </dd>
   30148 
   30149    <dt><var title="">map</var> . <code title=dom-map-images><a href=#dom-map-images>images</a></code></dt>
   30150 
   30151    <dd>
   30152 
   30153     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements that use the <code><a href=#the-map-element>map</a></code>.</p>
   30154 
   30155    </dd>
   30156 
   30157   </dl><div class=impl>
   30158 
   30159   <p>The <dfn id=dom-map-areas title=dom-map-areas><code>areas</code></dfn> attribute
   30160   must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   30161   <code><a href=#the-map-element>map</a></code> element, whose filter matches only
   30162   <code><a href=#the-area-element>area</a></code> elements.</p>
   30163 
   30164   <p>The <dfn id=dom-map-images title=dom-map-images><code>images</code></dfn>
   30165   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   30166   <code><a href=#document>Document</a></code> node, whose filter matches only
   30167   <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements that are
   30168   associated with this <code><a href=#the-map-element>map</a></code> element according to the
   30169   <a href=#image-map>image map</a> processing model.</p>
   30170 
   30171   <p>The IDL attribute <dfn id=dom-map-name title=dom-map-name><code>name</code></dfn> must
   30172   <a href=#reflect>reflect</a> the content attribute of the same name.</p>
   30173 
   30174   </div>
   30175 
   30176 
   30177 
   30178   <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
   30179 
   30180   <dl class=element><dt>Categories</dt>
   30181    <dd><a href=#flow-content>Flow content</a>.</dd>
   30182    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   30183    <dt>Contexts in which this element may be used:</dt>
   30184    <dd>Where <a href=#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>
   30185    <dt>Content model:</dt>
   30186    <dd>Empty.</dd>
   30187    <dt>Content attributes:</dt>
   30188    <dd><a href=#global-attributes>Global attributes</a></dd>
   30189    <dd><code title=attr-area-alt><a href=#attr-area-alt>alt</a></code></dd>
   30190    <dd><code title=attr-area-coords><a href=#attr-area-coords>coords</a></code></dd>
   30191    <dd><code title=attr-area-shape><a href=#attr-area-shape>shape</a></code></dd>
   30192    <dd><code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dd>
   30193    <dd><code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code></dd>
   30194 <!--PING-->
   30195    <dd><code title=attr-hyperlink-ping><a href=#ping>ping</a></code></dd>
   30196 <!--PING-->
   30197    <dd><code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code></dd>
   30198    <dd><code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code></dd>
   30199    <dd><code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code></dd>
   30200    <dd><code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></dd>
   30201    <dt>DOM interface:</dt>
   30202    <dd>
   30203 <pre class=idl>interface <dfn id=htmlareaelement>HTMLAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   30204            attribute DOMString <a href=#dom-area-alt title=dom-area-alt>alt</a>;
   30205            attribute DOMString <a href=#dom-area-coords title=dom-area-coords>coords</a>;
   30206            attribute DOMString <a href=#dom-area-shape title=dom-area-shape>shape</a>;
   30207   stringifier attribute DOMString <a href=#dom-area-href title=dom-area-href>href</a>;
   30208            attribute DOMString <a href=#dom-area-target title=dom-area-target>target</a>;
   30209 <!--PING-->
   30210            attribute DOMString <a href=#dom-area-ping title=dom-area-ping>ping</a>;
   30211 <!--PING-->
   30212            attribute DOMString <a href=#dom-area-rel title=dom-area-rel>rel</a>;
   30213   readonly attribute <a href=#domtokenlist>DOMTokenList</a> <a href=#dom-area-rellist title=dom-area-relList>relList</a>;
   30214            attribute DOMString <a href=#dom-area-media title=dom-area-media>media</a>;
   30215            attribute DOMString <a href=#dom-area-hreflang title=dom-area-hreflang>hreflang</a>;
   30216            attribute DOMString <a href=#dom-area-type title=dom-area-type>type</a>;
   30217 
   30218   // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>
   30219            attribute DOMString <a href=#dom-area-protocol title=dom-area-protocol>protocol</a>;
   30220            attribute DOMString <a href=#dom-area-host title=dom-area-host>host</a>;
   30221            attribute DOMString <a href=#dom-area-hostname title=dom-area-hostname>hostname</a>;
   30222            attribute DOMString <a href=#dom-area-port title=dom-area-port>port</a>;
   30223            attribute DOMString <a href=#dom-area-pathname title=dom-area-pathname>pathname</a>;
   30224            attribute DOMString <a href=#dom-area-search title=dom-area-search>search</a>;
   30225            attribute DOMString <a href=#dom-area-hash title=dom-area-hash>hash</a>;
   30226 };</pre>
   30227    </dd>
   30228   </dl><p>The <code><a href=#the-area-element>area</a></code> element <a href=#represents>represents</a> either a
   30229   hyperlink with some text and a corresponding area on an <a href=#image-map>image
   30230   map</a>, or a dead area on an image map.</p>
   30231 
   30232   <p>If the <code><a href=#the-area-element>area</a></code> element has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the
   30233   <code><a href=#the-area-element>area</a></code> element represents a <a href=#hyperlink>hyperlink</a>. In
   30234   this case, the <dfn id=attr-area-alt title=attr-area-alt><code>alt</code></dfn>
   30235   attribute must be present. It specifies the text of the
   30236   hyperlink. Its value must be text that, when presented with the
   30237   texts specified for the other hyperlinks of the <a href=#image-map>image
   30238   map</a>, and with the alternative text of the image, but without
   30239   the image itself, provides the user with the same kind of choice as
   30240   the hyperlink would when used without its text but with its shape
   30241   applied to the image. The <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>
   30242   attribute may be left blank if there is another <code><a href=#the-area-element>area</a></code>
   30243   element in the same <a href=#image-map>image map</a> that points to the same
   30244   resource and has a non-blank <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>
   30245   attribute.</p>
   30246 
   30247   <p>If the <code><a href=#the-area-element>area</a></code> element has no <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, then the area
   30248   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>
   30249 
   30250   <p>In both cases, the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> and
   30251   <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code> attributes specify the
   30252   area.</p>
   30253 
   30254   <p>The <dfn id=attr-area-shape title=attr-area-shape><code>shape</code></dfn>
   30255   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
   30256   table lists the keywords defined for this attribute. The states
   30257   given in the first cell of the rows with keywords give the states to
   30258   which those keywords map. <span class=impl>Some of the keywords
   30259   are non-conforming, as noted in the last column.</span></p>
   30260 
   30261   <table><thead><tr><th>State
   30262      <th>Keywords
   30263      <th class=impl>Notes
   30264    <tbody><tr><td rowspan=2><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a>
   30265      <td><dfn id=attr-area-shape-keyword-circle title=attr-area-shape-keyword-circle><code>circle</code></dfn>
   30266      <td class=impl>
   30267     <tr><td class=impl><dfn id=attr-area-shape-keyword-circ title=attr-area-shape-keyword-circ><code>circ</code></dfn>
   30268      <td class=impl>Non-conforming
   30269     <tr><td><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a>
   30270      <td><dfn id=attr-area-shape-keyword-default title=attr-area-shape-keyword-default><code>default</code></dfn>
   30271      <td class=impl>
   30272     <tr><td rowspan=2><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a>
   30273      <td><dfn id=attr-area-shape-keyword-poly title=attr-area-shape-keyword-poly><code>poly</code></dfn>
   30274      <td class=impl>
   30275     <tr><td class=impl><dfn id=attr-area-shape-keyword-polygon title=attr-area-shape-keyword-polygon><code>polygon</code></dfn>
   30276      <td class=impl>Non-conforming
   30277     <tr><td rowspan=2><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a>
   30278      <td><dfn id=attr-area-shape-keyword-rect title=attr-area-shape-keyword-rect><code>rect</code></dfn>
   30279      <td class=impl>
   30280     <tr><td class=impl><dfn id=attr-area-shape-keyword-rectangle title=attr-area-shape-keyword-rectangle><code>rectangle</code></dfn>
   30281      <td class=impl>Non-conforming
   30282   </table><p>The attribute may be omitted. The <i>missing value default</i> is
   30283   the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle</a> state.</p>
   30284 
   30285   <p>The <dfn id=attr-area-coords title=attr-area-coords><code>coords</code></dfn>
   30286   attribute must, if specified, contain a <a href=#valid-list-of-integers>valid list of
   30287   integers</a>. This attribute gives the coordinates for the shape
   30288   described by the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
   30289   attribute. <span class=impl>The processing for this attribute is
   30290   described as part of the <a href=#image-map>image map</a> processing
   30291   model.</span></p>
   30292 
   30293   <!-- v2: It was suggested by John S. Urban that coords should
   30294   support percentages as well as pixels, so that one could use the
   30295   same image map for images of various sizes. -->
   30296 
   30297   <p>In the <dfn id=attr-area-shape-circle title=attr-area-shape-circle>circle state</dfn>,
   30298   <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
   30299   integers, the last of which must be non-negative. The first integer
   30300   must be the distance in CSS pixels from the left edge of the image
   30301   to the center of the circle, the second integer must be the distance
   30302   in CSS pixels from the top edge of the image to the center of the
   30303   circle, and the third integer must be the radius of the circle,
   30304   again in CSS pixels.</p>
   30305 
   30306   <p>In the <dfn id=attr-area-shape-default title=attr-area-shape-default>default state</dfn>
   30307   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
   30308   whole image.)</p>
   30309 
   30310   <p>In the <dfn id=attr-area-shape-poly title=attr-area-shape-poly>polygon state</dfn>,
   30311   <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
   30312   integers, and the number of integers must be even. Each pair of
   30313   integers must represent a coordinate given as the distances from the
   30314   left and the top of the image in CSS pixels respectively, and all
   30315   the coordinates together must represent the points of the polygon,
   30316   in order.</p>
   30317 
   30318   <p>In the <dfn id=attr-area-shape-rect title=attr-area-shape-rect>rectangle state</dfn>,
   30319   <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
   30320   integers, the first of which must be less than the third, and the
   30321   second of which must be less than the fourth. The four points must
   30322   represent, respectively, the distance from the left edge of the
   30323   image to the left side of the rectangle, the distance from the
   30324   top edge to the top side, the distance from the left edge to the
   30325   right side, and the distance from the top edge to the bottom side,
   30326   all in CSS pixels.</p>
   30327 
   30328   <div class=impl>
   30329 
   30330   <p>When user agents allow users to <a href=#following-hyperlinks title="following
   30331   hyperlinks">follow hyperlinks</a> created using the
   30332   <code><a href=#the-area-element>area</a></code> element, as described in the next section, the
   30333   <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>,
   30334   <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>
   30335 <!--PING-->
   30336   and <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>
   30337 <!--PING-->
   30338   attributes decide how the
   30339   link is followed. The <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>,
   30340   <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes may be used to
   30341   indicate to the user the likely nature of the target resource before
   30342   the user follows the link.</p>
   30343 
   30344   </div>
   30345 
   30346   <p>The <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>,
   30347 <!--PING-->
   30348   <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>,
   30349 <!--PING-->
   30350   <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes must be omitted
   30351   if the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute is
   30352   not present.</p>
   30353 
   30354   <div class=impl>
   30355 
   30356   <p>The <a href=#activation-behavior>activation behavior</a> of <code><a href=#the-area-element>area</a></code>
   30357   elements is to run the following steps:</p>
   30358 
   30359   <ol><li><p>If the <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   30360    event in question is not <a href=#concept-events-trusted title=concept-events-trusted>trusted</a> (i.e. a <code title=dom-click><a href=#dom-click>click()</a></code> method call was the reason for the
   30361    event being dispatched), and the <code><a href=#the-area-element>area</a></code> element's <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute is such that
   30362    applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
   30363    browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
   30364    browsing context name, would result in there not being a chosen
   30365    browsing context, then raise an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
   30366    exception and abort these steps.</li>
   30367 
   30368    <li>Otherwise, the user agent must <a href=#following-hyperlinks title="following
   30369    hyperlinks">follow the hyperlink</a> defined by the
   30370    <code><a href=#the-area-element>area</a></code> element, if any.</li>
   30371 
   30372   </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>,
   30373 <!--PING-->
   30374   <dfn id=dom-area-ping title=dom-area-ping><code>ping</code></dfn>,
   30375 <!--PING-->
   30376   <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
   30377   <a href=#reflect>reflect</a> the respective content attributes of the same
   30378   name.</p>
   30379 
   30380   <p>The IDL attribute <dfn id=dom-area-shape title=dom-area-shape><code>shape</code></dfn> must
   30381   <a href=#reflect>reflect</a> the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
   30382   content attribute, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
   30383 
   30384   <p>The IDL attribute <dfn id=dom-area-rellist title=dom-area-rellist><code>relList</code></dfn> must
   30385   <a href=#reflect>reflect</a> the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
   30386   content attribute.</p>
   30387 
   30388   <p>The <code><a href=#the-area-element>area</a></code> element also supports the complement of
   30389   <a href=#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
   30390   rules given for URL decomposition IDL attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
   30391   element, if there is such an attribute and resolving it is
   30392   successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
   30393   same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
   30394   value.</p>
   30395 
   30396   </div>
   30397 
   30398 
   30399   <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
   30400 
   30401   <!-- TESTS
   30402   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
   30403   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
   30404   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
   30405   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
   30406   -->
   30407 
   30408   <div class=impl>
   30409 
   30410   <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>
   30411 
   30412   </div>
   30413 
   30414   <p>An <dfn id=image-map>image map</dfn> allows geometric areas on an image to be
   30415   associated with <a href=#hyperlink title=hyperlink>hyperlinks</a>.</p>
   30416 
   30417   <p>An image, in the form of an <code><a href=#the-img-element>img</a></code> element or an
   30418   <code><a href=#the-object-element>object</a></code> element representing an image, may be associated
   30419   with an image map (in the form of a <code><a href=#the-map-element>map</a></code> element) by
   30420   specifying a <dfn id=attr-hyperlink-usemap title=attr-hyperlink-usemap><code>usemap</code></dfn> attribute on
   30421   the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code> element. The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute, if specified,
   30422   must be a <a href=#valid-hash-name-reference>valid hash-name reference</a> to a
   30423   <code><a href=#the-map-element>map</a></code> element.</p>
   30424 
   30425   <div class=example>
   30426 
   30427    <p>Consider an image that looks as follows:</p>
   30428 
   30429    <p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src=images/sample-usemap.png></p>
   30430 
   30431    <p>If we wanted just the colored areas to be clickable, we could
   30432    do it as follows:</p>
   30433 
   30434    <pre>&lt;p&gt;
   30435  Please select a shape:
   30436  &lt;img src="shapes.png" usemap="#shapes"
   30437       alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."&gt;
   30438  &lt;map name="shapes"&gt;
   30439   &lt;area shape=rect coords="50,50,100,100"&gt; &lt;!-- the hole in the red box --&gt;
   30440   &lt;area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."&gt;
   30441   &lt;area shape=circle coords="200,75,50" href="green.html" alt="Green circle."&gt;
   30442   &lt;area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."&gt;
   30443   &lt;area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
   30444         href="yellow.html" alt="Yellow star."&gt;
   30445  &lt;/map&gt;
   30446 &lt;/p&gt;</pre>
   30447 
   30448   </div>
   30449 
   30450   <div class=impl>
   30451 
   30452   <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>
   30453 
   30454   <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
   30455   representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
   30456   user agents must process it as follows:</p>
   30457 
   30458   <ol><li><p>First, <a href=#rules-for-parsing-a-hash-name-reference>rules for parsing a hash-name reference</a>
   30459    to a <code><a href=#the-map-element>map</a></code> element must be followed. This will return
   30460    either an element (the <var title="">map</var>) or null.</li>
   30461 
   30462    <li><p>If that returned null, then abort these steps. The image is
   30463    not associated with an image map after all.</li>
   30464 
   30465    <li><p>Otherwise, the user agent must collect all the
   30466    <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>.</li>
   30467 
   30468   </ol><p>Having obtained the list of <code><a href=#the-area-element>area</a></code> elements that form
   30469   the image map (the <var title="">areas</var>), interactive user
   30470   agents must process the list in one of two ways.</p>
   30471 
   30472   <p>If the user agent intends to show the text that the
   30473   <code><a href=#the-img-element>img</a></code> element represents, then it must use the following
   30474   steps.</p>
   30475 
   30476   <p class=note>In user agents that do not support images, or that
   30477   have images disabled, <code><a href=#the-object-element>object</a></code> elements cannot represent
   30478   images, and thus this section never applies (the <a href=#fallback-content>fallback
   30479   content</a> is shown instead). The following steps therefore only
   30480   apply to <code><a href=#the-img-element>img</a></code> elements.</p>
   30481 
   30482   <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=#attr-hyperlink-href>href</a></code> attribute.</li>
   30483 
   30484    <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
   30485    string, <em>if</em> there is another <code><a href=#the-area-element>area</a></code> element in
   30486    <var title="">areas</var> with the same value in the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute and with a
   30487    non-empty <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code> attribute.</li>
   30488 
   30489    <li><p>Each remaining <code><a href=#the-area-element>area</a></code> element in <var title="">areas</var> represents a <a href=#hyperlink>hyperlink</a>. Those
   30490    hyperlinks should all be made available to the user in a manner
   30491    associated with the text of the <code><a href=#the-img-element>img</a></code>.</p>
   30492 
   30493    <p>In this context, user agents may represent <code><a href=#the-area-element>area</a></code> and
   30494    <code><a href=#the-img-element>img</a></code> elements with no specified <code title="">alt</code> attributes, or whose <code title="">alt</code>
   30495    attributes are the empty string or some other non-visible text, in
   30496    a user-agent-defined fashion intended to indicate the lack of
   30497    suitable author-provided text.</li>
   30498 
   30499   </ol><p>If the user agent intends to show the image and allow interaction
   30500   with the image to select hyperlinks, then the image must be
   30501   associated with a set of layered shapes, taken from the
   30502   <code><a href=#the-area-element>area</a></code> elements in <var title="">areas</var>, in reverse
   30503   tree order (so the last specified <code><a href=#the-area-element>area</a></code> element in the
   30504   <var title="">map</var> is the bottom-most shape, and the first
   30505   element in the <var title="">map</var>, in tree order, is the
   30506   top-most shape).</p>
   30507 
   30508   <p>Each <code><a href=#the-area-element>area</a></code> element in <var title="">areas</var> must
   30509   be processed as follows to obtain a shape to layer onto the
   30510   image:</p>
   30511 
   30512   <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.</li>
   30513 
   30514    <li><p>Use the <a href=#rules-for-parsing-a-list-of-integers>rules for parsing a list of integers</a> to
   30515    parse the element's <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code>
   30516    attribute, if it is present, and let the result be the <var title="">coords</var> list. If the attribute is absent, let the
   30517    <var title="">coords</var> list be the empty list.</li>
   30518 
   30519    <li><p>If the number of items in the <var title="">coords</var>
   30520    list is less than the minimum number given for the
   30521    <code><a href=#the-area-element>area</a></code> element's current state, as per the following
   30522    table, then the shape is empty; abort these steps.</p>
   30523     <table><thead><tr><th>State
   30524        <th>Minimum number of items
   30525      <tbody><tr><td><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a>
   30526        <td>3
   30527       <tr><td><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a>
   30528        <td>0
   30529       <tr><td><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a>
   30530        <td>6
   30531       <tr><td><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a>
   30532        <td>4
   30533     </table></li>
   30534 
   30535    <li><p>Check for excess items in the <var title="">coords</var>
   30536    list as per the entry in the following list corresponding to the
   30537    <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute's state:</p>
   30538     <dl class=switch><dt><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a></dt>
   30539      <dd>Drop any items in the list beyond the third.</dd>
   30540      <dt><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a></dt>
   30541      <dd>Drop all items in the list.</dd>
   30542      <dt><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a></dt>
   30543      <dd>Drop the last item if there's an odd number of items.</dd>
   30544      <dt><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a></dt>
   30545      <dd>Drop any items in the list beyond the fourth.</dd>
   30546     </dl></li>
   30547 
   30548    <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   30549    represents the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle
   30550    state</a>, and the first number in the list is numerically less
   30551    than the third number in the list, then swap those two numbers
   30552    around.</li>
   30553 
   30554    <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   30555    represents the <a href=#attr-area-shape-rect title=attr-area-shape-rect>rectangle
   30556    state</a>, and the second number in the list is numerically less
   30557    than the fourth number in the list, then swap those two numbers
   30558    around.</li>
   30559 
   30560    <li><p>If the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code> attribute
   30561    represents the <a href=#attr-area-shape-circle title=attr-area-shape-circle>circle
   30562    state</a>, and the third number in the list is less than or
   30563    equal to zero, then the shape is empty; abort these steps.</li>
   30564 
   30565    <li><p>Now, the shape represented by the element is the one
   30566    described for the entry in the list below corresponding to the
   30567    state of the <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>
   30568    attribute:</p>
   30569 
   30570     <dl class=switch><dt><a href=#attr-area-shape-circle title=attr-area-shape-circle>Circle state</a></dt>
   30571      <dd>
   30572       <p>Let <var title="">x</var> be the first number in <var title="">coords</var>, <var title="">y</var> be the second
   30573       number, and <var title="">r</var> be the third number.</p>
   30574       <p>The shape is a circle whose center is <var title="">x</var>
   30575       CSS pixels from the left edge of the image and <var title="">x</var> CSS pixels from the top edge of the image, and
   30576       whose radius is <var title="">r</var> pixels.</p>
   30577      </dd>
   30578 
   30579      <dt><a href=#attr-area-shape-default title=attr-area-shape-default>Default state</a></dt>
   30580      <dd>
   30581       <p>The shape is a rectangle that exactly covers the entire
   30582       image.</p>
   30583      </dd>
   30584 
   30585      <dt><a href=#attr-area-shape-poly title=attr-area-shape-poly>Polygon state</a></dt>
   30586      <dd>
   30587 
   30588       <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>,
   30589       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>
   30590       (the first entry in <var title="">coords</var> being the one
   30591       with index 0).</p>
   30592 
   30593       <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>),
   30594       interpreted in CSS pixels measured from the top left of the
   30595       image, for all integer values of <var title="">i</var> from 0 to
   30596       <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>
   30597 
   30598       <p>The shape is a polygon whose vertices are given by <var title="">the coordinates</var>, and whose interior is
   30599       established using the even-odd rule. <a href=#refsGRAPHICS>[GRAPHICS]</a></p>
   30600 
   30601       <!--
   30602         browsers implement the even-odd rule / even winding rule:
   30603         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
   30604        -->
   30605 
   30606      </dd>
   30607 
   30608      <dt><a href=#attr-area-shape-rect title=attr-area-shape-rect>Rectangle state</a></dt>
   30609 
   30610      <dd>
   30611 
   30612       <p>Let <var title="">x<sub title="">1</sub></var> be the first
   30613       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>
   30614 
   30615       <p>The shape is a rectangle whose top-left corner is given by
   30616       the coordinate (<var title="">x<sub title="">1</sub></var>, <var title="">y<sub title="">1</sub></var>) and whose bottom right
   30617       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
   30618       CSS pixels from the top left corner of the image.</p>
   30619 
   30620      </dd>
   30621 
   30622     </dl><p>For historical reasons, the coordinates must be interpreted
   30623     relative to the <em>displayed</em> image, even if it stretched
   30624     using CSS or the image element's <code title="">width</code> and
   30625     <code title="">height</code> attributes.</p>
   30626 
   30627    </li>
   30628 
   30629   </ol><p>Mouse clicks on an image associated with a set of layered shapes
   30630   per the above algorithm must be dispatched to the top-most shape
   30631   covering the point that the pointing device indicated (if any), and
   30632   then, must be dispatched again (with a new <code><a href=#event>Event</a></code>
   30633   object) to the image element itself. User agents may also allow
   30634   individual <code><a href=#the-area-element>area</a></code> elements representing <a href=#hyperlink title=hyperlink>hyperlinks</a> to be selected and activated
   30635   (e.g. using a keyboard); events from this are not also propagated to
   30636   the image.</p>
   30637 
   30638   <p class=note>Because a <code><a href=#the-map-element>map</a></code> element (and its
   30639   <code><a href=#the-area-element>area</a></code> elements) can be associated with multiple
   30640   <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements, it is possible
   30641   for an <code><a href=#the-area-element>area</a></code> element to correspond to multiple focusable
   30642   areas of the document.</p>
   30643 
   30644   <p>Image maps are <a href=#live>live</a>; if the DOM is mutated, then the
   30645   user agent must act as if it had rerun the algorithms for image
   30646   maps.</p>
   30647 
   30648   </div>
   30649 
   30650 
   30651 
   30652   <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>
   30653 
   30654   <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
   30655   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
   30656   <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
   30657   categories for the purposes of the content models in this
   30658   specification.</p>
   30659 
   30660   <div class=impl>
   30661 
   30662   <!-- apparently we get to define error handling, so: -->
   30663 
   30664   <p>User agents must handle text other than <a href=#inter-element-whitespace>inter-element
   30665   whitespace</a> found in MathML elements whose content models do
   30666   not allow straight text by pretending for the purposes of MathML
   30667   content models, layout, and rendering that that text is actually
   30668   wrapped in an <code title="">mtext</code> element in the
   30669   <a href=#mathml-namespace>MathML namespace</a>. (Such text is not, however,
   30670   conforming.)</p>
   30671 
   30672   <p>User agents must act as if any MathML element whose contents does
   30673   not match the element's content model was replaced, for the purposes
   30674   of MathML layout and rendering, by an <code title="">merror</code>
   30675   element in the <a href=#mathml-namespace>MathML namespace</a> containing some
   30676   appropriate error message.</p>
   30677 
   30678   <p>To enable authors to use MathML tools that only accept MathML in
   30679   its XML form, interactive HTML user agents are encouraged to provide
   30680   a way to export any MathML fragment as an XML namespace-well-formed
   30681   XML fragment.</p>
   30682 
   30683   </div>
   30684 
   30685   <p>The semantics of MathML elements are defined by the MathML
   30686   specification and other relevant specifications. <a href=#refsMATHML>[MATHML]</a></p>
   30687 
   30688   <div class=example>
   30689 
   30690    <p>Here is an example of the use of MathML in an HTML document:</p>
   30691 
   30692    <pre>&lt;!DOCTYPE html&gt;
   30693 &lt;html&gt;
   30694  &lt;head&gt;
   30695   &lt;title&gt;The quadratic formula&lt;/title&gt;
   30696  &lt;/head&gt;
   30697  &lt;body&gt;
   30698   &lt;h1&gt;The quadratic formula&lt;/h1&gt;
   30699   &lt;p&gt;
   30700    &lt;math&gt;
   30701     &lt;mi&gt;x&lt;/mi&gt;
   30702     &lt;mo&gt;=&lt;/mo&gt;
   30703     &lt;mfrac&gt;
   30704      &lt;mrow&gt;
   30705       &lt;mo form="prefix"&gt;&minus;&lt;/mo&gt; &lt;mi&gt;b&lt;/mi&gt;
   30706       &lt;mo&gt;&plusmn;&lt;/mo&gt;
   30707       &lt;msqrt&gt;
   30708        &lt;msup&gt; &lt;mi&gt;b&lt;/mi&gt; &lt;mn&gt;2&lt;/mn&gt; &lt;/msup&gt;
   30709        &lt;mo&gt;&minus;&lt;/mo&gt;
   30710        &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;
   30711       &lt;/msqrt&gt;
   30712      &lt;/mrow&gt;
   30713      &lt;mrow&gt;
   30714       &lt;mn&gt;2&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt;
   30715      &lt;/mrow&gt;
   30716     &lt;/mfrac&gt;
   30717    &lt;/math&gt;
   30718   &lt;/p&gt;
   30719  &lt;/body&gt;
   30720 &lt;/html&gt;</pre>
   30721 
   30722   </div>
   30723 
   30724 
   30725 
   30726   <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>
   30727 
   30728   <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
   30729   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
   30730   <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
   30731   categories for the purposes of the content models in this
   30732   specification.</p>
   30733 
   30734   <div class=impl>
   30735 
   30736   <p>To enable authors to use SVG tools that only accept SVG in its
   30737   XML form, interactive HTML user agents are encouraged to provide a
   30738   way to export any SVG fragment as an XML namespace-well-formed XML
   30739   fragment.</p>
   30740 
   30741   </div>
   30742 
   30743   <p>When the SVG <code>foreignObject</code> element contains elements
   30744   from the <a href=#html-namespace-0>HTML namespace</a>, such elements must all be
   30745   <a href=#flow-content>flow content</a>. <a href=#refsSVG>[SVG]</a></p>
   30746 
   30747   <p>The content model for <code title="">title</code> elements in the
   30748   <a href=#svg-namespace>SVG namespace</a> inside <a href=#html-documents>HTML documents</a> is
   30749   <a href=#phrasing-content>phrasing content</a>. (This further constrains the
   30750   requirements given in the SVG specification.)</p>
   30751 
   30752   <p>The semantics of SVG elements are defined by the SVG
   30753   specification and other relevant specifications. <a href=#refsSVG>[SVG]</a></p>
   30754 
   30755   <!-- The following paragraph is for bug 7510 -->
   30756   <p>The SVG specification includes requirements regarding the
   30757   handling of elements in the DOM that are not in the SVG namespace,
   30758   that are in SVG fragments, and that are not included in a
   30759   <code>foreignObject</code> element. <em>This</em> specification does
   30760   not define any processing for elements in SVG fragments that are not
   30761   in the HTML namespace; they are considered neither conforming nor
   30762   non-conforming from the perspective of this specification.</p>
   30763 
   30764 
   30765 
   30766   <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>
   30767 
   30768   <p><span class=impl><strong>Author requirements</strong>:</span>
   30769   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
   30770   <code><a href=#the-img-element>img</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   30771   <code><a href=#the-object-element>object</a></code>, <code><a href=#video>video</a></code>, and, when their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
   30772   <code><a href=#the-input-element>input</a></code> elements may be specified to give the dimensions
   30773   of the visual content of the element (the width and height
   30774   respectively, relative to the nominal direction of the output
   30775   medium), in CSS pixels. The attributes, if specified, must have
   30776   values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid
   30777   non-negative integers</a>.</p>
   30778 
   30779   <p>The specified dimensions given may differ from the dimensions
   30780   specified in the resource itself, since the resource may have a
   30781   resolution that differs from the CSS pixel resolution. (On screens,
   30782   CSS pixels have a resolution of 96ppi, but in general the CSS pixel
   30783   resolution depends on the reading distance.) If both attributes are
   30784   specified, then one of the following statements must be true:</p>
   30785 
   30786   <ul><li><span title=""><var title="">specified width</var> - 0.5 &le;
   30787              <var title="">specified height</var> * <var title="">target ratio</var> &le;
   30788              <var title="">specified width</var> + 0.5</span></li>
   30789 
   30790    <li><span title=""><var title="">specified height</var> - 0.5 &le;
   30791              <var title="">specified width</var> / <var title="">target ratio</var> &le;
   30792              <var title="">specified height</var> + 0.5</span></li>
   30793 
   30794    <li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li>
   30795 
   30796   </ul><p>The <var title="">target ratio</var> is the ratio of the
   30797   intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified
   30798   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>
   30799 
   30800   <p>The two attributes must be omitted if the resource in question
   30801   does not have both an intrinsic width and an intrinsic height.</p>
   30802 
   30803   <p>If the two attributes are both zero, it indicates that the
   30804   element is not intended for the user (e.g. it might be a part of a
   30805   service to count page views).</p>
   30806 
   30807   <p class=note>The dimension attributes are not intended to be used
   30808   to stretch the image.</p>
   30809 
   30810   <div class=impl>
   30811 
   30812   <p><strong>User agent requirements</strong>: User agents are
   30813   expected to use these attributes <a href=#dimRendering>as hints
   30814   for the rendering</a>.</p>
   30815 
   30816   <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
   30817   the <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-object-element>object</a></code>,
   30818   and <code><a href=#video>video</a></code> elements must <a href=#reflect>reflect</a> the
   30819   respective content attributes of the same name.</p>
   30820 
   30821   </div>
   30822 
   30823 
   30824 
   30825   <h3 id=tabular-data><span class=secno>4.9 </span>Tabular data</h3>
   30826 
   30827 
   30828   <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</code></dfn> element</h4>
   30829 
   30830   <dl class=element><dt>Categories</dt>
   30831    <dd><a href=#flow-content>Flow content</a>.</dd>
   30832    <dt>Contexts in which this element may be used:</dt>
   30833    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   30834    <dt>Content model:</dt>
   30835    <dd>In this order: optionally a <code><a href=#the-caption-element>caption</a></code> element,
   30836    followed by either zero or more <code><a href=#the-colgroup-element>colgroup</a></code> elements,
   30837    followed optionally by a <code><a href=#the-thead-element>thead</a></code> element, followed
   30838    optionally by a <code><a href=#the-tfoot-element>tfoot</a></code> element, followed by either zero
   30839    or more <code><a href=#the-tbody-element>tbody</a></code> elements or one or more <code><a href=#the-tr-element>tr</a></code>
   30840    elements, followed optionally by a <code><a href=#the-tfoot-element>tfoot</a></code> element (but
   30841    there can only be one <code><a href=#the-tfoot-element>tfoot</a></code> element child in
   30842    total).</dd>
   30843    <dt>Content attributes:</dt>
   30844    <dd><a href=#global-attributes>Global attributes</a></dd>
   30845    <dd><code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> (but see prose)</dd>
   30846    <dt>DOM interface:</dt>
   30847    <dd>
   30848 <pre class=idl>interface <dfn id=htmltableelement>HTMLTableElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   30849            attribute <a href=#htmltablecaptionelement>HTMLTableCaptionElement</a> <a href=#dom-table-caption title=dom-table-caption>caption</a>;
   30850   <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createcaption title=dom-table-createCaption>createCaption</a>();
   30851   void <a href=#dom-table-deletecaption title=dom-table-deleteCaption>deleteCaption</a>();
   30852            attribute <a href=#htmltablesectionelement>HTMLTableSectionElement</a> <a href=#dom-table-thead title=dom-table-tHead>tHead</a>;
   30853   <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createthead title=dom-table-createTHead>createTHead</a>();
   30854   void <a href=#dom-table-deletethead title=dom-table-deleteTHead>deleteTHead</a>();
   30855            attribute <a href=#htmltablesectionelement>HTMLTableSectionElement</a> <a href=#dom-table-tfoot title=dom-table-tFoot>tFoot</a>;
   30856   <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createtfoot title=dom-table-createTFoot>createTFoot</a>();
   30857   void <a href=#dom-table-deletetfoot title=dom-table-deleteTFoot>deleteTFoot</a>();
   30858   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-table-tbodies title=dom-table-tBodies>tBodies</a>;
   30859   <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-createtbody title=dom-table-createTBody>createTBody</a>();
   30860   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-table-rows title=dom-table-rows>rows</a>;
   30861   <a href=#htmlelement>HTMLElement</a> <a href=#dom-table-insertrow title=dom-table-insertRow>insertRow</a>(in optional long index);
   30862   void <a href=#dom-table-deleterow title=dom-table-deleteRow>deleteRow</a>(in long index);
   30863            attribute DOMString <a href=#dom-table-summary title=dom-table-summary>summary</a>;
   30864 };</pre>
   30865    </dd>
   30866   </dl><p>The <code><a href=#the-table-element>table</a></code> element <a href=#represents>represents</a> data with
   30867   more than one dimension, in the form of a <a href=#concept-table title=concept-table>table</a>.</p>
   30868 
   30869   <div class=impl>
   30870 
   30871   <p>The <code><a href=#the-table-element>table</a></code> element takes part in the <a href=#table-model>table
   30872   model</a>.</p>
   30873 
   30874   </div>
   30875 
   30876   <p>Tables must not be used as layout aids. Historically, some Web
   30877   authors have misused tables in HTML as a way to control their page
   30878   layout. This usage is non-conforming, because tools attempting to
   30879   extract tabular data from such documents would obtain very confusing
   30880   results. In particular, users of accessibility tools like screen
   30881   readers are likely to find it very difficult to navigate pages with
   30882   tables used for layout.</p>
   30883 
   30884   <p class=note>There are a variety of alternatives to using HTML
   30885   tables for layout, primarily using CSS positioning and the CSS table
   30886   model.</p>
   30887 
   30888   <div class=impl>
   30889 
   30890   <p>User agents that do table analysis on arbitrary content are
   30891   encouraged to find heuristics to determine which tables actually
   30892   contain data and which are merely being used for layout. This
   30893   specification does not define a precise heuristic.</p>
   30894 
   30895   </div>
   30896 
   30897   <p>Tables have rows and columns given by their descendants. A table
   30898   must not have an empty row or column<span class=impl>, as
   30899   described in the description of the <a href=#table-model>table
   30900   model</a></span>. <!-- conformance criteria for detecting this
   30901   are in the table model section --></p>
   30902 
   30903   <p id=table-descriptions>For tables that consist of more than just
   30904   a grid of cells with headers in the first row and headers in the
   30905   first column, and for any table in general where the reader might
   30906   have difficulty understanding the content, authors should include
   30907   explanatory information introducing the table. This information is
   30908   useful for all users, but is especially useful for users who cannot
   30909   see the table, e.g. users of screen readers.</p>
   30910 
   30911   <p>Such explanatory information should introduce the purpose of the
   30912   table, outline its basic cell structure, highlight any trends or
   30913   patterns, and generally teach the user how to use the table.</p>
   30914 
   30915   <div class=example>
   30916 
   30917    <p>For instance, the following table:</p>
   30918 
   30919    <table><caption>Characteristics with positive and negative sides</caption>
   30920     <thead><tr><th id=n> Negative
   30921       <th> Characteristic
   30922       <th> Positive
   30923     <tbody><tr><td headers="n r1"> Sad
   30924       <th id=r1> Mood
   30925       <td> Happy
   30926      <tr><td headers="n r2"> Failing
   30927       <th id=r2> Grade
   30928       <td> Passing
   30929    </table><p>...might benefit from a description explaining the way the table
   30930    is laid out, something like "Characteristics are given in the
   30931    second column, with the negative side in the left column and the
   30932    positive side in the right column".</p>
   30933 
   30934   </div>
   30935 
   30936   <p>There are a variety of ways to include this information, such as:</p>
   30937 
   30938   <dl><dt>In prose, surrounding the table</dt>
   30939 
   30940    <dd>
   30941     <div class=example><pre>&lt;p&gt;In the following table, characteristics are given in the second
   30942 column, with the negative side in the left column and the positive
   30943 side in the right column.&lt;/p&gt;
   30944 &lt;table&gt;
   30945  &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
   30946  &lt;thead&gt;
   30947   &lt;tr&gt;
   30948    &lt;th id="n"&gt; Negative
   30949    &lt;th&gt; Characteristic
   30950    &lt;th&gt; Positive
   30951  &lt;tbody&gt;
   30952   &lt;tr&gt;
   30953    &lt;td headers="n r1"&gt; Sad
   30954    &lt;th id="r1"&gt; Mood
   30955    &lt;td&gt; Happy
   30956   &lt;tr&gt;
   30957    &lt;td headers="n r2"&gt; Failing
   30958    &lt;th id="r2"&gt; Grade
   30959    &lt;td&gt; Passing
   30960 &lt;/table&gt;</pre></div>
   30961    </dd>
   30962 
   30963    <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
   30964 
   30965    <dd>
   30966     <div class=example><pre>&lt;table&gt;
   30967  &lt;caption&gt;
   30968   &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
   30969   &lt;p&gt;Characteristics are given in the second column, with the
   30970   negative side in the left column and the positive side in the right
   30971   column.&lt;/p&gt;
   30972  &lt;/caption&gt;
   30973  &lt;thead&gt;
   30974   &lt;tr&gt;
   30975    &lt;th id="n"&gt; Negative
   30976    &lt;th&gt; Characteristic
   30977    &lt;th&gt; Positive
   30978  &lt;tbody&gt;
   30979   &lt;tr&gt;
   30980    &lt;td headers="n r1"&gt; Sad
   30981    &lt;th id="r1"&gt; Mood
   30982    &lt;td&gt; Happy
   30983   &lt;tr&gt;
   30984    &lt;td headers="n r2"&gt; Failing
   30985    &lt;th id="r2"&gt; Grade
   30986    &lt;td&gt; Passing
   30987 &lt;/table&gt;</pre></div>
   30988    </dd>
   30989 
   30990    <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
   30991 
   30992    <dd>
   30993     <div class=example><pre>&lt;table&gt;
   30994  &lt;caption&gt;
   30995   &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
   30996   &lt;details&gt;
   30997    &lt;summary&gt;Help&lt;/summary&gt;
   30998    &lt;p&gt;Characteristics are given in the second column, with the
   30999    negative side in the left column and the positive side in the right
   31000    column.&lt;/p&gt;
   31001   &lt;/details&gt;
   31002  &lt;/caption&gt;
   31003  &lt;thead&gt;
   31004   &lt;tr&gt;
   31005    &lt;th id="n"&gt; Negative
   31006    &lt;th&gt; Characteristic
   31007    &lt;th&gt; Positive
   31008  &lt;tbody&gt;
   31009   &lt;tr&gt;
   31010    &lt;td headers="n r1"&gt; Sad
   31011    &lt;th id="r1"&gt; Mood
   31012    &lt;td&gt; Happy
   31013   &lt;tr&gt;
   31014    &lt;td headers="n r2"&gt; Failing
   31015    &lt;th id="r2"&gt; Grade
   31016    &lt;td&gt; Passing
   31017 &lt;/table&gt;</pre></div>
   31018    </dd>
   31019 
   31020    <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
   31021 
   31022    <dd>
   31023     <div class=example><pre>&lt;figure&gt;
   31024  &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
   31025  &lt;p&gt;Characteristics are given in the second column, with the
   31026  negative side in the left column and the positive side in the right
   31027  column.&lt;/p&gt;
   31028  &lt;table&gt;
   31029   &lt;thead&gt;
   31030    &lt;tr&gt;
   31031     &lt;th id="n"&gt; Negative
   31032     &lt;th&gt; Characteristic
   31033     &lt;th&gt; Positive
   31034   &lt;tbody&gt;
   31035    &lt;tr&gt;
   31036     &lt;td headers="n r1"&gt; Sad
   31037     &lt;th id="r1"&gt; Mood
   31038     &lt;td&gt; Happy
   31039    &lt;tr&gt;
   31040     &lt;td headers="n r2"&gt; Failing
   31041     &lt;th id="r2"&gt; Grade
   31042     &lt;td&gt; Passing
   31043  &lt;/table&gt;
   31044 &lt;/figure&gt;</pre></div>
   31045    </dd>
   31046 
   31047    <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>
   31048 
   31049    <dd>
   31050     <div class=example><pre>&lt;figure&gt;
   31051  &lt;figcaption&gt;
   31052   &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
   31053   &lt;p&gt;Characteristics are given in the second column, with the
   31054   negative side in the left column and the positive side in the right
   31055   column.&lt;/p&gt;
   31056  &lt;/figcaption&gt;
   31057  &lt;table&gt;
   31058   &lt;thead&gt;
   31059    &lt;tr&gt;
   31060     &lt;th id="n"&gt; Negative
   31061     &lt;th&gt; Characteristic
   31062     &lt;th&gt; Positive
   31063   &lt;tbody&gt;
   31064    &lt;tr&gt;
   31065     &lt;td headers="n r1"&gt; Sad
   31066     &lt;th id="r1"&gt; Mood
   31067     &lt;td&gt; Happy
   31068    &lt;tr&gt;
   31069     &lt;td headers="n r2"&gt; Failing
   31070     &lt;th id="r2"&gt; Grade
   31071     &lt;td&gt; Passing
   31072  &lt;/table&gt;
   31073 &lt;/figure&gt;</pre></div>
   31074    </dd>
   31075 
   31076   </dl><p>Authors may also use other techniques, or combinations of the
   31077   above techniques, as appropriate.</p>
   31078 
   31079   <p>The best option, of course, rather than writing a description
   31080   explaining the way the table is laid out, is to adjust the table
   31081   such that no explanation is needed.</p>
   31082 
   31083   <div class=example>
   31084 
   31085    <p>In the case of the table used in the examples above, a simple
   31086    rearrangement of the table so that the headers are on the top and
   31087    left sides removes the need for an explanation as well as removing
   31088    the need for the use of <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes:</p>
   31089 
   31090    <pre>&lt;table&gt;
   31091  &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
   31092  &lt;thead&gt;
   31093   &lt;tr&gt;
   31094    &lt;th&gt; Characteristic
   31095    &lt;th&gt; Negative
   31096    &lt;th&gt; Positive
   31097  &lt;tbody&gt;
   31098   &lt;tr&gt;
   31099    &lt;th&gt; Mood
   31100    &lt;td&gt; Sad
   31101    &lt;td&gt; Happy
   31102   &lt;tr&gt;
   31103    &lt;th&gt; Grade
   31104    &lt;td&gt; Failing
   31105    &lt;td&gt; Passing
   31106 &lt;/table&gt;</pre>
   31107 
   31108   </div>
   31109 
   31110   <p>The <dfn id=attr-table-summary title=attr-table-summary><code>summary</code></dfn>
   31111   attribute on <code><a href=#the-table-element>table</a></code> elements was suggested in earlier
   31112   versions of the language as a technique for providing explanatory
   31113   text for complex tables for users of screen readers. One of the <a href=#table-descriptions>techniques</a> described <!--in the
   31114   <code>table</code> section--> above should be used
   31115   instead. <!--Authors should not specify the <code
   31116   title="attr-table-summary">summary</code> attribute on
   31117   <code>table</code> elements. --> <!-- 2.65% pages --></p>
   31118 
   31119   <p class=note>In particular, authors are encouraged to consider
   31120   whether their explanatory text for tables is likely to be useful to
   31121   the visually impaired: if their text would not be useful, then it is
   31122   best to not include a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute. Similarly, if
   31123   their explanatory text could help someone who is not visually
   31124   impaired, e.g. someone who is seeing the table for the first time,
   31125   then the text would be more useful before the table or in the
   31126   <code><a href=#the-caption-element>caption</a></code>. For example, describing the conclusions of the
   31127   data in a table is useful to everyone; explaining how to read the
   31128   table, if not obvious from the headers alone, is useful to everyone;
   31129   describing the structure of the table, if it is easy to grasp
   31130   visually, may not be useful to everyone, but it might also not be
   31131   useful to users who can quickly navigate the table with an
   31132   accessibility tool.</p>
   31133 
   31134   <!--
   31135   <p class="note">Use of the <code
   31136   title="attr-table-summary">summary</code> attribute is discouraged
   31137   because in practice it is poorly understood. Because the attribute
   31138   is not exposed in visual user agents, authors who have included it
   31139   have typically not been able to test it, and have therefore set the
   31140   attribute to values that are of no use to users of accessibility
   31141   tools. This has lead to accessibility tools introducing heuristics
   31142   to try to avoid exposing such usage of the attribute to users. Even
   31143   the few authors who have made the best use of the attribute have
   31144   often misused it, for example by including text that would in fact
   31145   be useful for all users, or that is redundant with other information
   31146   on the page separate from the table.</p>
   31147   -->
   31148 
   31149   <div class=impl>
   31150 
   31151   <p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, the user agent
   31152   may report the contents of that attribute to the user.</p>
   31153 
   31154   </div>
   31155 
   31156   <dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
   31157    <dd>
   31158     <p>Returns the table's <code><a href=#the-caption-element>caption</a></code> element.</p>
   31159     <p>Can be set, to replace the <code><a href=#the-caption-element>caption</a></code> element. If the
   31160     new value is not a <code><a href=#the-caption-element>caption</a></code> element, throws a
   31161     <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   31162    </dd>
   31163 
   31164    <dt><var title="">caption</var> = <var title="">table</var> . <code title=dom-table-createCaption><a href=#dom-table-createcaption>createCaption</a></code>()</dt>
   31165    <dd>
   31166     <p>Ensures the table has a <code><a href=#the-caption-element>caption</a></code> element, and returns it.</p>
   31167    </dd>
   31168 
   31169    <dt><var title="">table</var> . <code title=dom-table-deleteCaption><a href=#dom-table-deletecaption>deleteCaption</a></code>()</dt>
   31170    <dd>
   31171     <p>Ensures the table does not have a <code><a href=#the-caption-element>caption</a></code> element.</p>
   31172    </dd>
   31173 
   31174    <dt><var title="">table</var> . <code title=dom-table-tHead><a href=#dom-table-thead>tHead</a></code> [ = <var title="">value</var> ]</dt>
   31175    <dd>
   31176     <p>Returns the table's <code><a href=#the-thead-element>thead</a></code> element.</p>
   31177     <p>Can be set, to replace the <code><a href=#the-thead-element>thead</a></code> element. If the
   31178     new value is not a <code><a href=#the-thead-element>thead</a></code> element, throws a
   31179     <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   31180    </dd>
   31181 
   31182    <dt><var title="">thead</var> = <var title="">table</var> . <code title=dom-table-createTHead><a href=#dom-table-createthead>createTHead</a></code>()</dt>
   31183    <dd>
   31184     <p>Ensures the table has a <code><a href=#the-thead-element>thead</a></code> element, and returns it.</p>
   31185    </dd>
   31186 
   31187    <dt><var title="">table</var> . <code title=dom-table-deleteTHead><a href=#dom-table-deletethead>deleteTHead</a></code>()</dt>
   31188    <dd>
   31189     <p>Ensures the table does not have a <code><a href=#the-thead-element>thead</a></code> element.</p>
   31190    </dd>
   31191 
   31192    <dt><var title="">table</var> . <code title=dom-table-tFoot><a href=#dom-table-tfoot>tFoot</a></code> [ = <var title="">value</var> ]</dt>
   31193    <dd>
   31194     <p>Returns the table's <code><a href=#the-tfoot-element>tfoot</a></code> element.</p>
   31195     <p>Can be set, to replace the <code><a href=#the-tfoot-element>tfoot</a></code> element. If the
   31196     new value is not a <code><a href=#the-tfoot-element>tfoot</a></code> element, throws a
   31197     <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   31198    </dd>
   31199 
   31200    <dt><var title="">tfoot</var> = <var title="">table</var> . <code title=dom-table-createTFoot><a href=#dom-table-createtfoot>createTFoot</a></code>()</dt>
   31201    <dd>
   31202     <p>Ensures the table has a <code><a href=#the-tfoot-element>tfoot</a></code> element, and returns it.</p>
   31203    </dd>
   31204 
   31205    <dt><var title="">table</var> . <code title=dom-table-deleteTFoot><a href=#dom-table-deletetfoot>deleteTFoot</a></code>()</dt>
   31206    <dd>
   31207     <p>Ensures the table does not have a <code><a href=#the-tfoot-element>tfoot</a></code> element.</p>
   31208    </dd>
   31209 
   31210    <dt><var title="">table</var> . <code title=dom-table-tBodies><a href=#dom-table-tbodies>tBodies</a></code></dt>
   31211    <dd>
   31212     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tbody-element>tbody</a></code> elements of the table.</p>
   31213    </dd>
   31214 
   31215    <dt><var title="">tbody</var> = <var title="">table</var> . <code title=dom-table-createTBody><a href=#dom-table-createtbody>createTBody</a></code>()</dt>
   31216    <dd>
   31217     <p>Creates a <code><a href=#the-tbody-element>tbody</a></code> element, inserts it into the table, and returns it.</p>
   31218    </dd>
   31219 
   31220    <dt><var title="">table</var> . <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code></dt>
   31221    <dd>
   31222     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tr-element>tr</a></code> elements of the table.</p>
   31223    </dd>
   31224 
   31225    <dt><var title="">tr</var> = <var title="">table</var> . <code title=dom-table-insertRow><a href=#dom-table-insertrow>insertRow</a></code>(<var title="">index</var>)</dt>
   31226    <dd>
   31227     <p>Creates a <code><a href=#the-tr-element>tr</a></code> element, along with a <code><a href=#the-tbody-element>tbody</a></code> if required, inserts them into the table at the position given by the argument, and returns the <code><a href=#the-tr-element>tr</a></code>.</p>
   31228     <p>The position is relative to the rows in the table. The index &minus;1 is equivalent to inserting at the end of the table.</p>
   31229     <p>If the given position is less than &minus;1 or greater than the number of rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31230    </dd>
   31231 
   31232    <dt><var title="">table</var> . <code title=dom-table-deleteRow><a href=#dom-table-deleterow>deleteRow</a></code>(<var title="">index</var>)</dt>
   31233    <dd>
   31234     <p>Removes the <code><a href=#the-tr-element>tr</a></code> element with the given position in the table.</p>
   31235     <p>The position is relative to the rows in the table. The index &minus;1 is equivalent to deleting the last row of the table.</p>
   31236     <p>If the given position is less than &minus;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31237    </dd>
   31238 
   31239   </dl><div class=impl>
   31240 
   31241   <p>The <dfn id=dom-table-caption title=dom-table-caption><code>caption</code></dfn> IDL
   31242   attribute must return, on getting, the first <code><a href=#the-caption-element>caption</a></code>
   31243   element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
   31244   otherwise. On setting, if the new value is a <code><a href=#the-caption-element>caption</a></code>
   31245   element, the first <code><a href=#the-caption-element>caption</a></code> element child of the
   31246   <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
   31247   value must be inserted as the first node of the <code><a href=#the-table-element>table</a></code>
   31248   element. If the new value is not a <code><a href=#the-caption-element>caption</a></code> element,
   31249   then a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be
   31250   raised instead.</p>
   31251 
   31252   <p>The <dfn id=dom-table-createcaption title=dom-table-createCaption><code>createCaption()</code></dfn>
   31253   method must return the first <code><a href=#the-caption-element>caption</a></code> element child of
   31254   the <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
   31255   <code><a href=#the-caption-element>caption</a></code> element must be created, inserted as the first
   31256   node of the <code><a href=#the-table-element>table</a></code> element, and then returned.</p>
   31257 
   31258   <p>The <dfn id=dom-table-deletecaption title=dom-table-deleteCaption><code>deleteCaption()</code></dfn>
   31259   method must remove the first <code><a href=#the-caption-element>caption</a></code> element child of
   31260   the <code><a href=#the-table-element>table</a></code> element, if any.</p>
   31261 
   31262   <p>The <dfn id=dom-table-thead title=dom-table-tHead><code>tHead</code></dfn> IDL
   31263   attribute must return, on getting, the first <code><a href=#the-thead-element>thead</a></code>
   31264   element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
   31265   otherwise. On setting, if the new value is a <code><a href=#the-thead-element>thead</a></code>
   31266   element, the first <code><a href=#the-thead-element>thead</a></code> element child of the
   31267   <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
   31268   value must be inserted immediately before the first element in the
   31269   <code><a href=#the-table-element>table</a></code> element that is neither a <code><a href=#the-caption-element>caption</a></code>
   31270   element nor a <code><a href=#the-colgroup-element>colgroup</a></code> element, if any, or at the end
   31271   of the table if there are no such elements. If the new value is not
   31272   a <code><a href=#the-thead-element>thead</a></code> element, then a
   31273   <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
   31274   instead.</p>
   31275 
   31276   <p>The <dfn id=dom-table-createthead title=dom-table-createTHead><code>createTHead()</code></dfn>
   31277   method must return the first <code><a href=#the-thead-element>thead</a></code> element child of the
   31278   <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
   31279   <code><a href=#the-thead-element>thead</a></code> element must be created and inserted immediately
   31280   before the first element in the <code><a href=#the-table-element>table</a></code> element that is
   31281   neither a <code><a href=#the-caption-element>caption</a></code> element nor a <code><a href=#the-colgroup-element>colgroup</a></code>
   31282   element, if any, or at the end of the table if there are no such
   31283   elements, and then that new element must be returned.</p>
   31284 
   31285   <p>The <dfn id=dom-table-deletethead title=dom-table-deleteTHead><code>deleteTHead()</code></dfn>
   31286   method must remove the first <code><a href=#the-thead-element>thead</a></code> element child of the
   31287   <code><a href=#the-table-element>table</a></code> element, if any.</p>
   31288 
   31289   <p>The <dfn id=dom-table-tfoot title=dom-table-tFoot><code>tFoot</code></dfn> IDL
   31290   attribute must return, on getting, the first <code><a href=#the-tfoot-element>tfoot</a></code>
   31291   element child of the <code><a href=#the-table-element>table</a></code> element, if any, or null
   31292   otherwise. On setting, if the new value is a <code><a href=#the-tfoot-element>tfoot</a></code>
   31293   element, the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
   31294   <code><a href=#the-table-element>table</a></code> element, if any, must be removed, and the new
   31295   value must be inserted immediately before the first element in the
   31296   <code><a href=#the-table-element>table</a></code> element that is neither a <code><a href=#the-caption-element>caption</a></code>
   31297   element, a <code><a href=#the-colgroup-element>colgroup</a></code> element, nor a <code><a href=#the-thead-element>thead</a></code>
   31298   element, if any, or at the end of the table if there are no such
   31299   elements. If the new value is not a <code><a href=#the-tfoot-element>tfoot</a></code> element, then
   31300   a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
   31301   instead.</p>
   31302 
   31303   <p>The <dfn id=dom-table-createtfoot title=dom-table-createTFoot><code>createTFoot()</code></dfn>
   31304   method must return the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
   31305   <code><a href=#the-table-element>table</a></code> element, if any; otherwise a new
   31306   <code><a href=#the-tfoot-element>tfoot</a></code> element must be created and inserted immediately
   31307   before the first element in the <code><a href=#the-table-element>table</a></code> element that is
   31308   neither a <code><a href=#the-caption-element>caption</a></code> element, a <code><a href=#the-colgroup-element>colgroup</a></code>
   31309   element, nor a <code><a href=#the-thead-element>thead</a></code> element, if any, or at the end of
   31310   the table if there are no such elements, and then that new element
   31311   must be returned.</p>
   31312 
   31313   <p>The <dfn id=dom-table-deletetfoot title=dom-table-deleteTFoot><code>deleteTFoot()</code></dfn>
   31314   method must remove the first <code><a href=#the-tfoot-element>tfoot</a></code> element child of the
   31315   <code><a href=#the-table-element>table</a></code> element, if any.</p>
   31316 
   31317   <p>The <dfn id=dom-table-tbodies title=dom-table-tBodies><code>tBodies</code></dfn>
   31318   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   31319   <code><a href=#the-table-element>table</a></code> node, whose filter matches only
   31320   <code><a href=#the-tbody-element>tbody</a></code> elements that are children of the
   31321   <code><a href=#the-table-element>table</a></code> element.</p>
   31322 
   31323   <p>The <dfn id=dom-table-createtbody title=dom-table-createTBody><code>createTBody()</code></dfn>
   31324   method must create a new <code><a href=#the-tbody-element>tbody</a></code> element, insert it
   31325   immediately after the last <code><a href=#the-tbody-element>tbody</a></code> element in the
   31326   <code><a href=#the-table-element>table</a></code> element, if any, or at the end of the
   31327   <code><a href=#the-table-element>table</a></code> element if the <code><a href=#the-table-element>table</a></code> element has no
   31328   <code><a href=#the-tbody-element>tbody</a></code> element children, and then must return the new
   31329   <code><a href=#the-tbody-element>tbody</a></code> element.</p>
   31330 
   31331   <p>The <dfn id=dom-table-rows title=dom-table-rows><code>rows</code></dfn> attribute
   31332   must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   31333   <code><a href=#the-table-element>table</a></code> node, whose filter matches only <code><a href=#the-tr-element>tr</a></code>
   31334   elements that are either children of the <code><a href=#the-table-element>table</a></code> element,
   31335   or children of <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, or
   31336   <code><a href=#the-tfoot-element>tfoot</a></code> elements that are themselves children of the
   31337   <code><a href=#the-table-element>table</a></code> element. The elements in the collection must be
   31338   ordered such that those elements whose parent is a
   31339   <code><a href=#the-thead-element>thead</a></code> are included first, in tree order, followed by
   31340   those elements whose parent is either a <code><a href=#the-table-element>table</a></code> or
   31341   <code><a href=#the-tbody-element>tbody</a></code> element, again in tree order, followed finally by
   31342   those elements whose parent is a <code><a href=#the-tfoot-element>tfoot</a></code> element, still
   31343   in tree order.</p>
   31344 
   31345   <p>The behavior of the <dfn id=dom-table-insertrow title=dom-table-insertRow><code>insertRow(<var title="">index</var>)</code></dfn> method depends on the state of
   31346   the table. When it is called, the method must act as required by the
   31347   first item in the following list of conditions that describes the
   31348   state of the table and the <var title="">index</var> argument:</p>
   31349 
   31350   <dl class=switch><dt>If <var title="">index</var> is less than &minus;1 or greater than
   31351    the number of elements in <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code>
   31352    collection:</dt>
   31353 
   31354    <dd>The method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   31355    exception.</dd>
   31356 
   31357    <dt>If the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection has
   31358    zero elements in it, and the <code><a href=#the-table-element>table</a></code> has no
   31359    <code><a href=#the-tbody-element>tbody</a></code> elements in it:</dt>
   31360 
   31361    <dd>The method must create a <code><a href=#the-tbody-element>tbody</a></code> element, then
   31362    create a <code><a href=#the-tr-element>tr</a></code> element, then append the <code><a href=#the-tr-element>tr</a></code>
   31363    element to the <code><a href=#the-tbody-element>tbody</a></code> element, then append the
   31364    <code><a href=#the-tbody-element>tbody</a></code> element to the <code><a href=#the-table-element>table</a></code> element, and
   31365    finally return the <code><a href=#the-tr-element>tr</a></code> element.</dd>
   31366 
   31367    <dt>If the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection has
   31368    zero elements in it:</dt>
   31369 
   31370    <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, append it to
   31371    the last <code><a href=#the-tbody-element>tbody</a></code> element in the table, and return the
   31372    <code><a href=#the-tr-element>tr</a></code> element.</dd>
   31373 
   31374    <dt>If <var title="">index</var> is missing, equal to &minus;1, or
   31375    equal to the number of items in <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection:</dt>
   31376 
   31377    <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, and append it
   31378    to the parent of the last <code><a href=#the-tr-element>tr</a></code> element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection. Then, the newly
   31379    created <code><a href=#the-tr-element>tr</a></code> element must be returned.</dd>
   31380 
   31381    <dt>Otherwise:</dt>
   31382 
   31383    <dd>The method must create a <code><a href=#the-tr-element>tr</a></code> element, insert it
   31384    immediately before the <var title="">index</var>th <code><a href=#the-tr-element>tr</a></code>
   31385    element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection,
   31386    in the same parent, and finally must return the newly created
   31387    <code><a href=#the-tr-element>tr</a></code> element.</dd>
   31388 
   31389   </dl><p>When the <dfn id=dom-table-deleterow title=dom-table-deleteRow><code>deleteRow(<var title="">index</var>)</code></dfn> method is called, the user agent
   31390   must run the following steps:</p>
   31391 
   31392   <ol><li><p>If <var title="">index</var> is equal to &minus;1, then
   31393    <var title="">index</var> must be set to the number if items in the
   31394    <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection, minus
   31395    one.</li>
   31396 
   31397    <li><p>Now, if <var title="">index</var> is less than zero, or
   31398    greater than or equal to the number of elements in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection, the method must
   31399    instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception, and these
   31400    steps must be aborted.</li>
   31401 
   31402    <li><p>Otherwise, the method must remove the <var title="">index</var>th element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection from its parent.</p>
   31403 
   31404   </ol><p>The <dfn id=dom-table-summary title=dom-table-summary><code>summary</code></dfn> IDL
   31405   attribute must <a href=#reflect>reflect</a> the content attribute of the
   31406   same name.</p>
   31407 
   31408   </div>
   31409 
   31410 
   31411   <h4 id=the-caption-element><span class=secno>4.9.2 </span>The <dfn><code>caption</code></dfn> element</h4>
   31412 
   31413   <dl class=element><dt>Categories</dt>
   31414    <dd>None.</dd>
   31415    <dt>Contexts in which this element may be used:</dt>
   31416    <dd>As the first element child of a <code><a href=#the-table-element>table</a></code> element.</dd>
   31417    <dt>Content model:</dt>
   31418    <dd><a href=#flow-content>Flow content</a>, but with no descendant <code><a href=#the-table-element>table</a></code> elements.</dd>
   31419    <dt>Content attributes:</dt>
   31420    <dd><a href=#global-attributes>Global attributes</a></dd>
   31421    <dt>DOM interface:</dt>
   31422    <dd>
   31423 <pre class=idl>interface <dfn id=htmltablecaptionelement>HTMLTableCaptionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
   31424    </dd>
   31425   </dl><p>The <code><a href=#the-caption-element>caption</a></code> element <a href=#represents>represents</a> the title of the
   31426   <code><a href=#the-table-element>table</a></code> that is its parent, if it has a parent and that
   31427   is a <code><a href=#the-table-element>table</a></code> element.</p>
   31428 
   31429   <div class=impl>
   31430 
   31431   <p>The <code><a href=#the-caption-element>caption</a></code> element takes part in the <a href=#table-model>table
   31432   model</a>.</p>
   31433 
   31434   </div>
   31435 
   31436   <p>When a <code><a href=#the-table-element>table</a></code> element is the only content in a
   31437   <code><a href=#the-figure-element>figure</a></code> element other than the <code><a href=#the-figcaption-element>figcaption</a></code>,
   31438   the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
   31439   <code><a href=#the-figcaption-element>figcaption</a></code>.</p>
   31440 
   31441   <p>A caption can introduce context for a table, making it
   31442   significantly easier to understand.</p>
   31443 
   31444   <div class=example>
   31445 
   31446    <p>Consider, for instance, the following table:</p>
   31447 
   31448    <table class=dice-example><tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
   31449     <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
   31450     <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
   31451     <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
   31452     <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
   31453     <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
   31454     <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   31455    </table><p>In the abstract, this table is not clear. However, with a
   31456    caption giving the table's number (for reference in the main prose)
   31457    and explaining its use, it makes more sense:</p>
   31458 
   31459    <pre>&lt;caption&gt;
   31460 &lt;p&gt;Table 1.
   31461 &lt;p&gt;This table shows the total score obtained from rolling two
   31462 six-sided dice. The first row represents the value of the first die,
   31463 the first column the value of the second die. The total is given in
   31464 the cell that corresponds to the values of the two dice.
   31465 &lt;/caption&gt;</pre>
   31466 
   31467  <!-- HTML4POLICE (hidden in w3c version because w3c version has to be valid HTML4) -->
   31468    <p>This provides the user with more context:</p>
   31469 
   31470    <table class=dice-example><caption>
   31471      <p>Table 1.
   31472      <p>This table shows the total score obtained from rolling two
   31473      six-sided dice. The first row represents the value of the first
   31474      die, the first column the value of the second die. The total is
   31475      given in the cell that corresponds to the values of the two dice.
   31476     </caption>
   31477     <tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
   31478     <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
   31479     <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
   31480     <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
   31481     <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
   31482     <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
   31483     <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
   31484    </table></div>
   31485 
   31486 
   31487 
   31488 
   31489   <h4 id=the-colgroup-element><span class=secno>4.9.3 </span>The <dfn><code>colgroup</code></dfn> element</h4>
   31490 
   31491   <dl class=element><dt>Categories</dt>
   31492    <dd>None.</dd>
   31493    <dt>Contexts in which this element may be used:</dt>
   31494    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31495    <code><a href=#the-caption-element>caption</a></code> elements and before any <code><a href=#the-thead-element>thead</a></code>,
   31496    <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, and <code><a href=#the-tr-element>tr</a></code>
   31497    elements.</dd>
   31498    <dt>Content model:</dt>
   31499    <dd>If the <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute is present: Empty.</dd>
   31500    <dd>If the <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute is absent: Zero or more <code><a href=#the-col-element>col</a></code> elements.</dd>
   31501    <dt>Content attributes:</dt>
   31502    <dd><a href=#global-attributes>Global attributes</a></dd>
   31503    <dd><code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></dd>
   31504    <dt>DOM interface:</dt>
   31505    <dd>
   31506 <pre class=idl>interface <dfn id=htmltablecolelement>HTMLTableColElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   31507            attribute unsigned long <a href=#dom-colgroup-span title=dom-colgroup-span>span</a>;
   31508 };</pre>
   31509    </dd>
   31510   </dl><p>The <code><a href=#the-colgroup-element>colgroup</a></code> element <a href=#represents>represents</a> a <a href=#concept-column-group title=concept-column-group>group</a> of one or more <a href=#concept-column title=concept-column>columns</a> in the <code><a href=#the-table-element>table</a></code> that
   31511   is its parent, if it has a parent and that is a <code><a href=#the-table-element>table</a></code>
   31512   element.</p>
   31513 
   31514   <p>If the <code><a href=#the-colgroup-element>colgroup</a></code> element contains no <code><a href=#the-col-element>col</a></code>
   31515   elements, then the element may have a <dfn id=attr-colgroup-span title=attr-colgroup-span><code>span</code></dfn> content attribute
   31516   specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
   31517   integer</a> greater than zero.</p>
   31518 
   31519   <div class=impl>
   31520 
   31521   <p>The <code><a href=#the-colgroup-element>colgroup</a></code> element and its <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute take part in the
   31522   <a href=#table-model>table model</a>.</p>
   31523 
   31524   <p>The <dfn id=dom-colgroup-span title=dom-colgroup-span><code>span</code></dfn> IDL
   31525   attribute must <a href=#reflect>reflect</a> the content attribute of the
   31526   same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
   31527   numbers greater than zero</a>.</p>
   31528 
   31529   </div>
   31530 
   31531 
   31532   <h4 id=the-col-element><span class=secno>4.9.4 </span>The <dfn><code>col</code></dfn> element</h4>
   31533 
   31534   <dl class=element><dt>Categories</dt>
   31535    <dd>None.</dd>
   31536    <dt>Contexts in which this element may be used:</dt>
   31537    <dd>As a child of a <code><a href=#the-colgroup-element>colgroup</a></code> element that doesn't have
   31538    a <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute.</dd>
   31539    <dt>Content model:</dt>
   31540    <dd>Empty.</dd>
   31541    <dt>Content attributes:</dt>
   31542    <dd><a href=#global-attributes>Global attributes</a></dd>
   31543    <dd><code title=attr-col-span><a href=#attr-col-span>span</a></code></dd>
   31544    <!-- v2: char, to specify the decimal character used in numeric data cells in the column (not header cells) -->
   31545    <dt>DOM interface:</dt>
   31546    <dd>
   31547     <p><code><a href=#htmltablecolelement>HTMLTableColElement</a></code>, same as for
   31548     <code><a href=#the-colgroup-element>colgroup</a></code> elements. This interface defines one member,
   31549     <code title=dom-col-span><a href=#dom-col-span>span</a></code>.</p>
   31550    </dd>
   31551   </dl><p>If a <code><a href=#the-col-element>col</a></code> element has a parent and that is a
   31552   <code><a href=#the-colgroup-element>colgroup</a></code> element that itself has a parent that is a
   31553   <code><a href=#the-table-element>table</a></code> element, then the <code><a href=#the-col-element>col</a></code> element
   31554   <a href=#represents>represents</a> one or more <a href=#concept-column title=concept-column>columns</a> in the <a href=#concept-column-group title=concept-column-group>column group</a> represented by that
   31555   <code><a href=#the-colgroup-element>colgroup</a></code>.</p>
   31556 
   31557   <p>The element may have a <dfn id=attr-col-span title=attr-col-span><code>span</code></dfn> content attribute
   31558   specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
   31559   integer</a> greater than zero.</p>
   31560 
   31561   <div class=impl>
   31562 
   31563   <p>The <code><a href=#the-col-element>col</a></code> element and its <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute take part in the
   31564   <a href=#table-model>table model</a>.</p>
   31565 
   31566   <p>The <dfn id=dom-col-span title=dom-col-span><code>span</code></dfn> IDL
   31567   attribute must <a href=#reflect>reflect</a> the content attribute of the
   31568   same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
   31569   numbers greater than zero</a>.</p>
   31570 
   31571   </div>
   31572 
   31573 
   31574   <h4 id=the-tbody-element><span class=secno>4.9.5 </span>The <dfn><code>tbody</code></dfn> element</h4>
   31575 
   31576   <dl class=element><dt>Categories</dt>
   31577    <dd>None.</dd>
   31578    <dt>Contexts in which this element may be used:</dt>
   31579    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31580    <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and
   31581    <code><a href=#the-thead-element>thead</a></code> elements, but only if there are no
   31582    <code><a href=#the-tr-element>tr</a></code> elements that are children of the
   31583    <code><a href=#the-table-element>table</a></code> element.</dd>
   31584    <dt>Content model:</dt>
   31585    <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   31586    <dt>Content attributes:</dt>
   31587    <dd><a href=#global-attributes>Global attributes</a></dd>
   31588    <dt>DOM interface:</dt>
   31589    <dd>
   31590     <pre class=idl>interface <dfn id=htmltablesectionelement>HTMLTableSectionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   31591   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-tbody-rows title=dom-tbody-rows>rows</a>;
   31592   <a href=#htmlelement>HTMLElement</a> <a href=#dom-tbody-insertrow title=dom-tbody-insertRow>insertRow</a>(in optional long index);
   31593   void <a href=#dom-tbody-deleterow title=dom-tbody-deleteRow>deleteRow</a>(in long index);
   31594 };</pre>
   31595     <p>The <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> interface is also
   31596     used for <code><a href=#the-thead-element>thead</a></code> and <code><a href=#the-tfoot-element>tfoot</a></code> elements.</p>
   31597    </dd>
   31598   </dl><p>The <code><a href=#the-tbody-element>tbody</a></code> element <a href=#represents>represents</a> a <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of a body of data for
   31599   the parent <code><a href=#the-table-element>table</a></code> element, if the <code><a href=#the-tbody-element>tbody</a></code>
   31600   element has a parent and it is a <code><a href=#the-table-element>table</a></code>.</p>
   31601 
   31602   <div class=impl>
   31603 
   31604   <p>The <code><a href=#the-tbody-element>tbody</a></code> element takes part in the <a href=#table-model>table
   31605   model</a>.</p>
   31606 
   31607   </div>
   31608 
   31609   <dl class=domintro><dt><var title="">tbody</var> . <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code></dt>
   31610    <dd>
   31611     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-tr-element>tr</a></code> elements of the table section.</p>
   31612    </dd>
   31613 
   31614    <dt><var title="">tr</var> = <var title="">tbody</var> . <code title=dom-tbody-insertRow><a href=#dom-tbody-insertrow>insertRow</a></code>( [ <var title="">index</var> ] )</dt>
   31615    <dd>
   31616     <p>Creates a <code><a href=#the-tr-element>tr</a></code> element, inserts it into the table section at the position given by the argument, and returns the <code><a href=#the-tr-element>tr</a></code>.</p>
   31617     <p>The position is relative to the rows in the table section. The index &minus;1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.</p>
   31618     <p>If the given position is less than &minus;1 or greater than the number of rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31619    </dd>
   31620 
   31621    <dt><var title="">tbody</var> . <code title=dom-tbody-deleteRow><a href=#dom-tbody-deleterow>deleteRow</a></code>(<var title="">index</var>)</dt>
   31622    <dd>
   31623     <p>Removes the <code><a href=#the-tr-element>tr</a></code> element with the given position in the table section.</p>
   31624     <p>The position is relative to the rows in the table section. The index &minus;1 is equivalent to deleting the last row of the table section.</p>
   31625     <p>If the given position is less than &minus;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31626    </dd>
   31627 
   31628   </dl><div class=impl>
   31629 
   31630   <p>The <dfn id=dom-tbody-rows title=dom-tbody-rows><code>rows</code></dfn> attribute
   31631   must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the element,
   31632   whose filter matches only <code><a href=#the-tr-element>tr</a></code> elements that are children
   31633   of the element.</p>
   31634 
   31635   <p>The <dfn id=dom-tbody-insertrow title=dom-tbody-insertRow><code>insertRow(<var title="">index</var>)</code></dfn> method must, when invoked on an
   31636   element <var title="">table section</var>, act as follows:</p>
   31637 
   31638   <p>If <var title="">index</var> is less than &minus;1 or greater than the
   31639   number of elements in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code>
   31640   collection, the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   31641   exception.</p>
   31642 
   31643   <p>If <var title="">index</var> is missing, equal to &minus;1, or
   31644   equal to the number of items in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, the method must
   31645   create a <code><a href=#the-tr-element>tr</a></code> element, append it to the element <var title="">table section</var>, and return the newly created
   31646   <code><a href=#the-tr-element>tr</a></code> element.</p>
   31647 
   31648   <p>Otherwise, the method must create a <code><a href=#the-tr-element>tr</a></code> element,
   31649   insert it as a child of the <var title="">table section</var>
   31650   element, immediately before the <var title="">index</var>th
   31651   <code><a href=#the-tr-element>tr</a></code> element in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, and finally must
   31652   return the newly created <code><a href=#the-tr-element>tr</a></code> element.</p>
   31653 
   31654   <p>The <dfn id=dom-tbody-deleterow title=dom-tbody-deleteRow><code>deleteRow(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection from its parent. If
   31655   <var title="">index</var> is less than zero or greater than or equal
   31656   to the number of elements in the <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> collection, the method must
   31657   instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31658 
   31659   </div>
   31660 
   31661 
   31662   <h4 id=the-thead-element><span class=secno>4.9.6 </span>The <dfn><code>thead</code></dfn> element</h4>
   31663 
   31664   <dl class=element><dt>Categories</dt>
   31665    <dd>None.</dd>
   31666    <dt>Contexts in which this element may be used:</dt>
   31667    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31668    <code><a href=#the-caption-element>caption</a></code>, and <code><a href=#the-colgroup-element>colgroup</a></code>
   31669    elements and before any <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, and
   31670    <code><a href=#the-tr-element>tr</a></code> elements, but only if there are no other
   31671    <code><a href=#the-thead-element>thead</a></code> elements that are children of the
   31672    <code><a href=#the-table-element>table</a></code> element.</dd>
   31673    <dt>Content model:</dt>
   31674    <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   31675    <dt>Content attributes:</dt>
   31676    <dd><a href=#global-attributes>Global attributes</a></dd>
   31677    <dt>DOM interface:</dt>
   31678    <dd><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code>, as defined for
   31679    <code><a href=#the-tbody-element>tbody</a></code> elements.</dd>
   31680   </dl><p>The <code><a href=#the-thead-element>thead</a></code> element <a href=#represents>represents</a> the <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of the column labels
   31681   (headers) for the parent <code><a href=#the-table-element>table</a></code> element, if the
   31682   <code><a href=#the-thead-element>thead</a></code> element has a parent and it is a
   31683   <code><a href=#the-table-element>table</a></code>.</p>
   31684 
   31685   <div class=impl>
   31686 
   31687   <p>The <code><a href=#the-thead-element>thead</a></code> element takes part in the <a href=#table-model>table
   31688   model</a>.</p>
   31689 
   31690   </div>
   31691 
   31692 
   31693   <h4 id=the-tfoot-element><span class=secno>4.9.7 </span>The <dfn><code>tfoot</code></dfn> element</h4>
   31694 
   31695   <dl class=element><dt>Categories</dt>
   31696    <dd>None.</dd>
   31697    <dt>Contexts in which this element may be used:</dt>
   31698    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31699    <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and <code><a href=#the-thead-element>thead</a></code>
   31700    elements and before any <code><a href=#the-tbody-element>tbody</a></code> and <code><a href=#the-tr-element>tr</a></code>
   31701    elements, but only if there are no other <code><a href=#the-tfoot-element>tfoot</a></code>
   31702    elements that are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
   31703    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31704    <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   31705    <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tr-element>tr</a></code> elements, but only if there
   31706    are no other <code><a href=#the-tfoot-element>tfoot</a></code> elements that are children of the
   31707    <code><a href=#the-table-element>table</a></code> element.</dd>
   31708    <dt>Content model:</dt>
   31709    <dd>Zero or more <code><a href=#the-tr-element>tr</a></code> elements</dd>
   31710    <dt>Content attributes:</dt>
   31711    <dd><a href=#global-attributes>Global attributes</a></dd>
   31712    <dt>DOM interface:</dt>
   31713    <dd><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code>, as defined for
   31714    <code><a href=#the-tbody-element>tbody</a></code> elements.</dd>
   31715   </dl><p>The <code><a href=#the-tfoot-element>tfoot</a></code> element <a href=#represents>represents</a> the <a href=#concept-row-group title=concept-row-group>block</a> of <a href=#concept-row title=concept-row>rows</a> that consist of the column summaries
   31716   (footers) for the parent <code><a href=#the-table-element>table</a></code> element, if the
   31717   <code><a href=#the-tfoot-element>tfoot</a></code> element has a parent and it is a
   31718   <code><a href=#the-table-element>table</a></code>.</p>
   31719 
   31720   <div class=impl>
   31721 
   31722   <p>The <code><a href=#the-tfoot-element>tfoot</a></code> element takes part in the <a href=#table-model>table
   31723   model</a>.</p>
   31724 
   31725   </div>
   31726 
   31727 
   31728   <h4 id=the-tr-element><span class=secno>4.9.8 </span>The <dfn><code>tr</code></dfn> element</h4>
   31729 
   31730   <dl class=element><dt>Categories</dt>
   31731    <dd>None.</dd>
   31732    <dt>Contexts in which this element may be used:</dt>
   31733    <dd>As a child of a <code><a href=#the-thead-element>thead</a></code> element.</dd>
   31734    <dd>As a child of a <code><a href=#the-tbody-element>tbody</a></code> element.</dd>
   31735    <dd>As a child of a <code><a href=#the-tfoot-element>tfoot</a></code> element.</dd>
   31736    <dd>As a child of a <code><a href=#the-table-element>table</a></code> element, after any
   31737    <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, and <code><a href=#the-thead-element>thead</a></code>
   31738    elements, but only if there are no <code><a href=#the-tbody-element>tbody</a></code> elements that
   31739    are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
   31740    <dt>Content model:</dt>
   31741    <dd>When the parent node is a <code><a href=#the-thead-element>thead</a></code> element: Zero or more <code><a href=#the-th-element>th</a></code> elements</dd>
   31742    <dd>Otherwise: Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
   31743    <dt>Content attributes:</dt>
   31744    <dd><a href=#global-attributes>Global attributes</a></dd>
   31745    <dt>DOM interface:</dt>
   31746    <dd>
   31747     <pre class=idl>interface <dfn id=htmltablerowelement>HTMLTableRowElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   31748   readonly attribute long <a href=#dom-tr-rowindex title=dom-tr-rowIndex>rowIndex</a>;
   31749   readonly attribute long <a href=#dom-tr-sectionrowindex title=dom-tr-sectionRowIndex>sectionRowIndex</a>;
   31750   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-tr-cells title=dom-tr-cells>cells</a>;
   31751   <a href=#htmlelement>HTMLElement</a> <a href=#dom-tr-insertcell title=dom-tr-insertCell>insertCell</a>(in optional long index);
   31752   void <a href=#dom-tr-deletecell title=dom-tr-deleteCell>deleteCell</a>(in long index);
   31753 };</pre>
   31754    </dd>
   31755   </dl><p>The <code><a href=#the-tr-element>tr</a></code> element <a href=#represents>represents</a> a <a href=#concept-row title=concept-row>row</a> of <a href=#concept-cell title=concept-cell>cells</a> in a <a href=#concept-table title=concept-table>table</a>.</p>
   31756 
   31757   <div class=impl>
   31758 
   31759   <p>The <code><a href=#the-tr-element>tr</a></code> element takes part in the <a href=#table-model>table
   31760   model</a>.</p>
   31761 
   31762   </div>
   31763 
   31764   <dl class=domintro><dt><var title="">tr</var> . <code title=dom-tr-rowIndex><a href=#dom-tr-rowindex>rowIndex</a></code></dt>
   31765 
   31766    <dd>
   31767 
   31768     <p>Returns the position of the row in the table's <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> list.</p>
   31769 
   31770     <p>Returns &minus;1 if the element isn't in a table.</p>
   31771 
   31772    </dd>
   31773 
   31774    <dt><var title="">tr</var> . <code title=dom-tr-sectionRowIndex><a href=#dom-tr-sectionrowindex>sectionRowIndex</a></code></dt>
   31775 
   31776    <dd>
   31777 
   31778     <p>Returns the position of the row in the table section's <code title=dom-tbody-rows><a href=#dom-tbody-rows>rows</a></code> list.</p>
   31779 
   31780     <p>Returns &minus;1 if the element isn't in a table section.</p>
   31781 
   31782    </dd>
   31783 
   31784    <dt><var title="">tr</var> . <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code></dt>
   31785    <dd>
   31786 
   31787     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements of the row.</p>
   31788 
   31789    </dd>
   31790 
   31791    <dt><var title="">cell</var> = <var title="">tr</var> . <code title=dom-tr-insertCell><a href=#dom-tr-insertcell>insertCell</a></code>( [ <var title="">index</var> ] )</dt>
   31792 
   31793    <dd>
   31794 
   31795     <p>Creates a <code><a href=#the-td-element>td</a></code> element, inserts it into the table
   31796     row at the position given by the argument, and returns the
   31797     <code><a href=#the-td-element>td</a></code>.</p>
   31798 
   31799     <p>The position is relative to the cells in the row. The
   31800     index &minus;1, which is the default if the argument is omitted,
   31801     is equivalent to inserting at the end of the row.</p>
   31802 
   31803     <p>If the given position is less than &minus;1 or greater than
   31804     the number of cells, throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   31805     exception.</p>
   31806 
   31807    </dd>
   31808 
   31809    <dt><var title="">tr</var> . <code title=dom-tr-deleteCell><a href=#dom-tr-deletecell>deleteCell</a></code>(<var title="">index</var>)</dt>
   31810    <dd>
   31811 
   31812     <p>Removes the <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element with the
   31813     given position in the row.</p>
   31814 
   31815     <p>The position is relative to the cells in the row. The index
   31816     &minus;1 is equivalent to deleting the last cell of the row.</p>
   31817 
   31818     <p>If the given position is less than &minus;1 or greater than
   31819     the index of the last cell, or if there are no cells, throws an
   31820     <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31821 
   31822    </dd>
   31823 
   31824   </dl><div class=impl>
   31825 
   31826   <p>The <dfn id=dom-tr-rowindex title=dom-tr-rowIndex><code>rowIndex</code></dfn>
   31827   attribute must, if the element has a parent <code><a href=#the-table-element>table</a></code>
   31828   element, or a parent <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
   31829   <code><a href=#the-tfoot-element>tfoot</a></code> element and a <em>grandparent</em>
   31830   <code><a href=#the-table-element>table</a></code> element, return the index of the <code><a href=#the-tr-element>tr</a></code>
   31831   element in that <code><a href=#the-table-element>table</a></code> element's <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection. If there is no such
   31832   <code><a href=#the-table-element>table</a></code> element, then the attribute must return
   31833   &minus;1.</p>
   31834 
   31835   <p>The <dfn id=dom-tr-sectionrowindex title=dom-tr-sectionRowIndex><code>sectionRowIndex</code></dfn>
   31836   attribute must, if the element has a parent <code><a href=#the-table-element>table</a></code>,
   31837   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tfoot-element>tfoot</a></code>
   31838   element, return the index of the <code><a href=#the-tr-element>tr</a></code> element in the
   31839   parent element's <code title="">rows</code> collection (for tables,
   31840   that's the <code title=dom-table-rows><a href=#dom-table-rows>HTMLTableElement.rows</a></code>
   31841   collection; for table sections, that's the <code title=dom-tbody-rows><a href=#dom-tbody-rows>HTMLTableRowElement.rows</a></code>
   31842   collection). If there is no such parent element, then the attribute
   31843   must return &minus;1.</p>
   31844 
   31845   <p>The <dfn id=dom-tr-cells title=dom-tr-cells><code>cells</code></dfn> attribute
   31846   must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   31847   <code><a href=#the-tr-element>tr</a></code> element, whose filter matches only <code><a href=#the-td-element>td</a></code>
   31848   and <code><a href=#the-th-element>th</a></code> elements that are children of the
   31849   <code><a href=#the-tr-element>tr</a></code> element.</p>
   31850 
   31851   <p>The <dfn id=dom-tr-insertcell title=dom-tr-insertCell><code>insertCell(<var title="">index</var>)</code></dfn> method must act as follows:</p>
   31852 
   31853   <p>If <var title="">index</var> is less than &minus;1 or greater than the
   31854   number of elements in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code>
   31855   collection, the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code>
   31856   exception.</p>
   31857 
   31858   <p>If <var title="">index</var> is missing, equal to &minus;1, or
   31859   equal to the number of items in <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, the method must create
   31860   a <code><a href=#the-td-element>td</a></code> element, append it to the <code><a href=#the-tr-element>tr</a></code> element,
   31861   and return the newly created <code><a href=#the-td-element>td</a></code> element.</p>
   31862 
   31863   <p>Otherwise, the method must create a <code><a href=#the-td-element>td</a></code> element,
   31864   insert it as a child of the <code><a href=#the-tr-element>tr</a></code> element, immediately
   31865   before the <var title="">index</var>th <code><a href=#the-td-element>td</a></code> or
   31866   <code><a href=#the-th-element>th</a></code> element in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, and finally must
   31867   return the newly created <code><a href=#the-td-element>td</a></code> element.</p>
   31868 
   31869   <p>The <dfn id=dom-tr-deletecell title=dom-tr-deleteCell><code>deleteCell(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection from its parent. If
   31870   <var title="">index</var> is less than zero or greater than or equal
   31871   to the number of elements in the <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection, the method must
   31872   instead raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
   31873 
   31874   </div>
   31875 
   31876 
   31877   <h4 id=the-td-element><span class=secno>4.9.9 </span>The <dfn><code>td</code></dfn> element</h4>
   31878 
   31879   <dl class=element><dt>Categories</dt>
   31880    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   31881    <dt>Contexts in which this element may be used:</dt>
   31882    <dd>As a child of a <code><a href=#the-tr-element>tr</a></code> element.</dd>
   31883    <dt>Content model:</dt>
   31884    <dd><a href=#flow-content>Flow content</a>.</dd>
   31885    <dt>Content attributes:</dt>
   31886    <dd><a href=#global-attributes>Global attributes</a></dd>
   31887    <dd><code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code></dd>
   31888    <dd><code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code></dd>
   31889    <dd><code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></dd>
   31890    <!-- v2 char, to specify the decimal character used in numeric cells -->
   31891    <dt>DOM interface:</dt>
   31892    <dd>
   31893     <pre class=idl>interface <dfn id=htmltabledatacellelement>HTMLTableDataCellElement</dfn> : <a href=#htmltablecellelement>HTMLTableCellElement</a> {};</pre>
   31894    </dd>
   31895   </dl><p>The <code><a href=#the-td-element>td</a></code> element <a href=#represents>represents</a> a data <a href=#concept-cell title=concept-cell>cell</a> in a table.</p>
   31896 
   31897   <div class=impl>
   31898 
   31899   <p>The <code><a href=#the-td-element>td</a></code> element and its <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, and <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes take part in the
   31900   <a href=#table-model>table model</a>.</p>
   31901 
   31902   </div>
   31903 
   31904 
   31905   <h4 id=the-th-element><span class=secno>4.9.10 </span>The <dfn><code>th</code></dfn> element</h4>
   31906 
   31907   <dl class=element><dt>Categories</dt>
   31908    <dd>None.</dd>
   31909    <dt>Contexts in which this element may be used:</dt>
   31910    <dd>As a child of a <code><a href=#the-tr-element>tr</a></code> element.</dd>
   31911    <dt>Content model:</dt>
   31912    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   31913    <dt>Content attributes:</dt>
   31914    <dd><a href=#global-attributes>Global attributes</a></dd>
   31915    <dd><code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code></dd>
   31916    <dd><code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code></dd>
   31917    <dd><code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></dd>
   31918    <dd><code title=attr-th-scope><a href=#attr-th-scope>scope</a></code></dd>
   31919    <dt>DOM interface:</dt>
   31920    <dd>
   31921     <pre class=idl>interface <dfn id=htmltableheadercellelement>HTMLTableHeaderCellElement</dfn> : <a href=#htmltablecellelement>HTMLTableCellElement</a> {
   31922            attribute DOMString <a href=#dom-th-scope title=dom-th-scope>scope</a>;
   31923 };</pre>
   31924    </dd>
   31925   </dl><p>The <code><a href=#the-th-element>th</a></code> element <a href=#represents>represents</a> a header <a href=#concept-cell title=concept-cell>cell</a> in a table.</p>
   31926 
   31927   <p>The <code><a href=#the-th-element>th</a></code> element may have a <dfn id=attr-th-scope title=attr-th-scope><code>scope</code></dfn> content attribute
   31928   specified. The <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is
   31929   an <a href=#enumerated-attribute>enumerated attribute</a> with five states, four of which
   31930   have explicit keywords:</p>
   31931 
   31932   <dl><dt>The <dfn id=attr-th-scope-row title=attr-th-scope-row><code>row</code></dfn>
   31933    keyword, which maps to the <i>row</i> state</dt>
   31934 
   31935    <dd>The <i>row</i> state means the header cell applies to some of
   31936    the subsequent cells in the same row(s).</dd>
   31937 
   31938    <dt>The <dfn id=attr-th-scope-col title=attr-th-scope-col><code>col</code></dfn>
   31939    keyword, which maps to the <i>column</i> state</dt>
   31940 
   31941    <dd>The <i>column</i> state means the header cell applies to some
   31942    of the subsequent cells in the same column(s).</dd>
   31943 
   31944    <dt>The <dfn id=attr-th-scope-rowgroup title=attr-th-scope-rowgroup><code>rowgroup</code></dfn> keyword,
   31945    which maps to the <i>row group</i> state</dt>
   31946 
   31947    <dd>The <i>row group</i> state means the header cell applies to all
   31948    the remaining cells in the row group. A <code><a href=#the-th-element>th</a></code> element's
   31949    <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute must not be in
   31950    the <a href=#attr-th-scope-rowgroup title=attr-th-scope-rowgroup>row group</a> state if
   31951    the element is not anchored in a <a href=#concept-row-group title=concept-row-group>row group</a>.</dd>
   31952 
   31953    <dt>The <dfn id=attr-th-scope-colgroup title=attr-th-scope-colgroup><code>colgroup</code></dfn> keyword,
   31954    which maps to the <i>column group</i> state</dt>
   31955 
   31956    <dd>The <i>column group</i> state means the header cell applies to
   31957    all the remaining cells in the column group. A <code><a href=#the-th-element>th</a></code>
   31958    element's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute must
   31959    not be in the <a href=#attr-th-scope-colgroup title=attr-th-scope-colgroup>column
   31960    group</a> state if the element is not anchored in a <a href=#concept-column-group title=concept-column-group>column group</a>.</dd>
   31961 
   31962    <dt>The <dfn id=attr-th-scope-auto title=attr-th-scope-auto>auto</dfn> state</dt>
   31963 
   31964    <dd>The <i>auto</i> state makes the header cell apply to a set of
   31965    cells selected based on context.</dd>
   31966 
   31967   </dl><p>The <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute's
   31968   <i>missing value default</i> is the <i>auto</i> state.</p>
   31969 
   31970   <div class=impl>
   31971 
   31972   <p>The <code><a href=#the-th-element>th</a></code> element and its <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code>, and <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attributes take part in the
   31973   <a href=#table-model>table model</a>.</p>
   31974 
   31975   <p>The <dfn id=dom-th-scope title=dom-th-scope><code>scope</code></dfn> IDL
   31976   attribute must <a href=#reflect>reflect</a> the content attribute of the
   31977   same name.</p>
   31978 
   31979   </div>
   31980 
   31981   <div class=example>
   31982 
   31983    <p>The following example shows how the <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute's <code title=attr-th-scope-rowgroup><a href=#attr-th-scope-rowgroup>rowgroup</a></code> value affects which
   31984    data cells a header cell applies to.</p>
   31985 
   31986    <p>Here is a markup fragment showing a table:</p>
   31987 
   31988    <pre>&lt;table&gt;
   31989  &lt;thead&gt;
   31990   &lt;tr&gt; &lt;th&gt; ID &lt;th&gt; Measurement &lt;th&gt; Average &lt;th&gt; Maximum
   31991  &lt;tbody&gt;
   31992   &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; Cats &lt;td&gt; &lt;td&gt;
   31993   &lt;tr&gt; &lt;td&gt; 93 &lt;th&gt; Legs &lt;td&gt; 3.5 &lt;td&gt; 4
   31994   &lt;tr&gt; &lt;td&gt; 10 &lt;th&gt; Tails &lt;td&gt; 1 &lt;td&gt; 1
   31995  &lt;tbody&gt;
   31996   &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; English speakers &lt;td&gt; &lt;td&gt;
   31997   &lt;tr&gt; &lt;td&gt; 32 &lt;th&gt; Legs &lt;td&gt; 2.67 &lt;td&gt; 4
   31998   &lt;tr&gt; &lt;td&gt; 35 &lt;th&gt; Tails &lt;td&gt; 0.33 &lt;td&gt; 1
   31999 &lt;/table&gt;</pre>
   32000 
   32001    <p>This would result in the following table:</p>
   32002 
   32003    <table><thead><tr><th> ID <th> Measurement <th> Average <th> Maximum
   32004     <tbody><tr><td> <th scope=rowgroup> Cats <td> <td>
   32005      <tr><td> 93 <th> Legs <td> 3.5 <td> 4
   32006      <tr><td> 10 <th> Tails <td> 1 <td> 1
   32007     <tbody><tr><td> <th scope=rowgroup> English speakers <td> <td>
   32008      <tr><td> 32 <th> Legs <td> 2.67 <td> 4
   32009      <tr><td> 35 <th> Tails <td> 0.33 <td> 1
   32010    </table><p>The headers in the first row all apply directly down to the rows
   32011    in their column.</p>
   32012 
   32013    <p>The headers with the explicit <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attributes apply to all the
   32014    cells in their row group other than the cells in the first column.</p>
   32015 
   32016    <p>The remaining headers apply just to the cells to the right of
   32017    them.</p>
   32018 
   32019    <!-- image source: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/151 -->
   32020    <img alt="" src=images/table-scope-diagram.png><!-- (alt is empty because the diagram is completely described by the previous paragraphs) --></div>
   32021 
   32022 
   32023 
   32024   <h4 id=attributes-common-to-td-and-th-elements><span class=secno>4.9.11 </span>Attributes common to <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</h4>
   32025 
   32026   <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements may have a <dfn id=attr-tdth-colspan title=attr-tdth-colspan><code>colspan</code></dfn> content
   32027   attribute specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
   32028   integer</a> greater than zero.</p>
   32029 
   32030   <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements may also have a
   32031   <dfn id=attr-tdth-rowspan title=attr-tdth-rowspan><code>rowspan</code></dfn> content
   32032   attribute specified, whose value must be a <a href=#valid-non-negative-integer>valid non-negative
   32033   integer</a>.</p>
   32034 
   32035   <p>These attributes give the number of columns and rows respectively
   32036   that the cell is to span. These attributes must not be used to
   32037   overlap cells<span class=impl>, as described in the description of
   32038   the <a href=#table-model>table model</a></span>.</p> <!-- conformance criteria
   32039   for determining when this is violated are given in the processing
   32040   model -->
   32041 
   32042   <hr><p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> element may have a <dfn id=attr-tdth-headers title=attr-tdth-headers><code>headers</code></dfn> content
   32043   attribute specified. The <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute, if specified,
   32044   must contain a string consisting of an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
   32045   space-separated tokens</a>, each of which must have the value of
   32046   an ID of a <code><a href=#the-th-element>th</a></code> element taking part in the same <a href=#concept-table title=concept-table>table</a> as the <code><a href=#the-td-element>td</a></code> or
   32047   <code><a href=#the-th-element>th</a></code> element<span class=impl> (as defined by the
   32048   <a href=#table-model>table model</a>)</span>.</p>
   32049 
   32050   <p>A <code><a href=#the-th-element>th</a></code> element with ID <var title="">id</var> is said
   32051   to be <i>directly targeted</i> by all <code><a href=#the-td-element>td</a></code> and
   32052   <code><a href=#the-th-element>th</a></code> elements in the same <a href=#concept-table title=concept-table>table</a> that have <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes whose values
   32053   include as one of their tokens the ID <var title="">id</var>. A
   32054   <code><a href=#the-th-element>th</a></code> element <var title="">A</var> is said to be
   32055   <i>targeted</i> by a <code><a href=#the-th-element>th</a></code> or <code><a href=#the-td-element>td</a></code> element
   32056   <var title="">B</var> if either <var title="">A</var> is <i>directly
   32057   targeted</i> by <var title="">B</var> or if there exists an element
   32058   <var title="">C</var> that is itself <i>targeted</i> by the element
   32059   <var title="">B</var> and <var title="">A</var> is <i>directly
   32060   targeted</i> by <var title="">C</var>.</p>
   32061 
   32062   <p>A <code><a href=#the-th-element>th</a></code> element must not be <i>targeted</i> by
   32063   itself.</p>
   32064 
   32065   <div class=impl>
   32066 
   32067   <p>The <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>, <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>, and <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attributes take part in the
   32068   <a href=#table-model>table model</a>.</p>
   32069 
   32070   </div>
   32071 
   32072   <hr><p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements implement
   32073   interfaces that inherit from the <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code>
   32074   interface:</p>
   32075 
   32076   <pre class=idl>interface <dfn id=htmltablecellelement>HTMLTableCellElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   32077            attribute unsigned long <a href=#dom-tdth-colspan title=dom-tdth-colSpan>colSpan</a>;
   32078            attribute unsigned long <a href=#dom-tdth-rowspan title=dom-tdth-rowSpan>rowSpan</a>;
   32079   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-tdth-headers title=dom-tdth-headers>headers</a>;
   32080   readonly attribute long <a href=#dom-tdth-cellindex title=dom-tdth-cellIndex>cellIndex</a>;
   32081 };</pre>
   32082 
   32083   <dl class=domintro><dt><var title="">cell</var> . <code title=dom-tdth-cellIndex><a href=#dom-tdth-cellindex>cellIndex</a></code></dt>
   32084 
   32085    <dd>
   32086 
   32087     <p>Returns the position of the cell in the row's <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> list. This does not necessarily
   32088     correspond to the <var title="">x</var>-position of the cell in
   32089     the table, since earlier cells might cover multiple rows or
   32090     columns.</p>
   32091 
   32092     <p>Returns 0 if the element isn't in a row.</p>
   32093 
   32094    </dd>
   32095 
   32096   </dl><div class=impl>
   32097 
   32098   <p>The <dfn id=dom-tdth-colspan title=dom-tdth-colSpan><code>colSpan</code></dfn> IDL
   32099   attribute must <a href=#reflect>reflect</a> the content attribute of the
   32100   same name. The value must be <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative
   32101   numbers greater than zero</a>.</p>
   32102 
   32103   <p>The <dfn id=dom-tdth-rowspan title=dom-tdth-rowSpan><code>rowSpan</code></dfn> IDL
   32104   attribute must <a href=#reflect>reflect</a> the content attribute of the
   32105   same name. Its default value, which must be used if <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">parsing the
   32106   attribute as a non-negative integer</a> returns an error, is 1.</p>
   32107 
   32108   <p>The <dfn id=dom-tdth-headers title=dom-tdth-headers><code>headers</code></dfn> IDL
   32109   attribute must <a href=#reflect>reflect</a> the content attribute of the
   32110   same name.</p>
   32111 
   32112   <p>The <dfn id=dom-tdth-cellindex title=dom-tdth-cellIndex><code>cellIndex</code></dfn>
   32113   IDL attribute must, if the element has a parent <code><a href=#the-tr-element>tr</a></code>
   32114   element, return the index of the cell's element in the parent
   32115   element's <code title=dom-tr-cells><a href=#dom-tr-cells>cells</a></code> collection. If
   32116   there is no such parent element, then the attribute must return
   32117   0.</p>
   32118 
   32119   </div>
   32120 
   32121 
   32122   <div class=impl>
   32123 
   32124   <h4 id=processing-model-0><span class=secno>4.9.12 </span>Processing model</h4>
   32125 
   32126   <p>The various table elements and their content attributes together
   32127   define the <dfn id=table-model>table model</dfn>.</p>
   32128 
   32129   <p>A <dfn id=concept-table title=concept-table>table</dfn> consists of cells
   32130   aligned on a two-dimensional grid of <dfn id=concept-slots title=concept-slots>slots</dfn> with coordinates (<var title="">x</var>, <var title="">y</var>). The grid is finite, and is
   32131   either empty or has one or more slots. If the grid has one or more
   32132   slots, then the <var title="">x</var> coordinates are always in the
   32133   range <span title="">0&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">width</sub></var></span>, and the <var title="">y</var>
   32134   coordinates are always in the range <span title="">0&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">height</sub></var></span>. If one or both of <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> are zero, then the table is empty (has
   32135   no slots). Tables correspond to <code><a href=#the-table-element>table</a></code> elements.</p>
   32136 
   32137   <p>A <dfn id=concept-cell title=concept-cell>cell</dfn> is a set of slots anchored
   32138   at a slot (<var title="">cell<sub title="">x</sub></var>, <var title="">cell<sub title="">y</sub></var>), and with a particular
   32139   <var title="">width</var> and <var title="">height</var> such that
   32140   the cell covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">cell<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span> and
   32141   <span title=""><var title="">cell<sub title="">y</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">y</sub></var>+<var title="">height</var></span>. Cells can
   32142   either be <em>data cells</em> or <em>header cells</em>. Data cells
   32143   correspond to <code><a href=#the-td-element>td</a></code> elements, and header cells correspond
   32144   to <code><a href=#the-th-element>th</a></code> elements. Cells of both types can have zero or
   32145   more associated header cells.</p>
   32146 
   32147   <p>It is possible, in certain error cases, for two cells to occupy
   32148   the same slot.</p>
   32149 
   32150   <p>A <dfn id=concept-row title=concept-row>row</dfn> is a complete set of slots
   32151   from <span title=""><var title="">x</var>=0</span> to <span title=""><var title="">x</var>=<var title="">x<sub title="">width</sub></var>-1</span>, for a particular value of <var title="">y</var>. Rows correspond to <code><a href=#the-tr-element>tr</a></code> elements.</p>
   32152 
   32153   <p>A <dfn id=concept-column title=concept-column>column</dfn> is a complete set of
   32154   slots from <span title=""><var title="">y</var>=0</span> to <span title=""><var title="">y</var>=<var title="">y<sub title="">height</sub></var>-1</span>, for a particular value of <var title="">x</var>. Columns can correspond to <code><a href=#the-col-element>col</a></code>
   32155   elements. In the absence of <code><a href=#the-col-element>col</a></code> elements, columns are
   32156   implied.</p>
   32157 
   32158   <p>A <dfn id=concept-row-group title=concept-row-group>row group</dfn> is a set of
   32159   <a href=#concept-row title=concept-row>rows</a> anchored at a slot (0, <var title="">group<sub title="">y</sub></var>) with a particular <var title="">height</var> such that the row group covers all the slots
   32160   with coordinates (<var title="">x</var>, <var title="">y</var>)
   32161   where <span title="">0&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">width</sub></var></span> and <span title=""><var title="">group<sub title="">y</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">group<sub title="">y</sub></var>+<var title="">height</var></span>. Row groups
   32162   correspond to <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
   32163   <code><a href=#the-tfoot-element>tfoot</a></code> elements. Not every row is necessarily in a row
   32164   group.</p>
   32165 
   32166   <p>A <dfn id=concept-column-group title=concept-column-group>column group</dfn> is a set
   32167   of <a href=#concept-column title=concept-column>columns</a> anchored at a slot
   32168   (<var title="">group<sub title="">x</sub></var>, 0) with a
   32169   particular <var title="">width</var> such that the column group
   32170   covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">group<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">group<sub title="">x</sub></var>+<var title="">width</var></span> and
   32171   <span title="">0&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">height</sub></var></span>. Column groups
   32172   correspond to <code><a href=#the-colgroup-element>colgroup</a></code> elements. Not every column is
   32173   necessarily in a column group.</p>
   32174 
   32175   <p><a href=#concept-row-group title=concept-row-group>Row groups</a> cannot overlap
   32176   each other. Similarly, <a href=#concept-column-group title=concept-column-group>column
   32177   groups</a> cannot overlap each other.</p>
   32178 
   32179   <p>A <a href=#concept-cell title=concept-cell>cell</a> cannot cover slots that
   32180   are from two or more <a href=#concept-row-group title=concept-row-group>row
   32181   groups</a>. It is, however, possible for a cell to be in multiple
   32182   <a href=#concept-column-group title=concept-column-group>column groups</a>. All the
   32183   slots that form part of one cell are part of zero or one <a href=#concept-row-group title=concept-row-group>row groups</a> and zero or more <a href=#concept-column-group title=concept-column-group>column groups</a>.</p>
   32184 
   32185   <p>In addition to <a href=#concept-cell title=concept-cell>cells</a>, <a href=#concept-column title=concept-column>columns</a>, <a href=#concept-row title=concept-row>rows</a>, <a href=#concept-row-group title=concept-row-group>row
   32186   groups</a>, and <a href=#concept-column-group title=concept-column-group>column
   32187   groups</a>, <a href=#concept-table title=concept-table>tables</a> can have a
   32188   <code><a href=#the-caption-element>caption</a></code> element associated with them. This gives the
   32189   table a heading, or legend.</p>
   32190 
   32191   <p>A <dfn id=table-model-error>table model error</dfn> is an error with the data
   32192   represented by <code><a href=#the-table-element>table</a></code> elements and their
   32193   descendants. Documents must not have table model errors.</p>
   32194 
   32195 
   32196   <h5 id=forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</h5>
   32197 
   32198   <p>To determine which elements correspond to which slots in a <a href=#concept-table title=concept-table>table</a> associated with a
   32199   <code><a href=#the-table-element>table</a></code> element, to determine the dimensions of the table
   32200   (<var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var>), and to determine if
   32201   there are any <a href=#table-model-error title="table model error">table model
   32202   errors</a>, user agents must use the following algorithm:</p>
   32203 
   32204   <ol><li>
   32205     <p>Let <var title="">x<sub title="">width</sub></var> be zero.</p>
   32206    </li>
   32207 
   32208    <li>
   32209     <p>Let <var title="">y<sub title="">height</sub></var> be zero.</p>
   32210    </li>
   32211 
   32212    <li>
   32213 
   32214     <p>Let <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var> be
   32215     a list of <code><a href=#the-tfoot-element>tfoot</a></code> elements, initially empty.</p>
   32216 
   32217    </li>
   32218 
   32219    <li>
   32220     <p>Let <var title="">the table</var> be the <a href=#concept-table title=concept-table>table</a> represented by the
   32221     <code><a href=#the-table-element>table</a></code> element. The <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> variables give <var title="">the
   32222     table</var>'s dimensions. <var title="">The table</var> is
   32223     initially empty.</p>
   32224    </li>
   32225 
   32226    <li>
   32227 
   32228     <!-- this step is here just so that we can be sure to have a first
   32229     element in the next step, so that we can set up the "advance"
   32230     exception-handling thingy below; otherwise it'd be more
   32231     complicated. it's not a perf optimization per se. -->
   32232 
   32233     <p>If the <code><a href=#the-table-element>table</a></code> element has no children elements,
   32234     then return <var title="">the table</var> (which will be empty),
   32235     and abort these steps.</p>
   32236 
   32237    </li>
   32238 
   32239    <li>
   32240 
   32241     <p>Associate the first <code><a href=#the-caption-element>caption</a></code> element child of the
   32242     <code><a href=#the-table-element>table</a></code> element with <var title="">the table</var>. If
   32243     there are no such children, then it has no associated
   32244     <code><a href=#the-caption-element>caption</a></code> element.</p>
   32245 
   32246    </li>
   32247 
   32248    <li>
   32249 
   32250     <p>Let the <var title="">current element</var> be the first
   32251     element child of the <code><a href=#the-table-element>table</a></code> element.</p>
   32252 
   32253     <p>If a step in this algorithm ever requires the <var title="">current element</var> to be <dfn id=concept-table-advance title=concept-table-advance>advanced to the next child of the
   32254     <code>table</code></dfn> when there is no such next child, then
   32255     the user agent must jump to the step labeled <i>end</i>, near the
   32256     end of this algorithm.</p>
   32257 
   32258    </li>
   32259 
   32260    <li>
   32261 
   32262     <p>While the <var title="">current element</var> is not one of the
   32263     following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
   32264     <code><a href=#the-table-element>table</a></code>:</p>
   32265 
   32266     <ul class=brief><li><code><a href=#the-colgroup-element>colgroup</a></code></li>
   32267      <li><code><a href=#the-thead-element>thead</a></code></li>
   32268      <li><code><a href=#the-tbody-element>tbody</a></code></li>
   32269      <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
   32270      <li><code><a href=#the-tr-element>tr</a></code></li>
   32271     </ul></li>
   32272 
   32273    <li>
   32274 
   32275     <p>If the <var title="">current element</var> is a
   32276     <code><a href=#the-colgroup-element>colgroup</a></code>, follow these substeps:</p>
   32277 
   32278     <ol><li>
   32279 
   32280       <p><i>Column groups</i>: Process the <var title="">current
   32281       element</var> according to the appropriate case below:</p>
   32282 
   32283       <dl class=switch><dt>If the <var title="">current element</var> has any
   32284        <code><a href=#the-col-element>col</a></code> element children</dt>
   32285 
   32286        <dd>
   32287 
   32288         <p>Follow these steps:</p>
   32289 
   32290         <ol><li>
   32291 
   32292           <p>Let <var title="">x<sub title="">start</sub></var> have
   32293           the value of <span title=""><var title="">x<sub title="">width</sub></var></span>.</p>
   32294 
   32295          </li>
   32296 
   32297          <li>
   32298 
   32299           <p>Let the <var title="">current column</var> be the first
   32300           <code><a href=#the-col-element>col</a></code> element child of the <code><a href=#the-colgroup-element>colgroup</a></code>
   32301           element.</p>
   32302 
   32303          </li>
   32304 
   32305          <li>
   32306 
   32307           <p><i>Columns</i>: If the <var title="">current column</var>
   32308           <code><a href=#the-col-element>col</a></code> element has a <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute, then parse its
   32309           value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   32310           integers</a>.</p>
   32311 
   32312           <p>If the result of parsing the value is not an error or
   32313           zero, then let <var title="">span</var> be that value.</p>
   32314 
   32315           <p>Otherwise, if the <code><a href=#the-col-element>col</a></code> element has no <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute, or if trying to
   32316           parse the attribute's value resulted in an error or zero,
   32317           then let <var title="">span</var> be 1.</p>
   32318 
   32319          </li>
   32320 
   32321          <li>
   32322 
   32323           <p>Increase <var title="">x<sub title="">width</sub></var> by
   32324           <var title="">span</var>.</p>
   32325 
   32326          </li>
   32327 
   32328          <li>
   32329 
   32330           <p>Let the last <var title="">span</var> <a href=#concept-column title=concept-column>columns</a> in <var title="">the
   32331           table</var> correspond to the <var title="">current
   32332           column</var> <code><a href=#the-col-element>col</a></code> element.</p>
   32333 
   32334          </li>
   32335 
   32336          <li>
   32337 
   32338           <p>If <var title="">current column</var> is not the last
   32339           <code><a href=#the-col-element>col</a></code> element child of the <code><a href=#the-colgroup-element>colgroup</a></code>
   32340           element, then let the <var title="">current column</var> be
   32341           the next <code><a href=#the-col-element>col</a></code> element child of the
   32342           <code><a href=#the-colgroup-element>colgroup</a></code> element, and return to the step
   32343           labeled <i>columns</i>.</p>
   32344 
   32345          </li>
   32346 
   32347          <li>
   32348 
   32349           <p>Let all the last <a href=#concept-column title=concept-column>columns</a> in <var title="">the
   32350           table</var> from <span title="">x=<var title="">x<sub title="">start</sub></var></span> to <span title="">x=<var title="">x<sub title="">width</sub></var>-1</span> form a
   32351           new <a href=#concept-column-group title=concept-column-group>column group</a>,
   32352           anchored at the slot (<var title="">x<sub title="">start</sub></var>, 0), with width <span title=""><var title="">x<sub title="">width</sub></var>-<var title="">x<sub title="">start</sub></var></span>,
   32353           corresponding to the <code><a href=#the-colgroup-element>colgroup</a></code> element.</p>
   32354 
   32355          </li>
   32356 
   32357         </ol></dd>
   32358 
   32359 
   32360        <dt>If the <var title="">current element</var> has no
   32361        <code><a href=#the-col-element>col</a></code> element children</dt>
   32362 
   32363        <dd>
   32364 
   32365         <ol><li>
   32366 
   32367           <p>If the <code><a href=#the-colgroup-element>colgroup</a></code> element has a <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute, then parse
   32368           its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   32369           integers</a>.</p>
   32370 
   32371           <p>If the result of parsing the value is not an error or
   32372           zero, then let <var title="">span</var> be that value.</p>
   32373 
   32374           <p>Otherwise, if the <code><a href=#the-colgroup-element>colgroup</a></code> element has no
   32375           <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code> attribute, or
   32376           if trying to parse the attribute's value resulted in an
   32377           error or zero, then let <var title="">span</var> be 1.</p>
   32378 
   32379          </li>
   32380 
   32381          <li>
   32382 
   32383           <p>Increase <var title="">x<sub title="">width</sub></var> by
   32384           <var title="">span</var>.</p>
   32385 
   32386          </li>
   32387 
   32388          <li>
   32389 
   32390           <p>Let the last <var title="">span</var> <a href=#concept-column title=concept-column>columns</a> in <var title="">the
   32391           table</var> form a new <a href=#concept-column-group title=concept-column-group>column group</a>, anchored
   32392           at the slot (<span title=""><var title="">x<sub title="">width</sub></var>-<var title="">span</var></span>,
   32393           0), with width <var title="">span</var>, corresponding to
   32394           the <code><a href=#the-colgroup-element>colgroup</a></code> element.</p>
   32395 
   32396          </li>
   32397 
   32398         </ol></dd>
   32399 
   32400       </dl></li>
   32401 
   32402      <li>
   32403 
   32404       <p><a href=#concept-table-advance title=concept-table-advance>Advance</a> the <var title="">current element</var> to the next child of the
   32405       <code><a href=#the-table-element>table</a></code>.</p>
   32406 
   32407      </li>
   32408 
   32409      <li>
   32410 
   32411       <p>While the <var title="">current element</var> is not one of
   32412       the following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
   32413       <code><a href=#the-table-element>table</a></code>:</p>
   32414 
   32415       <ul class=brief><li><code><a href=#the-colgroup-element>colgroup</a></code></li>
   32416        <li><code><a href=#the-thead-element>thead</a></code></li>
   32417        <li><code><a href=#the-tbody-element>tbody</a></code></li>
   32418        <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
   32419        <li><code><a href=#the-tr-element>tr</a></code></li>
   32420       </ul></li>
   32421 
   32422      <li>
   32423 
   32424       <p>If the <var title="">current element</var> is a
   32425       <code><a href=#the-colgroup-element>colgroup</a></code> element, jump to the step labeled
   32426       <i>column groups</i> above.</p>
   32427 
   32428      </li>
   32429 
   32430     </ol></li>
   32431 
   32432    <li>
   32433 
   32434     <p>Let <var title="">y<sub title="">current</sub></var> be
   32435     zero.</p>
   32436 
   32437    </li>
   32438 
   32439    <li>
   32440 
   32441     <p>Let the <var title="">list of downward-growing cells</var> be
   32442     an empty list.</p>
   32443 
   32444    </li>
   32445 
   32446    <li>
   32447 
   32448     <p><i>Rows</i>: While the <var title="">current element</var> is
   32449     not one of the following elements, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
   32450     <code><a href=#the-table-element>table</a></code>:</p>
   32451 
   32452     <ul class=brief><li><code><a href=#the-thead-element>thead</a></code></li>
   32453      <li><code><a href=#the-tbody-element>tbody</a></code></li>
   32454      <li><code><a href=#the-tfoot-element>tfoot</a></code></li>
   32455      <li><code><a href=#the-tr-element>tr</a></code></li>
   32456     </ul></li>
   32457 
   32458    <li>
   32459 
   32460     <p>If the <var title="">current element</var> is a
   32461     <code><a href=#the-tr-element>tr</a></code>, then run the <a href=#algorithm-for-processing-rows>algorithm for processing
   32462     rows</a>, <a href=#concept-table-advance title=concept-table-advance>advance</a>
   32463     the <var title="">current element</var> to the next child of the
   32464     <code><a href=#the-table-element>table</a></code>, and return to the step labeled
   32465     <i>rows</i>.</p>
   32466 
   32467    </li>
   32468 
   32469    <li>
   32470 
   32471     <p>Run the <a href=#algorithm-for-ending-a-row-group>algorithm for ending a row group</a>.</p>
   32472 
   32473    </li>
   32474 
   32475    <li>
   32476 
   32477     <p>If the <var title="">current element</var> is a
   32478     <code><a href=#the-tfoot-element>tfoot</a></code>, then add that element to the list of <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var>, <a href=#concept-table-advance title=concept-table-advance>advance</a> the <var title="">current element</var> to the next child of the
   32479     <code><a href=#the-table-element>table</a></code>, and return to the step labeled
   32480     <i>rows</i>.</p>
   32481 
   32482    </li>
   32483 
   32484    <li>
   32485 
   32486     <p>The <var title="">current element</var> is either a
   32487     <code><a href=#the-thead-element>thead</a></code> or a <code><a href=#the-tbody-element>tbody</a></code>.</p>
   32488 
   32489     <p>Run the <a href=#algorithm-for-processing-row-groups>algorithm for processing row groups</a>.</p>
   32490 
   32491    </li>
   32492 
   32493    <li>
   32494 
   32495     <p><a href=#concept-table-advance title=concept-table-advance>Advance</a> the <var title="">current element</var> to the next child of the
   32496     <code><a href=#the-table-element>table</a></code>.</p>
   32497 
   32498    </li>
   32499 
   32500    <li>
   32501 
   32502     <p>Return to the step labeled <i>rows</i>.</p>
   32503 
   32504    </li>
   32505 
   32506    <li>
   32507 
   32508     <p><i>End</i>: For each <code><a href=#the-tfoot-element>tfoot</a></code> element in the list of
   32509     <var title="">pending <code><a href=#the-tfoot-element>tfoot</a></code> elements</var>, in tree
   32510     order, run the <a href=#algorithm-for-processing-row-groups>algorithm for processing row
   32511     groups</a>.</p>
   32512 
   32513    </li>
   32514 
   32515    <li>
   32516 
   32517     <p>If there exists a <a href=#concept-row title=concept-row>row</a> or <a href=#concept-column title=concept-column>column</a> in <var title="">the
   32518     table</var> containing only <a href=#concept-slots title=concept-slots>slots</a> that do not have a <a href=#concept-cell title=concept-cell>cell</a> anchored to them, then this is a
   32519     <a href=#table-model-error>table model error</a>.</p>
   32520 
   32521    </li>
   32522 
   32523    <li>
   32524 
   32525     <p>Return <var title="">the table</var>.</p>
   32526 
   32527    </li>
   32528 
   32529   </ol><p>The <dfn id=algorithm-for-processing-row-groups>algorithm for processing row groups</dfn>, which is
   32530   invoked by the set of steps above for processing
   32531   <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code>
   32532   elements, is:</p>
   32533 
   32534   <ol><li>
   32535 
   32536     <p>Let <var title="">y<sub title="">start</sub></var> have the
   32537     value of <var title="">y<sub title="">height</sub></var>.</p>
   32538 
   32539    </li>
   32540 
   32541    <li>
   32542 
   32543     <p>For each <code><a href=#the-tr-element>tr</a></code> element that is a child of the element
   32544     being processed, in tree order, run the <a href=#algorithm-for-processing-rows>algorithm for
   32545     processing rows</a>.</p>
   32546 
   32547    </li>
   32548 
   32549    <li>
   32550 
   32551     <!-- if we added any rows, make them part of a row group -->
   32552     <p>If <span title=""><var title="">y<sub title="">height</sub></var>&nbsp;&gt;&nbsp;<var title="">y<sub title="">start</sub></var></span>, then let all the last <a href=#concept-row title=concept-row>rows</a> in <var title="">the table</var>
   32553     from <span title="">y=<var title="">y<sub title="">start</sub></var></span>
   32554     to <span title="">y=<var title="">y<sub title="">height</sub></var>-1</span> form a new <a href=#concept-row-group title=concept-row-group>row group</a>, anchored at the slot
   32555     with coordinate (0, <var title="">y<sub title="">start</sub></var>), with height <span title=""><var title="">y<sub title="">height</sub></var>-<var title="">y<sub title="">start</sub></var></span>, corresponding to the element
   32556     being processed.</p>
   32557 
   32558    </li>
   32559 
   32560    <li>
   32561 
   32562     <p>Run the <a href=#algorithm-for-ending-a-row-group>algorithm for ending a row group</a>.</p>
   32563 
   32564    </li>
   32565 
   32566   </ol><p>The <dfn id=algorithm-for-ending-a-row-group>algorithm for ending a row group</dfn>, which is invoked
   32567   by the set of steps above when starting and ending a block of rows,
   32568   is:</p>
   32569 
   32570   <ol><li>
   32571 
   32572     <p>While <var title="">y<sub title="">current</sub></var> is less
   32573     than <var title="">y<sub title="">height</sub></var>, follow these
   32574     steps:</p>
   32575 
   32576     <ol><li>
   32577 
   32578       <p>Run the <a href=#algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing
   32579       cells</a>.</p>
   32580 
   32581      </li>
   32582 
   32583      <li>
   32584 
   32585       <p>Increase <var title="">y<sub title="">current</sub></var> by
   32586       1.</p>
   32587 
   32588      </li>
   32589 
   32590     </ol></li>
   32591 
   32592    <li>
   32593 
   32594     <p>Empty the <var title="">list of downward-growing
   32595     cells</var>.</p>
   32596 
   32597    </li>
   32598 
   32599   </ol><p>The <dfn id=algorithm-for-processing-rows>algorithm for processing rows</dfn>, which is invoked by
   32600   the set of steps above for processing <code><a href=#the-tr-element>tr</a></code> elements,
   32601   is:</p>
   32602 
   32603   <ol><li>
   32604 
   32605     <p>If <var title="">y<sub title="">height</sub></var> is equal to
   32606     <var title="">y<sub title="">current</sub></var>, then increase
   32607     <var title="">y<sub title="">height</sub></var> by 1. (<var title="">y<sub title="">current</sub></var> is never
   32608     <em>greater</em> than <var title="">y<sub title="">height</sub></var>.)</p>
   32609 
   32610    </li>
   32611 
   32612    <li>
   32613 
   32614     <p>Let <var title="">x<sub title="">current</sub></var> be 0.</p>
   32615 
   32616    </li>
   32617 
   32618    <li>
   32619 
   32620     <p>Run the <a href=#algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing
   32621     cells</a>.</p>
   32622 
   32623    </li>
   32624 
   32625    <li>
   32626 
   32627     <p>If the <code><a href=#the-tr-element>tr</a></code> element being processed has no
   32628     <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element children, then increase
   32629     <var title="">y<sub title="">current</sub></var> by 1, abort this
   32630     set of steps, and return to the algorithm above.</p>
   32631 
   32632    </li>
   32633 
   32634    <li>
   32635 
   32636     <p>Let <var title="">current cell</var> be the first
   32637     <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code>
   32638     element being processed.</p>
   32639 
   32640    </li>
   32641 
   32642    <li>
   32643 
   32644     <p><i>Cells</i>: While <var title="">x<sub title="">current</sub></var> is less than <var title="">x<sub title="">width</sub></var> and the slot with coordinate (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>) already has a cell assigned to it,
   32645     increase <var title="">x<sub title="">current</sub></var> by
   32646     1.</p>
   32647 
   32648    </li>
   32649 
   32650    <li>
   32651 
   32652     <p>If <var title="">x<sub title="">current</sub></var> is equal to
   32653     <var title="">x<sub title="">width</sub></var>, increase <var title="">x<sub title="">width</sub></var> by 1. (<var title="">x<sub title="">current</sub></var> is never
   32654     <em>greater</em> than <var title="">x<sub title="">width</sub></var>.)</p>
   32655 
   32656    </li>
   32657 
   32658    <li>
   32659 
   32660     <p>If the <var title="">current cell</var> has a <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> attribute, then <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">parse that
   32661     attribute's value</a>, and let <var title="">colspan</var> be
   32662     the result.</p>
   32663 
   32664     <p>If parsing that value failed, or returned zero, or if the
   32665     attribute is absent, then let <var title="">colspan</var> be 1,
   32666     instead.</p>
   32667 
   32668    </li>
   32669 
   32670    <li>
   32671 
   32672     <p>If the <var title="">current cell</var> has a <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attribute, then <a href=#rules-for-parsing-non-negative-integers title="rules for
   32673     parsing non-negative integers">parse that attribute's
   32674     value</a>, and let <var title="">rowspan</var> be the
   32675     result.</p>
   32676 
   32677     <p>If parsing that value failed or if the attribute is absent,
   32678     then let <var title="">rowspan</var> be 1, instead.</p>
   32679 
   32680    </li>
   32681 
   32682    <li>
   32683 
   32684     <p>If <var title="">rowspan</var> is zero, then let <var title="">cell grows downward</var> be true, and set <var title="">rowspan</var> to 1. Otherwise, let <var title="">cell
   32685     grows downward</var> be false.</p>
   32686 
   32687    </li>
   32688 
   32689    <li>
   32690 
   32691     <p>If <span title=""><var title="">x<sub title="">width</sub></var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>,
   32692     then let <var title="">x<sub title="">width</sub></var> be
   32693     <span title=""><var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>.</p>
   32694 
   32695    </li>
   32696 
   32697    <li>
   32698 
   32699     <p>If <span title=""><var title="">y<sub title="">height</sub></var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>,
   32700     then let <var title="">y<sub title="">height</sub></var> be
   32701     <span title=""><var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>.</p>
   32702 
   32703    </li>
   32704 
   32705    <li>
   32706 
   32707     <p>Let the slots with coordinates (<var title="">x</var>, <var title="">y</var>) such that <span title=""><var title="">x<sub title="">current</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>
   32708     and <span title=""><var title="">y<sub title="">current</sub></var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span> be
   32709     covered by a new <a href=#concept-cell title=concept-cell>cell</a> <var title="">c</var>, anchored at (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>), which has width <var title="">colspan</var> and height <var title="">rowspan</var>,
   32710     corresponding to the <var title="">current cell</var> element.</p>
   32711 
   32712     <p>If the <var title="">current cell</var> element is a
   32713     <code><a href=#the-th-element>th</a></code> element, let this new cell <var title="">c</var>
   32714     be a header cell; otherwise, let it be a data cell.</p>
   32715 
   32716     <p>To establish which header cells apply to the <var title="">current cell</var> element, use the <a href=#algorithm-for-assigning-header-cells>algorithm for
   32717     assigning header cells</a> described in the next section.</p>
   32718 
   32719     <p>If any of the slots involved already had a <a href=#concept-cell title=concept-cell>cell</a> covering them, then this is a
   32720     <a href=#table-model-error>table model error</a>. Those slots now have two cells
   32721     overlapping.</p>
   32722 
   32723    </li>
   32724 
   32725    <li>
   32726 
   32727     <p>If <var title="">cell grows downward</var> is true, then add
   32728     the tuple {<var title="">c</var>, <var title="">x<sub title="">current</sub></var>, <var title="">colspan</var>} to the
   32729     <var title="">list of downward-growing cells</var>.</p>
   32730 
   32731    </li>
   32732 
   32733    <li>
   32734 
   32735     <p>Increase <var title="">x<sub title="">current</sub></var> by
   32736     <var title="">colspan</var>.</p>
   32737 
   32738    </li>
   32739 
   32740    <li>
   32741 
   32742     <p>If <var title="">current cell</var> is the last <code><a href=#the-td-element>td</a></code>
   32743     or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code> element being
   32744     processed, then increase <var title="">y<sub title="">current</sub></var> by 1, abort this set of steps, and
   32745     return to the algorithm above.</p>
   32746 
   32747    </li>
   32748 
   32749    <li>
   32750 
   32751     <p>Let <var title="">current cell</var> be the next
   32752     <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element in the <code><a href=#the-tr-element>tr</a></code>
   32753     element being processed.</p>
   32754 
   32755    </li>
   32756 
   32757    <li>
   32758 
   32759     <p>Return to the step labelled <i>cells</i>.</p>
   32760 
   32761    </li>
   32762 
   32763   </ol><p>When the algorithms above require the user agent to run the
   32764   <dfn id=algorithm-for-growing-downward-growing-cells>algorithm for growing downward-growing cells</dfn>, the user
   32765   agent must, for each {<var title="">cell</var>, <var title="">cell<sub title="">x</sub></var>, <var title="">width</var>}
   32766   tuple in the <var title="">list of downward-growing cells</var>, if
   32767   any, extend the <a href=#concept-cell title=concept-cell>cell</a> <var title="">cell</var> so that it also covers the slots with
   32768   coordinates (<var title="">x</var>, <var title="">y<sub title="">current</sub></var>), where <span title=""><var title="">cell<sub title="">x</sub></var>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span>.</p>
   32769 
   32770 
   32771 
   32772 
   32773   <h5 id=header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</h5>
   32774 
   32775   <p>Each cell can be assigned zero or more header cells. The
   32776   <dfn id=algorithm-for-assigning-header-cells>algorithm for assigning header cells</dfn> to a cell <var title="">principal cell</var> is as follows.</p>
   32777 
   32778   <ol><!-- INITIALIZATION --><li>
   32779 
   32780     <p>Let <var title="">header list</var> be an empty list of
   32781     cells.</p>
   32782 
   32783    </li>
   32784 
   32785    <li>
   32786 
   32787     <p>Let (<var title="">principal<sub title="">x</sub></var>, <var title="">principal<sub title="">y</sub></var>) be the coordinate
   32788     of the slot to which the <var title="">principal cell</var> is
   32789     anchored.</p>
   32790 
   32791    </li>
   32792 
   32793    <li>
   32794 
   32795     <dl class=switch><dt>If the <var title="">principal cell</var> has a <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute specified</dt>
   32796 
   32797      <dd>
   32798 
   32799       <!-- HEADERS="" -->
   32800 
   32801       <ol><li>
   32802 
   32803         <p>Take the value of the <var title="">principal cell</var>'s
   32804         <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute and
   32805         <a href=#split-a-string-on-spaces title="split a string on spaces">split it on
   32806         spaces</a>, letting <var title="">id list</var> be the list
   32807         of tokens obtained.</p>
   32808 
   32809        </li>
   32810 
   32811        <li>
   32812 
   32813         <!-- support headers="" to <td> for legacy compat -->
   32814         <!-- note that it's not conforming though -->
   32815         <p>For each token in the <var title="">id list</var>, if the
   32816         first element in the <code><a href=#document>Document</a></code> with an ID equal to
   32817         the token is a cell in the same <a href=#concept-table title=concept-table>table</a>, and that cell is not the
   32818         <var title="">principal cell</var>, then add that cell to <var title="">header list</var>.</p>
   32819 
   32820        </li>
   32821 
   32822       </ol></dd>
   32823 
   32824 
   32825      <dt>If <var title="">principal cell</var> does not have a <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> attribute specified</dt>
   32826 
   32827      <dd>
   32828 
   32829       <ol><li>
   32830 
   32831         <p>Let <var title="">principal<sub title="">width</sub></var>
   32832         be the width of the <var title="">principal cell</var>.</p>
   32833 
   32834        </li>
   32835 
   32836        <li>
   32837 
   32838         <p>Let <var title="">principal<sub title="">height</sub></var>
   32839         be the height of the <var title="">principal cell</var>.</p>
   32840 
   32841        </li>
   32842 
   32843 
   32844        <!-- HORIZONTAL -->
   32845 
   32846        <li>
   32847 
   32848         <p>For each value of <var title="">y</var> from <var title="">principal<sub title="">y</sub></var> to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span>,
   32849         run the <a href=#internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning
   32850         header cells</a>, with the <var title="">principal
   32851         cell</var>, the <var title="">header list</var>, the initial
   32852         coordinate (<var title="">principal<sub title="">x</sub></var>,<var title="">y</var>), and the
   32853         increments <span title="">&Delta;<var title="">x</var>=&minus;1</span>
   32854         and <span title="">&Delta;<var title="">y</var>=0</span>.</p>
   32855 
   32856        </li>
   32857 
   32858 
   32859        <!-- VERTICAL -->
   32860 
   32861        <li>
   32862 
   32863         <p>For each value of <var title="">x</var> from <var title="">principal<sub title="">x</sub></var> to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span>,
   32864         run the <a href=#internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning
   32865         header cells</a>, with the <var title="">principal
   32866         cell</var>, the <var title="">header list</var>, the initial
   32867         coordinate (<var title="">x</var>,<var title="">principal<sub title="">y</sub></var>), and the increments <span title="">&Delta;<var title="">x</var>=0</span> and <span title="">&Delta;<var title="">y</var>=&minus;1</span>.</p>
   32868 
   32869        </li>
   32870 
   32871 
   32872        <!-- ROW GROUP HEADERS -->
   32873 
   32874        <li>
   32875 
   32876         <p>If the <var title="">principal cell</var> is anchored in a
   32877         <a href=#concept-row-group title=concept-row-group>row group</a>, then add all
   32878         header cells that are <a href=#row-group-header title="row group header">row group
   32879         headers</a> and are anchored in the same row group with an
   32880         <var title="">x</var>-coordinate less than or equal to
   32881         <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and
   32882         a <var title="">y</var>-coordinate less than or equal to
   32883         <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
   32884         <var title="">header list</var>.</p>
   32885 
   32886         <!-- this might introduce principal accidentally; fixed below -->
   32887 
   32888        </li>
   32889 
   32890 
   32891        <!-- COLUMN GROUP HEADERS -->
   32892 
   32893        <li>
   32894 
   32895         <p>If the <var title="">principal cell</var> is anchored in a
   32896         <a href=#concept-column-group title=concept-column-group>column group</a>, then
   32897         add all header cells that are <a href=#column-group-header title="column group
   32898         header">column group headers</a> and are anchored in the
   32899         same column group with an <var title="">x</var>-coordinate
   32900         less than or equal to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and a <var title="">y</var>-coordinate less than or equal to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
   32901         <var title="">header list</var>.</p>
   32902 
   32903         <!-- this might introduce principal accidentally; fixed below -->
   32904 
   32905        </li>
   32906 
   32907       </ol></dd>
   32908 
   32909     </dl></li>
   32910 
   32911 
   32912    <!-- CLEANUP -->
   32913 
   32914    <li>
   32915 
   32916     <p>Remove all the <a href=#empty-cell title="empty cell">empty cells</a> from
   32917     the <var title="">header list</var>.</p>
   32918 
   32919    </li>
   32920 
   32921    <li>
   32922 
   32923     <p>Remove any duplicates from the <var title="">header
   32924     list</var>.</p>
   32925 
   32926    </li>
   32927 
   32928    <li>
   32929 
   32930     <p>Remove <var title="">principal cell</var> from the <var title="">header list</var> if it is there.</p> <!-- see "might
   32931     introduce principal accidentally" above -->
   32932 
   32933    </li>
   32934 
   32935    <li>
   32936 
   32937     <p>Assign the headers in the <var title="">header list</var> to
   32938     the <var title="">principal cell</var>.</p>
   32939 
   32940    </li>
   32941 
   32942   </ol><p>The <dfn id=internal-algorithm-for-scanning-and-assigning-header-cells>internal algorithm for scanning and assigning header
   32943   cells</dfn>, given a <var title="">principal cell</var>, a <var title="">header list</var>, an initial coordinate (<var title="">initial<sub title="">x</sub></var>, <var title="">initial<sub title="">y</sub></var>), and &Delta;<var title="">x</var> and &Delta;<var title="">y</var> increments, is as
   32944   follows:</p>
   32945 
   32946   <ol><li>
   32947 
   32948     <p>Let <var title="">x</var> equal <var title="">initial<sub title="">x</sub></var>.</p>
   32949 
   32950    </li>
   32951 
   32952    <li>
   32953 
   32954     <p>Let <var title="">y</var> equal <var title="">initial<sub title="">y</sub></var>.</p>
   32955 
   32956    </li>
   32957 
   32958    <li>
   32959 
   32960     <p>Let <var title="">opaque headers</var> be an empty list of
   32961     cells.</p>
   32962 
   32963    </li>
   32964 
   32965    <li>
   32966 
   32967     <dl class=switch><dt>If <var title="">principal cell</var> is a header cell</dt>
   32968 
   32969      <dd><p>Let <var title="">in header block</var> be true, and let
   32970      <var title="">headers from current header block</var> be a list
   32971      of cells containing just the <var title="">principal
   32972      cell</var>.</dd>
   32973 
   32974      <dt>Otherwise</dt>
   32975 
   32976      <dd><p>Let <var title="">in header block</var> be false and let
   32977      <var title="">headers from current header block</var> be an
   32978      empty list of cells.</p>
   32979 
   32980     </dl></li>
   32981 
   32982    <li>
   32983 
   32984     <p><i>Loop</i>: Increment <var title="">x</var> by &Delta;<var title="">x</var>; increment <var title="">y</var> by &Delta;<var title="">y</var>.</p>
   32985 
   32986     <p class=note>For each invocation of this algorithm, one of
   32987     &Delta;<var title="">x</var> and &Delta;<var title="">y</var> will
   32988     be &minus;1, and the other will be 0.</p>
   32989 
   32990    </li>
   32991 
   32992    <li>
   32993 
   32994     <p>If either <var title="">x</var> or <var title="">y</var> is
   32995     less than 0, then abort this internal algorithm.</p>
   32996 
   32997    </li>
   32998 
   32999    <li>
   33000 
   33001     <p>If there is no cell covering slot (<var title="">x</var>,
   33002     <var title="">y</var>), or if there is more than one cell
   33003     covering slot (<var title="">x</var>, <var title="">y</var>),
   33004     return to the substep labeled <i>loop</i>.</p>
   33005 
   33006    </li>
   33007 
   33008    <li>
   33009 
   33010     <p>Let <var title="">current cell</var> be the cell covering
   33011     slot (<var title="">x</var>, <var title="">y</var>).</p>
   33012 
   33013    </li>
   33014 
   33015    <li>
   33016 
   33017     <dl class=switch><dt>If <var title="">current cell</var> is a header cell</dt>
   33018 
   33019      <dd>
   33020 
   33021       <ol><li><p>Set <var title="">in header block</var> to
   33022        true.</li>
   33023 
   33024        <li><p>Add <var title="">current cell</var> to <var title="">headers from current header block</var>.</li>
   33025 
   33026        <li><p>Let <var title="">blocked</var> be false.</li>
   33027 
   33028        <li>
   33029 
   33030         <dl class=switch><dt>If &Delta;<var title="">x</var> is 0</dt>
   33031 
   33032          <dd>
   33033 
   33034           <p>If there are any cells in the <var title="">opaque
   33035           headers</var> list anchored with the same <var title="">x</var>-coordinate as the <var title="">current
   33036           cell</var>, and with the same width as <var title="">current
   33037           cell</var>, then let <var title="">blocked</var> be
   33038           true.</p>
   33039 
   33040           <p>If the <var title="">current cell</var> is not a
   33041           <a href=#column-header>column header</a>, then let <var title="">blocked</var> be true.</p>
   33042 
   33043          </dd>
   33044 
   33045          <dt>If &Delta;<var title="">y</var> is 0</dt>
   33046 
   33047          <dd>
   33048 
   33049           <p>If there are any cells in the <var title="">opaque
   33050           headers</var> list anchored with the same <var title="">y</var>-coordinate as the <var title="">current
   33051           cell</var>, and with the same height as <var title="">current cell</var>, then let <var title="">blocked</var> be true.</p>
   33052 
   33053           <p>If the <var title="">current cell</var> is not a
   33054           <a href=#row-header>row header</a>, then let <var title="">blocked</var> be true.</p>
   33055 
   33056          </dd>
   33057 
   33058         </dl></li>
   33059 
   33060        <li><p>If <var title="">blocked</var> is false, then add the
   33061        <var title="">current cell</var> to the <var title="">headers
   33062        list</var>.</li>
   33063 
   33064       </ol></dd>
   33065 
   33066      <dt>If <var title="">current cell</var> is a data cell and <var title="">in header block</var> is true</dt>
   33067 
   33068      <dd><p>Set <var title="">in header block</var> to false. Add
   33069      all the cells in <var title="">headers from current header
   33070      block</var> to the <var title="">opaque headers</var> list, and
   33071      empty the <var title="">headers from current header block</var>
   33072      list.</p>
   33073 
   33074     </dl></li>
   33075 
   33076    <li>
   33077 
   33078     <p>Return to the step labeled <i>loop</i>.</p>
   33079 
   33080    </li>
   33081 
   33082   </ol><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
   33083   to be a <dfn id=column-header>column header</dfn> if any of the following conditions
   33084   are true:</p>
   33085 
   33086   <ul><li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   33087    is in the <a href=#attr-th-scope-col title=attr-th-scope-col>column</a> state, or</li>
   33088 
   33089    <li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   33090    is in the <a href=#attr-th-scope-auto title=attr-th-scope-auto>auto</a> state, and
   33091    there are no data cells in any of the cells covering slots with
   33092    <var title="">y</var>-coordinates <var title="">y</var>
   33093    .. <span title=""><var title="">y</var>+<var title="">height</var>-1</span>.</li>
   33094 
   33095   </ul><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
   33096   to be a <dfn id=row-header>row header</dfn> if any of the following conditions
   33097   are true:</p>
   33098 
   33099   <ul><li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   33100    is in the <a href=#attr-th-scope-row title=attr-th-scope-row>row</a> state, or</li>
   33101 
   33102    <li>The cell's <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute
   33103    is in the <a href=#attr-th-scope-auto title=attr-th-scope-auto>auto</a> state, the
   33104    cell is not a <a href=#column-header>column header</a>, and there are no data
   33105    cells in any of the cells covering slots with <var title="">x</var>-coordinates <var title="">x</var> .. <span title=""><var title="">x</var>+<var title="">width</var>-1</span>.</li>
   33106 
   33107   </ul><p>A header cell is said to be a <dfn id=column-group-header>column group header</dfn> if
   33108   its <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is in the
   33109   <a href=#attr-th-scope-colgroup title=attr-th-scope-colgroup>column group</a> state.</p>
   33110 
   33111   <p>A header cell is said to be a <dfn id=row-group-header>row group header</dfn> if
   33112   its <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute is in the
   33113   <a href=#attr-th-scope-rowgroup title=attr-th-scope-rowgroup>row group</a> state.</p>
   33114 
   33115   <p>A cell is said to be an <dfn id=empty-cell>empty cell</dfn> if it contains no
   33116   elements and its text content, if any, consists only of
   33117   <a href=#white_space>White_Space</a> characters.</p>
   33118 
   33119   </div>
   33120 
   33121 
   33122   <h4 id=examples-0><span class=secno>4.9.13 </span>Examples</h4>
   33123 
   33124   <p><i>This section is non-normative.</i></p>
   33125 
   33126   <p>The following shows how might one mark up the bottom part of
   33127   table 45 of the <cite>Smithsonian physical tables, Volume
   33128   71</cite>:</p>
   33129 
   33130    <!-- Smithsonian physical tables, Volume 71: By Smithsonian Institution, Frederick Eugene Fowle; page 76 -->
   33131    <!-- from the reprint of the seventh revised edition; publication 2539, published 1921 -->
   33132   <pre>&lt;table&gt;
   33133  &lt;caption&gt;Specification values: &lt;b&gt;Steel&lt;/b&gt;, &lt;b&gt;Castings&lt;/b&gt;,
   33134  Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.&lt;/caption&gt;
   33135  &lt;thead&gt;
   33136   &lt;tr&gt;
   33137    &lt;th rowspan=2&gt;Grade.&lt;/th&gt;
   33138    &lt;th rowspan=2&gt;Yield Point.&lt;/th&gt;
   33139    &lt;th colspan=2&gt;Ultimate tensile strength&lt;/th&gt;
   33140    &lt;th rowspan=2&gt;Per cent elong. 50.8mm or 2 in.&lt;/th&gt;
   33141    &lt;th rowspan=2&gt;Per cent reduct. area.&lt;/th&gt;
   33142   &lt;/tr&gt;
   33143   &lt;tr&gt;
   33144    &lt;th&gt;kg/mm&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
   33145    &lt;th&gt;lb/in&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
   33146   &lt;/tr&gt;
   33147  &lt;/thead&gt;
   33148  &lt;tbody&gt;
   33149   &lt;tr&gt;
   33150    &lt;td&gt;Hard&lt;/td&gt;
   33151    &lt;td&gt;0.45 ultimate&lt;/td&gt;
   33152    &lt;td&gt;56.2&lt;/td&gt;
   33153    &lt;td&gt;80,000&lt;/td&gt;
   33154    &lt;td&gt;15&lt;/td&gt;
   33155    &lt;td&gt;20&lt;/td&gt;
   33156   &lt;/tr&gt;
   33157   &lt;tr&gt;
   33158    &lt;td&gt;Medium&lt;/td&gt;
   33159    &lt;td&gt;0.45 ultimate&lt;/td&gt;
   33160    &lt;td&gt;49.2&lt;/td&gt;
   33161    &lt;td&gt;70,000&lt;/td&gt;
   33162    &lt;td&gt;18&lt;/td&gt;
   33163    &lt;td&gt;25&lt;/td&gt;
   33164   &lt;/tr&gt;
   33165   &lt;tr&gt;
   33166    &lt;td&gt;Soft&lt;/td&gt;
   33167    &lt;td&gt;0.45 ultimate&lt;/td&gt;
   33168    &lt;td&gt;42.2&lt;/td&gt;
   33169    &lt;td&gt;60,000&lt;/td&gt;
   33170    &lt;td&gt;22&lt;/td&gt;
   33171    &lt;td&gt;30&lt;/td&gt;
   33172   &lt;/tr&gt;
   33173  &lt;/tbody&gt;
   33174 &lt;/table&gt;</pre>
   33175 
   33176   <p>This table could look like this:</p>
   33177 
   33178   <table id=table-example-1><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   33179    Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   33180    <thead><tr><th rowspan=2>Grade.</th>
   33181      <th rowspan=2>Yield Point.</th>
   33182      <th colspan=2>Ultimate tensile strength</th>
   33183      <th rowspan=2>Per cent elong. 50.8&nbsp;mm or&nbsp;2&nbsp;in.</th>
   33184      <th rowspan=2>Per cent reduct. area.</th>
   33185     <tr><th>kg/mm<sup>2</sup></th>
   33186      <th>lb/in<sup>2</sup></th>
   33187     <tbody><tr><td>Hard</td>
   33188      <td>0.45 ultimate</td>
   33189      <td>56.2</td>
   33190      <td>80,000</td>
   33191      <td>15</td>
   33192      <td>20</td>
   33193     <tr><td>Medium</td>
   33194      <td>0.45 ultimate</td>
   33195      <td>49.2</td>
   33196      <td>70,000</td>
   33197      <td>18</td>
   33198      <td>25</td>
   33199     <tr><td>Soft</td>
   33200      <td>0.45 ultimate</td>
   33201      <td>42.2</td>
   33202      <td>60,000</td>
   33203      <td>22</td>
   33204      <td>30</td>
   33205     </table><hr><p>The following shows how one might mark up the gross margin table
   33206   on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:</p>
   33207 
   33208   <pre>&lt;table&gt;
   33209  &lt;thead&gt;
   33210   &lt;tr&gt;
   33211    &lt;th&gt;
   33212    &lt;th&gt;2008
   33213    &lt;th&gt;2007
   33214    &lt;th&gt;2006
   33215  &lt;tbody&gt;
   33216   &lt;tr&gt;
   33217    &lt;th&gt;Net sales
   33218    &lt;td&gt;$ 32,479
   33219    &lt;td&gt;$ 24,006
   33220    &lt;td&gt;$ 19,315
   33221   &lt;tr&gt;
   33222    &lt;th&gt;Cost of sales
   33223    &lt;td&gt;  21,334
   33224    &lt;td&gt;  15,852
   33225    &lt;td&gt;  13,717
   33226  &lt;tbody&gt;
   33227   &lt;tr&gt;
   33228    &lt;th&gt;Gross margin
   33229    &lt;td&gt;$ 11,145
   33230    &lt;td&gt;$  8,154
   33231    &lt;td&gt;$  5,598
   33232  &lt;tfoot&gt;
   33233   &lt;tr&gt;
   33234    &lt;th&gt;Gross margin percentage
   33235    &lt;td&gt;34.3%
   33236    &lt;td&gt;34.0%
   33237    &lt;td&gt;29.0%
   33238 &lt;/table&gt;</pre>
   33239 
   33240 <!--HTML4POLICE-->
   33241   <p>This table could look like this:</p>
   33242 
   33243   <table class="apple-table-examples e1"><thead><tr><th>
   33244      <th>2008
   33245      <th>2007
   33246      <th>2006
   33247    <tbody><tr><th>Net sales
   33248      <td>$ 32,479
   33249      <td>$ 24,006
   33250      <td>$ 19,315
   33251     <tr><th>Cost of sales
   33252      <td>  21,334
   33253      <td>  15,852
   33254      <td>  13,717
   33255    <tbody><tr><th>Gross margin
   33256      <td>$ 11,145
   33257      <td>$  8,154
   33258      <td>$  5,598
   33259    <tfoot><tr><th>Gross margin percentage
   33260      <td>34.3%
   33261      <td>34.0%
   33262      <td>29.0%
   33263   </table><hr><p>The following shows how one might mark up the operating expenses
   33264   table from lower on the same page of that document:</p>
   33265 
   33266   <pre>&lt;table&gt;
   33267  &lt;colgroup&gt; &lt;col&gt;
   33268  &lt;colgroup&gt; &lt;col&gt; &lt;col&gt; &lt;col&gt;
   33269  &lt;thead&gt;
   33270   &lt;tr&gt; &lt;th&gt; &lt;th&gt;2008 &lt;th&gt;2007 &lt;th&gt;2006
   33271  &lt;tbody&gt;
   33272   &lt;tr&gt; &lt;th scope=rowgroup&gt; Research and development
   33273        &lt;td&gt; $ 1,109 &lt;td&gt; $ 782 &lt;td&gt; $ 712
   33274   &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
   33275        &lt;td&gt; 3.4% &lt;td&gt; 3.3% &lt;td&gt; 3.7%
   33276  &lt;tbody&gt;
   33277   &lt;tr&gt; &lt;th scope=rowgroup&gt; Selling, general, and administrative
   33278        &lt;td&gt; $ 3,761 &lt;td&gt; $ 2,963 &lt;td&gt; $ 2,433
   33279   &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
   33280        &lt;td&gt; 11.6% &lt;td&gt; 12.3% &lt;td&gt; 12.6%
   33281 &lt;/table&gt;</pre>
   33282 
   33283   <p>This table could look like this:</p>
   33284 
   33285   <table class="apple-table-examples e2"><thead><tr><th> <th>2008 <th>2007 <th>2006
   33286    <tbody><tr><th scope=rowgroup> Research and development
   33287          <td> $ 1,109 <td> $ 782 <td> $ 712
   33288     <tr><th scope=row> Percentage of net sales
   33289          <td> 3.4% <td> 3.3% <td> 3.7%
   33290    <tbody><tr><th scope=rowgroup> Selling, general, and administrative
   33291          <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
   33292     <tr><th scope=row> Percentage of net sales
   33293          <td> 11.6% <td> 12.3% <td> 12.6%
   33294   </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
   33295 
   33296   <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>
   33297 
   33298   <p><i>This section is non-normative.</i></p>
   33299 
   33300   <p>Forms allow unscripted client-server interaction: given a form, a
   33301   user can provide data, submit it to the server, and have the server
   33302   act on it accordingly (e.g. returning the results of a search or
   33303   calculation). The elements used in forms can also be used for user
   33304   interaction with no associated submission mechanism, in conjunction
   33305   with scripts.</p>
   33306 
   33307   <p>Writing a form consists of several steps, which can be performed
   33308   in any order: writing the user interface, implementing the
   33309   server-side processing, and configuring the user interface to
   33310   communicate with the server.</p>
   33311 
   33312 
   33313   <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</h5>
   33314 
   33315   <p><i>This section is non-normative.</i></p>
   33316 
   33317   <p>For the purposes of this brief introduction, we will create a
   33318   pizza ordering form.</p>
   33319 
   33320   <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
   33321   are placed the controls. Most controls are represented by the
   33322   <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
   33323   text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
   33324   used; the label text and the control itself go inside the
   33325   <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
   33326   <a href=#paragraph>paragraph</a>, and is typically separated from other parts
   33327   using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
   33328   one might ask for the customer's name:</p>
   33329 
   33330   <pre><strong>&lt;form&gt;
   33331  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33332 &lt;/form&gt;</strong></pre>
   33333 
   33334   <p>To let the user select the size of the pizza, we can use a set of
   33335   radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
   33336   element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
   33337   attribute with the value <code title=attr-input-type-radio><a href=#radio-button-state>radio</a></code>. To make the radio
   33338   buttons work as a group, they are given a common name using the
   33339   <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
   33340   of controls together, such as, in this case, the radio buttons, one
   33341   can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
   33342   of controls is given by the first element in the
   33343   <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
   33344   element.</p>
   33345 
   33346   <pre>&lt;form&gt;
   33347  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33348 <strong> &lt;fieldset&gt;
   33349   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33350   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33351   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33352   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33353  &lt;/fieldset&gt;</strong>
   33354 &lt;/form&gt;</pre>
   33355 
   33356   <p class=note>Changes from the previous step are highlighted.</p>
   33357 
   33358   <p>To pick toppings, we can use checkboxes. These use the
   33359   <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href=#checkbox-state>checkbox</a></code>:</p>
   33360 
   33361   <pre>&lt;form&gt;
   33362  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33363  &lt;fieldset&gt;
   33364   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33365   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33366   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33367   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33368  &lt;/fieldset&gt;
   33369 <strong> &lt;fieldset&gt;
   33370   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33371   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33372   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33373   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33374   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33375  &lt;/fieldset&gt;</strong>
   33376 &lt;/form&gt;</pre>
   33377 
   33378   <p>The pizzeria for which this form is being written is always
   33379   making mistakes, so it needs a way to contact the customer. For this
   33380   purpose, we can use form controls specifically for telephone numbers
   33381   (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href=#telephone-state>tel</a></code>) and e-mail addresses
   33382   (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href=#e-mail-state>email</a></code>):</p>
   33383 
   33384   <pre>&lt;form&gt;
   33385  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33386 <strong> &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
   33387  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;</strong>
   33388  &lt;fieldset&gt;
   33389   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33390   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33391   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33392   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33393  &lt;/fieldset&gt;
   33394  &lt;fieldset&gt;
   33395   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33396   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33397   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33398   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33399   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33400  &lt;/fieldset&gt;
   33401 &lt;/form&gt;</pre>
   33402 
   33403   <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href=#time-state>time</a></code> to ask for a delivery
   33404   time. Many of these form controls have attributes to control exactly
   33405   what values can be specified; in this case, three attributes of
   33406   particular interest are <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   33407   <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. These set the minimum time, the
   33408   maximum time, and the interval between allowed values (in
   33409   seconds). This pizzeria only delivers between 11am and 9pm, and
   33410   doesn't promise anything better than 15 minute increments, which we
   33411   can mark up as follows:</p>
   33412 
   33413   <pre>&lt;form&gt;
   33414  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33415  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
   33416  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
   33417  &lt;fieldset&gt;
   33418   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33419   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33420   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33421   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33422  &lt;/fieldset&gt;
   33423  &lt;fieldset&gt;
   33424   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33425   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33426   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33427   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33428   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33429  &lt;/fieldset&gt;
   33430 <strong> &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;</strong>
   33431 &lt;/form&gt;</pre>
   33432 
   33433   <p>The <code><a href=#the-textarea-element>textarea</a></code> element can be used to provide a
   33434   free-form text field. In this instance, we are going to use it to
   33435   provide a space for the customer to give delivery instructions:</p>
   33436 
   33437   <pre>&lt;form&gt;
   33438  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33439  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
   33440  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
   33441  &lt;fieldset&gt;
   33442   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33443   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33444   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33445   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33446  &lt;/fieldset&gt;
   33447  &lt;fieldset&gt;
   33448   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33449   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33450   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33451   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33452   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33453  &lt;/fieldset&gt;
   33454  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
   33455 <strong> &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;</strong>
   33456 &lt;/form&gt;</pre>
   33457 
   33458   <p>Finally, to make the form submittable we use the
   33459   <code><a href=#the-button-element>button</a></code> element:</p>
   33460 
   33461   <pre>&lt;form&gt;
   33462  &lt;p&gt;&lt;label&gt;Customer name: &lt;input&gt;&lt;/label&gt;&lt;/p&gt;
   33463  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel&gt;&lt;/label&gt;&lt;/p&gt;
   33464  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email&gt;&lt;/label&gt;&lt;/p&gt;
   33465  &lt;fieldset&gt;
   33466   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33467   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Small &lt;/label&gt;&lt;/p&gt;
   33468   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33469   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size&gt; Large &lt;/label&gt;&lt;/p&gt;
   33470  &lt;/fieldset&gt;
   33471  &lt;fieldset&gt;
   33472   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33473   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33474   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33475   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33476   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33477  &lt;/fieldset&gt;
   33478  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"&gt;&lt;/label&gt;&lt;/p&gt;
   33479  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   33480 <strong> &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;</strong>
   33481 &lt;/form&gt;</pre>
   33482 
   33483 
   33484   <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</h5>
   33485 
   33486   <p><i>This section is non-normative.</i></p>
   33487 
   33488   <p>The exact details for writing a server-side processor are out of
   33489   scope for this specification. For the purposes of this introduction,
   33490   we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
   33491   accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
   33492   format, expecting the following parameters sent in an HTTP POST
   33493   body:</p>
   33494 
   33495   <dl><dt><code title="">custname</code></dt>
   33496    <dd>Customer's name</dd>
   33497 
   33498    <dt><code title="">custtel</code></dt>
   33499    <dd>Customer's telephone number</dd>
   33500 
   33501    <dt><code title="">custemail</code></dt>
   33502    <dd>Customer's e-mail address</dd>
   33503 
   33504    <dt><code title="">size</code></dt>
   33505    <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
   33506 
   33507    <dt><code title="">toppings</code></dt>
   33508    <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>
   33509 
   33510    <dt><code title="">delivery</code></dt>
   33511    <dd>The requested delivery time</dd>
   33512 
   33513    <dt><code title="">comments</code></dt>
   33514    <dd>The delivery instructions</dd>
   33515 
   33516   </dl><h5 id=configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</h5>
   33517 
   33518   <p><i>This section is non-normative.</i></p>
   33519 
   33520   <p>Form submissions are exposed to servers in a variety of ways,
   33521   most commonly as HTTP GET or POST requests. To specify the exact
   33522   method used, the <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
   33523   attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
   33524   doesn't specify how the form data is encoded, though; to specify
   33525   that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
   33526   attribute. You also have to specify the <a href=#url>URL</a> of the
   33527   service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
   33528 
   33529   <p>For each form control you want submitted, you then have to give a
   33530   name that will be used to refer to the data in the submission. We
   33531   already specified the name for the group of radio buttons; the same
   33532   attribute (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
   33533   the submission name. Radio buttons can be distinguished from each
   33534   other in the submission by giving them different values, using the
   33535   <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
   33536 
   33537   <p>Multiple controls can have the same name; for example, here we
   33538   give all the checkboxes the same name, and the server distinguishes
   33539   which checkbox was checked by seeing which values are submitted with
   33540   that name &mdash; like the radio buttons, they are also given unique
   33541   values with the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   33542   attribute.</p>
   33543 
   33544   <p>Given the settings in the previous section, this all becomes:</p>
   33545 
   33546   <pre>&lt;form<strong> method="post"
   33547       enctype="application/x-www-form-urlencoded"
   33548       action="https://pizza.example.com/order.cgi"</strong>&gt;
   33549  &lt;p&gt;&lt;label&gt;Customer name: &lt;input<strong> name="custname"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33550  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel<strong> name="custtel"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33551  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email<strong> name="custemail"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33552  &lt;fieldset&gt;
   33553   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33554   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="small"</strong>&gt; Small &lt;/label&gt;&lt;/p&gt;
   33555   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="medium"</strong>&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33556   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size<strong> value="large"</strong>&gt; Large &lt;/label&gt;&lt;/p&gt;
   33557  &lt;/fieldset&gt;
   33558  &lt;fieldset&gt;
   33559   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33560   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="bacon"</strong>&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33561   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="cheese"</strong>&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33562   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="onion"</strong>&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33563   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox<strong> name="topping" value="mushroom"</strong>&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33564  &lt;/fieldset&gt;
   33565  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33566  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea<strong> name="comments"</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   33567  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
   33568 &lt;/form&gt;</pre>
   33569 
   33570   <p>For example, if the customer entered "Denise Lawrence" as their
   33571   name, "555-321-8642" as their telephone number, did not specify an
   33572   e-mail address, asked for a medium-sized pizza, selected the Extra
   33573   Cheese and Mushroom toppings, entered a delivery time of 7pm, and
   33574   left the delivery instructions text field blank, the user agent
   33575   would submit the following to the online Web service:</p>
   33576 
   33577   <pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;comments=</pre>
   33578 
   33579 
   33580 
   33581   <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</h5>
   33582 
   33583   <p><i>This section is non-normative.</i></p>
   33584 
   33585   <p>Forms can be annotated in such a way that the user agent will
   33586   check the user's input before the form is submitted. The server
   33587   still has to verify the input is valid (since hostile users can
   33588   easily bypass the form validation), but it allows the user to avoid
   33589   the wait incurred by having the server be the sole checker of the
   33590   user's input.</p>
   33591 
   33592   <p>The simplest annotation is the <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute, which can be
   33593   specified on <code><a href=#the-input-element>input</a></code> elements to indicate that the form
   33594   is not to be submitted until a value is given. By adding this
   33595   attribute to the customer name and delivery time fields, we allow
   33596   the user agent to notify the user when the user submits the form
   33597   without filling in those fields:</p>
   33598 
   33599   <pre>&lt;form method="post"
   33600       enctype="application/x-www-form-urlencoded"
   33601       action="https://pizza.example.com/order.cgi"&gt;
   33602  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33603  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
   33604  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
   33605  &lt;fieldset&gt;
   33606   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33607   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
   33608   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33609   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
   33610  &lt;/fieldset&gt;
   33611  &lt;fieldset&gt;
   33612   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33613   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33614   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33615   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33616   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33617  &lt;/fieldset&gt;
   33618  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>&gt;&lt;/label&gt;&lt;/p&gt;
   33619  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   33620  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
   33621 &lt;/form&gt;</pre>
   33622 
   33623   <p>It is also possible to limit the length of the input, using the
   33624   <code title=attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute. By
   33625   adding this to the <code><a href=#the-textarea-element>textarea</a></code> element, we can limit users
   33626   to 1000 characters, preventing them from writing huge essays to the
   33627   busy delivery drivers instead of staying focused and to the
   33628   point:</p>
   33629 
   33630   <pre>&lt;form method="post"
   33631       enctype="application/x-www-form-urlencoded"
   33632       action="https://pizza.example.com/order.cgi"&gt;
   33633  &lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required&gt;&lt;/label&gt;&lt;/p&gt;
   33634  &lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel"&gt;&lt;/label&gt;&lt;/p&gt;
   33635  &lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail"&gt;&lt;/label&gt;&lt;/p&gt;
   33636  &lt;fieldset&gt;
   33637   &lt;legend&gt; Pizza Size &lt;/legend&gt;
   33638   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
   33639   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
   33640   &lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
   33641  &lt;/fieldset&gt;
   33642  &lt;fieldset&gt;
   33643   &lt;legend&gt; Pizza Toppings &lt;/legend&gt;
   33644   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
   33645   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
   33646   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
   33647   &lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
   33648  &lt;/fieldset&gt;
   33649  &lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
   33650  &lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments"<strong> maxlength=1000</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   33651  &lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;p&gt;
   33652 &lt;/form&gt;</pre>
   33653 
   33654 
   33655 
   33656 
   33657   <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>
   33658 
   33659   <p>Mostly for historical reasons, elements in this section fall into
   33660   several overlapping (but subtly different) categories in addition to
   33661   the usual ones like <a href=#flow-content>flow content</a>, <a href=#phrasing-content>phrasing
   33662   content</a>, and <a href=#interactive-content>interactive content</a>.</p>
   33663 
   33664   <p>A number of the elements are <dfn id=form-associated-element title="form-associated
   33665   element">form-associated elements</dfn>, which means they can have a
   33666   <a href=#form-owner>form owner</a> and, to expose this, have a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content attribute with a matching
   33667   <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute.</p>
   33668 
   33669   <!-- when updating this also update the category index -->
   33670   <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
   33671    <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   33672    <li><code><a href=#the-input-element>input</a></code></li>
   33673    <li><code><a href=#the-keygen-element>keygen</a></code></li>
   33674    <li><code><a href=#the-label-element>label</a></code></li>
   33675    <li><code><a href=#the-meter-element>meter</a></code></li>
   33676    <li><code><a href=#the-object-element>object</a></code></li>
   33677    <li><code><a href=#the-output-element>output</a></code></li>
   33678    <li><code><a href=#the-progress-element>progress</a></code></li>
   33679    <li><code><a href=#the-select-element>select</a></code></li>
   33680    <li><code><a href=#the-textarea-element>textarea</a></code></li>
   33681   </ul><p>The <a href=#form-associated-element title="form-associated element">form-associated
   33682   elements</a> fall into several subcategories:</p>
   33683 
   33684   <dl><dt><dfn id=category-listed title=category-listed>Listed elements</dfn></dt>
   33685 
   33686    <dd>
   33687 
   33688     <p>Denotes elements that are listed in the <code title=dom-form-elements><a href=#dom-form-elements><var title="">form</var>.elements</a></code>
   33689     and <code title=dom-fieldset-elements><a href=#dom-fieldset-elements><var title="">fieldset</var>.elements</a></code> APIs.</p>
   33690 
   33691     <!-- when updating this also update the category index -->
   33692     <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
   33693      <li><code><a href=#the-fieldset-element>fieldset</a></code></li>
   33694      <li><code><a href=#the-input-element>input</a></code></li>
   33695      <li><code><a href=#the-keygen-element>keygen</a></code></li>
   33696      <li><code><a href=#the-object-element>object</a></code></li>
   33697      <li><code><a href=#the-output-element>output</a></code></li>
   33698      <li><code><a href=#the-select-element>select</a></code></li>
   33699      <li><code><a href=#the-textarea-element>textarea</a></code></li>
   33700     </ul></dd>
   33701 
   33702    <dt><dfn id=category-label title=category-label>Labelable elements</dfn></dt>
   33703 
   33704    <dd>
   33705 
   33706     <p>Denotes elements that can be associated with <code><a href=#the-label-element>label</a></code>
   33707     elements.</p>
   33708 
   33709     <!-- when updating this also update the category index -->
   33710     <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
   33711      <li><code><a href=#the-input-element>input</a></code></li>
   33712      <li><code><a href=#the-keygen-element>keygen</a></code></li>
   33713      <li><code><a href=#the-meter-element>meter</a></code></li>
   33714      <li><code><a href=#the-output-element>output</a></code></li>
   33715      <li><code><a href=#the-progress-element>progress</a></code></li>
   33716      <li><code><a href=#the-select-element>select</a></code></li>
   33717      <li><code><a href=#the-textarea-element>textarea</a></code></li>
   33718     </ul></dd>
   33719 
   33720    <dt><dfn id=category-submit title=category-submit>Submittable elements</dfn></dt>
   33721 
   33722    <dd>
   33723 
   33724     <p>Denotes elements that can be used for <a href=#constructing-form-data-set>constructing the form data
   33725     set</a> when a <code><a href=#the-form-element>form</a></code> element is <a href=#concept-form-submit title=concept-form-submit>submitted</a>.</p>
   33726 
   33727     <!-- when updating this also update the category index -->
   33728     <ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
   33729      <li><code><a href=#the-input-element>input</a></code></li>
   33730      <li><code><a href=#the-keygen-element>keygen</a></code></li>
   33731      <li><code><a href=#the-object-element>object</a></code></li>
   33732      <li><code><a href=#the-select-element>select</a></code></li>
   33733      <li><code><a href=#the-textarea-element>textarea</a></code></li>
   33734     </ul></dd>
   33735 
   33736    <dt><dfn id=category-reset title=category-reset>Resettable elements</dfn></dt>
   33737 
   33738    <dd>
   33739 
   33740     <p>Denotes elements that can be affected when a <code><a href=#the-form-element>form</a></code>
   33741     element is <a href=#concept-form-reset title=concept-form-reset>reset</a>.</p>
   33742 
   33743     <!-- when updating this also update the category index -->
   33744     <ul class="brief category-list"><li><code><a href=#the-input-element>input</a></code></li>
   33745      <li><code><a href=#the-keygen-element>keygen</a></code></li>
   33746      <li><code><a href=#the-output-element>output</a></code></li>
   33747      <li><code><a href=#the-select-element>select</a></code></li>
   33748      <li><code><a href=#the-textarea-element>textarea</a></code></li>
   33749     </ul></dd>
   33750 
   33751   </dl><p>In addition, some <a href=#category-submit title=category-submit>submittable
   33752   elements</a> can be, depending on their attributes, <dfn id=concept-button title=concept-button>buttons</dfn>. The prose below defines when
   33753   an element is a button. Some buttons are specifically <dfn id=concept-submit-button title=concept-submit-button>submit buttons</dfn>.</p>
   33754 
   33755   <p class=note>The <code><a href=#the-object-element>object</a></code> element is also a
   33756   <a href=#form-associated-element>form-associated element</a> and can, with the use of a
   33757   suitable <a href=#plugin>plugin</a>, partake in <a href=#form-submission>form
   33758   submission</a>.</p>
   33759 
   33760 
   33761   <h4 id=the-form-element><span class=secno>4.10.3 </span>The <dfn><code>form</code></dfn> element</h4>
   33762 
   33763   <dl class=element><dt>Categories</dt>
   33764    <dd><a href=#flow-content>Flow content</a>.</dd>
   33765    <dt>Contexts in which this element may be used:</dt>
   33766    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   33767    <dt>Content model:</dt>
   33768    <dd><a href=#flow-content>Flow content</a>, but with no <code><a href=#the-form-element>form</a></code> element descendants.</dd>
   33769    <dt>Content attributes:</dt>
   33770    <dd><a href=#global-attributes>Global attributes</a></dd>
   33771    <dd><code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code></dd>
   33772    <dd><code title=attr-fs-action><a href=#attr-fs-action>action</a></code></dd>
   33773    <dd><code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code></dd>
   33774    <dd><code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code></dd>
   33775    <dd><code title=attr-fs-method><a href=#attr-fs-method>method</a></code></dd>
   33776    <dd><code title=attr-form-name><a href=#attr-form-name>name</a></code></dd>
   33777    <dd><code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code></dd>
   33778    <dd><code title=attr-fs-target><a href=#attr-fs-target>target</a></code></dd>
   33779    <dt>DOM interface:</dt>
   33780    <dd>
   33781 <pre class=idl>[OverrideBuiltins]
   33782 interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   33783            attribute DOMString <a href=#dom-form-acceptcharset title=dom-form-acceptCharset>acceptCharset</a>;
   33784            attribute DOMString <a href=#dom-fs-action title=dom-fs-action>action</a>;
   33785            attribute DOMString <a href=#dom-form-autocomplete title=dom-form-autocomplete>autocomplete</a>;
   33786            attribute DOMString <a href=#dom-fs-enctype title=dom-fs-enctype>enctype</a>;
   33787            attribute DOMString <a href=#dom-fs-method title=dom-fs-method>method</a>;
   33788            attribute DOMString <a href=#dom-form-name title=dom-form-name>name</a>;
   33789            attribute boolean <a href=#dom-fs-novalidate title=dom-fs-noValidate>noValidate</a>;
   33790            attribute DOMString <a href=#dom-fs-target title=dom-fs-target>target</a>;
   33791 
   33792   readonly attribute <a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a> <a href=#dom-form-elements title=dom-form-elements>elements</a>;
   33793   readonly attribute long <a href=#dom-form-length title=dom-form-length>length</a>;
   33794   caller getter any <a href=#dom-form-item title=dom-form-item>item</a>(in unsigned long index);
   33795   caller getter any <a href=#dom-form-nameditem title=dom-form-namedItem>namedItem</a>(in DOMString name);
   33796 
   33797   void <a href=#dom-form-submit title=dom-form-submit>submit</a>();
   33798   void <a href=#dom-form-reset title=dom-form-reset>reset</a>();
   33799   boolean <a href=#dom-form-checkvalidity title=dom-form-checkValidity>checkValidity</a>();
   33800 
   33801   void <a href=#dom-form-dispatchforminput title=dom-form-dispatchFormInput>dispatchFormInput</a>();
   33802   void <a href=#dom-form-dispatchformchange title=dom-form-dispatchFormChange>dispatchFormChange</a>();
   33803 };</pre>
   33804    </dd>
   33805   </dl><p>The <code><a href=#the-form-element>form</a></code> element <a href=#represents>represents</a> a
   33806   collection of <a href=#form-associated-element title="form-associated element">form-associated
   33807   elements</a>, some of which can represent editable values that
   33808   can be submitted to a server for processing.</p>
   33809 
   33810   <p>The <dfn id=attr-form-accept-charset title=attr-form-accept-charset><code>accept-charset</code></dfn>
   33811   attribute gives the character encodings that are to be used for the
   33812   submission. If specified, the value must be an <a href=#ordered-set-of-unique-space-separated-tokens>ordered set of
   33813   unique space-separated tokens</a>, and each token must be an
   33814   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the <a href=#preferred-mime-name>preferred
   33815   MIME name</a> of an <a href=#ascii-compatible-character-encoding>ASCII-compatible character
   33816   encoding</a>. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   33817 
   33818   <p>The <dfn id=attr-form-name title=attr-form-name><code>name</code></dfn> attribute
   33819   represents the <code><a href=#the-form-element>form</a></code>'s name within the <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code> collection. The value must
   33820   not be the empty string, and the value must be unique amongst the
   33821   <code><a href=#the-form-element>form</a></code> elements in the <code title=dom-document-forms><a href=#dom-document-forms>forms</a></code> collection that it is in, if
   33822   any.</p>
   33823 
   33824   <p>The <dfn id=attr-form-autocomplete title=attr-form-autocomplete><code>autocomplete</code></dfn>
   33825   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
   33826   two states. The <code title=attr-form-autocomplete-on>on</code>
   33827   keyword maps to the <dfn id=attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</dfn> state, and the
   33828   <code title=attr-form-autocomplete-off>off</code> keyword maps to
   33829   the <dfn id=attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</dfn>
   33830   state. The attribute may also be omitted. The <i>missing value
   33831   default</i> is the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state. The <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a> state indicates
   33832   that by default, <code><a href=#the-input-element>input</a></code> elements in the form will have
   33833   their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">off</i>; the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state indicates
   33834   that by default, <code><a href=#the-input-element>input</a></code> elements in the form will have
   33835   their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">on</i>.</p>
   33836 
   33837   <p>The <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> attributes are <a href=#attributes-for-form-submission>attributes
   33838   for form submission</a>.</p>
   33839 
   33840   <dl class=domintro><dt><var title="">form</var> . <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code></dt>
   33841 
   33842    <dd>
   33843 
   33844     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the form controls in
   33845     the form (excluding image buttons for historical reasons).</p>
   33846 
   33847    </dd>
   33848 
   33849    <dt><var title="">form</var> . <code title=dom-form-length><a href=#dom-form-length>length</a></code></dt>
   33850 
   33851    <dd>
   33852 
   33853     <p>Returns the number of form controls in the form (excluding
   33854     image buttons for historical reasons).</p>
   33855 
   33856    </dd>
   33857 
   33858    <dt><var title="">element</var> = <var title="">form</var> . <code title=dom-form-item><a href=#dom-form-item>item</a></code>(<var title="">index</var>)</dt>
   33859    <dt><var title="">form</var>[<var title="">index</var>]</dt>
   33860    <dt><var title="">form</var>(<var title="">index</var>)</dt>
   33861 
   33862    <dd>
   33863 
   33864     <p>Returns the <var title="">index</var>th element in the form
   33865     (excluding image buttons for historical reasons).</p>
   33866 
   33867    </dd>
   33868 
   33869    <dt><var title="">element</var> = <var title="">form</var> . <code title=dom-form-namedItem><a href=#dom-form-nameditem>namedItem</a></code>(<var title="">name</var>)</dt>
   33870    <dt><var title="">form</var>[<var title="">name</var>]</dt>
   33871    <dt><var title="">form</var>(<var title="">name</var>)</dt>
   33872 
   33873    <dd>
   33874 
   33875     <p>Returns the form control in the form with the given ID or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> (excluding image buttons for
   33876     historical reasons).</p>
   33877 
   33878     <p>Once an element has been referenced using a particular name,
   33879     that name will continue being available as a way to reference that
   33880     element in this method, even if the element's actual ID or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> changes, for as long as the
   33881     element remains in the <code><a href=#document>Document</a></code>.</p>
   33882 
   33883     <p>If there are multiple matching items, then a
   33884     <code><a href=#nodelist>NodeList</a></code> object containing all those elements is
   33885     returned.</p>
   33886 
   33887     <p>Returns null if no element with that <a href=#concept-id title=concept-id>ID</a> or <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> could be found.</p>
   33888 
   33889    </dd>
   33890 
   33891    <dt><var title="">form</var> . <code title=dom-form-submit><a href=#dom-form-submit>submit</a></code>()</dt>
   33892 
   33893    <dd>
   33894 
   33895     <p>Submits the form.</p>
   33896 
   33897    </dd>
   33898 
   33899    <dt><var title="">form</var> . <code title=dom-form-reset><a href=#dom-form-reset>reset</a></code>()</dt>
   33900 
   33901    <dd>
   33902 
   33903     <p>Resets the form.</p>
   33904 
   33905    </dd>
   33906 
   33907    <dt><var title="">form</var> . <code title=dom-form-checkValidity><a href=#dom-form-checkvalidity>checkValidity</a></code>()</dt>
   33908 
   33909    <dd>
   33910 
   33911     <p>Returns true if the form's controls are all valid; otherwise,
   33912     returns false.</p>
   33913 
   33914    </dd>
   33915 
   33916    <dt><var title="">form</var> . <code title=dom-form-dispatchFormInput><a href=#dom-form-dispatchforminput>dispatchFormInput</a></code>()</dt>
   33917 
   33918    <dd>
   33919 
   33920     <p>Dispatches a <code title=event-forminput>forminput</code> event at all the form controls.</p>
   33921 
   33922    </dd>
   33923 
   33924    <dt><var title="">form</var> . <code title=dom-form-dispatchFormChange><a href=#dom-form-dispatchformchange>dispatchFormChange</a></code>()</dt>
   33925 
   33926    <dd>
   33927 
   33928     <p>Dispatches a <code title=event-formchange>formchange</code> event at all the form controls.</p>
   33929 
   33930    </dd>
   33931 
   33932   </dl><div class=impl>
   33933 
   33934   <p>The <dfn id=dom-form-autocomplete title=dom-form-autocomplete><code>autocomplete</code></dfn> and
   33935   <dfn id=dom-form-name title=dom-form-name><code>name</code></dfn> IDL attributes
   33936   must <a href=#reflect>reflect</a> the respective content attributes of the
   33937   same name.</p>
   33938 
   33939   <p>The <dfn id=dom-form-acceptcharset title=dom-form-acceptCharset><code>acceptCharset</code></dfn> IDL
   33940   attribute must <a href=#reflect>reflect</a> the <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> content
   33941   attribute.</p>
   33942 
   33943   <hr><p>The <dfn id=dom-form-elements title=dom-form-elements><code>elements</code></dfn>
   33944   IDL attribute must return an <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>
   33945   rooted at the <code><a href=#document>Document</a></code> node, whose filter matches <a href=#category-listed title=category-listed>listed elements</a> whose <a href=#form-owner>form
   33946   owner</a> is the <code><a href=#the-form-element>form</a></code> element, with the exception of
   33947   <code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, which must,
   33948   for historical reasons, be excluded from this particular
   33949   collection.</p>
   33950 
   33951   <p>The <dfn id=dom-form-length title=dom-form-length><code>length</code></dfn> IDL
   33952   attribute must return the number of nodes <a href=#represented-by-the-collection title="represented
   33953   by the collection">represented</a> by the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> collection.</p>
   33954 
   33955   <p>The
   33956   <span>indices of the supported indexed properties</span> at any
   33957   instant are the indices supported by the object returned by the
   33958   <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute at that
   33959   instant.</p>
   33960 
   33961   <p>The <dfn id=dom-form-item title=dom-form-item><code>item(<var title="">index</var>)</code></dfn> method must return the value
   33962   returned by the method of the same name on the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> collection, when invoked
   33963   with the same argument.</p>
   33964 
   33965   <p>Each <code><a href=#the-form-element>form</a></code> element has a mapping of names to elements
   33966   called the <dfn id=past-names-map>past names map</dfn>. It is used to persist names of
   33967   controls even when they change names.</p>
   33968 
   33969   <p>The <span>names of the supported named properties</span> are the
   33970   union of the names currently supported by the object returned by the
   33971   <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute, and the
   33972   names currently in the <a href=#past-names-map>past names map</a>.</p>
   33973 
   33974   <p>The <dfn id=dom-form-nameditem title=dom-form-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method, when called, must run the
   33975   following steps:</p>
   33976 
   33977   <ol><li>
   33978 
   33979     <p>If <var title="">name</var> is one of the <span>names of the
   33980     supported named properties</span> of the object returned by the
   33981     <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute, then
   33982     run these substeps:</p>
   33983 
   33984     <ol><li><p>Let <var title="">candidate</var> be the object returned
   33985      by the <code title=dom-HTMLFormControlsCollection-namedItem><a href=#dom-htmlformcontrolscollection-nameditem>namedItem()</a></code>
   33986      method on the object returned by the <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> attribute when passed
   33987      the <var title="">name</var> argument.</li>
   33988 
   33989      <li><p>If <var title="">candidate</var> is an element, then add a
   33990      mapping from <var title="">name</var> to <var title="">candidate</var> in the <code><a href=#the-form-element>form</a></code> element's
   33991      <a href=#past-names-map>past names map</a>, replacing the previous entry with
   33992      the same name, if any.</li>
   33993 
   33994      <li><p>Return <var title="">candidate</var> and abort these
   33995      steps.</li>
   33996 
   33997     </ol></li>
   33998 
   33999    <li><p>Otherwise, <var title="">name</var> is the name of one of
   34000    the entries in the <code><a href=#the-form-element>form</a></code> element's <a href=#past-names-map>past names
   34001    map</a>: return the object associated with <var title="">name</var> in that map.</li>
   34002 
   34003   </ol><p>If an element listed in the <code><a href=#the-form-element>form</a></code> element's <a href=#past-names-map>past
   34004   names map</a> is removed from the <code><a href=#document>Document</a></code>, then its
   34005   entries must be removed from the map.</p>
   34006 
   34007   <!--
   34008     This ridiculous setup is intended to do as much of the right thing
   34009     while still supporting code written to work in IE7. IE versions
   34010     prior to IE8 do not update the names on the <form> element
   34011     collection to match new names when elements are renamed, and there
   34012     are enough pages that rename elements and then access them by
   34013     their old name that we have to support this.
   34014 
   34015     But we still want to expose them using the new names, so as far as
   34016     possible we pretend the legacy names aren't there except if
   34017     there's no other element actually named that way.
   34018 
   34019     Removing the element did remove the legacy name in IE7:
   34020     http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Dsubmit%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w(document.forms%5B0%5D.submit)%3B%0A%20w(document.forms%5B0%5D.removeChild(document.getElementsByTagName('input')%5B0%5D))%3B%0A%20w(document.forms%5B0%5D.length)%3B%0A%20try%20%7B%20document.forms%5B0%5D.submit()%3B%20%7D%20catch%20(e)%20%20%7B%20w(e.message)%20%7D%0A%3C%2Fscript%3E
   34021 
   34022     There's no interop on what happens when the name was originally a
   34023     duplicate name, so we don't persist such accesses - at the time
   34024     of writing, Safari returned the first element, Firefox returned
   34025     null (as we do), and IE7 returned the original collection:
   34026     http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E...%3Cform%20action%3D%22%2F%22%3E%3Cinput%20name%3Da%20id%3Dfirst%3E%3Cinput%20name%3Da%20id%3Dsecond%3E%3C%2Fform%3E%0A%3Cscript%3E%0A%20w%28document.forms[0].a%29%3B%0A%20document.getElementsByTagName%28%27input%27%29[0].name%20%3D%20%27b%27%3B%0A%20document.getElementsByTagName%28%27input%27%29[1].name%20%3D%20%27b%27%3B%0A%20w%28document.forms[0].length%29%3B%0A%20w%28document.forms[0].a.id%29%3B%0A%3C%2Fscript%3E
   34027   -->
   34028 
   34029   <hr><p>The <dfn id=dom-form-submit title=dom-form-submit><code>submit()</code></dfn>
   34030   method, when invoked, must <a href=#concept-form-submit title=concept-form-submit>submit</a> the <code><a href=#the-form-element>form</a></code>
   34031   element from the <code><a href=#the-form-element>form</a></code> element itself, with the <var title="">scripted-submit</var> flag set.</p>
   34032 
   34033   <p>The <dfn id=dom-form-reset title=dom-form-reset><code>reset()</code></dfn>
   34034   method, when invoked, must run the following steps:</p>
   34035 
   34036   <ol><li><p>If the <code><a href=#the-form-element>form</a></code> element is marked as <i><a href=#locked-for-reset>locked for
   34037    reset</a></i>, then abort these steps.</li>
   34038 
   34039    <li><p>Mark the <code><a href=#the-form-element>form</a></code> element as <dfn id=locked-for-reset>locked for
   34040    reset</dfn>.</li>
   34041 
   34042    <li><p><a href=#concept-form-reset title=concept-form-reset>Reset</a> the
   34043    <code><a href=#the-form-element>form</a></code> element.</li>
   34044 
   34045    <li><p>Unmark the <code><a href=#the-form-element>form</a></code> element as <i><a href=#locked-for-reset>locked for
   34046    reset</a></i>.</li>
   34047 
   34048   </ol><p>If the <dfn id=dom-form-checkvalidity title=dom-form-checkValidity><code>checkValidity()</code></dfn>
   34049   method is invoked, the user agent must <a href=#statically-validate-the-constraints>statically validate the
   34050   constraints</a> of the <code><a href=#the-form-element>form</a></code> element, and return true
   34051   if the constraint validation return a <i>positive</i> result, and
   34052   false if it returned a <i>negative</i> result.</p>
   34053 
   34054   <p>If the <dfn id=dom-form-dispatchforminput title=dom-form-dispatchFormInput><code>dispatchFormInput()</code></dfn>
   34055   method is invoked, the user agent must <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> from the
   34056   <code><a href=#the-form-element>form</a></code> element.</p>
   34057 
   34058   <p>If the <dfn id=dom-form-dispatchformchange title=dom-form-dispatchFormChange><code>dispatchFormChange()</code></dfn>
   34059   method is invoked, the user agent must <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> from the
   34060   <code><a href=#the-form-element>form</a></code> element.</p>
   34061 
   34062   </div>
   34063 
   34064   <div class=example>
   34065 
   34066    <p>This example shows two search forms:</p>
   34067 
   34068    <pre>&lt;form action="http://www.google.com/search" method="get"&gt;
   34069  &lt;label&gt;Google: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
   34070 &lt;/form&gt;
   34071 &lt;form action="http://www.bing.com/search" method="get"&gt;
   34072  &lt;label&gt;Bing: &lt;input type="search" name="q"&gt;&lt;/label&gt; &lt;input type="submit" value="Search..."&gt;
   34073 &lt;/form&gt;</pre>
   34074 
   34075   </div>
   34076 
   34077 
   34078 
   34079 
   34080   <h4 id=the-fieldset-element><span class=secno>4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4>
   34081 
   34082   <dl class=element><dt>Categories</dt>
   34083    <dd><a href=#flow-content>Flow content</a>.</dd>
   34084    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   34085    <dd><a href=#category-listed title=category-listed>Listed</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   34086    <dt>Contexts in which this element may be used:</dt>
   34087    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   34088    <dt>Content model:</dt>
   34089    <dd>Optionally a <code><a href=#the-legend-element>legend</a></code> element, followed by <a href=#flow-content>flow content</a>.</dd>
   34090    <dt>Content attributes:</dt>
   34091    <dd><a href=#global-attributes>Global attributes</a></dd>
   34092    <dd><code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code></dd>
   34093    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   34094    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   34095    <dt>DOM interface:</dt>
   34096    <dd>
   34097 <pre class=idl>interface <dfn id=htmlfieldsetelement>HTMLFieldSetElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   34098            attribute boolean <a href=#dom-fieldset-disabled title=dom-fieldset-disabled>disabled</a>;
   34099   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   34100            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   34101 
   34102   readonly attribute DOMString <a href=#dom-fieldset-type title=dom-fieldset-type>type</a>;
   34103 
   34104   readonly attribute <a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a> <a href=#dom-fieldset-elements title=dom-fieldset-elements>elements</a>;
   34105 
   34106   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   34107   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   34108   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   34109   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   34110   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   34111 };</pre>
   34112    </dd>
   34113   </dl><p>The <code><a href=#the-fieldset-element>fieldset</a></code> element <a href=#represents>represents</a> a set
   34114   of form controls optionally grouped under a common name.</p>
   34115 
   34116   <p>The name of the group is given by the first <code><a href=#the-legend-element>legend</a></code>
   34117   element that is a child of the <code><a href=#the-fieldset-element>fieldset</a></code> element, if
   34118   any. The remainder of the descendants form the group.</p>
   34119 
   34120   <p>The <dfn id=attr-fieldset-disabled title=attr-fieldset-disabled><code>disabled</code></dfn>
   34121   attribute, when specified, causes all the form control descendants
   34122   of the <code><a href=#the-fieldset-element>fieldset</a></code> element, excluding those that are
   34123   descendants of the <code><a href=#the-fieldset-element>fieldset</a></code> element's first
   34124   <code><a href=#the-legend-element>legend</a></code> element child, if any, to be <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>
   34125 
   34126   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   34127   explicitly associate the <code><a href=#the-fieldset-element>fieldset</a></code> element with its
   34128   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   34129   attribute represents the element's name.</p>
   34130 
   34131   <dl class=domintro><dt><var title="">fieldset</var> . <code title=dom-fieldset-type><a href=#dom-fieldset-type>type</a></code></dt>
   34132 
   34133    <dd>
   34134 
   34135     <p>Returns the string "fieldset".</p>
   34136 
   34137    </dd>
   34138 
   34139    <dt><var title="">fieldset</var> . <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code></dt>
   34140 
   34141    <dd>
   34142 
   34143     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the form controls in
   34144     the element.</p>
   34145 
   34146    </dd>
   34147 
   34148   </dl><div class=impl>
   34149 
   34150   <p>The <dfn id=dom-fieldset-disabled title=dom-fieldset-disabled><code>disabled</code></dfn> IDL
   34151   attribute must <a href=#reflect>reflect</a> the content attribute of the
   34152   same name.</p>
   34153 
   34154   <p>The <dfn id=dom-fieldset-type title=dom-fieldset-type><code>type</code></dfn> IDL
   34155   attribute must return the string "<code title="">fieldset</code>".</p>
   34156 
   34157   <p>The <dfn id=dom-fieldset-elements title=dom-fieldset-elements><code>elements</code></dfn> IDL
   34158   attribute must return an <code><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code>
   34159   rooted at the <code><a href=#the-fieldset-element>fieldset</a></code> element, whose filter matches
   34160   <a href=#category-listed title=category-listed>listed elements</a>.</p>
   34161 
   34162   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   34163   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   34164   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   34165   <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   34166   element's forms API.</p>
   34167 
   34168   <p><strong>Constraint validation</strong>: <code><a href=#the-fieldset-element>fieldset</a></code>
   34169   elements are always <a href=#barred-from-constraint-validation>barred from constraint
   34170   validation</a>.</p>
   34171 
   34172   </div>
   34173 
   34174   <div class=example>
   34175 
   34176    <p>The following snippet shows a fieldset with a checkbox in the
   34177    legend that controls whether or not the fieldset is enabled. The
   34178    contents of the fieldset consist of two required text fields and an
   34179    optional year/month control.</p>
   34180 
   34181    <pre>&lt;fieldset name="clubfields" disabled&gt;
   34182  &lt;legend&gt; &lt;label&gt;
   34183   &lt;input type=checkbox name=club onchange="form.clubfields.disabled = !checked"&gt;
   34184   Use Club Card
   34185  &lt;/label&gt; &lt;/legend&gt;
   34186  &lt;p&gt;&lt;label&gt;Name on card: &lt;input name=clubname required&gt;&lt;/label&gt;&lt;/p&gt;
   34187  &lt;p&gt;&lt;label&gt;Card number: &lt;input name=clubnum required pattern="[-0-9]+"&gt;&lt;/label&gt;&lt;/p&gt;
   34188  &lt;p&gt;&lt;label&gt;Expiry date: &lt;input name=clubexp type=month&gt;&lt;/label&gt;&lt;/p&gt;
   34189 &lt;/fieldset&gt;</pre>
   34190 
   34191   </div>
   34192 
   34193 
   34194   <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>
   34195 
   34196   <dl class=element><dt>Categories</dt>
   34197    <dd>None.</dd>
   34198    <dt>Contexts in which this element may be used:</dt>
   34199    <dd>As the first child of a <code><a href=#the-fieldset-element>fieldset</a></code> element.</dd>
   34200    <dt>Content model:</dt>
   34201    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   34202    <dt>Content attributes:</dt>
   34203    <dd><a href=#global-attributes>Global attributes</a></dd>
   34204    <dt>DOM interface:</dt>
   34205    <dd>
   34206     <pre class=idl>interface <dfn id=htmllegendelement>HTMLLegendElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   34207   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-legend-form title=dom-legend-form>form</a>;
   34208 };</pre>
   34209    </dd>
   34210   </dl><p>The <code><a href=#the-legend-element>legend</a></code> element <a href=#represents>represents</a> a caption
   34211   for the rest of the contents of the <code><a href=#the-legend-element>legend</a></code> element's
   34212   parent <code><a href=#the-fieldset-element>fieldset</a></code> element<span class=impl>, if
   34213   any</span>.</p>
   34214 
   34215   <dl class=domintro><dt><var title="">legend</var> . <code title=dom-legend-form><a href=#dom-legend-form>form</a></code></dt>
   34216 
   34217    <dd>
   34218 
   34219     <p>Returns the element's <code><a href=#the-form-element>form</a></code> element, if any, or
   34220     null otherwise.</p>
   34221 
   34222    </dd>
   34223 
   34224   </dl><div class=impl>
   34225 
   34226   <p>The <dfn id=dom-legend-form title=dom-legend-form><code>form</code></dfn> IDL
   34227   attribute's behavior depends on whether the <code><a href=#the-legend-element>legend</a></code>
   34228   element is in a <code><a href=#the-fieldset-element>fieldset</a></code> element or not. If the
   34229   <code><a href=#the-legend-element>legend</a></code> has a <code><a href=#the-fieldset-element>fieldset</a></code> element as its
   34230   parent, then the <code title=dom-legend-form><a href=#dom-legend-form>form</a></code> IDL
   34231   attribute must return the same value as the <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute on that
   34232   <code><a href=#the-fieldset-element>fieldset</a></code> element. Otherwise, it must return null.</p>
   34233 
   34234   </div>
   34235 
   34236 
   34237 
   34238   <h4 id=the-label-element><span class=secno>4.10.6 </span>The <dfn><code>label</code></dfn> element</h4>
   34239 
   34240   <dl class=element><dt>Categories</dt>
   34241    <dd><a href=#flow-content>Flow content</a>.</dd>
   34242    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   34243    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   34244    <dd><a href=#form-associated-element>Form-associated element</a>.</dd>
   34245    <dt>Contexts in which this element may be used:</dt>
   34246    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   34247    <dt>Content model:</dt>
   34248    <dd><a href=#phrasing-content>Phrasing content</a>, but with no descendant <a href=#category-label title=category-label>labelable form-associated elements</a> unless it is the element's <a href=#labeled-control>labeled control</a>, and no descendant <code><a href=#the-label-element>label</a></code> elements.</dd>
   34249    <dt>Content attributes:</dt>
   34250    <dd><a href=#global-attributes>Global attributes</a></dd>
   34251    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   34252    <dd><code title=attr-label-for><a href=#attr-label-for>for</a></code></dd>
   34253    <dt>DOM interface:</dt>
   34254    <dd>
   34255 <pre class=idl>interface <dfn id=htmllabelelement>HTMLLabelElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   34256   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   34257            attribute DOMString <a href=#dom-label-htmlfor title=dom-label-htmlFor>htmlFor</a>;
   34258   readonly attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-label-control title=dom-label-control>control</a>;
   34259 };</pre>
   34260    </dd>
   34261   </dl><p>The <code><a href=#the-label-element>label</a></code> <a href=#represents>represents</a> a caption in a
   34262   user interface. The caption can be associated with a specific form
   34263   control<span class=impl>, known as the <code><a href=#the-label-element>label</a></code>
   34264   element's <dfn id=labeled-control>labeled control</dfn></span>, either using <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute, or by putting the form
   34265   control inside the <code><a href=#the-label-element>label</a></code> element itself.</p>
   34266 
   34267   <div class=impl>
   34268 
   34269   <p>Except where otherwise specified by the following rules, a
   34270   <code><a href=#the-label-element>label</a></code> element has no <a href=#labeled-control>labeled control</a>.</p>
   34271 
   34272   </div>
   34273 
   34274   <p>The <dfn id=attr-label-for title=attr-label-for><code>for</code></dfn> attribute
   34275   may be specified to indicate a form control with which the caption
   34276   is to be associated. If the attribute is specified, the attribute's
   34277   value must be the ID of a <a href=#category-label title=category-label>labelable
   34278   form-associated element</a> in the same <code><a href=#document>Document</a></code> as
   34279   the <code><a href=#the-label-element>label</a></code> element. <span class=impl>If the attribute
   34280   is specified and there is an element in the <code><a href=#document>Document</a></code>
   34281   whose ID is equal to the value of the <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute, and the first such
   34282   element is a <a href=#category-label title=category-label>labelable form-associated
   34283   element</a>, then that element is the <code><a href=#the-label-element>label</a></code>
   34284   element's <a href=#labeled-control>labeled control</a>.</span></p>
   34285 
   34286   <div class=impl>
   34287 
   34288   <p>If the <code title=attr-label-for><a href=#attr-label-for>for</a></code> attribute is not
   34289   specified, but the <code><a href=#the-label-element>label</a></code> element has a <a href=#category-label title=category-label>labelable form-associated element</a>
   34290   descendant, then the first such descendant in <a href=#tree-order>tree
   34291   order</a> is the <code><a href=#the-label-element>label</a></code> element's <a href=#labeled-control>labeled
   34292   control</a>.</p>
   34293 
   34294   <p>The <code><a href=#the-label-element>label</a></code> element's exact default presentation and
   34295   behavior, in particular what its <a href=#activation-behavior>activation behavior</a>
   34296   might be, if anything, should match the platform's label
   34297   behavior.</p>
   34298 
   34299   <!-- activation behaviour need not be dependent on whether the
   34300   labeled control is being rendered:
   34301    http://software.hixie.ch/utilities/js/live-dom-viewer/saved/371
   34302   -->
   34303 
   34304   <div class=example>
   34305 
   34306    <p>For example, on platforms where clicking a checkbox label checks
   34307    the checkbox, clicking the <code><a href=#the-label-element>label</a></code> in the following
   34308    snippet could trigger the user agent to <a href=#run-synthetic-click-activation-steps>run synthetic click
   34309    activation steps</a> on the <code><a href=#the-input-element>input</a></code> element, as if
   34310    the element itself had been triggered by the user:</p>
   34311 
   34312    <pre>&lt;label&gt;&lt;input type=checkbox name=lost&gt; Lost&lt;/label&gt;</pre>
   34313 
   34314    <p>On other platforms, the behavior might be just to focus the
   34315    control, or do nothing.</p>
   34316 
   34317   </div>
   34318 
   34319   </div>
   34320 
   34321   <dl class=domintro><dt><var title="">label</var> . <code title=dom-label-control><a href=#dom-label-control>control</a></code></dt>
   34322 
   34323    <dd>
   34324 
   34325     <p>Returns the form control that is associated with this element.</p>
   34326 
   34327    </dd>
   34328 
   34329   </dl><p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   34330   explicitly associate the <code><a href=#the-label-element>label</a></code> element with its
   34331   <a href=#form-owner>form owner</a>.</p>
   34332 
   34333   <div class=impl>
   34334 
   34335   <p>The <dfn id=dom-label-htmlfor title=dom-label-htmlFor><code>htmlFor</code></dfn> IDL
   34336   attribute must <a href=#reflect>reflect</a> the <code title=attr-label-for><a href=#attr-label-for>for</a></code> content attribute.</p>
   34337 
   34338   <p>The <dfn id=dom-label-control title=dom-label-control><code>control</code></dfn> IDL
   34339   attribute must return the <code><a href=#the-label-element>label</a></code> element's <a href=#labeled-control>labeled
   34340   control</a>, if any, or null if there isn't one.</p>
   34341 
   34342   </div>
   34343 
   34344   <hr><dl class=domintro><dt><var title="">control</var> . <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code></dt>
   34345 
   34346    <dd>
   34347 
   34348     <p>Returns a <code><a href=#nodelist>NodeList</a></code> of all the <code><a href=#the-label-element>label</a></code>
   34349     elements that the form control is associated with.</p>
   34350 
   34351    </dd>
   34352 
   34353   </dl><div class=impl>
   34354 
   34355   <p><a href=#category-label title=category-label>Labelable form-associated
   34356   elements</a> have a <code><a href=#nodelist>NodeList</a></code> object associated with
   34357   them that represents the list of <code><a href=#the-label-element>label</a></code> elements, in
   34358   <a href=#tree-order>tree order</a>, whose <a href=#labeled-control>labeled control</a> is the
   34359   element in question. The <dfn id=dom-lfe-labels title=dom-lfe-labels><code>labels</code></dfn> IDL attribute of
   34360   <a href=#category-label title=category-label>labelable form-associated
   34361   elements</a>, on getting, must return that <code><a href=#nodelist>NodeList</a></code>
   34362   object.</p>
   34363 
   34364   <p>The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part
   34365   of the element's forms API.</p>
   34366 
   34367   </div>
   34368 
   34369   <div class=example>
   34370 
   34371    <p>The following example shows three form controls each with a
   34372    label, two of which have small text showing the right format for
   34373    users to use.</p>
   34374 
   34375    <pre>&lt;p&gt;&lt;label&gt;Full name: &lt;input name=fn&gt; &lt;small&gt;Format: First Last&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;
   34376 &lt;p&gt;&lt;label&gt;Age: &lt;input name=age type=number min=0&gt;&lt;/label&gt;&lt;/p&gt;
   34377 &lt;p&gt;&lt;label&gt;Post code: &lt;input name=pc&gt; &lt;small&gt;Format: AB12 3CD&lt;/small&gt;&lt;/label&gt;&lt;/p&gt;</pre>
   34378 
   34379   </div>
   34380 
   34381 
   34382   <h4 id=the-input-element><span class=secno>4.10.7 </span>The <dfn><code>input</code></dfn> element</h4>
   34383 
   34384   <dl class=element><dt>Categories</dt>
   34385    <dd><a href=#flow-content>Flow content</a>.</dd>
   34386    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   34387    <dd>If the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
   34388    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   34389    <dt>Contexts in which this element may be used:</dt>
   34390    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   34391    <dt>Content model:</dt>
   34392    <dd>Empty.</dd>
   34393    <dt>Content attributes:</dt>
   34394    <dd><a href=#global-attributes>Global attributes</a></dd>
   34395    <dd><code title=attr-input-accept><a href=#attr-input-accept>accept</a></code></dd>
   34396    <dd><code title=attr-input-alt><a href=#attr-input-alt>alt</a></code></dd>
   34397    <dd><code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code></dd>
   34398    <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   34399    <dd><code title=attr-input-checked><a href=#attr-input-checked>checked</a></code></dd>
   34400    <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   34401    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   34402    <dd><code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code></dd>
   34403    <dd><code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code></dd>
   34404    <dd><code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code></dd>
   34405    <dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
   34406    <dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
   34407    <dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
   34408    <dd><code title=attr-input-list><a href=#attr-input-list>list</a></code></dd>
   34409    <dd><code title=attr-input-max><a href=#attr-input-max>max</a></code></dd>
   34410    <dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code></dd>
   34411    <dd><code title=attr-input-min><a href=#attr-input-min>min</a></code></dd>
   34412    <dd><code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code></dd>
   34413    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   34414    <dd><code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code></dd>
   34415    <dd><code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code></dd>
   34416    <dd><code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code></dd>
   34417    <dd><code title=attr-input-required><a href=#attr-input-required>required</a></code></dd>
   34418    <dd><code title=attr-input-size><a href=#attr-input-size>size</a></code></dd>
   34419    <dd><code title=attr-input-src><a href=#attr-input-src>src</a></code></dd>
   34420    <dd><code title=attr-input-step><a href=#attr-input-step>step</a></code></dd>
   34421    <dd><code title=attr-input-type><a href=#attr-input-type>type</a></code></dd>
   34422    <dd><code title=attr-input-value><a href=#attr-input-value>value</a></code></dd>
   34423    <dd><code title=attr-dim-width><a href=#attr-dim-width>width</a></code></dd>
   34424    <dt>DOM interface:</dt>
   34425    <dd>
   34426 <pre class=idl>interface <dfn id=htmlinputelement>HTMLInputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   34427            attribute DOMString <a href=#dom-input-accept title=dom-input-accept>accept</a>;
   34428            attribute DOMString <a href=#dom-input-alt title=dom-input-alt>alt</a>;
   34429            attribute DOMString <a href=#dom-input-autocomplete title=dom-input-autocomplete>autocomplete</a>;
   34430            attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
   34431            attribute boolean <a href=#dom-input-defaultchecked title=dom-input-defaultChecked>defaultChecked</a>;
   34432            attribute boolean <a href=#dom-input-checked title=dom-input-checked>checked</a>;
   34433            attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
   34434   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   34435   readonly attribute <span>FileList</span> <a href=#dom-input-files title=dom-input-files>files</a>;
   34436            attribute DOMString <a href=#dom-fs-formaction title=dom-fs-formAction>formAction</a>;
   34437            attribute DOMString <a href=#dom-fs-formenctype title=dom-fs-formEnctype>formEnctype</a>;
   34438            attribute DOMString <a href=#dom-fs-formmethod title=dom-fs-formMethod>formMethod</a>;
   34439            attribute boolean <a href=#dom-fs-formnovalidate title=dom-fs-formNoValidate>formNoValidate</a>;
   34440            attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
   34441            attribute DOMString <a href=#dom-dim-height title=dom-dim-height>height</a>;
   34442            attribute boolean <a href=#dom-input-indeterminate title=dom-input-indeterminate>indeterminate</a>;
   34443   readonly attribute <a href=#htmlelement>HTMLElement</a> <a href=#dom-input-list title=dom-input-list>list</a>;
   34444            attribute DOMString <a href=#dom-input-max title=dom-input-max>max</a>;
   34445            attribute long <a href=#dom-input-maxlength title=dom-input-maxLength>maxLength</a>;
   34446            attribute DOMString <a href=#dom-input-min title=dom-input-min>min</a>;
   34447            attribute boolean <a href=#dom-input-multiple title=dom-input-multiple>multiple</a>;
   34448            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   34449            attribute DOMString <a href=#dom-input-pattern title=dom-input-pattern>pattern</a>;
   34450            attribute DOMString <a href=#dom-input-placeholder title=dom-input-placeholder>placeholder</a>;
   34451            attribute boolean <a href=#dom-input-readonly title=dom-input-readOnly>readOnly</a>;
   34452            attribute boolean <a href=#dom-input-required title=dom-input-required>required</a>;
   34453            attribute unsigned long <a href=#dom-input-size title=dom-input-size>size</a>;
   34454            attribute DOMString <a href=#dom-input-src title=dom-input-src>src</a>;
   34455            attribute DOMString <a href=#dom-input-step title=dom-input-step>step</a>;
   34456            attribute DOMString <a href=#dom-input-type title=dom-input-type>type</a>;
   34457            attribute DOMString <a href=#dom-input-defaultvalue title=dom-input-defaultValue>defaultValue</a>;
   34458            attribute DOMString <a href=#dom-input-value title=dom-input-value>value</a>;
   34459            attribute <span>Date</span> <a href=#dom-input-valueasdate title=dom-input-valueAsDate>valueAsDate</a>;
   34460            attribute double <a href=#dom-input-valueasnumber title=dom-input-valueAsNumber>valueAsNumber</a>;
   34461   readonly attribute <a href=#htmloptionelement>HTMLOptionElement</a> <a href=#dom-input-selectedoption title=dom-input-selectedOption>selectedOption</a>;
   34462            attribute DOMString <a href=#dom-dim-width title=dom-dim-width>width</a>;
   34463 
   34464   void <a href=#dom-input-stepup title=dom-input-stepUp>stepUp</a>(in optional long n);
   34465   void <a href=#dom-input-stepdown title=dom-input-stepDown>stepDown</a>(in optional long n);
   34466 
   34467   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   34468   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   34469   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   34470   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   34471   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   34472 
   34473   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   34474 
   34475   void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
   34476            attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
   34477            attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
   34478   void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);
   34479 };</pre>
   34480    </dd>
   34481   </dl><p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a typed data field,
   34482   usually with a form control to allow the user to edit the data.</p>
   34483 
   34484   <p>The <dfn id=attr-input-type title=attr-input-type><code>type</code></dfn>
   34485   attribute controls the data type (and associated control) of the
   34486   element. It is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
   34487   table lists the keywords and states for the attribute &mdash; the
   34488   keywords in the left column map to the states in the cell in the
   34489   second column on the same row as the keyword.</p>
   34490 
   34491   <table id=attr-input-type-keywords><thead><tr><th> Keyword
   34492      <th> State
   34493      <th> Data type
   34494      <th> Control type
   34495    <tbody><tr><td> <dfn id=attr-input-type-hidden-keyword title=attr-input-type-hidden-keyword><code>hidden</code></dfn>
   34496      <td> <a href=#hidden-state title=attr-input-type-hidden>Hidden</a>
   34497      <td> An arbitrary string
   34498      <td> n/a
   34499     <tr><td> <dfn id=attr-input-type-text-keyword title=attr-input-type-text-keyword><code>text</code></dfn>
   34500      <td> <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>
   34501      <td> Text with no line breaks
   34502      <td> Text field
   34503     <tr><td> <dfn id=attr-input-type-search-keyword title=attr-input-type-search-keyword><code>search</code></dfn>
   34504      <td> <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>
   34505      <td> Text with no line breaks
   34506      <td> Search field
   34507     <tr><td> <dfn id=attr-input-type-tel-keyword title=attr-input-type-tel-keyword><code>tel</code></dfn>
   34508      <td> <a href=#telephone-state title=attr-input-type-tel>Telephone</a>
   34509      <td> Text with no line breaks
   34510      <td> A text field
   34511     <tr><td> <dfn id=attr-input-type-url-keyword title=attr-input-type-url-keyword><code>url</code></dfn>
   34512      <td> <a href=#url-state title=attr-input-type-url>URL</a>
   34513      <td> An absolute IRI
   34514      <td> A text field
   34515     <tr><td> <dfn id=attr-input-type-email-keyword title=attr-input-type-email-keyword><code>email</code></dfn>
   34516      <td> <a href=#e-mail-state title=attr-input-type-email>E-mail</a>
   34517      <td> An e-mail address or list of e-mail addresses
   34518      <td> A text field
   34519     <tr><td> <dfn id=attr-input-type-password-keyword title=attr-input-type-password-keyword><code>password</code></dfn>
   34520      <td> <a href=#password-state title=attr-input-type-password>Password</a>
   34521      <td> Text with no line breaks (sensitive information)
   34522      <td> Text field that obscures data entry
   34523     <tr><td> <dfn id=attr-input-type-datetime-keyword title=attr-input-type-datetime-keyword><code>datetime</code></dfn>
   34524      <td> <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>
   34525      <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC
   34526      <td> A date and time control
   34527     <tr><td> <dfn id=attr-input-type-date-keyword title=attr-input-type-date-keyword><code>date</code></dfn>
   34528      <td> <a href=#date-state title=attr-input-type-date>Date</a>
   34529      <td> A date (year, month, day) with no time zone
   34530      <td> A date control
   34531     <tr><td> <dfn id=attr-input-type-month-keyword title=attr-input-type-month-keyword><code>month</code></dfn>
   34532      <td> <a href=#month-state title=attr-input-type-month>Month</a>
   34533      <td> A date consisting of a year and a month with no time zone
   34534      <td> A month control
   34535     <tr><td> <dfn id=attr-input-type-week-keyword title=attr-input-type-week-keyword><code>week</code></dfn>
   34536      <td> <a href=#week-state title=attr-input-type-week>Week</a>
   34537      <td> A date consisting of a week-year number and a week number with no time zone
   34538      <td> A week control
   34539     <tr><td> <dfn id=attr-input-type-time-keyword title=attr-input-type-time-keyword><code>time</code></dfn>
   34540      <td> <a href=#time-state title=attr-input-type-time>Time</a>
   34541      <td> A time (hour, minute, seconds, fractional seconds) with no time zone
   34542      <td> A time control
   34543     <tr><td> <dfn id=attr-input-type-datetime-local-keyword title=attr-input-type-datetime-local-keyword><code>datetime-local</code></dfn>
   34544      <td> <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
   34545      <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
   34546      <td> A date and time control
   34547     <tr><td> <dfn id=attr-input-type-number-keyword title=attr-input-type-number-keyword><code>number</code></dfn>
   34548      <td> <a href=#number-state title=attr-input-type-number>Number</a>
   34549      <td> A numerical value
   34550      <td> A text field or spinner control
   34551     <tr><td> <dfn id=attr-input-type-range-keyword title=attr-input-type-range-keyword><code>range</code></dfn>
   34552      <td> <a href=#range-state title=attr-input-type-range>Range</a>
   34553      <td> A numerical value, with the extra semantic that the exact value is not important
   34554      <td> A slider control or similar
   34555     <tr><td> <dfn id=attr-input-type-color-keyword title=attr-input-type-color-keyword><code>color</code></dfn>
   34556      <td> <a href=#color-state title=attr-input-type-color>Color</a>
   34557      <td> An sRGB color with 8-bit red, green, and blue components
   34558      <td> A color well
   34559     <tr><td> <dfn id=attr-input-type-checkbox-keyword title=attr-input-type-checkbox-keyword><code>checkbox</code></dfn>
   34560      <td> <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>
   34561      <td> A set of zero or more values from a predefined list
   34562      <td> A checkbox
   34563     <tr><td> <dfn id=attr-input-type-radio-keyword title=attr-input-type-radio-keyword><code>radio</code></dfn>
   34564      <td> <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>
   34565      <td> An enumerated value
   34566      <td> A radio button
   34567     <tr><td> <dfn id=attr-input-type-file-keyword title=attr-input-type-file-keyword><code>file</code></dfn>
   34568      <td> <a href=#file-upload-state title=attr-input-type-file>File Upload</a>
   34569      <td> Zero or more files each with a <a href=#mime-type>MIME type</a> and optionally a file name
   34570      <td> A label and a button
   34571     <tr><td> <dfn id=attr-input-type-submit-keyword title=attr-input-type-submit-keyword><code>submit</code></dfn>
   34572      <td> <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>
   34573      <td> An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
   34574      <td> A button
   34575     <tr><td> <dfn id=attr-input-type-image-keyword title=attr-input-type-image-keyword><code>image</code></dfn>
   34576      <td> <a href=#image-button-state title=attr-input-type-image>Image Button</a>
   34577      <td> A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission
   34578      <td> Either a clickable image, or a button
   34579     <tr><td> <dfn id=attr-input-type-reset-keyword title=attr-input-type-reset-keyword><code>reset</code></dfn>
   34580      <td> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>
   34581      <td> n/a
   34582      <td> A button
   34583     <tr><td> <dfn id=attr-input-type-button-keyword title=attr-input-type-button-keyword><code>button</code></dfn>
   34584      <td> <a href=#button-state title=attr-input-type-button>Button</a>
   34585      <td> n/a
   34586      <td> A button
   34587   </table><p>The <i>missing value default</i> is the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state.</p>
   34588 
   34589   <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, <code title=dom-input-list><a href=#dom-input-list>list</a></code>, and <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL
   34590   attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> and
   34591   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
   34592   IDL attributes, the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   34593   method, the <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> and
   34594   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods, and the
   34595   <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply to an
   34596   <code><a href=#the-input-element>input</a></code> element depends on the state of its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute.  The following table
   34597   <span class=impl>is non-normative and</span> summarizes which of
   34598   those content attributes, IDL attributes, methods, and events apply
   34599   to each state:</p>
   34600 
   34601   <table class=applies id=input-type-attr-summary><thead><tr><th>
   34602      <th> <span title=""><a href=#hidden-state title=attr-input-type-hidden>Hidden</a></span>
   34603      <th> <span title=""><a href=#text-state-and-search-state title=attr-input-type-text>Text</a>,</span>
   34604           <span title=""><a href=#text-state-and-search-state title=attr-input-type-search>Search</a>,</span>
   34605           <span title=""><a href=#url-state title=attr-input-type-url>URL</a>,</span>
   34606           <span title=""><a href=#telephone-state title=attr-input-type-tel>Telephone</a></span>
   34607      <th> <span title=""><a href=#e-mail-state title=attr-input-type-email>E-mail</a></span>
   34608      <th> <span title=""><a href=#password-state title=attr-input-type-password>Password</a></span>
   34609      <th> <span title=""><a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>,</span>
   34610           <span title=""><a href=#date-state title=attr-input-type-date>Date</a>,</span>
   34611           <span title=""><a href=#month-state title=attr-input-type-month>Month</a>,</span>
   34612           <span title=""><a href=#week-state title=attr-input-type-week>Week</a>,</span>
   34613           <span title=""><a href=#time-state title=attr-input-type-time>Time</a></span>
   34614      <th> <span title=""><a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>,</span>
   34615           <span title=""><a href=#number-state title=attr-input-type-number>Number</a></span>
   34616      <th> <span title=""><a href=#range-state title=attr-input-type-range>Range</a></span>
   34617      <th> <span title=""><a href=#color-state title=attr-input-type-color>Color</a></span>
   34618      <th> <span title=""><a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>,</span>
   34619           <span title=""><a href=#radio-button-state title=attr-input-type-radio>Radio Button</a></span>
   34620      <th> <span title=""><a href=#file-upload-state title=attr-input-type-file>File Upload</a></span>
   34621      <th> <span title=""><a href=#submit-button-state title=attr-input-type-submit>Submit Button</a></span>
   34622      <th> <span title=""><a href=#image-button-state title=attr-input-type-image>Image Button</a></span>
   34623      <th> <span title=""><a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>,</span>
   34624           <span title=""><a href=#button-state title=attr-input-type-button>Button</a></span>
   34625 
   34626    <tbody><tr><th colspan=14 scope=rowgroup>Content attributes
   34627 
   34628     <tr><th> <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>
   34629      <td class=no> &middot; <!-- Hidden -->
   34630      <td class=no> &middot; <!-- Text -->
   34631 <!-- <td class="no"> &middot;      Search -->
   34632 <!-- <td class="no"> &middot;      URL -->
   34633      <td class=no> &middot; <!-- E-mail -->
   34634      <td class=no> &middot; <!-- Password -->
   34635      <td class=no> &middot; <!-- Date and Time -->
   34636 <!-- <td class="no"> &middot;      Date -->
   34637 <!-- <td class="no"> &middot;      Month -->
   34638 <!-- <td class="no"> &middot;      Week -->
   34639 <!-- <td class="no"> &middot;      Time -->
   34640      <td class=no> &middot; <!-- Local Date and Time -->
   34641 <!-- <td class="no"> &middot;      Number -->
   34642      <td class=no> &middot; <!-- Range -->
   34643      <td class=no> &middot; <!-- Color -->
   34644      <td class=no> &middot; <!-- Checkbox -->
   34645 <!-- <td class="no"> &middot;      Radio Button -->
   34646      <td class=yes> Yes     <!-- File Upload -->
   34647      <td class=no> &middot; <!-- Submit Button -->
   34648      <td class=no> &middot; <!-- Image Button -->
   34649      <td class=no> &middot; <!-- Reset Button -->
   34650 <!-- <td class="no"> &middot;      Button -->
   34651 
   34652     <tr><th> <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>
   34653      <td class=no> &middot; <!-- Hidden -->
   34654      <td class=no> &middot; <!-- Text -->
   34655 <!-- <td class="no"> &middot;      Search -->
   34656 <!-- <td class="no"> &middot;      URL -->
   34657      <td class=no> &middot; <!-- E-mail -->
   34658      <td class=no> &middot; <!-- Password -->
   34659      <td class=no> &middot; <!-- Date and Time -->
   34660 <!-- <td class="no"> &middot;      Date -->
   34661 <!-- <td class="no"> &middot;      Month -->
   34662 <!-- <td class="no"> &middot;      Week -->
   34663 <!-- <td class="no"> &middot;      Time -->
   34664      <td class=no> &middot; <!-- Local Date and Time -->
   34665 <!-- <td class="no"> &middot;      Number -->
   34666      <td class=no> &middot; <!-- Range -->
   34667      <td class=no> &middot; <!-- Color -->
   34668      <td class=no> &middot; <!-- Checkbox -->
   34669 <!-- <td class="no"> &middot;      Radio Button -->
   34670      <td class=no> &middot; <!-- File Upload -->
   34671      <td class=no> &middot; <!-- Submit Button -->
   34672      <td class=yes> Yes     <!-- Image Button -->
   34673      <td class=no> &middot; <!-- Reset Button -->
   34674 <!-- <td class="no"> &middot;      Button -->
   34675 
   34676     <tr><th> <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   34677      <td class=no> &middot; <!-- Hidden -->
   34678      <td class=yes> Yes     <!-- Text -->
   34679 <!-- <td class="yes"> Yes          Search -->
   34680 <!-- <td class="yes"> Yes          URL -->
   34681      <td class=yes> Yes     <!-- E-mail -->
   34682      <td class=yes> Yes     <!-- Password -->
   34683      <td class=yes> Yes     <!-- Date and Time -->
   34684 <!-- <td class="yes"> Yes          Date -->
   34685 <!-- <td class="yes"> Yes          Month -->
   34686 <!-- <td class="yes"> Yes          Week -->
   34687 <!-- <td class="yes"> Yes          Time -->
   34688      <td class=yes> Yes     <!-- Local Date and Time -->
   34689 <!-- <td class="yes"> Yes          Number -->
   34690      <td class=yes> Yes     <!-- Range -->
   34691      <td class=yes> Yes     <!-- Color -->
   34692      <td class=no> &middot; <!-- Checkbox -->
   34693 <!-- <td class="no"> &middot;      Radio Button -->
   34694      <td class=no> &middot; <!-- File Upload -->
   34695      <td class=no> &middot; <!-- Submit Button -->
   34696      <td class=no> &middot; <!-- Image Button -->
   34697      <td class=no> &middot; <!-- Reset Button -->
   34698 <!-- <td class="no"> &middot;      Button -->
   34699 
   34700     <tr><th> <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
   34701      <td class=no> &middot; <!-- Hidden -->
   34702      <td class=no> &middot; <!-- Text -->
   34703 <!-- <td class="no"> &middot;      Search -->
   34704 <!-- <td class="no"> &middot;      URL -->
   34705      <td class=no> &middot; <!-- E-mail -->
   34706      <td class=no> &middot; <!-- Password -->
   34707      <td class=no> &middot; <!-- Date and Time -->
   34708 <!-- <td class="no"> &middot;      Date -->
   34709 <!-- <td class="no"> &middot;      Month -->
   34710 <!-- <td class="no"> &middot;      Week -->
   34711 <!-- <td class="no"> &middot;      Time -->
   34712      <td class=no> &middot; <!-- Local Date and Time -->
   34713 <!-- <td class="no"> &middot;      Number -->
   34714      <td class=no> &middot; <!-- Range -->
   34715      <td class=no> &middot; <!-- Color -->
   34716      <td class=yes> Yes     <!-- Checkbox -->
   34717 <!-- <td class="yes"> Yes          Radio Button -->
   34718      <td class=no> &middot; <!-- File Upload -->
   34719      <td class=no> &middot; <!-- Submit Button -->
   34720      <td class=no> &middot; <!-- Image Button -->
   34721      <td class=no> &middot; <!-- Reset Button -->
   34722 <!-- <td class="no"> &middot;      Button -->
   34723 
   34724     <tr><th> <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>
   34725      <td class=no> &middot; <!-- Hidden -->
   34726      <td class=no> &middot; <!-- Text -->
   34727 <!-- <td class="no"> &middot;      Search -->
   34728 <!-- <td class="no"> &middot;      URL -->
   34729      <td class=no> &middot; <!-- E-mail -->
   34730      <td class=no> &middot; <!-- Password -->
   34731      <td class=no> &middot; <!-- Date and Time -->
   34732 <!-- <td class="no"> &middot;      Date -->
   34733 <!-- <td class="no"> &middot;      Month -->
   34734 <!-- <td class="no"> &middot;      Week -->
   34735 <!-- <td class="no"> &middot;      Time -->
   34736      <td class=no> &middot; <!-- Local Date and Time -->
   34737 <!-- <td class="no"> &middot;      Number -->
   34738      <td class=no> &middot; <!-- Range -->
   34739      <td class=no> &middot; <!-- Color -->
   34740      <td class=no> &middot; <!-- Checkbox -->
   34741 <!-- <td class="no"> &middot;      Radio Button -->
   34742      <td class=no> &middot; <!-- File Upload -->
   34743      <td class=yes> Yes     <!-- Submit Button -->
   34744      <td class=yes> Yes     <!-- Image Button -->
   34745      <td class=no> &middot; <!-- Reset Button -->
   34746 <!-- <td class="no"> &middot;      Button -->
   34747 
   34748     <tr><th> <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>
   34749      <td class=no> &middot; <!-- Hidden -->
   34750      <td class=no> &middot; <!-- Text -->
   34751 <!-- <td class="no"> &middot;      Search -->
   34752 <!-- <td class="no"> &middot;      URL -->
   34753      <td class=no> &middot; <!-- E-mail -->
   34754      <td class=no> &middot; <!-- Password -->
   34755      <td class=no> &middot; <!-- Date and Time -->
   34756 <!-- <td class="no"> &middot;      Date -->
   34757 <!-- <td class="no"> &middot;      Month -->
   34758 <!-- <td class="no"> &middot;      Week -->
   34759 <!-- <td class="no"> &middot;      Time -->
   34760      <td class=no> &middot; <!-- Local Date and Time -->
   34761 <!-- <td class="no"> &middot;      Number -->
   34762      <td class=no> &middot; <!-- Range -->
   34763      <td class=no> &middot; <!-- Color -->
   34764      <td class=no> &middot; <!-- Checkbox -->
   34765 <!-- <td class="no"> &middot;      Radio Button -->
   34766      <td class=no> &middot; <!-- File Upload -->
   34767      <td class=yes> Yes     <!-- Submit Button -->
   34768      <td class=yes> Yes     <!-- Image Button -->
   34769      <td class=no> &middot; <!-- Reset Button -->
   34770 <!-- <td class="no"> &middot;      Button -->
   34771 
   34772     <tr><th> <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>
   34773      <td class=no> &middot; <!-- Hidden -->
   34774      <td class=no> &middot; <!-- Text -->
   34775 <!-- <td class="no"> &middot;      Search -->
   34776 <!-- <td class="no"> &middot;      URL -->
   34777      <td class=no> &middot; <!-- E-mail -->
   34778      <td class=no> &middot; <!-- Password -->
   34779      <td class=no> &middot; <!-- Date and Time -->
   34780 <!-- <td class="no"> &middot;      Date -->
   34781 <!-- <td class="no"> &middot;      Month -->
   34782 <!-- <td class="no"> &middot;      Week -->
   34783 <!-- <td class="no"> &middot;      Time -->
   34784      <td class=no> &middot; <!-- Local Date and Time -->
   34785 <!-- <td class="no"> &middot;      Number -->
   34786      <td class=no> &middot; <!-- Range -->
   34787      <td class=no> &middot; <!-- Color -->
   34788      <td class=no> &middot; <!-- Checkbox -->
   34789 <!-- <td class="no"> &middot;      Radio Button -->
   34790      <td class=no> &middot; <!-- File Upload -->
   34791      <td class=yes> Yes     <!-- Submit Button -->
   34792      <td class=yes> Yes     <!-- Image Button -->
   34793      <td class=no> &middot; <!-- Reset Button -->
   34794 <!-- <td class="no"> &middot;      Button -->
   34795 
   34796     <tr><th> <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>
   34797      <td class=no> &middot; <!-- Hidden -->
   34798      <td class=no> &middot; <!-- Text -->
   34799 <!-- <td class="no"> &middot;      Search -->
   34800 <!-- <td class="no"> &middot;      URL -->
   34801      <td class=no> &middot; <!-- E-mail -->
   34802      <td class=no> &middot; <!-- Password -->
   34803      <td class=no> &middot; <!-- Date and Time -->
   34804 <!-- <td class="no"> &middot;      Date -->
   34805 <!-- <td class="no"> &middot;      Month -->
   34806 <!-- <td class="no"> &middot;      Week -->
   34807 <!-- <td class="no"> &middot;      Time -->
   34808      <td class=no> &middot; <!-- Local Date and Time -->
   34809 <!-- <td class="no"> &middot;      Number -->
   34810      <td class=no> &middot; <!-- Range -->
   34811      <td class=no> &middot; <!-- Color -->
   34812      <td class=no> &middot; <!-- Checkbox -->
   34813 <!-- <td class="no"> &middot;      Radio Button -->
   34814      <td class=no> &middot; <!-- File Upload -->
   34815      <td class=yes> Yes     <!-- Submit Button -->
   34816      <td class=yes> Yes     <!-- Image Button -->
   34817      <td class=no> &middot; <!-- Reset Button -->
   34818 <!-- <td class="no"> &middot;      Button -->
   34819 
   34820     <tr><th> <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>
   34821      <td class=no> &middot; <!-- Hidden -->
   34822      <td class=no> &middot; <!-- Text -->
   34823 <!-- <td class="no"> &middot;      Search -->
   34824 <!-- <td class="no"> &middot;      URL -->
   34825      <td class=no> &middot; <!-- E-mail -->
   34826      <td class=no> &middot; <!-- Password -->
   34827      <td class=no> &middot; <!-- Date and Time -->
   34828 <!-- <td class="no"> &middot;      Date -->
   34829 <!-- <td class="no"> &middot;      Month -->
   34830 <!-- <td class="no"> &middot;      Week -->
   34831 <!-- <td class="no"> &middot;      Time -->
   34832      <td class=no> &middot; <!-- Local Date and Time -->
   34833 <!-- <td class="no"> &middot;      Number -->
   34834      <td class=no> &middot; <!-- Range -->
   34835      <td class=no> &middot; <!-- Color -->
   34836      <td class=no> &middot; <!-- Checkbox -->
   34837 <!-- <td class="no"> &middot;      Radio Button -->
   34838      <td class=no> &middot; <!-- File Upload -->
   34839      <td class=yes> Yes     <!-- Submit Button -->
   34840      <td class=yes> Yes     <!-- Image Button -->
   34841      <td class=no> &middot; <!-- Reset Button -->
   34842 <!-- <td class="no"> &middot;      Button -->
   34843 
   34844     <tr><th> <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>
   34845      <td class=no> &middot; <!-- Hidden -->
   34846      <td class=no> &middot; <!-- Text -->
   34847 <!-- <td class="no"> &middot;      Search -->
   34848 <!-- <td class="no"> &middot;      URL -->
   34849      <td class=no> &middot; <!-- E-mail -->
   34850      <td class=no> &middot; <!-- Password -->
   34851      <td class=no> &middot; <!-- Date and Time -->
   34852 <!-- <td class="no"> &middot;      Date -->
   34853 <!-- <td class="no"> &middot;      Month -->
   34854 <!-- <td class="no"> &middot;      Week -->
   34855 <!-- <td class="no"> &middot;      Time -->
   34856      <td class=no> &middot; <!-- Local Date and Time -->
   34857 <!-- <td class="no"> &middot;      Number -->
   34858      <td class=no> &middot; <!-- Range -->
   34859      <td class=no> &middot; <!-- Color -->
   34860      <td class=no> &middot; <!-- Checkbox -->
   34861 <!-- <td class="no"> &middot;      Radio Button -->
   34862      <td class=no> &middot; <!-- File Upload -->
   34863      <td class=no> &middot; <!-- Submit Button -->
   34864      <td class=yes> Yes     <!-- Image Button -->
   34865      <td class=no> &middot; <!-- Reset Button -->
   34866 <!-- <td class="no"> &middot;      Button -->
   34867 
   34868     <tr><th> <code title=attr-input-list><a href=#attr-input-list>list</a></code>
   34869      <td class=no> &middot; <!-- Hidden -->
   34870      <td class=yes> Yes     <!-- Text -->
   34871 <!-- <td class="yes"> Yes          Search -->
   34872 <!-- <td class="yes"> Yes          URL -->
   34873      <td class=yes> Yes     <!-- E-mail -->
   34874      <td class=no> &middot; <!-- Password -->
   34875      <td class=yes> Yes     <!-- Date and Time -->
   34876 <!-- <td class="yes"> Yes          Date -->
   34877 <!-- <td class="yes"> Yes          Month -->
   34878 <!-- <td class="yes"> Yes          Week -->
   34879 <!-- <td class="yes"> Yes          Time -->
   34880      <td class=yes> Yes     <!-- Local Date and Time -->
   34881 <!-- <td class="yes"> Yes          Number -->
   34882      <td class=yes> Yes     <!-- Range -->
   34883      <td class=yes> Yes     <!-- Color -->
   34884      <td class=no> &middot; <!-- Checkbox -->
   34885 <!-- <td class="no"> &middot;      Radio Button -->
   34886      <td class=no> &middot; <!-- File Upload -->
   34887      <td class=no> &middot; <!-- Submit Button -->
   34888      <td class=no> &middot; <!-- Image Button -->
   34889      <td class=no> &middot; <!-- Reset Button -->
   34890 <!-- <td class="no"> &middot;      Button -->
   34891 
   34892     <tr><th> <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   34893      <td class=no> &middot; <!-- Hidden -->
   34894      <td class=no> &middot; <!-- Text -->
   34895 <!-- <td class="no"> &middot;      Search -->
   34896 <!-- <td class="no"> &middot;      URL -->
   34897      <td class=no> &middot; <!-- E-mail -->
   34898      <td class=no> &middot; <!-- Password -->
   34899      <td class=yes> Yes     <!-- Date and Time -->
   34900 <!-- <td class="yes"> Yes          Date -->
   34901 <!-- <td class="yes"> Yes          Month -->
   34902 <!-- <td class="yes"> Yes          Week -->
   34903 <!-- <td class="yes"> Yes          Time -->
   34904      <td class=yes> Yes     <!-- Local Date and Time -->
   34905 <!-- <td class="yes"> Yes          Number -->
   34906      <td class=yes> Yes     <!-- Range -->
   34907      <td class=no> &middot; <!-- Color -->
   34908      <td class=no> &middot; <!-- Checkbox -->
   34909 <!-- <td class="no"> &middot;      Radio Button -->
   34910      <td class=no> &middot; <!-- File Upload -->
   34911      <td class=no> &middot; <!-- Submit Button -->
   34912      <td class=no> &middot; <!-- Image Button -->
   34913      <td class=no> &middot; <!-- Reset Button -->
   34914 <!-- <td class="no"> &middot;      Button -->
   34915 
   34916     <tr><th> <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>
   34917      <td class=no> &middot; <!-- Hidden -->
   34918      <td class=yes> Yes     <!-- Text -->
   34919 <!-- <td class="yes"> Yes          Search -->
   34920 <!-- <td class="yes"> Yes          URL -->
   34921      <td class=yes> Yes     <!-- E-mail -->
   34922      <td class=yes> Yes     <!-- Password -->
   34923      <td class=no> &middot; <!-- Date and Time -->
   34924 <!-- <td class="no"> &middot;      Date -->
   34925 <!-- <td class="no"> &middot;      Month -->
   34926 <!-- <td class="no"> &middot;      Week -->
   34927 <!-- <td class="no"> &middot;      Time -->
   34928      <td class=no> &middot; <!-- Local Date and Time -->
   34929 <!-- <td class="no"> &middot;      Number -->
   34930      <td class=no> &middot; <!-- Range -->
   34931      <td class=no> &middot; <!-- Color -->
   34932      <td class=no> &middot; <!-- Checkbox -->
   34933 <!-- <td class="no"> &middot;      Radio Button -->
   34934      <td class=no> &middot; <!-- File Upload -->
   34935      <td class=no> &middot; <!-- Submit Button -->
   34936      <td class=no> &middot; <!-- Image Button -->
   34937      <td class=no> &middot; <!-- Reset Button -->
   34938 <!-- <td class="no"> &middot;      Button -->
   34939 
   34940     <tr><th> <code title=attr-input-min><a href=#attr-input-min>min</a></code>
   34941      <td class=no> &middot; <!-- Hidden -->
   34942      <td class=no> &middot; <!-- Text -->
   34943 <!-- <td class="no"> &middot;      Search -->
   34944 <!-- <td class="no"> &middot;      URL -->
   34945      <td class=no> &middot; <!-- E-mail -->
   34946      <td class=no> &middot; <!-- Password -->
   34947      <td class=yes> Yes     <!-- Date and Time -->
   34948 <!-- <td class="yes"> Yes          Date -->
   34949 <!-- <td class="yes"> Yes          Month -->
   34950 <!-- <td class="yes"> Yes          Week -->
   34951 <!-- <td class="yes"> Yes          Time -->
   34952      <td class=yes> Yes     <!-- Local Date and Time -->
   34953 <!-- <td class="yes"> Yes          Number -->
   34954      <td class=yes> Yes     <!-- Range -->
   34955      <td class=no> &middot; <!-- Color -->
   34956      <td class=no> &middot; <!-- Checkbox -->
   34957 <!-- <td class="no"> &middot;      Radio Button -->
   34958      <td class=no> &middot; <!-- File Upload -->
   34959      <td class=no> &middot; <!-- Submit Button -->
   34960      <td class=no> &middot; <!-- Image Button -->
   34961      <td class=no> &middot; <!-- Reset Button -->
   34962 <!-- <td class="no"> &middot;      Button -->
   34963 
   34964     <tr><th> <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
   34965      <td class=no> &middot; <!-- Hidden -->
   34966      <td class=no> &middot; <!-- Text -->
   34967 <!-- <td class="no"> &middot;      Search -->
   34968 <!-- <td class="no"> &middot;      URL -->
   34969      <td class=yes> Yes     <!-- E-mail -->
   34970      <td class=no> &middot; <!-- Password -->
   34971      <td class=no> &middot; <!-- Date and Time -->
   34972 <!-- <td class="no"> &middot;      Date -->
   34973 <!-- <td class="no"> &middot;      Month -->
   34974 <!-- <td class="no"> &middot;      Week -->
   34975 <!-- <td class="no"> &middot;      Time -->
   34976      <td class=no> &middot; <!-- Local Date and Time -->
   34977 <!-- <td class="no"> &middot;      Number -->
   34978      <td class=no> &middot; <!-- Range -->
   34979      <td class=no> &middot; <!-- Color -->
   34980      <td class=no> &middot; <!-- Checkbox -->
   34981 <!-- <td class="no"> &middot;      Radio Button -->
   34982      <td class=yes> Yes     <!-- File Upload -->
   34983      <td class=no> &middot; <!-- Submit Button -->
   34984      <td class=no> &middot; <!-- Image Button -->
   34985      <td class=no> &middot; <!-- Reset Button -->
   34986 <!-- <td class="no"> &middot;      Button -->
   34987 
   34988     <tr><th> <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
   34989      <td class=no> &middot; <!-- Hidden -->
   34990      <td class=yes> Yes     <!-- Text -->
   34991 <!-- <td class="yes"> Yes          Search -->
   34992 <!-- <td class="yes"> Yes          URL -->
   34993      <td class=yes> Yes     <!-- E-mail -->
   34994      <td class=yes> Yes     <!-- Password -->
   34995      <td class=no> &middot; <!-- Date and Time -->
   34996 <!-- <td class="no"> &middot;      Date -->
   34997 <!-- <td class="no"> &middot;      Month -->
   34998 <!-- <td class="no"> &middot;      Week -->
   34999 <!-- <td class="no"> &middot;      Time -->
   35000      <td class=no> &middot; <!-- Local Date and Time -->
   35001 <!-- <td class="no"> &middot;      Number -->
   35002      <td class=no> &middot; <!-- Range -->
   35003      <td class=no> &middot; <!-- Color -->
   35004      <td class=no> &middot; <!-- Checkbox -->
   35005 <!-- <td class="no"> &middot;      Radio Button -->
   35006      <td class=no> &middot; <!-- File Upload -->
   35007      <td class=no> &middot; <!-- Submit Button -->
   35008      <td class=no> &middot; <!-- Image Button -->
   35009      <td class=no> &middot; <!-- Reset Button -->
   35010 <!-- <td class="no"> &middot;      Button -->
   35011 
   35012     <tr><th> <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
   35013      <td class=no> &middot; <!-- Hidden -->
   35014      <td class=yes> Yes     <!-- Text -->
   35015 <!-- <td class="yes"> Yes          Search -->
   35016 <!-- <td class="yes"> Yes          URL -->
   35017      <td class=yes> Yes     <!-- E-mail -->
   35018      <td class=yes> Yes     <!-- Password -->
   35019      <td class=no> &middot; <!-- Date and Time -->
   35020 <!-- <td class="no"> &middot;      Date -->
   35021 <!-- <td class="no"> &middot;      Month -->
   35022 <!-- <td class="no"> &middot;      Week -->
   35023 <!-- <td class="no"> &middot;      Time -->
   35024      <td class=no> &middot; <!-- Local Date and Time -->
   35025 <!-- <td class="no"> &middot;      Number -->
   35026      <td class=no> &middot; <!-- Range -->
   35027      <td class=no> &middot; <!-- Color -->
   35028      <td class=no> &middot; <!-- Checkbox -->
   35029 <!-- <td class="no"> &middot;      Radio Button -->
   35030      <td class=no> &middot; <!-- File Upload -->
   35031      <td class=no> &middot; <!-- Submit Button -->
   35032      <td class=no> &middot; <!-- Image Button -->
   35033      <td class=no> &middot; <!-- Reset Button -->
   35034 <!-- <td class="no"> &middot;      Button -->
   35035 
   35036     <tr><th> <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>
   35037      <td class=no> &middot; <!-- Hidden -->
   35038      <td class=yes> Yes     <!-- Text -->
   35039 <!-- <td class="yes"> Yes          Search -->
   35040 <!-- <td class="yes"> Yes          URL -->
   35041      <td class=yes> Yes     <!-- E-mail -->
   35042      <td class=yes> Yes     <!-- Password -->
   35043      <td class=yes> Yes     <!-- Date and Time -->
   35044 <!-- <td class="yes"> Yes          Date -->
   35045 <!-- <td class="yes"> Yes          Month -->
   35046 <!-- <td class="yes"> Yes          Week -->
   35047 <!-- <td class="yes"> Yes          Time -->
   35048      <td class=yes> Yes     <!-- Local Date and Time -->
   35049 <!-- <td class="yes"> Yes          Number -->
   35050      <td class=no> &middot; <!-- Range -->
   35051      <td class=no> &middot; <!-- Color -->
   35052      <td class=no> &middot; <!-- Checkbox -->
   35053 <!-- <td class="no"> &middot;      Radio Button -->
   35054      <td class=no> &middot; <!-- File Upload -->
   35055      <td class=no> &middot; <!-- Submit Button -->
   35056      <td class=no> &middot; <!-- Image Button -->
   35057      <td class=no> &middot; <!-- Reset Button -->
   35058 <!-- <td class="no"> &middot;      Button -->
   35059 
   35060     <tr><th> <code title=attr-input-required><a href=#attr-input-required>required</a></code>
   35061      <td class=no> &middot; <!-- Hidden -->
   35062      <td class=yes> Yes     <!-- Text -->
   35063 <!-- <td class="yes"> Yes          Search -->
   35064 <!-- <td class="yes"> Yes          URL -->
   35065      <td class=yes> Yes     <!-- E-mail -->
   35066      <td class=yes> Yes     <!-- Password -->
   35067      <td class=yes> Yes     <!-- Date and Time -->
   35068 <!-- <td class="yes"> Yes          Date -->
   35069 <!-- <td class="yes"> Yes          Month -->
   35070 <!-- <td class="yes"> Yes          Week -->
   35071 <!-- <td class="yes"> Yes          Time -->
   35072      <td class=yes> Yes     <!-- Local Date and Time -->
   35073 <!-- <td class="yes"> Yes          Number -->
   35074      <td class=no> &middot; <!-- Range -->
   35075      <td class=no> &middot; <!-- Color -->
   35076      <td class=yes> Yes     <!-- Checkbox -->
   35077 <!-- <td class="yes"> Yes          Radio Button -->
   35078      <td class=yes> Yes     <!-- File Upload -->
   35079      <td class=no> &middot; <!-- Submit Button -->
   35080      <td class=no> &middot; <!-- Image Button -->
   35081      <td class=no> &middot; <!-- Reset Button -->
   35082 <!-- <td class="no"> &middot;      Button -->
   35083 
   35084     <tr><th> <code title=attr-input-size><a href=#attr-input-size>size</a></code>
   35085      <td class=no> &middot; <!-- Hidden -->
   35086      <td class=yes> Yes     <!-- Text -->
   35087 <!-- <td class="yes"> Yes          Search -->
   35088 <!-- <td class="yes"> Yes          URL -->
   35089      <td class=yes> Yes     <!-- E-mail -->
   35090      <td class=yes> Yes     <!-- Password -->
   35091      <td class=no> &middot; <!-- Date and Time -->
   35092 <!-- <td class="no"> &middot;      Date -->
   35093 <!-- <td class="no"> &middot;      Month -->
   35094 <!-- <td class="no"> &middot;      Week -->
   35095 <!-- <td class="no"> &middot;      Time -->
   35096      <td class=no> &middot; <!-- Local Date and Time -->
   35097 <!-- <td class="no"> &middot;      Number -->
   35098      <td class=no> &middot; <!-- Range -->
   35099      <td class=no> &middot; <!-- Color -->
   35100      <td class=no> &middot; <!-- Checkbox -->
   35101 <!-- <td class="no"> &middot;      Radio Button -->
   35102      <td class=no> &middot; <!-- File Upload -->
   35103      <td class=no> &middot; <!-- Submit Button -->
   35104      <td class=no> &middot; <!-- Image Button -->
   35105      <td class=no> &middot; <!-- Reset Button -->
   35106 <!-- <td class="no"> &middot;      Button -->
   35107 
   35108     <tr><th> <code title=attr-input-src><a href=#attr-input-src>src</a></code>
   35109      <td class=no> &middot; <!-- Hidden -->
   35110      <td class=no> &middot; <!-- Text -->
   35111 <!-- <td class="no"> &middot;      Search -->
   35112 <!-- <td class="no"> &middot;      URL -->
   35113      <td class=no> &middot; <!-- E-mail -->
   35114      <td class=no> &middot; <!-- Password -->
   35115      <td class=no> &middot; <!-- Date and Time -->
   35116 <!-- <td class="no"> &middot;      Date -->
   35117 <!-- <td class="no"> &middot;      Month -->
   35118 <!-- <td class="no"> &middot;      Week -->
   35119 <!-- <td class="no"> &middot;      Time -->
   35120      <td class=no> &middot; <!-- Local Date and Time -->
   35121 <!-- <td class="no"> &middot;      Number -->
   35122      <td class=no> &middot; <!-- Range -->
   35123      <td class=no> &middot; <!-- Color -->
   35124      <td class=no> &middot; <!-- Checkbox -->
   35125 <!-- <td class="no"> &middot;      Radio Button -->
   35126      <td class=no> &middot; <!-- File Upload -->
   35127      <td class=no> &middot; <!-- Submit Button -->
   35128      <td class=yes> Yes     <!-- Image Button -->
   35129      <td class=no> &middot; <!-- Reset Button -->
   35130 <!-- <td class="no"> &middot;      Button -->
   35131 
   35132     <tr><th> <code title=attr-input-step><a href=#attr-input-step>step</a></code>
   35133      <td class=no> &middot; <!-- Hidden -->
   35134      <td class=no> &middot; <!-- Text -->
   35135 <!-- <td class="no"> &middot;      Search -->
   35136 <!-- <td class="no"> &middot;      URL -->
   35137      <td class=no> &middot; <!-- E-mail -->
   35138      <td class=no> &middot; <!-- Password -->
   35139      <td class=yes> Yes     <!-- Date and Time -->
   35140 <!-- <td class="yes"> Yes          Date -->
   35141 <!-- <td class="yes"> Yes          Month -->
   35142 <!-- <td class="yes"> Yes          Week -->
   35143 <!-- <td class="yes"> Yes          Time -->
   35144      <td class=yes> Yes     <!-- Local Date and Time -->
   35145 <!-- <td class="yes"> Yes          Number -->
   35146      <td class=yes> Yes     <!-- Range -->
   35147      <td class=no> &middot; <!-- Color -->
   35148      <td class=no> &middot; <!-- Checkbox -->
   35149 <!-- <td class="no"> &middot;      Radio Button -->
   35150      <td class=no> &middot; <!-- File Upload -->
   35151      <td class=no> &middot; <!-- Submit Button -->
   35152      <td class=no> &middot; <!-- Image Button -->
   35153      <td class=no> &middot; <!-- Reset Button -->
   35154 <!-- <td class="no"> &middot;      Button -->
   35155 
   35156     <tr><th> <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
   35157      <td class=no> &middot; <!-- Hidden -->
   35158      <td class=no> &middot; <!-- Text -->
   35159 <!-- <td class="no"> &middot;      Search -->
   35160 <!-- <td class="no"> &middot;      URL -->
   35161      <td class=no> &middot; <!-- E-mail -->
   35162      <td class=no> &middot; <!-- Password -->
   35163      <td class=no> &middot; <!-- Date and Time -->
   35164 <!-- <td class="no"> &middot;      Date -->
   35165 <!-- <td class="no"> &middot;      Month -->
   35166 <!-- <td class="no"> &middot;      Week -->
   35167 <!-- <td class="no"> &middot;      Time -->
   35168      <td class=no> &middot; <!-- Local Date and Time -->
   35169 <!-- <td class="no"> &middot;      Number -->
   35170      <td class=no> &middot; <!-- Range -->
   35171      <td class=no> &middot; <!-- Color -->
   35172      <td class=no> &middot; <!-- Checkbox -->
   35173 <!-- <td class="no"> &middot;      Radio Button -->
   35174      <td class=no> &middot; <!-- File Upload -->
   35175      <td class=no> &middot; <!-- Submit Button -->
   35176      <td class=yes> Yes     <!-- Image Button -->
   35177      <td class=no> &middot; <!-- Reset Button -->
   35178 <!-- <td class="no"> &middot;      Button -->
   35179 
   35180    <tbody><tr><th colspan=14 scope=rowgroup>IDL attributes and methods
   35181 
   35182     <tr><th> <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>
   35183      <td class=no> &middot; <!-- Hidden -->
   35184      <td class=no> &middot; <!-- Text -->
   35185 <!-- <td class="no"> &middot;      Search -->
   35186 <!-- <td class="no"> &middot;      URL -->
   35187      <td class=no> &middot; <!-- E-mail -->
   35188      <td class=no> &middot; <!-- Password -->
   35189      <td class=no> &middot; <!-- Date and Time -->
   35190 <!-- <td class="no"> &middot;      Date -->
   35191 <!-- <td class="no"> &middot;      Month -->
   35192 <!-- <td class="no"> &middot;      Week -->
   35193 <!-- <td class="no"> &middot;      Time -->
   35194      <td class=no> &middot; <!-- Local Date and Time -->
   35195 <!-- <td class="no"> &middot;      Number -->
   35196      <td class=no> &middot; <!-- Range -->
   35197      <td class=no> &middot; <!-- Color -->
   35198      <td class=yes> Yes     <!-- Checkbox -->
   35199 <!-- <td class="yes"> Yes          Radio Button -->
   35200      <td class=no> &middot; <!-- File Upload -->
   35201      <td class=no> &middot; <!-- Submit Button -->
   35202      <td class=no> &middot; <!-- Image Button -->
   35203      <td class=no> &middot; <!-- Reset Button -->
   35204 <!-- <td class="no"> &middot;      Button -->
   35205 
   35206     <tr><th> <code title=dom-input-files><a href=#dom-input-files>files</a></code>
   35207      <td class=no> &middot; <!-- Hidden -->
   35208      <td class=no> &middot; <!-- Text -->
   35209 <!-- <td class="no"> &middot;      Search -->
   35210 <!-- <td class="no"> &middot;      URL -->
   35211      <td class=no> &middot; <!-- E-mail -->
   35212      <td class=no> &middot; <!-- Password -->
   35213      <td class=no> &middot; <!-- Date and Time -->
   35214 <!-- <td class="no"> &middot;      Date -->
   35215 <!-- <td class="no"> &middot;      Month -->
   35216 <!-- <td class="no"> &middot;      Week -->
   35217 <!-- <td class="no"> &middot;      Time -->
   35218      <td class=no> &middot; <!-- Local Date and Time -->
   35219 <!-- <td class="no"> &middot;      Number -->
   35220      <td class=no> &middot; <!-- Range -->
   35221      <td class=no> &middot; <!-- Color -->
   35222      <td class=no> &middot; <!-- Checkbox -->
   35223 <!-- <td class="no"> &middot;      Radio Button -->
   35224      <td class=yes> Yes     <!-- File Upload -->
   35225      <td class=no> &middot; <!-- Submit Button -->
   35226      <td class=no> &middot; <!-- Image Button -->
   35227      <td class=no> &middot; <!-- Reset Button -->
   35228 <!-- <td class="no"> &middot;      Button -->
   35229 
   35230     <tr class=impl><th> <code title=dom-input-value><a href=#dom-input-value>value</a></code>
   35231      <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Hidden -->
   35232      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Text -->
   35233 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Search -->
   35234 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      URL -->
   35235      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- E-mail -->
   35236      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Password -->
   35237      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Date and Time -->
   35238 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Date -->
   35239 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Month -->
   35240 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Week -->
   35241 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Time -->
   35242      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Local Date and Time -->
   35243 <!-- <td class="yes"> <span title="dom-input-value-value">value</span>      Number -->
   35244      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Range -->
   35245      <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Color -->
   35246      <td class=yes> <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a> <!-- Checkbox -->
   35247 <!-- <td class="yes"> <span title="dom-input-value-default-on">default/on</span>      Radio Button -->
   35248      <td class=yes> <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a> <!-- File Upload -->
   35249      <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Submit Button -->
   35250      <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Image Button -->
   35251      <td class=yes> <a href=#dom-input-value-default title=dom-input-value-default>default</a> <!-- Reset Button -->
   35252 <!-- <td class="yes"> <span title="dom-input-value-default">default</span>      Button -->
   35253 
   35254     <tr><th> <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>
   35255      <td class=no> &middot; <!-- Hidden -->
   35256      <td class=no> &middot; <!-- Text -->
   35257 <!-- <td class="no"> &middot;      Search -->
   35258 <!-- <td class="no"> &middot;      URL -->
   35259      <td class=no> &middot; <!-- E-mail -->
   35260      <td class=no> &middot; <!-- Password -->
   35261      <td class=yes> Yes     <!-- Date and Time -->
   35262 <!-- <td class="yes"> Yes          Date -->
   35263 <!-- <td class="yes"> Yes          Month -->
   35264 <!-- <td class="yes"> Yes          Week -->
   35265 <!-- <td class="yes"> Yes          Time -->
   35266      <td class=no> &middot; <!-- Local Date and Time -->
   35267 <!-- <td class="no"> &middot;      Number -->
   35268      <td class=no> &middot; <!-- Range -->
   35269      <td class=no> &middot; <!-- Color -->
   35270      <td class=no> &middot; <!-- Checkbox -->
   35271 <!-- <td class="no"> &middot;      Radio Button -->
   35272      <td class=no> &middot; <!-- File Upload -->
   35273      <td class=no> &middot; <!-- Submit Button -->
   35274      <td class=no> &middot; <!-- Image Button -->
   35275      <td class=no> &middot; <!-- Reset Button -->
   35276 <!-- <td class="no"> &middot;      Button -->
   35277 
   35278     <tr><th> <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>
   35279      <td class=no> &middot; <!-- Hidden -->
   35280      <td class=no> &middot; <!-- Text -->
   35281 <!-- <td class="no"> &middot;      Search -->
   35282 <!-- <td class="no"> &middot;      URL -->
   35283      <td class=no> &middot; <!-- E-mail -->
   35284      <td class=no> &middot; <!-- Password -->
   35285      <td class=yes> Yes     <!-- Date and Time -->
   35286 <!-- <td class="yes"> Yes          Date -->
   35287 <!-- <td class="yes"> Yes          Month -->
   35288 <!-- <td class="yes"> Yes          Week -->
   35289 <!-- <td class="yes"> Yes          Time -->
   35290      <td class=yes> Yes     <!-- Local Date and Time -->
   35291 <!-- <td class="yes"> Yes          Number -->
   35292      <td class=yes> Yes     <!-- Range -->
   35293      <td class=no> &middot; <!-- Color -->
   35294      <td class=no> &middot; <!-- Checkbox -->
   35295 <!-- <td class="no"> &middot;      Radio Button -->
   35296      <td class=no> &middot; <!-- File Upload -->
   35297      <td class=no> &middot; <!-- Submit Button -->
   35298      <td class=no> &middot; <!-- Image Button -->
   35299      <td class=no> &middot; <!-- Reset Button -->
   35300 <!-- <td class="no"> &middot;      Button -->
   35301 
   35302     <tr><th> <code title=dom-input-list><a href=#dom-input-list>list</a></code>
   35303      <td class=no> &middot; <!-- Hidden -->
   35304      <td class=yes> Yes     <!-- Text -->
   35305 <!-- <td class="yes"> Yes          Search -->
   35306 <!-- <td class="yes"> Yes          URL -->
   35307      <td class=yes> Yes     <!-- E-mail -->
   35308      <td class=no> &middot; <!-- Password -->
   35309      <td class=yes> Yes     <!-- Date and Time -->
   35310 <!-- <td class="yes"> Yes          Date -->
   35311 <!-- <td class="yes"> Yes          Month -->
   35312 <!-- <td class="yes"> Yes          Week -->
   35313 <!-- <td class="yes"> Yes          Time -->
   35314      <td class=yes> Yes     <!-- Local Date and Time -->
   35315 <!-- <td class="yes"> Yes          Number -->
   35316      <td class=yes> Yes     <!-- Range -->
   35317      <td class=yes> Yes     <!-- Color -->
   35318      <td class=no> &middot; <!-- Checkbox -->
   35319 <!-- <td class="no"> &middot;      Radio Button -->
   35320      <td class=no> &middot; <!-- File Upload -->
   35321      <td class=no> &middot; <!-- Submit Button -->
   35322      <td class=no> &middot; <!-- Image Button -->
   35323      <td class=no> &middot; <!-- Reset Button -->
   35324 <!-- <td class="no"> &middot;      Button -->
   35325 
   35326     <tr><th> <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>
   35327      <td class=no> &middot; <!-- Hidden -->
   35328      <td class=yes> Yes     <!-- Text -->
   35329 <!-- <td class="yes"> Yes          Search -->
   35330 <!-- <td class="yes"> Yes          URL -->
   35331      <td class=yes> Yes     <!-- E-mail -->
   35332      <td class=no> &middot; <!-- Password -->
   35333      <td class=yes> Yes     <!-- Date and Time -->
   35334 <!-- <td class="yes"> Yes          Date -->
   35335 <!-- <td class="yes"> Yes          Month -->
   35336 <!-- <td class="yes"> Yes          Week -->
   35337 <!-- <td class="yes"> Yes          Time -->
   35338      <td class=yes> Yes     <!-- Local Date and Time -->
   35339 <!-- <td class="yes"> Yes          Number -->
   35340      <td class=yes> Yes     <!-- Range -->
   35341      <td class=yes> Yes     <!-- Color -->
   35342      <td class=no> &middot; <!-- Checkbox -->
   35343 <!-- <td class="no"> &middot;      Radio Button -->
   35344      <td class=no> &middot; <!-- File Upload -->
   35345      <td class=no> &middot; <!-- Submit Button -->
   35346      <td class=no> &middot; <!-- Image Button -->
   35347      <td class=no> &middot; <!-- Reset Button -->
   35348 <!-- <td class="no"> &middot;      Button -->
   35349 
   35350     <tr><th> <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>
   35351      <td class=no> &middot; <!-- Hidden -->
   35352      <td class=yes> Yes     <!-- Text -->
   35353 <!-- <td class="yes"> Yes          Search -->
   35354 <!-- <td class="yes"> Yes          URL -->
   35355      <td class=yes> Yes     <!-- E-mail -->
   35356      <td class=yes> Yes     <!-- Password -->
   35357      <td class=no> &middot; <!-- Date and Time -->
   35358 <!-- <td class="no"> &middot;      Date -->
   35359 <!-- <td class="no"> &middot;      Month -->
   35360 <!-- <td class="no"> &middot;      Week -->
   35361 <!-- <td class="no"> &middot;      Time -->
   35362      <td class=no> &middot; <!-- Local Date and Time -->
   35363 <!-- <td class="no"> &middot;      Number -->
   35364      <td class=no> &middot; <!-- Range -->
   35365      <td class=no> &middot; <!-- Color -->
   35366      <td class=no> &middot; <!-- Checkbox -->
   35367 <!-- <td class="no"> &middot;      Radio Button -->
   35368      <td class=no> &middot; <!-- File Upload -->
   35369      <td class=no> &middot; <!-- Submit Button -->
   35370      <td class=no> &middot; <!-- Image Button -->
   35371      <td class=no> &middot; <!-- Reset Button -->
   35372 <!-- <td class="no"> &middot;      Button -->
   35373 
   35374     <tr><th> <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>
   35375      <td class=no> &middot; <!-- Hidden -->
   35376      <td class=yes> Yes     <!-- Text -->
   35377 <!-- <td class="yes"> Yes          Search -->
   35378 <!-- <td class="yes"> Yes          URL -->
   35379      <td class=yes> Yes     <!-- E-mail -->
   35380      <td class=yes> Yes     <!-- Password -->
   35381      <td class=no> &middot; <!-- Date and Time -->
   35382 <!-- <td class="no"> &middot;      Date -->
   35383 <!-- <td class="no"> &middot;      Month -->
   35384 <!-- <td class="no"> &middot;      Week -->
   35385 <!-- <td class="no"> &middot;      Time -->
   35386      <td class=no> &middot; <!-- Local Date and Time -->
   35387 <!-- <td class="no"> &middot;      Number -->
   35388      <td class=no> &middot; <!-- Range -->
   35389      <td class=no> &middot; <!-- Color -->
   35390      <td class=no> &middot; <!-- Checkbox -->
   35391 <!-- <td class="no"> &middot;      Radio Button -->
   35392      <td class=no> &middot; <!-- File Upload -->
   35393      <td class=no> &middot; <!-- Submit Button -->
   35394      <td class=no> &middot; <!-- Image Button -->
   35395      <td class=no> &middot; <!-- Reset Button -->
   35396 <!-- <td class="no"> &middot;      Button -->
   35397 
   35398     <tr><th> <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
   35399      <td class=no> &middot; <!-- Hidden -->
   35400      <td class=yes> Yes     <!-- Text -->
   35401 <!-- <td class="yes"> Yes          Search -->
   35402 <!-- <td class="yes"> Yes          URL -->
   35403      <td class=yes> Yes     <!-- E-mail -->
   35404      <td class=yes> Yes     <!-- Password -->
   35405      <td class=no> &middot; <!-- Date and Time -->
   35406 <!-- <td class="no"> &middot;      Date -->
   35407 <!-- <td class="no"> &middot;      Month -->
   35408 <!-- <td class="no"> &middot;      Week -->
   35409 <!-- <td class="no"> &middot;      Time -->
   35410      <td class=no> &middot; <!-- Local Date and Time -->
   35411 <!-- <td class="no"> &middot;      Number -->
   35412      <td class=no> &middot; <!-- Range -->
   35413      <td class=no> &middot; <!-- Color -->
   35414      <td class=no> &middot; <!-- Checkbox -->
   35415 <!-- <td class="no"> &middot;      Radio Button -->
   35416      <td class=no> &middot; <!-- File Upload -->
   35417      <td class=no> &middot; <!-- Submit Button -->
   35418      <td class=no> &middot; <!-- Image Button -->
   35419      <td class=no> &middot; <!-- Reset Button -->
   35420 <!-- <td class="no"> &middot;      Button -->
   35421 
   35422     <tr><th> <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   35423      <td class=no> &middot; <!-- Hidden -->
   35424      <td class=yes> Yes     <!-- Text -->
   35425 <!-- <td class="yes"> Yes          Search -->
   35426 <!-- <td class="yes"> Yes          URL -->
   35427      <td class=yes> Yes     <!-- E-mail -->
   35428      <td class=yes> Yes     <!-- Password -->
   35429      <td class=no> &middot; <!-- Date and Time -->
   35430 <!-- <td class="no"> &middot;      Date -->
   35431 <!-- <td class="no"> &middot;      Month -->
   35432 <!-- <td class="no"> &middot;      Week -->
   35433 <!-- <td class="no"> &middot;      Time -->
   35434      <td class=no> &middot; <!-- Local Date and Time -->
   35435 <!-- <td class="no"> &middot;      Number -->
   35436      <td class=no> &middot; <!-- Range -->
   35437      <td class=no> &middot; <!-- Color -->
   35438      <td class=no> &middot; <!-- Checkbox -->
   35439 <!-- <td class="no"> &middot;      Radio Button -->
   35440      <td class=no> &middot; <!-- File Upload -->
   35441      <td class=no> &middot; <!-- Submit Button -->
   35442      <td class=no> &middot; <!-- Image Button -->
   35443      <td class=no> &middot; <!-- Reset Button -->
   35444 <!-- <td class="no"> &middot;      Button -->
   35445 
   35446     <tr><th> <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
   35447      <td class=no> &middot; <!-- Hidden -->
   35448      <td class=no> &middot; <!-- Text -->
   35449 <!-- <td class="no"> &middot;      Search -->
   35450 <!-- <td class="no"> &middot;      URL -->
   35451      <td class=no> &middot; <!-- E-mail -->
   35452      <td class=no> &middot; <!-- Password -->
   35453      <td class=yes> Yes     <!-- Date and Time -->
   35454 <!-- <td class="yes"> Yes          Date -->
   35455 <!-- <td class="yes"> Yes          Month -->
   35456 <!-- <td class="yes"> Yes          Week -->
   35457 <!-- <td class="yes"> Yes          Time -->
   35458      <td class=yes> Yes     <!-- Local Date and Time -->
   35459 <!-- <td class="yes"> Yes          Number -->
   35460      <td class=yes> Yes     <!-- Range -->
   35461      <td class=no> &middot; <!-- Color -->
   35462      <td class=no> &middot; <!-- Checkbox -->
   35463 <!-- <td class="no"> &middot;      Radio Button -->
   35464      <td class=no> &middot; <!-- File Upload -->
   35465      <td class=no> &middot; <!-- Submit Button -->
   35466      <td class=no> &middot; <!-- Image Button -->
   35467      <td class=no> &middot; <!-- Reset Button -->
   35468 <!-- <td class="no"> &middot;      Button -->
   35469 
   35470     <tr><th> <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>
   35471      <td class=no> &middot; <!-- Hidden -->
   35472      <td class=no> &middot; <!-- Text -->
   35473 <!-- <td class="no"> &middot;      Search -->
   35474 <!-- <td class="no"> &middot;      URL -->
   35475      <td class=no> &middot; <!-- E-mail -->
   35476      <td class=no> &middot; <!-- Password -->
   35477      <td class=yes> Yes     <!-- Date and Time -->
   35478 <!-- <td class="yes"> Yes          Date -->
   35479 <!-- <td class="yes"> Yes          Month -->
   35480 <!-- <td class="yes"> Yes          Week -->
   35481 <!-- <td class="yes"> Yes          Time -->
   35482      <td class=yes> Yes     <!-- Local Date and Time -->
   35483 <!-- <td class="yes"> Yes          Number -->
   35484      <td class=yes> Yes     <!-- Range -->
   35485      <td class=no> &middot; <!-- Color -->
   35486      <td class=no> &middot; <!-- Checkbox -->
   35487 <!-- <td class="no"> &middot;      Radio Button -->
   35488      <td class=no> &middot; <!-- File Upload -->
   35489      <td class=no> &middot; <!-- Submit Button -->
   35490      <td class=no> &middot; <!-- Image Button -->
   35491      <td class=no> &middot; <!-- Reset Button -->
   35492 <!-- <td class="no"> &middot;      Button -->
   35493 
   35494    <tbody><tr><th colspan=14 scope=rowgroup>Events
   35495 
   35496     <tr><th> <span title=""><code title=event-input-input><a href=#event-input-input>input</a></code> event</span>
   35497      <td class=no> &middot; <!-- Hidden -->
   35498      <td class=yes> Yes     <!-- Text -->
   35499 <!-- <td class="yes"> Yes          Search -->
   35500 <!-- <td class="yes"> Yes          URL -->
   35501      <td class=yes> Yes     <!-- E-mail -->
   35502      <td class=yes> Yes     <!-- Password -->
   35503      <td class=yes> Yes     <!-- Date and Time -->
   35504 <!-- <td class="yes"> Yes          Date -->
   35505 <!-- <td class="yes"> Yes          Month -->
   35506 <!-- <td class="yes"> Yes          Week -->
   35507 <!-- <td class="yes"> Yes          Time -->
   35508      <td class=yes> Yes     <!-- Local Date and Time -->
   35509 <!-- <td class="yes"> Yes          Number -->
   35510      <td class=yes> Yes     <!-- Range -->
   35511      <td class=yes> Yes     <!-- Color -->
   35512      <td class=no> &middot; <!-- Checkbox -->
   35513 <!-- <td class="no"> &middot;      Radio Button -->
   35514      <td class=no> &middot; <!-- File Upload -->
   35515      <td class=no> &middot; <!-- Submit Button -->
   35516      <td class=no> &middot; <!-- Image Button -->
   35517      <td class=no> &middot; <!-- Reset Button -->
   35518 <!-- <td class="no"> &middot;      Button -->
   35519 
   35520     <tr><th> <span title=""><code title=event-input-change><a href=#event-input-change>change</a></code> event</span>
   35521      <td class=no> &middot; <!-- Hidden -->
   35522      <td class=yes> Yes     <!-- Text -->
   35523 <!-- <td class="yes"> Yes          Search -->
   35524 <!-- <td class="yes"> Yes          URL -->
   35525      <td class=yes> Yes     <!-- E-mail -->
   35526      <td class=yes> Yes     <!-- Password -->
   35527      <td class=yes> Yes     <!-- Date and Time -->
   35528 <!-- <td class="yes"> Yes          Date -->
   35529 <!-- <td class="yes"> Yes          Month -->
   35530 <!-- <td class="yes"> Yes          Week -->
   35531 <!-- <td class="yes"> Yes          Time -->
   35532      <td class=yes> Yes     <!-- Local Date and Time -->
   35533 <!-- <td class="yes"> Yes          Number -->
   35534      <td class=yes> Yes     <!-- Range -->
   35535      <td class=yes> Yes     <!-- Color -->
   35536      <td class=yes> Yes     <!-- Checkbox -->
   35537 <!-- <td class="yes"> Yes          Radio Button -->
   35538      <td class=yes> Yes     <!-- File Upload -->
   35539      <td class=no> &middot; <!-- Submit Button -->
   35540      <td class=no> &middot; <!-- Image Button -->
   35541      <td class=no> &middot; <!-- Reset Button -->
   35542 <!-- <td class="no"> &middot;      Button -->
   35543 
   35544   </table><div class=impl>
   35545 
   35546   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute changes state, and
   35547   when the element is first created, the element's rendering and
   35548   behavior must change to the new state's accordingly and the
   35549   <dfn id=value-sanitization-algorithm>value sanitization algorithm</dfn>, if one is defined for the
   35550   <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's new state,
   35551   must be invoked.</p>
   35552 
   35553   <p>Each <code><a href=#the-input-element>input</a></code> element has a <a href=#concept-fe-value title=concept-fe-value>value</a>, which is exposed by the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute. Some states
   35554   define an <dfn id=concept-input-value-string-number title=concept-input-value-string-number>algorithm
   35555   to convert a string to a number</dfn>, an <dfn id=concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   35556   number to a string</dfn>, an <dfn id=concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   35557   string to a <code>Date</code> object</dfn>, and an <dfn id=concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   35558   <code>Date</code> object to a string</dfn>, which are used by
   35559   <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   35560   <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   35561   <code title=attr-input-step><a href=#attr-input-step>step</a></code>,
   35562   <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   35563   <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>,
   35564   <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   35565   <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>.</p>
   35566 
   35567   <p>Each <code><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</dfn>. When
   35568   it is true, the element is said to have a <dfn id=concept-input-value-dirty title=concept-input-value-dirty><i>dirty value</i></dfn>. The
   35569   <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a>
   35570   must be initially set to false when the element is created, and must
   35571   be set to true whenever the user interacts with the control in a way
   35572   that changes the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35573 
   35574   </div>
   35575 
   35576   <p>The <dfn id=attr-input-value title=attr-input-value><code>value</code></dfn>
   35577   content attribute gives the default <a href=#concept-fe-value title=concept-fe-value>value</a> of the <code><a href=#the-input-element>input</a></code>
   35578   element. <span class=impl>When the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute is added,
   35579   set, or removed, if the control does not have a <i title=concept-input-value-dirty><a href=#concept-input-value-dirty>dirty value</a></i>, the user agent
   35580   must set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
   35581   element to the value of the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute, if there is
   35582   one, or the empty string otherwise, and then run the current
   35583   <a href=#value-sanitization-algorithm>value sanitization algorithm</a>, if one is
   35584   defined.</span></p>
   35585 
   35586   <div class=impl>
   35587 
   35588   <p>Each <code><a href=#the-input-element>input</a></code> element has a <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>, which is exposed by
   35589   the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> IDL
   35590   attribute.</p>
   35591 
   35592   <p>Each <code><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   35593   flag</dfn>. When it is true, the element is said to have a <dfn id=concept-input-checked-dirty title=concept-input-checked-dirty><i>dirty
   35594   checkedness</i></dfn>. The <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   35595   flag</a> must be initially set to false when the element is
   35596   created, and must be set to true whenever the user interacts with
   35597   the control in a way that changes the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>
   35598 
   35599   </div>
   35600 
   35601   <p>The <dfn id=attr-input-checked title=attr-input-checked><code>checked</code></dfn>
   35602   content attribute is a <a href=#boolean-attribute>boolean attribute</a> that gives the
   35603   default <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the
   35604   <code><a href=#the-input-element>input</a></code> element. <span class=impl>When the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> content attribute is
   35605   added, if the control does not have <i title=concept-input-checked-dirty><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
   35606   agent must set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to
   35607   true; when the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
   35608   content attribute is removed, if the control does not have <i title=concept-input-checked-dirty><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
   35609   agent must set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to
   35610   false.</span></p>
   35611 
   35612   <div class=impl>
   35613 
   35614   <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   35615   algorithm</a> for <code><a href=#the-input-element>input</a></code> elements is to set the <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a> and
   35616   <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   35617   flag</a> back to false, set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to the value of
   35618   the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute,
   35619   if there is one, or the empty string otherwise, set the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element to true
   35620   if the element has a <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>
   35621   content attribute and false if it does not, and then invoke the
   35622   <a href=#value-sanitization-algorithm>value sanitization algorithm</a>, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   35623   defines one.</p>
   35624 
   35625   <p>Each <code><a href=#the-input-element>input</a></code> element is either <dfn id=concept-input-mutable title=concept-input-mutable><i>mutable</i></dfn> or <dfn id=concept-input-immutable title=concept-input-immutable><i>immutable</i></dfn>. Except where
   35626   otherwise specified, an <code><a href=#the-input-element>input</a></code> element is always <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>. Similarly, except where
   35627   otherwise specified, the user agent should not allow the user to
   35628   modify the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or
   35629   <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>
   35630 
   35631   <p>When an <code><a href=#the-input-element>input</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, it is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p>
   35632 
   35633   <p>When an <code><a href=#the-input-element>input</a></code> element does not have a
   35634   <code><a href=#document>Document</a></code> node as one of its ancestors (i.e. when it is
   35635   not in the document), it is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p> <!-- XBL2 spec
   35636   point -->
   35637 
   35638   <p class=note>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute can also in
   35639   some cases (e.g. for the <a href=#date-state title=attr-input-type-date>Date</a> state, but not the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state) make an
   35640   <code><a href=#the-input-element>input</a></code> element <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</p>
   35641 
   35642   <p>When an <code><a href=#the-input-element>input</a></code> element is cloned, the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a>,
   35643   <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>, and <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   35644   flag</a> must be propagated to the clone when it is created.</p>
   35645 
   35646   </div>
   35647 
   35648   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   35649   explicitly associate the <code><a href=#the-input-element>input</a></code> element with its
   35650   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   35651   attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
   35652   the control non-interactive and to prevent its value from being
   35653   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   35654   attribute controls focus.</p>
   35655 
   35656   <div class=impl>
   35657 
   35658   <p>The <dfn id=dom-input-indeterminate title=dom-input-indeterminate><code>indeterminate</code></dfn> IDL
   35659   attribute must initially be set to false. On getting, it must return
   35660   the last value it was set to. On setting, it must be set to the new
   35661   value. It has no effect except for changing the appearance of <a href=#checkbox-state title=attr-input-type-checkbox>checkbox</a> controls.</p>
   35662 
   35663   <p>The <dfn id=dom-input-accept title=dom-input-accept><code>accept</code></dfn>, <dfn id=dom-input-alt title=dom-input-alt><code>alt</code></dfn>, <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn>, <dfn id=dom-input-max title=dom-input-max><code>max</code></dfn>, <dfn id=dom-input-min title=dom-input-min><code>min</code></dfn>, <dfn id=dom-input-multiple title=dom-input-multiple><code>multiple</code></dfn>, <dfn id=dom-input-pattern title=dom-input-pattern><code>pattern</code></dfn>, <dfn id=dom-input-placeholder title=dom-input-placeholder><code>placeholder</code></dfn>, <dfn id=dom-input-required title=dom-input-required><code>required</code></dfn>, <dfn id=dom-input-size title=dom-input-size><code>size</code></dfn>, <dfn id=dom-input-src title=dom-input-src><code>src</code></dfn>, <dfn id=dom-input-step title=dom-input-step><code>step</code></dfn>, and <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes must
   35664   <a href=#reflect>reflect</a> the respective content attributes of the same
   35665   name. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
   35666   attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
   35667   <a href=#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
   35668   must <a href=#reflect>reflect</a> the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> content attribute. The
   35669   <dfn id=dom-input-defaultchecked title=dom-input-defaultChecked><code>defaultChecked</code></dfn>
   35670   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> content attribute. The
   35671   <dfn id=dom-input-defaultvalue title=dom-input-defaultValue><code>defaultValue</code></dfn>
   35672   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute.</p>
   35673 
   35674   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   35675   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   35676   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   35677   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   35678   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   35679   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   35680   and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   35681   methods and attributes expose the element's text selection. The
   35682   <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   35683   element's forms API.</p>
   35684 
   35685   </div>
   35686 
   35687 
   35688 
   35689   <h5 id=states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>
   35690 
   35691 
   35692   <h6 id=hidden-state><span class=secno>4.10.7.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
   35693 
   35694   <div class=impl>
   35695 
   35696   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state, the rules in
   35697   this section apply.</p>
   35698 
   35699   </div>
   35700 
   35701   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a value
   35702   that is not intended to be examined or manipulated by the user.</p>
   35703 
   35704   <div class=impl>
   35705 
   35706   <p><strong>Constraint validation</strong>: If an <code><a href=#the-input-element>input</a></code>
   35707   element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   35708   the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state, it is
   35709   <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   35710 
   35711   </div>
   35712 
   35713   <p>If the <code title=attr-input-value><a href=#attr-input-value>name</a></code> attribute is
   35714   present and has a value that is a <a href=#case-sensitive>case-sensitive</a> match
   35715   for the string "<code title="">_charset_</code>", then the element's
   35716   <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute must be
   35717   omitted.</p>
   35718 
   35719   <div class=bookkeeping>
   35720 
   35721    <p>The
   35722    <code title=dom-input-value><a href=#dom-input-value>value</a></code>
   35723    IDL attribute applies to this element and is
   35724    in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
   35725 
   35726    <p>The following content attributes must not be specified and do not
   35727    apply to the element:
   35728    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   35729    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   35730    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   35731    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   35732    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   35733    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   35734    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   35735    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   35736    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   35737    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   35738    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   35739    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   35740    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   35741    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   35742    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   35743    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   35744    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   35745    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   35746    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   35747    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   35748    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   35749    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   35750    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   35751 
   35752    <p>The following IDL attributes and methods do not apply to the
   35753    element:
   35754    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   35755    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   35756    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   35757    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   35758    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   35759    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   35760    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   35761    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   35762    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   35763    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   35764    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   35765    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   35766 
   35767    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
   35768 
   35769   </div>
   35770 
   35771 
   35772   <h6 id=text-state-and-search-state><span class=secno>4.10.7.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>
   35773 
   35774   <!-- v2 idea: applying input masks to <input>, e.g. for entering
   35775        data with slashes and dashes (ack Greg Kilwein)
   35776   -->
   35777 
   35778   <div class=impl>
   35779 
   35780   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state or the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state, the rules in
   35781   this section apply.</p>
   35782 
   35783   </div>
   35784 
   35785   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a one line
   35786   plain text edit control for the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35787 
   35788   <p class=note>The difference between the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state and the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state is primarily
   35789   stylistic: on platforms where search fields are distinguished from
   35790   regular text fields, the <a href=#text-state-and-search-state title=attr-input-type-search>Search</a> state might result in
   35791   an appearance consistent with the platform's search fields rather
   35792   than appearing like a regular text field.</p>
   35793 
   35794   <div class=impl>
   35795 
   35796   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   35797   its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
   35798   by the user. User agents must not allow users to insert U+000A LINE
   35799   FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the
   35800   element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35801   </div>
   35802 
   35803   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   35804   specified, must have a value that contains no U+000A LINE FEED (LF)
   35805   or U+000D CARRIAGE RETURN (CR) characters.</p>
   35806 
   35807   <div class=impl>
   35808 
   35809   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   35810   follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35811 
   35812   </div>
   35813 
   35814   <div class=bookkeeping>
   35815 
   35816    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   35817    attributes, IDL attributes, and methods apply to the element:
   35818    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   35819    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   35820    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   35821    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   35822    <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   35823    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   35824    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   35825    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   35826    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   35827    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   35828    <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   35829    <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   35830    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   35831    <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   35832    <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   35833 
   35834    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   35835    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   35836 
   35837    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   35838 
   35839    <p>The following content attributes must not be specified and do not
   35840    apply to the element:
   35841    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   35842    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   35843    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   35844    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   35845    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   35846    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   35847    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   35848    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   35849    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   35850    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   35851    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   35852    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   35853    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   35854    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   35855    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   35856 
   35857    <p>The following IDL attributes and methods do not apply to the
   35858    element:
   35859    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   35860    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   35861    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   35862    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   35863    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   35864    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   35865 
   35866   </div>
   35867 
   35868 
   35869   <h6 id=telephone-state><span class=secno>4.10.7.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>
   35870 
   35871   <div class=impl>
   35872 
   35873   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> state, the rules in
   35874   this section apply.</p>
   35875 
   35876   </div>
   35877 
   35878   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   35879   for editing a telephone number given in the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35880 
   35881   <div class=impl>
   35882 
   35883   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   35884   its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
   35885   by the user. User agents may change the punctuation of <a href=#concept-fe-value title=concept-fe-value>values</a> that the user enters. User
   35886   agents must not allow users to insert U+000A LINE FEED (LF) or
   35887   U+000D CARRIAGE RETURN (CR) characters into the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35888 
   35889   </div>
   35890 
   35891   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   35892   specified, must have a value that contains no U+000A LINE FEED (LF)
   35893   or U+000D CARRIAGE RETURN (CR) characters.</p>
   35894 
   35895   <div class=impl>
   35896 
   35897   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   35898   follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35899 
   35900   </div>
   35901 
   35902   <p class=note>Unlike the <a href=#url-state title=attr-input-type-url>URL</a> and <a href=#e-mail-state title=attr-input-type-email>E-mail</a> types, the <a href=#telephone-state title=attr-input-type-tel>Telephone</a> type does not enforce a
   35903   particular syntax. This is intentional; in practice, telephone
   35904   number fields tend to be free-form fields, because there are a wide
   35905   variety of valid phone numbers. Systems that need to enforce a
   35906   particular format are encouraged to use the <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute or the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method
   35907   to hook into the client-side validation mechanism.</p>
   35908 
   35909 
   35910   <div class=bookkeeping>
   35911 
   35912    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   35913    attributes, IDL attributes, and methods apply to the element:
   35914    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   35915    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   35916    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   35917    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   35918    <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   35919    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   35920    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   35921    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   35922    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   35923    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   35924    <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   35925    <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   35926    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   35927    <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   35928    <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   35929 
   35930    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   35931    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   35932 
   35933    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   35934 
   35935    <p>The following content attributes must not be specified and do not
   35936    apply to the element:
   35937    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   35938    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   35939    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   35940    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   35941    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   35942    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   35943    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   35944    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   35945    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   35946    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   35947    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   35948    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   35949    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   35950    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   35951    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   35952 
   35953    <p>The following IDL attributes and methods do not apply to the
   35954    element:
   35955    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   35956    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   35957    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   35958    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   35959    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   35960    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   35961 
   35962   </div>
   35963 
   35964 
   35965   <h6 id=url-state><span class=secno>4.10.7.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>
   35966 
   35967   <div class=impl>
   35968 
   35969   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#url-state title=attr-input-type-url>URL</a> state, the rules in this
   35970   section apply.</p>
   35971 
   35972   </div>
   35973 
   35974   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   35975   for editing a single <a href=#absolute-url>absolute URL</a> given in the
   35976   element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35977 
   35978   <div class=impl>
   35979 
   35980   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   35981   the user agent should allow the user to change the URL represented
   35982   by its <a href=#concept-fe-value title=concept-fe-value>value</a>. User agents may
   35983   allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   35984   <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute URL</a>, but
   35985   may also or instead automatically escape characters entered by the
   35986   user so that the <a href=#concept-fe-value title=concept-fe-value>value</a> is
   35987   always a <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute
   35988   URL</a> (even if that isn't the actual value seen and edited by
   35989   the user in the interface). User agents should allow the user to set
   35990   the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty
   35991   string. User agents must not allow users to insert U+000A LINE FEED
   35992   (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   35993 
   35994   </div>
   35995 
   35996   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   35997   specified, must have a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
   35998   surrounded by spaces</a> that is also an <a href=#absolute-url>absolute
   35999   URL</a>.</p>
   36000 
   36001   <div class=impl>
   36002 
   36003   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36004   follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>, then <a href=#strip-leading-and-trailing-whitespace>strip leading and
   36005   trailing whitespace</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   36006 
   36007   <p><strong>Constraint validation</strong>: While the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a <a href=#valid-url title="valid URL">valid</a> <a href=#absolute-url>absolute URL</a>, the
   36008   element is <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>
   36009 
   36010   </div>
   36011 
   36012   <div class=bookkeeping>
   36013 
   36014    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36015    attributes, IDL attributes, and methods apply to the element:
   36016    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36017    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36018    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36019    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36020    <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36021    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36022    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36023    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   36024    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36025    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   36026    <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   36027    <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   36028    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   36029    <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36030    <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36031 
   36032    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36033    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36034 
   36035    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36036 
   36037    <p>The following content attributes must not be specified and do not
   36038    apply to the element:
   36039    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36040    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36041    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36042    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36043    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36044    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36045    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36046    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36047    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36048    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36049    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36050    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36051    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   36052    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   36053    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36054 
   36055    <p>The following IDL attributes and methods do not apply to the
   36056    element:
   36057    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36058    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36059    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   36060    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   36061    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36062    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36063 
   36064   </div>
   36065 
   36066   <div class=example>
   36067 
   36068    <p>If a document contained the following markup:</p>
   36069 
   36070    <pre>&lt;input type="url" name="location" list="urls"&gt;
   36071 &lt;datalist id="urls"&gt;
   36072  &lt;option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045"&gt;
   36073  &lt;option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"&gt;
   36074  &lt;option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"&gt;
   36075  &lt;option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"&gt;
   36076  &lt;option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"&gt;
   36077  &lt;option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"&gt;
   36078 &lt;/datalist&gt;
   36079 </pre>
   36080 
   36081    <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
   36082    agent had also found that the user had visited
   36083    <code>http://www.w3.org/Consortium/#membership</code> and
   36084    <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
   36085    the rendering might look like this:</p>
   36086 
   36087    <p><img alt='A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URIs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.' src=images/sample-url.png></p>
   36088 
   36089    <p>The first four URIs in this sample consist of the four URIs in
   36090    the author-specified list that match the text the user has entered,
   36091    sorted lexically. Note how the UA is using the knowledge that the
   36092    values are URIs to allow the user to omit the scheme part and
   36093    perform intelligent matching on the domain name.</p>
   36094 
   36095    <p>The last two URIs (and probably many more, given the scrollbar's
   36096    indications of more values being available) are the matches from
   36097    the user agent's session history data. This data is not made
   36098    available to the page DOM. In this particular case, the UA has no
   36099    titles to provide for those values.</p>
   36100 
   36101   </div>
   36102 
   36103 
   36104   <h6 id=e-mail-state><span class=secno>4.10.7.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>
   36105 
   36106   <div class=impl>
   36107 
   36108   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state, the rules in this
   36109   section apply.</p>
   36110 
   36111   </div>
   36112 
   36113   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36114   for editing a list of e-mail addresses given in the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   36115 
   36116   <div class=impl>
   36117 
   36118   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36119   the user agent should allow the user to change the e-mail addresses
   36120   represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>. If
   36121   the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is
   36122   specified, then the user agent should allow the user to select or
   36123   provide multiple addresses; otherwise, the user agent should act in
   36124   a manner consistent with expecting the user to provide a single
   36125   e-mail address. User agents may allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   36126   <a href=#valid-e-mail-address-list>valid e-mail address list</a>. User agents should allow the
   36127   user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the
   36128   empty string. User agents must not allow users to insert U+000A LINE
   36129   FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>. User agents may transform the
   36130   <a href=#concept-fe-value title=concept-fe-value>value</a> for display and editing
   36131   (e.g. converting punycode in the <a href=#concept-fe-value title=concept-fe-value>value</a> to IDN in the display and vice
   36132   versa).</p>
   36133 
   36134   </div>
   36135 
   36136   <p>If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
   36137   attribute is specified on the element, then the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if specified, must
   36138   have a value that is a <a href=#valid-e-mail-address-list>valid e-mail address list</a>;
   36139   otherwise, the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   36140   attribute, if specified, must have a value that is a single
   36141   <a href=#valid-e-mail-address>valid e-mail address</a>.</p>
   36142 
   36143   <div class=impl>
   36144 
   36145   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36146   follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   36147 
   36148   <p><strong>Constraint validation</strong>: If the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is specified
   36149   on the element, then, while the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a
   36150   <a href=#valid-e-mail-address-list>valid e-mail address list</a>, the element is
   36151   <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>; otherwise, while the
   36152   <a href=#concept-fe-value title=concept-fe-value>value</a> of the element is not a
   36153   single <a href=#valid-e-mail-address>valid e-mail address</a>, the element is
   36154   <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>
   36155 
   36156   </div>
   36157 
   36158   <p>A <dfn id=valid-e-mail-address-list>valid e-mail address list</dfn> is a <a href=#set-of-comma-separated-tokens>set of
   36159   comma-separated tokens</a>, where each token is itself a
   36160   <a href=#valid-e-mail-address>valid e-mail address</a>. <span class=impl>To obtain the
   36161   list of tokens from a <a href=#valid-e-mail-address-list>valid e-mail address list</a>, the
   36162   user agent must <a href=#split-a-string-on-commas title="split a string on commas">split the
   36163   string on commas</a>.</span></p>
   36164 
   36165   <p>A <dfn id=valid-e-mail-address>valid e-mail address</dfn> is a string that matches the
   36166   ABNF production <code title="">1*(&nbsp;atext&nbsp;/&nbsp;"."&nbsp;)&nbsp;"@"&nbsp;ldh-str&nbsp;1*(&nbsp;"."&nbsp;ldh-str&nbsp;)</code>
   36167   where <code title="">atext</code> is defined in RFC 5322 section
   36168   3.2.3, and <code title="">ldh-str</code> is defined in RFC 1034
   36169   section 3.5. <a href=#refsABNF>[ABNF]</a> <a href=#refsRFC5322>[RFC5322]</a> <a href=#refsRFC1034>[RFC1034]</a></p> <!-- Domain syntax based on
   36170   section 3.5 of [RFC1034] and section 2.1 of [RFC1123] -->
   36171 
   36172   <p class=note>This requirement is a <a href=#willful-violation>willful violation</a>
   36173   of RFC 5322, which defines a syntax for e-mail addresses that is
   36174   simultaneously too strict (before the "@" character), too vague
   36175   (after the "@" character), and too lax (allowing comments, white
   36176   space characters, and quoted strings in manners unfamiliar to most
   36177   users) to be of practical use here.</p>
   36178 
   36179   <div class=bookkeeping>
   36180 
   36181    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36182    attributes, IDL attributes, and methods apply to the element:
   36183    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36184    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36185    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36186    <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36187    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36188    <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36189    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36190    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36191    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   36192    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36193    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   36194    <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   36195    <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   36196    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   36197    <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36198    <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36199 
   36200    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36201    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36202 
   36203    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36204 
   36205    <p>The following content attributes must not be specified and do not
   36206    apply to the element:
   36207    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36208    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36209    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36210    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36211    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36212    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36213    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36214    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36215    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36216    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36217    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36218    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   36219    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   36220    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36221 
   36222    <p>The following IDL attributes and methods do not apply to the
   36223    element:
   36224    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36225    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36226    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   36227    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   36228    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36229    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36230 
   36231   </div>
   36232 
   36233 
   36234   <h6 id=password-state><span class=secno>4.10.7.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>
   36235 
   36236   <div class=impl>
   36237 
   36238   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#password-state title=attr-input-type-password>Password</a> state, the rules in
   36239   this section apply.</p>
   36240 
   36241   </div>
   36242 
   36243   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a one line
   36244   plain text edit control for the element's <a href=#concept-fe-value title=concept-fe-value>value</a>. The user agent should obscure
   36245   the value so that people other than the user cannot see it.</p>
   36246 
   36247   <div class=impl>
   36248 
   36249   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36250   its <a href=#concept-fe-value title=concept-fe-value>value</a> should be editable
   36251   by the user. User agents must not allow users to insert U+000A LINE
   36252   FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   36253 
   36254   </div>
   36255 
   36256   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36257   specified, must have a value that contains no U+000A LINE FEED (LF)
   36258   or U+000D CARRIAGE RETURN (CR) characters.</p>
   36259 
   36260   <div class=impl>
   36261 
   36262   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36263   follows</strong>: <a href=#strip-line-breaks>Strip line breaks</a> from the <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   36264 
   36265   </div>
   36266 
   36267   <div class=bookkeeping>
   36268 
   36269    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36270    attributes, IDL attributes, and methods apply to the element:
   36271    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36272    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36273    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36274    <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36275    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36276    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36277    <code title=attr-input-size><a href=#attr-input-size>size</a></code> content attributes;
   36278    <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   36279    <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   36280    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes;
   36281    <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, and
   36282    <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36283 
   36284    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36285    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36286 
   36287    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36288 
   36289    <p>The following content attributes must not be specified and do not
   36290    apply to the element:
   36291    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36292    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36293    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36294    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36295    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36296    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36297    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36298    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36299    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36300    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36301    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36302    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36303    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36304    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   36305    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   36306    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36307 
   36308    <p>The following IDL attributes and methods do not apply to the
   36309    element:
   36310    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36311    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36312    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36313    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   36314    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   36315    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   36316    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36317    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36318 
   36319   </div>
   36320 
   36321 
   36322   <h6 id=date-and-time-state><span class=secno>4.10.7.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>
   36323 
   36324   <div class=impl>
   36325 
   36326   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
   36327   rules in this section apply.</p>
   36328 
   36329   </div>
   36330 
   36331   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36332   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   36333   specific <a href=#concept-datetime title=concept-datetime>global date and
   36334   time</a>. <span class=impl>User agents may display the date and
   36335   time in whatever time zone is appropriate for the user.</span></p>
   36336 
   36337   <div class=impl>
   36338 
   36339   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36340   the user agent should allow the user to change the <a href=#concept-datetime title=concept-datetime>global date and time</a> represented by
   36341   its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by
   36342   <a href=#parse-a-global-date-and-time-string title="parse a global date and time string">parsing a global
   36343   date and time</a> from it. User agents must not allow the user to
   36344   set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
   36345   is not a <a href=#valid-global-date-and-time-string>valid global date and time string</a> expressed in
   36346   UTC, though user agents may allow the user to set and view the time
   36347   in another time zone and silently translate the time to and from the
   36348   UTC time zone in the <a href=#concept-fe-value title=concept-fe-value>value</a>. If
   36349   the user agent provides a user interface for selecting a <a href=#concept-datetime title=concept-datetime>global date and time</a>, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a <a href=#valid-global-date-and-time-string>valid
   36350   global date and time string</a> expressed in UTC representing the
   36351   user's selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   36352 
   36353   </div>
   36354 
   36355   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36356   specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid global date and
   36357   time string</a>.</p> <!-- ok to set out-of-range value, we never
   36358   know when we might have to represent bogus input -->
   36359 
   36360   <div class=impl>
   36361 
   36362   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36363   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   36364   of the element is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>,
   36365   then adjust the time so that the <a href=#concept-fe-value title=concept-fe-value>value</a> represents the same point in
   36366   time but expressed in the UTC time zone, otherwise, set it to the
   36367   empty string instead.</p>
   36368 
   36369   </div>
   36370 
   36371   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   36372   specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid global date and
   36373   time string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   36374   attribute, if specified, must have a value that is a <a href=#valid-global-date-and-time-string>valid
   36375   global date and time string</a>.</p>
   36376 
   36377   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   36378   expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
   36379   (which converts the seconds to milliseconds, as used in the other
   36380   algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
   36381   seconds.</p>
   36382 
   36383   <div class=impl>
   36384 
   36385   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   36386   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-datetime title=concept-datetime>global date and time</a> for which the
   36387   element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
   36388   mismatch">suffer from a step mismatch</a>.</p>
   36389 
   36390   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   36391   string to a number</a>, given a string <var title="">input</var>,
   36392   is as follows</strong>: If <a href=#parse-a-global-date-and-time-string title="parse a global date and time
   36393   string">parsing a global date and time</a> from <var title="">input</var> results in an error, then return an error;
   36394   otherwise, return the number of milliseconds elapsed from midnight
   36395   UTC on the morning of 1970-01-01 (the time represented by the value
   36396   "<code title="">1970-01-01T00:00:00.0Z</code>") to the parsed <a href=#concept-datetime title=concept-datetime>global date and time</a>, ignoring leap
   36397   seconds.</p>
   36398 
   36399   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   36400   number to a string</a>, given a number <var title="">input</var>,
   36401   is as follows</strong>: Return a <a href=#valid-global-date-and-time-string>valid global date and time
   36402   string</a> expressed in UTC that represents the <a href=#concept-datetime title=concept-datetime>global date and time</a> that is <var title="">input</var> milliseconds after midnight UTC on the morning
   36403   of 1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>").</p>
   36404 
   36405   <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   36406   string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-global-date-and-time-string title="parse
   36407   a global date and time string">parsing a global date and time</a>
   36408   from <var title="">input</var> results in an error, then return an
   36409   error; otherwise, return a <code>Date</code> object representing the
   36410   parsed <a href=#concept-datetime title=concept-datetime>global date and time</a>,
   36411   expressed in UTC.</p>
   36412 
   36413   <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   36414   <code>Date</code> object to a string</a>, given a
   36415   <code>Date</code> object <var title="">input</var>, is as
   36416   follows</strong>: Return a <a href=#valid-global-date-and-time-string>valid global date and time
   36417   string</a> expressed in UTC that represents the <a href=#concept-datetime title=concept-datetime>global date and time</a> that is
   36418   represented by <var title="">input</var>.</p>
   36419 
   36420   </div>
   36421 
   36422   <div class=bookkeeping>
   36423 
   36424    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36425    attributes, IDL attributes, and methods apply to the element:
   36426    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36427    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36428    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36429    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36430    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36431    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36432    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   36433    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36434    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   36435    <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   36436    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   36437    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   36438    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36439    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36440 
   36441    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36442    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36443 
   36444    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36445 
   36446    <p>The following content attributes must not be specified and do not
   36447    apply to the element:
   36448    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36449    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36450    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36451    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36452    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36453    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36454    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36455    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36456    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36457    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36458    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36459    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36460    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36461    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   36462    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   36463    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36464 
   36465    <p>The following IDL attributes and methods do not apply to the
   36466    element:
   36467    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36468    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36469    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   36470    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   36471    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36472    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36473 
   36474   </div>
   36475 
   36476   <div class=example>
   36477 
   36478    <p>The following fragment shows part of a calendar application. A
   36479    user can specify a date and time for a meeting (in his local time
   36480    zone, probably, though the user agent can allow the user to change
   36481    that), and since the submitted data includes the time-zone offset,
   36482    the application can ensure that the meeting is shown at the correct
   36483    time regardless of the time zones used by all the participants.</p>
   36484 
   36485    <pre>&lt;fieldset&gt;
   36486  &lt;legend&gt;Add Meeting&lt;/legend&gt;
   36487  &lt;p&gt;&lt;label&gt;Meeting name: &lt;input type=text name="meeting.label"&gt;&lt;/label&gt;
   36488  &lt;p&gt;&lt;label&gt;Meeting time: &lt;input type=datetime name="meeting.start"&gt;&lt;/label&gt;
   36489 &lt;/fieldset&gt;</pre>
   36490 
   36491    <p>Had the application used the <code title=attr-input-type-datetime-local><a href=#local-date-and-time-state>datetime-local</a></code> type
   36492    instead, the calendar application would have also had to explicitly
   36493    determine which time zone the user intended.</p>
   36494 
   36495   </div>
   36496 
   36497 
   36498   <h6 id=date-state><span class=secno>4.10.7.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>
   36499 
   36500   <div class=impl>
   36501 
   36502   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-state title=attr-input-type-date>Date</a> state, the rules in this
   36503   section apply.</p>
   36504 
   36505   </div>
   36506 
   36507   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36508   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   36509   specific <a href=#concept-date title=concept-date>date</a>.</p>
   36510 
   36511   <div class=impl>
   36512 
   36513   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36514   the user agent should allow the user to change the <a href=#concept-date title=concept-date>date</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-date-string title="parse a date string">parsing a date</a> from it. User
   36515   agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   36516   <a href=#valid-date-string>valid date string</a>. If the user agent provides a user
   36517   interface for selecting a <a href=#concept-date title=concept-date>date</a>,
   36518   then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
   36519   a <a href=#valid-date-string>valid date string</a> representing the user's
   36520   selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   36521 
   36522   </div>
   36523 
   36524   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36525   specified, must have a value that is a <a href=#valid-date-string>valid date
   36526   string</a>.</p> <!-- ok to set out-of-range value, we never know
   36527   when we might have to represent bogus input -->
   36528 
   36529   <div class=impl>
   36530 
   36531   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36532   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   36533   of the element is not a <a href=#valid-date-string>valid date string</a>, then set it
   36534   to the empty string instead.</p>
   36535 
   36536   </div>
   36537 
   36538   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   36539   specified, must have a value that is a <a href=#valid-date-string>valid date
   36540   string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   36541   attribute, if specified, must have a value that is a <a href=#valid-date-string>valid
   36542   date string</a>.</p>
   36543 
   36544   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   36545   expressed in days. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
   36546   86,400,000 (which converts the days to milliseconds, as used in the
   36547   other algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 1 day.</p>
   36548 
   36549   <div class=impl>
   36550 
   36551   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   36552   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-date title=concept-date>date</a> for which the element would not
   36553   <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
   36554   mismatch</a>.</p>
   36555 
   36556   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   36557   string to a number</a>, given a string <var title="">input</var>,
   36558   is as follows</strong>: If <a href=#parse-a-date-string title="parse a date string">parsing
   36559   a date</a> from <var title="">input</var> results in an error,
   36560   then return an error; otherwise, return the number of milliseconds
   36561   elapsed from midnight UTC on the morning of 1970-01-01 (the time
   36562   represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
   36563   morning of the parsed <a href=#concept-date title=concept-date>date</a>,
   36564   ignoring leap seconds.</p>
   36565 
   36566   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   36567   number to a string</a>, given a number <var title="">input</var>,
   36568   is as follows</strong>: Return a <a href=#valid-date-string>valid date string</a> that
   36569   represents the <a href=#concept-date title=concept-date>date</a> that, in UTC,
   36570   is current <var title="">input</var> milliseconds after midnight UTC
   36571   on the morning of 1970-01-01 (the time represented by the value
   36572   "<code title="">1970-01-01T00:00:00.0Z</code>").</p>
   36573 
   36574   <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   36575   string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-date-string title="parse
   36576   a date string">parsing a date</a> from <var title="">input</var>
   36577   results in an error, then return an error; otherwise, return a
   36578   <code>Date</code> object representing midnight UTC on the morning of
   36579   the parsed <a href=#concept-date title=concept-date>date</a>.</p>
   36580 
   36581   <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   36582   <code>Date</code> object to a string</a>, given a
   36583   <code>Date</code> object <var title="">input</var>, is as
   36584   follows</strong>: Return a <a href=#valid-date-string>valid date string</a> that
   36585   represents the <a href=#concept-date title=concept-date>date</a> current at the
   36586   time represented by <var title="">input</var> in the UTC
   36587   time zone.</p>
   36588 
   36589   </div>
   36590 
   36591   <div class=bookkeeping>
   36592 
   36593    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36594    attributes, IDL attributes, and methods apply to the element:
   36595    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36596    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36597    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36598    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36599    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36600    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36601    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   36602    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36603    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   36604    <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   36605    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   36606    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   36607    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36608    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36609 
   36610    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36611    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36612 
   36613    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36614 
   36615    <p>The following content attributes must not be specified and do not
   36616    apply to the element:
   36617    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36618    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36619    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36620    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36621    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36622    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36623    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36624    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36625    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36626    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36627    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36628    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36629    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36630    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   36631    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   36632    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36633 
   36634    <p>The following IDL attributes and methods do not apply to the
   36635    element:
   36636    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36637    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   36638    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   36639    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36640    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36641 
   36642   </div>
   36643 
   36644 
   36645   <h6 id=month-state><span class=secno>4.10.7.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>
   36646 
   36647   <div class=impl>
   36648 
   36649   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#month-state title=attr-input-type-month>Month</a> state, the rules in this
   36650   section apply.</p>
   36651 
   36652   </div>
   36653 
   36654   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36655   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   36656   specific <a href=#concept-month title=concept-month>month</a>.</p>
   36657 
   36658   <div class=impl>
   36659 
   36660   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36661   the user agent should allow the user to change the <a href=#concept-month title=concept-month>month</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-month-string title="parse a month string">parsing a month</a> from it. User
   36662   agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   36663   <a href=#valid-month-string>valid month string</a>. If the user agent provides a user
   36664   interface for selecting a <a href=#concept-month title=concept-month>month</a>,
   36665   then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
   36666   a <a href=#valid-month-string>valid month string</a> representing the user's
   36667   selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   36668 
   36669   </div>
   36670 
   36671   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36672   specified, must have a value that is a <a href=#valid-month-string>valid month
   36673   string</a>.</p> <!-- ok to set out-of-range value, we never know
   36674   when we might have to represent bogus input -->
   36675 
   36676   <div class=impl>
   36677 
   36678   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36679   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   36680   of the element is not a <a href=#valid-month-string>valid month string</a>, then set it
   36681   to the empty string instead.</p>
   36682 
   36683   </div>
   36684 
   36685   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   36686   specified, must have a value that is a <a href=#valid-month-string>valid month
   36687   string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   36688   attribute, if specified, must have a value that is a <a href=#valid-month-string>valid
   36689   month string</a>.</p>
   36690 
   36691   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   36692   expressed in months. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1
   36693   (there is no conversion needed as the algorithms use months).</span>
   36694   The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is
   36695   1 month.</p>
   36696 
   36697   <div class=impl>
   36698 
   36699   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   36700   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-month title=concept-month>month</a> for which the element would not
   36701   <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
   36702   mismatch</a>.</p>
   36703 
   36704   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   36705   string to a number</a>, given a string <var title="">input</var>,
   36706   is as follows</strong>: If <a href=#parse-a-month-string title="parse a month
   36707   string">parsing a month</a> from <var title="">input</var>
   36708   results in an error, then return an error; otherwise, return the
   36709   number of months between January 1970 and the parsed <a href=#concept-month title=concept-month>month</a>.</p>
   36710 
   36711   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   36712   number to a string</a>, given a number <var title="">input</var>,
   36713   is as follows</strong>: Return a <a href=#valid-month-string>valid month string</a>
   36714   that represents the <a href=#concept-month title=concept-month>month</a> that
   36715   has <var title="">input</var> months between it and January
   36716   1970.</p>
   36717 
   36718   <!-- note - it doesn't matter exactly how many months are "between"
   36719   two months, so long as the UA implements this consistently. The
   36720   number is never actually exposed. -->
   36721 
   36722   <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   36723   string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-month-string title="parse
   36724   a month string">parsing a month</a> from <var title="">input</var> results in an error, then return an error;
   36725   otherwise, return a <code>Date</code> object representing midnight
   36726   UTC on the morning of the first day of the parsed <a href=#concept-month title=concept-month>month</a>.</p>
   36727 
   36728   <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   36729   <code>Date</code> object to a string</a>, given a
   36730   <code>Date</code> object <var title="">input</var>, is as
   36731   follows</strong>: Return a <a href=#valid-month-string>valid month string</a> that
   36732   represents the <a href=#concept-month title=concept-month>month</a> current at
   36733   the time represented by <var title="">input</var> in the UTC
   36734   time zone.</p>
   36735 
   36736   </div>
   36737 
   36738   <div class=bookkeeping>
   36739 
   36740    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36741    attributes, IDL attributes, and methods apply to the element:
   36742    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36743    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36744    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36745    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36746    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36747    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36748    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   36749    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36750    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   36751    <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   36752    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   36753    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   36754    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36755    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36756 
   36757    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36758    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36759 
   36760    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36761 
   36762    <p>The following content attributes must not be specified and do not
   36763    apply to the element:
   36764    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36765    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36766    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36767    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36768    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36769    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36770    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36771    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36772    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36773    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36774    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36775    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36776    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36777    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   36778    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   36779    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36780 
   36781    <p>The following IDL attributes and methods do not apply to the
   36782    element:
   36783    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36784    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36785    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   36786    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   36787    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36788    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36789 
   36790   </div>
   36791 
   36792 
   36793   <h6 id=week-state><span class=secno>4.10.7.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>
   36794 
   36795   <div class=impl>
   36796 
   36797   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#week-state title=attr-input-type-week>Week</a> state, the rules in this
   36798   section apply.</p>
   36799 
   36800   </div>
   36801 
   36802   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36803   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   36804   specific <a href=#concept-week title=concept-week>week</a>.</p>
   36805 
   36806   <div class=impl>
   36807 
   36808   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36809   the user agent should allow the user to change the <a href=#concept-week title=concept-week>week</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-week-string title="parse a week string">parsing a week</a> from it. User
   36810   agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   36811   <a href=#valid-week-string>valid week string</a>. If the user agent provides a user
   36812   interface for selecting a <a href=#concept-week title=concept-week>week</a>,
   36813   then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
   36814   a <a href=#valid-week-string>valid week string</a> representing the user's
   36815   selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   36816 
   36817   </div>
   36818 
   36819   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36820   specified, must have a value that is a <a href=#valid-week-string>valid week
   36821   string</a>.</p> <!-- ok to set out-of-range value, we never know
   36822   when we might have to represent bogus input -->
   36823 
   36824   <div class=impl>
   36825 
   36826   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36827   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   36828   of the element is not a <a href=#valid-week-string>valid week string</a>, then set it
   36829   to the empty string instead.</p>
   36830 
   36831   </div>
   36832 
   36833   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   36834   specified, must have a value that is a <a href=#valid-week-string>valid week
   36835   string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   36836   attribute, if specified, must have a value that is a <a href=#valid-week-string>valid
   36837   week string</a>.</p>
   36838 
   36839   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   36840   expressed in weeks. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
   36841   604,800,000 (which converts the weeks to milliseconds, as used in
   36842   the other algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 1
   36843   week. <span class=impl>The <a href=#concept-input-step-default-base title=concept-input-step-default-base>default step base</a> is
   36844   &minus;259,200,000 (the start of week 1970-W01).</span></p>
   36845 
   36846   <div class=impl>
   36847 
   36848   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   36849   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-week title=concept-week>week</a> for which the element would not
   36850   <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
   36851   mismatch</a>.</p>
   36852 
   36853   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   36854   string to a number</a>, given a string <var title="">input</var>,
   36855   is as follows</strong>: If <a href=#parse-a-week-string title="parse a week string">parsing
   36856   a week string</a> from <var title="">input</var> results in an
   36857   error, then return an error; otherwise, return the number of
   36858   milliseconds elapsed from midnight UTC on the morning of 1970-01-01
   36859   (the time represented by the value "<code title="">1970-01-01T00:00:00.0Z</code>") to midnight UTC on the
   36860   morning of the Monday of the parsed <a href=#concept-week title=concept-week>week</a>, ignoring leap seconds.</p>
   36861 
   36862   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   36863   number to a string</a>, given a number <var title="">input</var>,
   36864   is as follows</strong>: Return a <a href=#valid-week-string>valid week string</a> that
   36865   represents the <a href=#concept-week title=concept-week>week</a> that, in UTC,
   36866   is current <var title="">input</var> milliseconds after midnight UTC
   36867   on the morning of 1970-01-01 (the time represented by the value
   36868   "<code title="">1970-01-01T00:00:00.0Z</code>").</p>
   36869 
   36870   <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   36871   string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-week-string title="parse
   36872   a week string">parsing a week</a> from <var title="">input</var>
   36873   results in an error, then return an error; otherwise, return a
   36874   <code>Date</code> object representing midnight UTC on the morning of
   36875   the Monday of the parsed <a href=#concept-week title=concept-week>week</a>.</p>
   36876 
   36877   <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   36878   <code>Date</code> object to a string</a>, given a
   36879   <code>Date</code> object <var title="">input</var>, is as
   36880   follows</strong>: Return a <a href=#valid-week-string>valid week string</a> that
   36881   represents the <a href=#concept-week title=concept-week>week</a> current at the
   36882   time represented by <var title="">input</var> in the UTC
   36883   time zone.</p>
   36884 
   36885   </div>
   36886 
   36887   <div class=bookkeeping>
   36888 
   36889    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   36890    attributes, IDL attributes, and methods apply to the element:
   36891    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   36892    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   36893    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   36894    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   36895    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   36896    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   36897    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   36898    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   36899    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   36900    <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   36901    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   36902    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   36903    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   36904    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   36905 
   36906    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   36907    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   36908 
   36909    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   36910 
   36911    <p>The following content attributes must not be specified and do not
   36912    apply to the element:
   36913    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   36914    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   36915    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   36916    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   36917    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   36918    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   36919    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   36920    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   36921    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   36922    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   36923    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   36924    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   36925    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   36926    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   36927    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   36928    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   36929 
   36930    <p>The following IDL attributes and methods do not apply to the
   36931    element:
   36932    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   36933    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   36934    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   36935    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   36936    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   36937    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   36938 
   36939   </div>
   36940 
   36941 
   36942   <h6 id=time-state><span class=secno>4.10.7.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>
   36943 
   36944   <!-- v2: allow min="" and max="" to be set such that the range
   36945   crosses midnight, as in <input type=time min="23:00" max="02:00">
   36946   (from http://www.w3.org/Bugs/Public/show_bug.cgi?id=7688) -->
   36947 
   36948   <div class=impl>
   36949 
   36950   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#time-state title=attr-input-type-time>Time</a> state, the rules in this
   36951   section apply.</p>
   36952 
   36953   </div>
   36954 
   36955   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   36956   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   36957   specific <a href=#concept-time title=concept-time>time</a>.</p>
   36958 
   36959   <div class=impl>
   36960 
   36961   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   36962   the user agent should allow the user to change the <a href=#concept-time title=concept-time>time</a> represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by <a href=#parse-a-time-string title="parse a time string">parsing a time</a> from it. User
   36963   agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   36964   <a href=#valid-time-string>valid time string</a>. If the user agent provides a user
   36965   interface for selecting a <a href=#concept-time title=concept-time>time</a>,
   36966   then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to
   36967   a <a href=#valid-time-string>valid time string</a> representing the user's
   36968   selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   36969 
   36970   </div>
   36971 
   36972   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   36973   specified, must have a value that is a <a href=#valid-time-string>valid time
   36974   string</a>.</p> <!-- ok to set out-of-range value, we never know
   36975   when we might have to represent bogus input -->
   36976 
   36977   <div class=impl>
   36978 
   36979   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   36980   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   36981   of the element is not a <a href=#valid-time-string>valid time string</a>, then set it
   36982   to the empty string instead.</p>
   36983 
   36984   </div>
   36985 
   36986   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   36987   specified, must have a value that is a <a href=#valid-time-string>valid time
   36988   string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   36989   attribute, if specified, must have a value that is a <a href=#valid-time-string>valid
   36990   time string</a>.</p>
   36991 
   36992   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   36993   expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
   36994   (which converts the seconds to milliseconds, as used in the other
   36995   algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
   36996   seconds.</p>
   36997 
   36998   <div class=impl>
   36999 
   37000   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   37001   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-time title=concept-time>time</a> for which the element would not
   37002   <a href=#suffering-from-a-step-mismatch title="suffering from a step mismatch">suffer from a step
   37003   mismatch</a>.</p>
   37004 
   37005   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   37006   string to a number</a>, given a string <var title="">input</var>,
   37007   is as follows</strong>: If <a href=#parse-a-time-string title="parse a time string">parsing
   37008   a time</a> from <var title="">input</var> results in an error,
   37009   then return an error; otherwise, return the number of milliseconds
   37010   elapsed from midnight to the parsed <a href=#concept-time title=concept-time>time</a> on a day with no time changes.</p>
   37011 
   37012   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   37013   number to a string</a>, given a number <var title="">input</var>,
   37014   is as follows</strong>: Return a <a href=#valid-time-string>valid time string</a> that
   37015   represents the <a href=#concept-time title=concept-time>time</a> that is <var title="">input</var> milliseconds after midnight on a day with no
   37016   time changes.</p>
   37017 
   37018   <p><strong>The <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   37019   string to a <code>Date</code> object</a>, given a string <var title="">input</var>, is as follows</strong>: If <a href=#parse-a-time-string title="parse
   37020   a time string">parsing a time</a> from <var title="">input</var>
   37021   results in an error, then return an error; otherwise, return a
   37022   <code>Date</code> object representing the parsed <a href=#concept-time title=concept-time>time</a> in UTC on 1970-01-01.</p>
   37023 
   37024   <p><strong>The <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   37025   <code>Date</code> object to a string</a>, given a
   37026   <code>Date</code> object <var title="">input</var>, is as
   37027   follows</strong>: Return a <a href=#valid-time-string>valid time string</a> that
   37028   represents the UTC <a href=#concept-time title=concept-time>time</a> component
   37029   that is represented by <var title="">input</var>.</p>
   37030 
   37031   </div>
   37032 
   37033   <div class=bookkeeping>
   37034 
   37035    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37036    attributes, IDL attributes, and methods apply to the element:
   37037    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37038    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37039    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37040    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37041    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37042    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   37043    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   37044    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37045    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   37046    <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   37047    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   37048    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   37049    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   37050    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37051 
   37052    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37053    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   37054 
   37055    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   37056 
   37057    <p>The following content attributes must not be specified and do not
   37058    apply to the element:
   37059    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37060    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37061    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   37062    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37063    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37064    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37065    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37066    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37067    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37068    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37069    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37070    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37071    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37072    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37073    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   37074    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37075 
   37076    <p>The following IDL attributes and methods do not apply to the
   37077    element:
   37078    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   37079    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37080    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>, and
   37081    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> IDL attributes;
   37082    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   37083    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   37084 
   37085   </div>
   37086 
   37087 
   37088   <h6 id=local-date-and-time-state><span class=secno>4.10.7.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>
   37089 
   37090   <div class=impl>
   37091 
   37092   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
   37093   state, the rules in this section apply.</p>
   37094 
   37095   </div>
   37096 
   37097   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   37098   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   37099   <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>,
   37100   with no time-zone offset information.</p>
   37101 
   37102   <div class=impl>
   37103 
   37104   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37105   the user agent should allow the user to change the <a href=#concept-datetime-local title=concept-datetime-local>date and time</a> represented by
   37106   its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained by
   37107   <a href=#parse-a-local-date-and-time-string title="parse a local date and time string">parsing a date and
   37108   time</a> from it. User agents must not allow the user to set the
   37109   <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not
   37110   a <a href=#valid-local-date-and-time-string>valid local date and time string</a>. If the user agent
   37111   provides a user interface for selecting a <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>, then the
   37112   <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a
   37113   <a href=#valid-local-date-and-time-string>valid local date and time string</a> representing the
   37114   user's selection. User agents should allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   37115 
   37116   </div>
   37117 
   37118   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   37119   specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid local date and
   37120   time string</a>.</p> <!-- ok to set out-of-range value, we never
   37121   know when we might have to represent bogus input -->
   37122 
   37123   <div class=impl>
   37124 
   37125   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   37126   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   37127   of the element is not a <a href=#valid-local-date-and-time-string>valid local date and time
   37128   string</a>, then set it to the empty string instead.</p>
   37129 
   37130   </div>
   37131 
   37132   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   37133   specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid local date and
   37134   time string</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   37135   attribute, if specified, must have a value that is a <a href=#valid-local-date-and-time-string>valid
   37136   local date and time string</a>.</p>
   37137 
   37138   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute is
   37139   expressed in seconds. <span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is 1000
   37140   (which converts the seconds to milliseconds, as used in the other
   37141   algorithms).</span> The <a href=#concept-input-step-default title=concept-input-step-default>default step</a> is 60
   37142   seconds.</p>
   37143 
   37144   <div class=impl>
   37145 
   37146   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   37147   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a> for which
   37148   the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
   37149   mismatch">suffer from a step mismatch</a>.</p>
   37150 
   37151   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   37152   string to a number</a>, given a string <var title="">input</var>,
   37153   is as follows</strong>: If <a href=#parse-a-local-date-and-time-string title="parse a local date and time
   37154   string">parsing a date and time</a> from <var title="">input</var> results in an error, then return an error;
   37155   otherwise, return the number of milliseconds elapsed from midnight
   37156   on the morning of 1970-01-01 (the time represented by the value
   37157   "<code title="">1970-01-01T00:00:00.0</code>") to the parsed <a href=#concept-datetime-local title=concept-datetime-local>local date and time</a>, ignoring
   37158   leap seconds.</p>
   37159 
   37160   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   37161   number to a string</a>, given a number <var title="">input</var>,
   37162   is as follows</strong>: Return a <a href=#valid-local-date-and-time-string>valid local date and time
   37163   string</a> that represents the date and time that is <var title="">input</var> milliseconds after midnight on the morning of
   37164   1970-01-01 (the time represented by the value "<code title="">1970-01-01T00:00:00.0</code>").</p>
   37165 
   37166   </div>
   37167 
   37168   <div class=bookkeeping>
   37169 
   37170    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37171    attributes, IDL attributes, and methods apply to the element:
   37172    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37173    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37174    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37175    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37176    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37177    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   37178    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   37179    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37180    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   37181    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   37182    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   37183    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   37184    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37185 
   37186    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37187    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   37188 
   37189    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   37190 
   37191    <p>The following content attributes must not be specified and do not
   37192    apply to the element:
   37193    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37194    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37195    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   37196    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37197    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37198    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37199    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37200    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37201    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37202    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37203    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37204    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37205    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37206    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37207    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   37208    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37209 
   37210    <p>The following IDL attributes and methods do not apply to the
   37211    element:
   37212    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   37213    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37214    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37215    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   37216    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   37217    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   37218    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   37219 
   37220   </div>
   37221 
   37222   <div class=example>
   37223 
   37224    <p>The following example shows part of a flight booking
   37225    application. The application uses an <code><a href=#the-input-element>input</a></code> element
   37226    with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to
   37227    <code title=attr-input-type-datetime-local><a href=#local-date-and-time-state>datetime-local</a></code>,
   37228    and it then interprets the given date and time in the time zone of
   37229    the selected airport.</p>
   37230 
   37231    <pre>&lt;fieldset&gt;
   37232  &lt;legend&gt;Destination&lt;/legend&gt;
   37233  &lt;p&gt;&lt;label&gt;Airport: &lt;input type=text name=to list=airports&gt;&lt;/label&gt;&lt;/p&gt;
   37234  &lt;p&gt;&lt;label&gt;Departure time: &lt;input type=datetime-local name=totime step=3600&gt;&lt;/label&gt;&lt;/p&gt;
   37235 &lt;/fieldset&gt;
   37236 &lt;datalist id=airports&gt;
   37237  &lt;option value=ATL label="Atlanta"&gt;
   37238  &lt;option value=MEM label="Memphis"&gt;
   37239  &lt;option value=LHR label="London Heathrow"&gt;
   37240  &lt;option value=LAX label="Los Angeles"&gt;
   37241  &lt;option value=FRA label="Frankfurt"&gt;
   37242 &lt;/datalist&gt;</pre>
   37243 
   37244    <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
   37245    user would have to work out the time-zone conversions himself,
   37246    which is clearly not a good user experience!</p>
   37247 
   37248   </div>
   37249 
   37250 
   37251   <h6 id=number-state><span class=secno>4.10.7.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>
   37252 
   37253   <div class=impl>
   37254 
   37255   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#number-state title=attr-input-type-number>Number</a> state, the rules in
   37256   this section apply.</p>
   37257 
   37258   </div>
   37259 
   37260   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   37261   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   37262   number.</p>
   37263 
   37264   <div class=impl>
   37265 
   37266   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37267   the user agent should allow the user to change the number
   37268   represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as
   37269   obtained from applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
   37270   number values</a> to it. User agents must not allow the user to
   37271   set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
   37272   is not a <a href=#valid-floating-point-number>valid floating point number</a>. If the user agent
   37273   provides a user interface for selecting a number, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the <a href=#best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating point
   37274   number">best representation of the number representing the user's
   37275   selection as a floating point number</a>. User agents should
   37276   allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   37277 
   37278   </div>
   37279 
   37280   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   37281   specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
   37282   number</a>.</p> <!-- ok to set out-of-range value, we never know
   37283   when we might have to represent bogus input -->
   37284 
   37285   <div class=impl>
   37286 
   37287   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   37288   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   37289   of the element is not a <a href=#valid-floating-point-number>valid floating point number</a>,
   37290   then set it to the empty string instead.</p>
   37291 
   37292   </div>
   37293 
   37294   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   37295   specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
   37296   number</a>. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   37297   attribute, if specified, must have a value that is a <a href=#valid-floating-point-number>valid
   37298   floating point number</a>.</p>
   37299 
   37300   <p><span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
   37301   1.</span> The <a href=#concept-input-step-default title=concept-input-step-default>default
   37302   step</a> is 1 (allowing only integers, unless the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute has a non-integer
   37303   value).</p>
   37304 
   37305   <div class=impl>
   37306 
   37307   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   37308   the user agent may round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest number for
   37309   which the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
   37310   mismatch">suffer from a step mismatch</a>.</p>
   37311 
   37312   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   37313   string to a number</a>, given a string <var title="">input</var>,
   37314   is as follows</strong>: If applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
   37315   floating point number values</a> to <var title="">input</var>
   37316   results in an error, then return an error; otherwise, return the
   37317   resulting number.</p>
   37318 
   37319   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   37320   number to a string</a>, given a number <var title="">input</var>,
   37321   is as follows</strong>: Return a <a href=#valid-floating-point-number>valid floating point
   37322   number</a> that represents <var title="">input</var>.</p>
   37323 
   37324   </div>
   37325 
   37326   <div class=bookkeeping>
   37327 
   37328    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37329    attributes, IDL attributes, and methods apply to the element:
   37330    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37331    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37332    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37333    <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37334    <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37335    <code title=attr-input-required><a href=#attr-input-required>required</a></code>, and
   37336    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   37337    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37338    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   37339    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   37340    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   37341    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   37342    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37343 
   37344    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37345    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   37346 
   37347    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   37348 
   37349    <p>The following content attributes must not be specified and do not
   37350    apply to the element:
   37351    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37352    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37353    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   37354    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37355    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37356    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37357    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37358    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37359    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37360    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37361    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37362    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37363    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37364    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37365    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   37366    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37367 
   37368    <p>The following IDL attributes and methods do not apply to the
   37369    element:
   37370    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   37371    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37372    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37373    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   37374    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   37375    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   37376    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   37377 
   37378   </div>
   37379 
   37380 
   37381   <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>
   37382 
   37383   <div class=impl>
   37384 
   37385   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the rules in this
   37386   section apply.</p>
   37387 
   37388   </div>
   37389 
   37390   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   37391   for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   37392   number, but with the caveat that the exact value is not important,
   37393   letting UAs provide a simpler interface than they do for the <a href=#number-state title=attr-input-type-number>Number</a> state.</p>
   37394 
   37395   <div class=impl>
   37396 
   37397   <p class=note>In this state, the range and step constraints are
   37398   enforced even during user input, and there is no way to set the
   37399   value to the empty string.</p>
   37400 
   37401   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37402   the user agent should allow the user to change the number
   37403   represented by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as
   37404   obtained from applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point
   37405   number values</a> to it. User agents must not allow the user to
   37406   set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that
   37407   is not a <a href=#valid-floating-point-number>valid floating point number</a>. If the user agent
   37408   provides a user interface for selecting a number, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to a <a href=#best-representation-of-the-number-as-a-floating-point-number title="best representation of the number as a floating point
   37409   number">best representation of the number representing the user's
   37410   selection as a floating point number</a>. User agents must not
   37411   allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   37412 
   37413   </div>
   37414 
   37415   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   37416   specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
   37417   number</a>.</p> <!-- ok to set out-of-range value, we never know
   37418   when we might have to represent bogus input -->
   37419 
   37420   <div class=impl>
   37421 
   37422   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   37423   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   37424   of the element is not a <a href=#valid-floating-point-number>valid floating point number</a>,
   37425   then set it to a <a href=#valid-floating-point-number>valid floating point number</a> that
   37426   represents the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a>.</p>
   37427 
   37428   </div>
   37429 
   37430   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, if
   37431   specified, must have a value that is a <a href=#valid-floating-point-number>valid floating point
   37432   number</a>. The <a href=#concept-input-min-default title=concept-input-min-default>default
   37433   minimum</a> is 0. The <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   37434   attribute, if specified, must have a value that is a <a href=#valid-floating-point-number>valid
   37435   floating point number</a>. The <a href=#concept-input-max-default title=concept-input-max-default>default maximum</a> is 100.</p>
   37436 
   37437   <p>The <dfn id=concept-input-value-default-range title=concept-input-value-default-range>default
   37438   value</dfn> is the <a href=#concept-input-min title=concept-input-min>minimum</a>
   37439   plus half the difference between the <a href=#concept-input-min title=concept-input-min>minimum</a> and the <a href=#concept-input-max title=concept-input-max>maximum</a>, unless the <a href=#concept-input-max title=concept-input-max>maximum</a> is less than the <a href=#concept-input-min title=concept-input-min>minimum</a>, in which case the <a href=#concept-input-value-default-range title=concept-input-value-default-range>default value</a> is
   37440   the <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>
   37441 
   37442   <div class=impl>
   37443 
   37444   <p>When the element is <a href=#suffering-from-an-underflow>suffering from an
   37445   underflow</a>, the user agent must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a <a href=#valid-floating-point-number>valid floating point
   37446   number</a> that represents the <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>
   37447 
   37448   <p>When the element is <a href=#suffering-from-an-overflow>suffering from an overflow</a>,
   37449   if the <a href=#concept-input-max title=concept-input-max>maximum</a> is not less
   37450   than the <a href=#concept-input-min title=concept-input-min>minimum</a>, the user
   37451   agent must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a <a href=#valid-floating-point-number>valid floating point
   37452   number</a> that represents the <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>
   37453 
   37454   </div>
   37455 
   37456   <p><span class=impl>The <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a> is
   37457   1.</span> The <a href=#concept-input-step-default title=concept-input-step-default>default
   37458   step</a> is 1 (allowing only integers, unless the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute has a non-integer
   37459   value).</p>
   37460 
   37461   <div class=impl>
   37462 
   37463   <p>When the element is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>,
   37464   the user agent must round the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the nearest number for
   37465   which the element would not <a href=#suffering-from-a-step-mismatch title="suffering from a step
   37466   mismatch">suffer from a step mismatch</a>, and which is greater
   37467   than or equal to the <a href=#concept-input-min title=concept-input-min>minimum</a>,
   37468   and, if the <a href=#concept-input-max title=concept-input-max>maximum</a> is not
   37469   less than the <a href=#concept-input-min title=concept-input-min>minimum</a>, which
   37470   is less than or equal to the <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>
   37471 
   37472   <p><strong>The <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   37473   string to a number</a>, given a string <var title="">input</var>,
   37474   is as follows</strong>: If applying the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
   37475   floating point number values</a> to <var title="">input</var>
   37476   results in an error, then return an error; otherwise, return the
   37477   resulting number.</p>
   37478 
   37479   <p><strong>The <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   37480   number to a string</a>, given a number <var title="">input</var>,
   37481   is as follows</strong>: Return a <a href=#valid-floating-point-number>valid floating point
   37482   number</a> that represents <var title="">input</var>.</p>
   37483 
   37484   </div>
   37485 
   37486   <div class=bookkeeping>
   37487 
   37488    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37489    attributes, IDL attributes, and methods apply to the element:
   37490    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37491    <code title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37492    <code title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37493    <code title=attr-input-min><a href=#attr-input-min>min</a></code>, and
   37494    <code title=attr-input-step><a href=#attr-input-step>step</a></code> content attributes;
   37495    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37496    <code title=dom-input-value><a href=#dom-input-value>value</a></code>,
   37497    <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   37498    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes;
   37499    <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   37500    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37501 
   37502    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37503    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   37504 
   37505    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   37506 
   37507    <p>The following content attributes must not be specified and do not
   37508    apply to the element:
   37509    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37510    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37511    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   37512    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37513    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37514    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37515    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37516    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37517    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37518    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37519    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37520    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37521    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37522    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37523    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   37524    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37525    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   37526    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37527 
   37528    <p>The following IDL attributes and methods do not apply to the
   37529    element:
   37530    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   37531    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37532    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37533    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   37534    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   37535    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> and
   37536    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>
   37537 
   37538   </div>
   37539 
   37540   <div class=example>
   37541 
   37542    <p>Here is an example of a range control using an autocomplete list
   37543    with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This
   37544    could be useful if there are values along the full range of the
   37545    control that are especially important, such as preconfigured light
   37546    levels or typical speed limits in a range control used as a speed
   37547    control. The following markup fragment:</p>
   37548 
   37549    <pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
   37550 &lt;datalist id="powers"&gt;
   37551  &lt;option value="0"&gt;
   37552  &lt;option value="-30"&gt;
   37553  &lt;option value="30"&gt;
   37554  &lt;option value="+50"&gt;
   37555 &lt;/datalist&gt;
   37556 </pre>
   37557 
   37558    <p>...with the following style sheet applied:</p>
   37559 
   37560    <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
   37561 
   37562    <p>...might render as:</p>
   37563 
   37564    <p><img alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." src=images/sample-range.png><p>Note how the UA determined the orientation of the control from
   37565    the ratio of the style-sheet-specified height and width properties.
   37566    The colors were similiarly derived from the style sheet. The tick
   37567    marks, however, were derived from the markup. In particular, the
   37568    <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not
   37569    affected the placement of tick marks, the UA deciding to only use
   37570    the author-specified completion values and then adding longer tick
   37571    marks at the extremes.</p>
   37572 
   37573    <p>Note also how the invalid value <code title="">+50</code> was
   37574    completely ignored.</p>
   37575 
   37576   </div>
   37577 
   37578   <div class=example>
   37579 
   37580    <p>For another example, consider the following markup fragment:</p>
   37581 
   37582    <pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>
   37583 
   37584    <p>A user agent could display in a variety of ways, for instance:</p>
   37585 
   37586    <p><img alt="As a dial." src=images/sample-range-2a.png></p>
   37587 
   37588    <p>Or, alternatively, for instance:</p>
   37589 
   37590    <p><img alt="As a long horizontal slider with tick marks." src=images/sample-range-2b.png></p>
   37591 
   37592    <p>The user agent could pick which one to display based on the
   37593    dimensions given in the style sheet. This would allow it to
   37594    maintain the same resolution for the tick marks, despite the
   37595    differences in width.</p>
   37596 
   37597   </div>
   37598 
   37599 
   37600 
   37601   <h6 id=color-state><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
   37602 
   37603   <div class=impl>
   37604 
   37605   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the rules in this
   37606   section apply.</p>
   37607 
   37608   </div>
   37609 
   37610   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a color
   37611   well control, for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
   37612   <a href=#simple-color>simple color</a>.</p>
   37613 
   37614   <div class=impl>
   37615 
   37616   <p class=note>In this state, there is always a color picked, and
   37617   there is no way to set the value to the empty string.</p>
   37618 
   37619   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37620   the user agent should allow the user to change the color represented
   37621   by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained from
   37622   applying the <a href=#rules-for-parsing-simple-color-values>rules for parsing simple color values</a> to
   37623   it. User agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
   37624   <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>. If the user agent
   37625   provides a user interface for selecting a color, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the result of
   37626   using the <a href=#rules-for-serializing-simple-color-values>rules for serializing simple color values</a> to
   37627   the user's selection. User agents must not allow the user to set the
   37628   <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
   37629 
   37630   </div>
   37631 
   37632   <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
   37633   specified, must have a value that is a <a href=#valid-simple-color>valid simple
   37634   color</a>.</p>
   37635 
   37636   <div class=impl>
   37637 
   37638   <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
   37639   follows</strong>: If the <a href=#concept-fe-value title=concept-fe-value>value</a>
   37640   of the element is a <a href=#valid-simple-color>valid simple color</a>, then set it to
   37641   the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element
   37642   <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>; otherwise, set it to the string
   37643   "<code title="">#000000</code>".</p>
   37644 
   37645   </div>
   37646 
   37647   <div class=bookkeeping>
   37648 
   37649    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37650    attributes, IDL attributes, and methods apply to the element:
   37651    <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> and
   37652    <code title=attr-input-list><a href=#attr-input-list>list</a></code> content attributes;
   37653    <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37654    <code title=dom-input-value><a href=#dom-input-value>value</a></code>, and
   37655    <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> IDL attributes.</p>
   37656 
   37657    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37658    in mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>.</p>
   37659 
   37660    <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</p>
   37661 
   37662    <p>The following content attributes must not be specified and do not
   37663    apply to the element:
   37664    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37665    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37666    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   37667    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37668    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37669    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37670    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37671    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37672    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37673    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37674    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37675    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37676    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37677    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37678    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37679    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37680    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   37681    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37682    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   37683    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   37684    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37685 
   37686    <p>The following IDL attributes and methods do not apply to the
   37687    element:
   37688    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   37689    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37690    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37691    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   37692    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   37693    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   37694    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   37695    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   37696    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   37697    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37698 
   37699   </div>
   37700 
   37701 
   37702   <h6 id=checkbox-state><span class=secno>4.10.7.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
   37703 
   37704   <div class=impl>
   37705 
   37706   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the rules in
   37707   this section apply.</p>
   37708 
   37709   </div>
   37710 
   37711   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a
   37712   two-state control that represents the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state. If the
   37713   element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state
   37714   is true, the control represents a positive selection, and if it is
   37715   false, a negative selection. If the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
   37716   is set to true, then the control's selection should be obscured as
   37717   if the control was in a third, indeterminate, state.</p>
   37718 
   37719   <p class=note>The control is never a true tri-state control, even
   37720   if the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
   37721   is set to true. The <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
   37722   only gives the appearance of a third state.</p>
   37723 
   37724   <div class=impl>
   37725 
   37726   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37727   then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
   37728   the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
   37729   its opposite value (i.e. true if it is false, false if it is true),
   37730   and of setting the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
   37731   to false. The <a href=#canceled-activation-steps>canceled activation steps</a> consist of
   37732   setting the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> and
   37733   the element's <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute
   37734   back to the values they had before the <a href=#pre-click-activation-steps>pre-click activation
   37735   steps</a> were run. The <a href=#activation-behavior>activation behavior</a> is to
   37736   <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element<!-- It's not
   37737   cancelable. Once this fires, the control is checked, end of
   37738   story. -->, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   37739   element's <a href=#form-owner>form owner</a>.</p>
   37740 
   37741   <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and its <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is false, then the
   37742   element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
   37743 
   37744   </div>
   37745 
   37746   <dl class=domintro><dt><var title="">input</var> . <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> [ = <var title="">value</var> ]</dt>
   37747 
   37748    <dd>
   37749 
   37750     <p>When set, overrides the rendering of <a href=#checkbox-state title=attr-input-type-checkbox>checkbox</a> controls so that
   37751     the current value is not visible.</p>
   37752 
   37753    </dd>
   37754 
   37755   </dl><div class=bookkeeping>
   37756 
   37757    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37758    attributes and IDL attributes apply to the element:
   37759    <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, and
   37760    <code title=attr-input-required><a href=#attr-input-required>required</a></code> content attributes;
   37761    <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> and
   37762    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>
   37763 
   37764    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37765    in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>
   37766 
   37767    <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
   37768 
   37769    <p>The following content attributes must not be specified and do not
   37770    apply to the element:
   37771    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37772    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37773    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37774    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37775    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37776    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37777    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37778    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37779    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37780    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37781    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37782    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37783    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37784    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37785    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37786    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37787    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37788    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37789    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   37790    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   37791    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37792 
   37793    <p>The following IDL attributes and methods do not apply to the
   37794    element:
   37795    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37796    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37797    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   37798    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37799    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   37800    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   37801    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   37802    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   37803    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   37804    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   37805    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37806 
   37807    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>
   37808 
   37809   </div>
   37810 
   37811 
   37812 
   37813   <h6 id=radio-button-state><span class=secno>4.10.7.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
   37814 
   37815   <div class=impl>
   37816 
   37817   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the rules
   37818   in this section apply.</p>
   37819 
   37820   </div>
   37821 
   37822   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a control
   37823   that, when used in conjunction with other <code><a href=#the-input-element>input</a></code>
   37824   elements, forms a <i><a href=#radio-button-group>radio button group</a></i> in which only one
   37825   control can have its <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state set to true. If
   37826   the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>
   37827   state is true, the control represents the selected control in the
   37828   group, and if it is false, it indicates a control in the group that
   37829   is not selected.</p>
   37830 
   37831   <p>The <dfn id=radio-button-group><i>radio button group</i></dfn> that contains an
   37832   <code><a href=#the-input-element>input</a></code> element <var title="">a</var> also contains all
   37833   the other <code><a href=#the-input-element>input</a></code> elements <var title="">b</var> that
   37834   fulfill all of the following conditions:</p>
   37835 
   37836   <ul><li>The <code><a href=#the-input-element>input</a></code> element <var title="">b</var>'s <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state.</li>
   37837 
   37838    <li>Either <var title="">a</var> and <var title="">b</var> have the
   37839    same <a href=#form-owner>form owner</a>, or they both have no <a href=#form-owner>form
   37840    owner</a>.</li>
   37841 
   37842    <li>They both have a <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   37843    attribute, and the value of <var title="">a</var>'s <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute is a
   37844    <a href=#compatibility-caseless>compatibility caseless</a> match for the value of <var title="">b</var>'s <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   37845    attribute.</li>
   37846 
   37847   </ul><p>A document must not contain an <code><a href=#the-input-element>input</a></code> element whose
   37848   <i><a href=#radio-button-group>radio button group</a></i> contains only that element.</p>
   37849 
   37850   <div class=impl>
   37851 
   37852   <p>When any of the following events occur, if the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is true after
   37853   the event, the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state of all the
   37854   other elements in the same <i><a href=#radio-button-group>radio button group</a></i> must be set to
   37855   false:</p>
   37856 
   37857   <ul><li>The element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is set to
   37858    true (for whatever reason).</li>
   37859 
   37860    <li>The element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   37861    attribute is added, removed, or changes value.</li>
   37862 
   37863    <li>The element's <a href=#form-owner>form owner</a> changes.</li>
   37864 
   37865   </ul><p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37866   then: The <a href=#pre-click-activation-steps>pre-click activation steps</a> consist of setting
   37867   the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
   37868   true. The <a href=#canceled-activation-steps>canceled activation steps</a> consist of setting
   37869   the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
   37870   false. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a
   37871   simple event</a> that bubbles named <code title=event-change>change</code> at the element<!-- It's not
   37872   cancelable. Once this fires, the control is checked, end of
   37873   story. -->, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   37874   element's <a href=#form-owner>form owner</a>.</p>
   37875 
   37876   <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and all of the
   37877   <code><a href=#the-input-element>input</a></code> elements in the <i><a href=#radio-button-group>radio button group</a></i> have a
   37878   <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> that is
   37879   false, then the element is <a href=#suffering-from-being-missing>suffering from being
   37880   missing</a>.</p>
   37881 
   37882   </div>
   37883 
   37884   <p class=note>If none of the radio buttons in a <a href=#radio-button-group>radio button
   37885   group</a> are checked when they are inserted into the document,
   37886   then they will all be initially unchecked in the interface, until
   37887   such time as one of them is checked (either by the user or by
   37888   script).</p>
   37889 
   37890   <div class=bookkeeping>
   37891 
   37892    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   37893    attributes and IDL attributes apply to the element:
   37894    <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code> and
   37895    <code title=attr-input-required><a href=#attr-input-required>required</a></code> content attributes;
   37896    <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> and
   37897    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>
   37898 
   37899    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   37900    in mode <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a>.</p>
   37901 
   37902    <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
   37903 
   37904    <p>The following content attributes must not be specified and do not
   37905    apply to the element:
   37906    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   37907    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   37908    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   37909    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   37910    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   37911    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   37912    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   37913    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   37914    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   37915    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   37916    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   37917    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   37918    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   37919    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   37920    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   37921    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   37922    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   37923    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   37924    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   37925    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   37926    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   37927 
   37928    <p>The following IDL attributes and methods do not apply to the
   37929    element:
   37930    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   37931    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   37932    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   37933    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   37934    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   37935    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   37936    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   37937    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   37938    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   37939    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   37940    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   37941 
   37942    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>
   37943 
   37944   </div>
   37945 
   37946 
   37947 
   37948   <h6 id=file-upload-state><span class=secno>4.10.7.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
   37949 
   37950   <!-- v2 ideas:
   37951    * maximum height/width or required ratio for image uploads? - Leons Petrazickis
   37952    * maximum per-file upload size - Alfonso Mart&iacute;nez de Lizarrondo
   37953   -->
   37954 
   37955   <div class=impl>
   37956 
   37957   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the rules in this
   37958   section apply.</p>
   37959 
   37960   </div>
   37961 
   37962   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a list of
   37963   <dfn id=concept-input-type-file-selected title=concept-input-type-file-selected>selected files</dfn>,
   37964   each file consisting of a file name, a file type, and a file body
   37965   (the contents of the file).</p>
   37966 
   37967   <div class=impl>
   37968 
   37969   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   37970   the user agent should allow the user to change the files on the
   37971   list, e.g. adding or removing files. Files can be from the
   37972   filesystem or created on the fly, e.g. a picture taken from a camera
   37973   connected to the user's device.</p>
   37974 
   37975   <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> is
   37976   empty, then the element is <a href=#suffering-from-being-missing>suffering from being
   37977   missing</a>.</p>
   37978 
   37979   <p>Unless the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>
   37980   attribute is set, there must be no more than one file in the list of
   37981   <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected
   37982   files</a>.</p>
   37983 
   37984   </div>
   37985 
   37986   <hr><p>The <dfn id=attr-input-accept title=attr-input-accept><code>accept</code></dfn>
   37987   attribute may be specified to provide user agents with a hint of
   37988   what file types the server will be able to accept.</p>
   37989 
   37990   <p>If specified, the attribute must consist of a <a href=#set-of-comma-separated-tokens>set of
   37991   comma-separated tokens</a>, each of which must be an <a href=#ascii-case-insensitive>ASCII
   37992   case-insensitive</a> match for one of the following:</p>
   37993 
   37994   <dl><dt>The string <code title="">audio/*</code></dt>
   37995 
   37996    <dd>Indicates that sound files are accepted.</dd>
   37997 
   37998    <dt>The string <code title="">video/*</code></dt>
   37999 
   38000    <dd>Indicates that video files are accepted.</dd>
   38001 
   38002    <dt>The string <code title="">image/*</code></dt>
   38003 
   38004    <dd>Indicates that image files are accepted.</dd>
   38005 
   38006    <dt>A <a href=#valid-mime-type-with-no-parameters>valid MIME type with no parameters</a></dt>
   38007 
   38008    <dd>Indicates that files of the specified type are accepted.</dd>
   38009 
   38010   </dl><p>The tokens must not be <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
   38011   matches for any of the other tokens (i.e. duplicates are not
   38012   allowed). <span class=impl>To obtain the list of tokens from the
   38013   attribute, the user agent must <a href=#split-a-string-on-commas title="split a string on
   38014   commas">split the attribute value on commas</a>.</span></p>
   38015 
   38016   <div class=impl>
   38017 
   38018   <p>User agents should prevent the user from selecting files that are
   38019   not accepted by one (or more) of these tokens.</p>
   38020 
   38021   </div>
   38022 
   38023   <div class=example>
   38024 
   38025    <p>For historical reasons, the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute prefixes the
   38026    filename with the string "<code title="">C:\fakepath\</code>". Some
   38027    legacy user agents actually included the full path (which was a
   38028    security vulnerability). As a result of this, obtaining the
   38029    filename from the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL
   38030    attribute in a backwards-compatible way is non-trivial. The
   38031    following function extracts the filename in a suitably compatible
   38032    manner:</p>
   38033 
   38034    <pre>function extractFilename(path) {<!--
   38035   if (path.substr(0, 12) == "C:\\fakepath\\")
   38036     return path.substr(12);-->
   38037   var x;
   38038   x = path.lastIndexOf('\\');
   38039   if (x &gt;= 0) // Windows-based path
   38040     return path.substr(x+1);
   38041   x = path.lastIndexOf('/');
   38042   if (x &gt;= 0) // Unix-based path
   38043     return path.substr(x+1);
   38044   return path; // just the filename
   38045 }</pre>
   38046 
   38047    <p>This can be used as follows:</p>
   38048 
   38049    <pre>&lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
   38050 &lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
   38051 &lt;script&gt;
   38052  function updateFilename(path) {
   38053    var name = extractFilename(path);
   38054    document.getElementById('filename').textContent = name;
   38055  }
   38056 &lt;/script&gt;</pre>
   38057 
   38058    <!-- How useful this actually is... is unclear. -->
   38059 
   38060   </div>
   38061 
   38062   <hr><div class=bookkeeping>
   38063 
   38064    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   38065    attributes apply to the element:
   38066 
   38067    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   38068    attributes and IDL attributes apply to the element:
   38069    <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   38070    <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, and
   38071    <code title=attr-input-required><a href=#attr-input-required>required</a></code>;
   38072    <code title=dom-input-files><a href=#dom-input-files>files</a></code> and
   38073    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attributes.</p>
   38074 
   38075    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   38076    in mode <a href=#dom-input-value-filename title=dom-input-value-filename>filename</a>.</p>
   38077 
   38078    <p>The <code title=event-input-change><a href=#event-input-change>change</a></code> event applies.</p>
   38079 
   38080    <p>The following content attributes must not be specified and do not
   38081    apply to the element:
   38082    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   38083    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   38084    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   38085    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   38086    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   38087    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   38088    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   38089    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   38090    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   38091    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   38092    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   38093    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   38094    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   38095    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   38096    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   38097    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   38098    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   38099    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   38100    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   38101    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   38102 
   38103    <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   38104    attribute must be omitted.</p>
   38105 
   38106    <p>The following IDL attributes and methods do not apply to the
   38107    element:
   38108    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   38109    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   38110    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   38111    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   38112    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   38113    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   38114    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   38115    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   38116    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   38117    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   38118    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   38119 
   38120    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> event does not apply.</p>
   38121 
   38122   </div>
   38123 
   38124 
   38125 
   38126   <h6 id=submit-button-state><span class=secno>4.10.7.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
   38127 
   38128   <div class=impl>
   38129 
   38130   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> state, the rules
   38131   in this section apply.</p>
   38132 
   38133   </div>
   38134 
   38135   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
   38136   that, when activated, submits the form. <span class=impl>If the
   38137   element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute,
   38138   the button's label must be the value of that attribute; otherwise,
   38139   it must be an implementation-defined string that means "Submit" or
   38140   some such.</span> The element is a <a href=#concept-button title=concept-button>button</a>, specifically a <a href=#concept-submit-button title=concept-submit-button>submit button</a>.</p>
   38141 
   38142   <div class=impl>
   38143 
   38144   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   38145   the user agent should allow the user to activate the element.</p>
   38146 
   38147   <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
   38148   has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
   38149   owner</a> from the <code><a href=#the-input-element>input</a></code> element; otherwise, it is
   38150   to do nothing.</p>
   38151 
   38152   </div>
   38153 
   38154   <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are <a href=#attributes-for-form-submission>attributes
   38155   for form submission</a>.</p>
   38156 
   38157   <p class=note>The <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute can
   38158   be used to make submit buttons that do not trigger the constraint
   38159   validation.</p>
   38160 
   38161   <div class=bookkeeping>
   38162 
   38163    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   38164    attributes and IDL attributes apply to the element:
   38165    <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   38166    <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   38167    <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   38168    <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and
   38169    <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> content attributes;
   38170    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute.</p>
   38171 
   38172    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   38173    in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
   38174 
   38175    <p>The following content attributes must not be specified and do not
   38176    apply to the element:
   38177    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   38178    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   38179    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   38180    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   38181    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   38182    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   38183    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   38184    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   38185    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   38186    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   38187    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   38188    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   38189    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   38190    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   38191    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   38192    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   38193    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   38194    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   38195 
   38196    <p>The following IDL attributes and methods do not apply to the
   38197    element:
   38198    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   38199    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   38200    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   38201    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   38202    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   38203    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   38204    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   38205    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   38206    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   38207    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   38208    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   38209    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   38210 
   38211    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
   38212 
   38213   </div>
   38214 
   38215 
   38216   <h6 id=image-button-state><span class=secno>4.10.7.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
   38217 
   38218   <div class=impl>
   38219 
   38220   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, the rules
   38221   in this section apply.</p>
   38222 
   38223   </div>
   38224 
   38225   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> either an
   38226   image from which a user can select a coordinate and submit the form,
   38227   or alternatively a button from which the user can submit the
   38228   form. The element is a <a href=#concept-button title=concept-button>button</a>,
   38229   specifically a <a href=#concept-submit-button title=concept-submit-button>submit
   38230   button</a>.</p>
   38231 
   38232   <hr><p>The image is given by the <dfn id=attr-input-src title=attr-input-src><code>src</code></dfn> attribute. The <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute must be present, and
   38233   must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   38234   spaces</a> referencing a non-interactive, optionally animated,
   38235   image resource that is neither paged nor scripted.</p>
   38236 
   38237   <div class=impl>
   38238 
   38239   <p>When any of the following events occur, unless the user agent
   38240   cannot support images, or its support for images has been disabled,
   38241   or the user agent only fetches elements on demand, or the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute's value is the empty
   38242   string, the user agent must <a href=#resolve-a-url title="resolve a
   38243   url">resolve</a> the value of the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute, relative to the
   38244   element, and if that is successful, must <a href=#fetch>fetch</a> the
   38245   resulting <a href=#absolute-url>absolute URL</a>:</p> <!-- Note how this does NOT
   38246   happen when the base URL changes. --> <!-- http-origin privacy
   38247   sensitive -->
   38248 
   38249   <ul><li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is first set to the
   38250    <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
   38251    (possibly when the element is first created), and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is present.</li>
   38252 
   38253    <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is changed back to
   38254    the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
   38255    and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is
   38256    present, and its value has changed since the last time the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute was in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state.</li>
   38257 
   38258    <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and the
   38259    <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set or
   38260    changed.</li>
   38261 
   38262   </ul><!-- same text in <img> section and similar text elsewhere --><p>Fetching the image must <a href=#delay-the-load-event>delay the load event</a> of the
   38263   element's document until the <a href=#concept-task title=concept-task>task</a>
   38264   that is <a href=#queue-a-task title="queue a task">queued</a> by the
   38265   <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (defined below) has been run.</p>
   38266 
   38267   <p>If the image was successfully obtained, with no network errors,
   38268   and the image's type is a supported image type, and the image is a
   38269   valid image of that type, then the image is said to be <dfn id=input-img-available title=input-img-available><i>available</i></dfn>. If this is true
   38270   before the image is completely downloaded, each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
   38271   task">queued</a> by the <a href=#networking-task-source>networking task source</a> while
   38272   the image is being <a href=#fetch title=fetch>fetched</a> must update
   38273   the presentation of the image appropriately.</p>
   38274 
   38275   <p>The user agents should apply the <a href=#content-type-sniffing:-image title="Content-Type
   38276   sniffing: image">image sniffing rules</a> to determine the type
   38277   of the image, with the image's <a href=#content-type title=Content-Type>associated
   38278   Content-Type headers</a> giving the <var title="">official
   38279   type</var>. If these rules are not applied, then the type of the
   38280   image must be the type given by the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>
   38281 
   38282   <p>User agents must not support non-image resources with the
   38283   <code><a href=#the-input-element>input</a></code> element. User agents must not run executable code
   38284   embedded in the image resource. User agents must only display the
   38285   first page of a multipage resource. User agents must not allow the
   38286   resource to act in an interactive fashion, but should honor any
   38287   animation in the resource.</p>
   38288 
   38289   <p>The <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task
   38290   source</a> once the resource has been <a href=#fetch title=fetch>fetched</a>, must, if the download was successful
   38291   and the image is <i title=input-img-available><a href=#input-img-available>available</a></i>,
   38292   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named
   38293   <code title=event-load>load</code> at the <code><a href=#the-input-element>input</a></code>
   38294   element; and otherwise, if the fetching process fails without a
   38295   response from the remote server, or completes but the image is not a
   38296   valid or supported image, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
   38297   simple event</a> named <code title=event-error>error</code> on
   38298   the <code><a href=#the-input-element>input</a></code> element.</p>
   38299 
   38300   <hr></div>
   38301 
   38302   <p>The <dfn id=attr-input-alt title=attr-input-alt><code>alt</code></dfn> attribute
   38303   provides the textual label for the alternative button for users and
   38304   user agents who cannot use the image. The <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code> attribute must also be present,
   38305   and must contain a non-empty string.</p>
   38306 
   38307   <p>The <code><a href=#the-input-element>input</a></code> element supports <a href=#dimension-attributes>dimension
   38308   attributes</a>.</p>
   38309 
   38310   <div class=impl>
   38311 
   38312   <hr><p>If the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set,
   38313   and the image is <i title=input-img-available><a href=#input-img-available>available</a></i> and
   38314   the user agent is configured to display that image, then: The
   38315   element <a href=#represents>represents</a> a control for selecting a <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a> from
   38316   the image specified by the <code title=attr-input-src><a href=#attr-input-src>src</a></code>
   38317   attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user agent should
   38318   allow the user to select this <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>. The
   38319   <a href=#activation-behavior>activation behavior</a> in this case consists of taking the
   38320   user's selected <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>, and
   38321   then, if the element has a <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
   38322   element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
   38323   element. If the user activates the control without explicitly
   38324   selecting a coordinate, then the coordinate (0,0) must be
   38325   assumed.</p>
   38326 
   38327   <p>Otherwise, the element <a href=#represents>represents</a> a submit button
   38328   whose label is given by the value of the <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code> attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user agent should
   38329   allow the user to activate the button. The <a href=#activation-behavior>activation
   38330   behavior</a> in this case consists of setting the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
   38331   coordinate</a> to (0,0), and then, if the element has a
   38332   <a href=#form-owner>form owner</a>, <a href=#concept-form-submit title=concept-form-submit>submitting</a> the <code><a href=#the-input-element>input</a></code>
   38333   element's <a href=#form-owner>form owner</a> from the <code><a href=#the-input-element>input</a></code>
   38334   element.</p>
   38335 
   38336   <p>The <dfn id=concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
   38337   coordinate</dfn> must consist of an <var title="">x</var>-component
   38338   and a <var title="">y</var>-component. The coordinates represent the
   38339   position relative to the edge of the image, with the coordinate
   38340   space having the positive <var title="">x</var> direction to the
   38341   right, and the positive <var title="">y</var> direction
   38342   downwards.</p>
   38343 
   38344   <p>The <var title="">x</var>-component must be a <a href=#valid-integer>valid
   38345   integer</a> representing a number <var title="">x</var> in the
   38346   range <span title="">&minus;(<var title="">border<sub title="">left</sub></var>+<var title="">padding<sub title="">left</sub></var>) &le; <var title="">x</var> &le; <var title="">width</var>+<var title="">border<sub title="">right</sub></var>+<var title="">padding<sub title="">right</sub></var></span>, where <var title="">width</var>
   38347   is the rendered width of the image, <var title="">border<sub title="">left</sub></var> is the width of the border on the left of
   38348   the image, <var title="">padding<sub title="">left</sub></var> is
   38349   the width of the padding on the left of the image, <var title="">border<sub title="">right</sub></var> is the width of the
   38350   border on the right of the image, and <var title="">padding<sub title="">right</sub></var> is the width of the padding on the right
   38351   of the image, with all dimensions given in CSS pixels.</p>
   38352 
   38353   <p>The <var title="">y</var>-component must be a <a href=#valid-integer>valid
   38354   integer</a> representing a number <var title="">y</var> in the
   38355   range <span title="">&minus;(<var title="">border<sub title="">top</sub></var>+<var title="">padding<sub title="">top</sub></var>) &le; <var title="">y</var> &le; <var title="">height</var>+<var title="">border<sub title="">bottom</sub></var>+<var title="">padding<sub title="">bottom</sub></var></span>, where <var title="">height</var>
   38356   is the rendered height of the image, <var title="">border<sub title="">top</sub></var> is the width of the border above the image,
   38357   <var title="">padding<sub title="">top</sub></var> is the width of
   38358   the padding above the image, <var title="">border<sub title="">bottom</sub></var> is the width of the border below the
   38359   image, and <var title="">padding<sub title="">bottom</sub></var> is
   38360   the width of the padding below the image, with all dimensions given
   38361   in CSS pixels.</p>
   38362 
   38363   <p>Where a border or padding is missing, its width is zero CSS
   38364   pixels.</p>
   38365 
   38366   <hr></div>
   38367 
   38368   <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are <a href=#attributes-for-form-submission>attributes
   38369   for form submission</a>.</p>
   38370 
   38371   <div class=bookkeeping>
   38372 
   38373    <p>The following common <code><a href=#the-input-element>input</a></code> element content
   38374    attributes and IDL attributes apply to the element:
   38375    <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   38376    <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   38377    <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   38378    <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   38379    <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   38380    <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   38381    <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   38382    <code title=attr-input-src><a href=#attr-input-src>src</a></code>, and
   38383    <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes;
   38384    <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute.</p>
   38385 
   38386    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute is
   38387    in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
   38388 
   38389    <p>The following content attributes must not be specified and do not
   38390    apply to the element:
   38391    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   38392    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   38393    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   38394    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   38395    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   38396    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   38397    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   38398    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   38399    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   38400    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   38401    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   38402    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   38403    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>, and
   38404    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>.</p>
   38405 
   38406    <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   38407    attribute must be omitted.</p>
   38408 
   38409    <p>The following IDL attributes and methods do not apply to the
   38410    element:
   38411    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   38412    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   38413    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   38414    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   38415    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   38416    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   38417    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   38418    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   38419    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   38420    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   38421    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   38422    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   38423 
   38424    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
   38425 
   38426   </div>
   38427 
   38428   <p class=note>Many aspects of this state's behavior are similar to
   38429   the behavior of the <code><a href=#the-img-element>img</a></code> element. Readers are encouraged
   38430   to read that section, where many of the same requirements are
   38431   described in more detail.</p>
   38432 
   38433 
   38434 
   38435   <h6 id=reset-button-state><span class=secno>4.10.7.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
   38436 
   38437   <div class=impl>
   38438 
   38439   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a> state, the rules
   38440   in this section apply.</p>
   38441 
   38442   </div>
   38443 
   38444   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
   38445   that, when activated, resets the form. <span class=impl>If the
   38446   element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute,
   38447   the button's label must be the value of that attribute; otherwise,
   38448   it must be an implementation-defined string that means "Reset" or
   38449   some such.</span> The element is a <a href=#concept-button title=concept-button>button</a>.</p>
   38450 
   38451   <div class=impl>
   38452 
   38453   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   38454   the user agent should allow the user to activate the element.</p>
   38455 
   38456   <p>The element's <a href=#activation-behavior>activation behavior</a>, if the element
   38457   has a <a href=#form-owner>form owner</a>, is to <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form owner</a>;
   38458   otherwise, it is to do nothing.</p>
   38459 
   38460   <p><strong>Constraint validation</strong>: The element is
   38461   <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   38462 
   38463   </div>
   38464 
   38465   <div class=bookkeeping>
   38466 
   38467    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute
   38468    applies to this element and is in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
   38469 
   38470    <p>The following content attributes must not be specified and do not
   38471    apply to the element:
   38472    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   38473    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   38474    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   38475    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   38476    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   38477    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   38478    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   38479    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   38480    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   38481    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   38482    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   38483    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   38484    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   38485    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   38486    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   38487    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   38488    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   38489    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   38490    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   38491    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   38492    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   38493    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   38494    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   38495 
   38496    <p>The following IDL attributes and methods do not apply to the
   38497    element:
   38498    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   38499    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   38500    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   38501    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   38502    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   38503    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   38504    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   38505    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   38506    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   38507    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   38508    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   38509    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   38510 
   38511    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
   38512 
   38513   </div>
   38514 
   38515 
   38516   <h6 id=button-state><span class=secno>4.10.7.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
   38517 
   38518   <div class=impl>
   38519 
   38520   <p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#button-state title=attr-input-type-button>Button</a> state, the rules in
   38521   this section apply.</p>
   38522 
   38523   </div>
   38524 
   38525   <p>The <code><a href=#the-input-element>input</a></code> element <a href=#represents>represents</a> a button
   38526   with no default behavior. <span class=impl>If the element has a
   38527   <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, the button's
   38528   label must be the value of that attribute; otherwise, it must be the
   38529   empty string.</span> The element is a <a href=#concept-button title=concept-button>button</a>.</p>
   38530 
   38531   <div class=impl>
   38532 
   38533   <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
   38534   the user agent should allow the user to activate the element. The
   38535   element's <a href=#activation-behavior>activation behavior</a> is to do nothing.</p>
   38536 
   38537   <p><strong>Constraint validation</strong>: The element is
   38538   <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   38539 
   38540   </div>
   38541 
   38542   <div class=bookkeeping>
   38543 
   38544    <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute
   38545    applies to this element and is in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
   38546 
   38547    <p>The following content attributes must not be specified and do not
   38548    apply to the element:
   38549    <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
   38550    <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
   38551    <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
   38552    <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
   38553    <code class=no-backref title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>,
   38554    <code class=no-backref title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>,
   38555    <code class=no-backref title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>,
   38556    <code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
   38557    <code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
   38558    <code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
   38559    <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
   38560    <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
   38561    <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   38562    <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
   38563    <code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
   38564    <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
   38565    <code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
   38566    <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
   38567    <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>,
   38568    <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
   38569    <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
   38570    <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
   38571    <code class=no-backref title=attr-dim-width><a href=#attr-dim-width>width</a></code>.</p>
   38572 
   38573    <p>The following IDL attributes and methods do not apply to the
   38574    element:
   38575    <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
   38576    <code class=no-backref title=dom-input-files><a href=#dom-input-files>files</a></code>,
   38577    <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
   38578    <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
   38579    <code class=no-backref title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   38580    <code class=no-backref title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   38581    <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   38582    <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   38583    <code class=no-backref title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>,
   38584    <code class=no-backref title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   38585    <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
   38586    <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
   38587 
   38588    <p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
   38589 
   38590   </div>
   38591 
   38592 
   38593 
   38594   <h5 id=common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>
   38595 
   38596   <div class=impl>
   38597 
   38598   <p>These attributes only apply to an <code><a href=#the-input-element>input</a></code> element if
   38599   its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in a
   38600   state whose definition declares that the attribute applies. When an
   38601   attribute doesn't apply to an <code><a href=#the-input-element>input</a></code> element, user
   38602   agents must <a href=#ignore>ignore</a> the attribute, regardless of the
   38603   requirements and definitions below.</p>
   38604 
   38605   </div>
   38606 
   38607 
   38608   <h6 id=the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>
   38609 
   38610   <p>User agents sometimes have features for helping users fill forms
   38611   in, for example prefilling the user's address based on earlier user
   38612   input.</p>
   38613 
   38614   <p>The <dfn id=attr-input-autocomplete title=attr-input-autocomplete><code>autocomplete</code></dfn>
   38615   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
   38616   three states. The <code title=attr-input-autocomplete-on>on</code>
   38617   keyword maps to the <dfn id=attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</dfn> state, and the
   38618   <code title=attr-input-autocomplete-off>off</code> keyword maps to
   38619   the <dfn id=attr-input-autocomplete-off-state title=attr-input-autocomplete-off-state>off</dfn>
   38620   state. The attribute may also be omitted. The <i>missing value
   38621   default</i> is the <dfn id=attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</dfn>
   38622   state.</p>
   38623 
   38624   <p>The <a href=#attr-input-autocomplete-off-state title=attr-input-autocomplete-off-state>off</a>
   38625   state indicates either that the control's input data is particularly
   38626   sensitive (for example the activation code for a nuclear weapon); or
   38627   that it is a value that will never be reused (for example a
   38628   one-time-key for a bank login) and the user will therefore have to
   38629   explicitly enter the data each time, instead of being able to rely
   38630   on the UA to prefill the value for him; or that the document
   38631   provides its own autocomplete mechanism and does not want the user
   38632   agent to provide autocompletion values.</p>
   38633 
   38634   <p>Conversely, the <a href=#attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</a> state indicates
   38635   that the value is not particularly sensitive and the user can expect
   38636   to be able to rely on his user agent to remember values he has
   38637   entered for that control.</p>
   38638 
   38639   <p>The <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state
   38640   indicates that the user agent is to use the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute on the
   38641   element's <a href=#form-owner>form owner</a> instead. (By default, the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute of
   38642   <code><a href=#the-form-element>form</a></code> elements is in the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state.)</p>
   38643 
   38644   <div class=impl>
   38645 
   38646   <p>Each <code><a href=#the-input-element>input</a></code> element has a <dfn id=resulting-autocompletion-state>resulting
   38647   autocompletion state</dfn>, which is either <i title="">on</i> or <i title="">off</i>.</p>
   38648 
   38649   <p>When an <code><a href=#the-input-element>input</a></code> element is in one of the following
   38650   conditions, the <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting
   38651   autocompletion state</a> is <i title="">on</i>; otherwise, the
   38652   <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting autocompletion
   38653   state</a> is <i title="">off</i>:</p>
   38654 
   38655   <ul class=brief><li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   38656    attribute is in the <a href=#attr-input-autocomplete-on-state title=attr-input-autocomplete-on-state>on</a> state.</li>
   38657 
   38658    <li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   38659    attribute is in the <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state,
   38660    and the element has no <a href=#form-owner>form owner</a>.</li>
   38661 
   38662    <li>Its <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>
   38663    attribute is in the <a href=#attr-input-autocomplete-default-state title=attr-input-autocomplete-default-state>default</a> state,
   38664    and the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
   38665    the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a>
   38666    state.</li>
   38667 
   38668   </ul><p>When an <code><a href=#the-input-element>input</a></code> element's <a href=#resulting-autocompletion-state>resulting
   38669   autocompletion state</a> is <i title="">on</i>, the user agent
   38670   may store the value entered by the user so that if the user returns
   38671   to the page, the UA can prefill the form. Otherwise, the user agent
   38672   should not remember the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should not offer past
   38673   values to the user.</p>
   38674 
   38675   <p>In addition, if the <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
   38676   is <i title="">off</i>, <a href=#history-autocomplete>values are
   38677   reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the
   38678   history</a>.</p>
   38679 
   38680   <p>The autocompletion mechanism must be implemented by the user
   38681   agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
   38682   where the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>
   38683   (e.g. just after the element has been inserted into the document, or
   38684   when the user agent <a href=#stop-parsing title="stop parsing">stops
   38685   parsing</a>).</p>
   38686 
   38687   </div>
   38688 
   38689   <div class=example>
   38690 
   38691    <p>Banks frequently do not want UAs to prefill login
   38692    information:</p>
   38693 
   38694    <pre>&lt;p&gt;&lt;label&gt;Account: &lt;input type="text" name="ac" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
   38695 &lt;p&gt;&lt;label&gt;PIN: &lt;input type="password" name="pin" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;</pre>
   38696 
   38697   </div>
   38698 
   38699   <div class=impl>
   38700 
   38701   <p>A user agent may allow the user to override the <a href=#resulting-autocompletion-state>resulting
   38702   autocompletion state</a> and set it to always <i title="">on</i>,
   38703   always allowing values to be remembered and prefilled), or always <i title="">off</i>, never remembering values. However, the ability to
   38704   override the <a href=#resulting-autocompletion-state>resulting autocompletion state</a> to <i title="">on</i> should not be trivially accessible, as there are
   38705   significant security implications for the user if all values are
   38706   always remembered, regardless of the site's preferences.</p>
   38707 
   38708   </div>
   38709 
   38710 
   38711 
   38712   <h6 id=the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
   38713 
   38714   <p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
   38715   attribute is used to identify an element that lists predefined
   38716   options suggested to the user.</p>
   38717 
   38718   <p>If present, its value must be the ID of a <code><a href=#the-datalist-element>datalist</a></code>
   38719   element in the same document.</p>
   38720 
   38721   <div class=impl>
   38722 
   38723   <p>The <dfn id=concept-input-list title=concept-input-list>suggestions source
   38724   element</dfn> is the first element in the document in <a href=#tree-order>tree
   38725   order</a> to have an ID equal to the value of the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, if that element is a
   38726   <code><a href=#the-datalist-element>datalist</a></code> element. If there is no <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute, or if there is no
   38727   element with that ID, or if the first element with that ID is not a
   38728   <code><a href=#the-datalist-element>datalist</a></code> element, then there is no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>.</p>
   38729 
   38730   <p>If there is a <a href=#concept-input-list title=concept-input-list>suggestions source
   38731   element</a>, then, when the user agent is allowing the user to
   38732   edit the <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a>, the user agent should offer
   38733   the suggestions represented by the <a href=#concept-input-list title=concept-input-list>suggestions source element</a> to the
   38734   user in a manner suitable for the type of control used. The user
   38735   agent may use the suggestion's <a href=#concept-option-label title=concept-option-label>label</a> to identify the suggestion
   38736   if appropriate. If the user selects a suggestion, then the
   38737   <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the selected
   38738   suggestion's <a href=#concept-option-value title=concept-option-value>value</a>, as if
   38739   the user had written that value himself.</p>
   38740 
   38741   <p>User agents must filter the suggestions to hide suggestions that
   38742   the user would not be allowed to enter as the <code><a href=#the-input-element>input</a></code>
   38743   element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should
   38744   filter the suggestions to hide suggestions that would cause the
   38745   element to not <a href=#concept-fv-valid title=concept-fv-valid>satisfy its
   38746   constraints</a>.</p>
   38747 
   38748   <hr><p>If the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute does
   38749   not apply, there is no <a href=#concept-input-list title=concept-input-list>suggestions
   38750   source element</a>.</p>
   38751 
   38752   </div>
   38753 
   38754   <div class=example>
   38755 
   38756    <p>This URL field offers some suggestions.</p>
   38757 
   38758    <pre>&lt;label&gt;Homepage: &lt;input name=hp type=url list=hpurls&gt;&lt;/label&gt;
   38759 &lt;datalist id=hpurls&gt;
   38760  &lt;option value="http://www.google.com/" label="Google"&gt;
   38761  &lt;option value="http://www.reddit.com/" label="Reddit"&gt;
   38762 &lt;/datalist&gt;</pre>
   38763 
   38764    <p>Other URLs from the user's history might show also; this is up
   38765    to the user agent.</p>
   38766 
   38767   </div>
   38768 
   38769   <div class=example>
   38770 
   38771    <p>This example demonstrates how to design a form that uses the
   38772    autocompletion list feature while still degrading usefully in
   38773    legacy user agents.</p>
   38774 
   38775    <p>If the autocompletion list is merely an aid, and is not
   38776    important to the content, then simply using a <code><a href=#the-datalist-element>datalist</a></code>
   38777    element with children <code><a href=#the-option-element>option</a></code> elements is enough. To
   38778    prevent the values from being rendered in legacy user agents, they
   38779    should be placed inside the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute instead of
   38780    inline.</p>
   38781 
   38782    <pre>&lt;p&gt;
   38783  &lt;label&gt;
   38784   Enter a breed:
   38785   &lt;input type="text" name="breed" list="breeds"&gt;
   38786   &lt;datalist id="breeds"&gt;
   38787    &lt;option value="Abyssinian"&gt;
   38788    &lt;option value="Alpaca"&gt;
   38789    &lt;!-- ... --&gt;
   38790   &lt;/datalist&gt;
   38791  &lt;/label&gt;
   38792 &lt;/p&gt;</pre>
   38793 
   38794    <p>However, if the values need to be shown in legacy UAs, then
   38795    fallback content can be placed inside the <code><a href=#the-datalist-element>datalist</a></code>
   38796    element, as follows:</p>
   38797 
   38798    <pre>&lt;p&gt;
   38799  &lt;label&gt;
   38800   Enter a breed:
   38801   &lt;input type="text" name="breed" list="breeds"&gt;
   38802  &lt;/label&gt;
   38803  &lt;datalist id="breeds"&gt;
   38804   &lt;label&gt;
   38805    or select one from the list:
   38806    &lt;select name="breed"&gt;
   38807     &lt;option value=""&gt; (none selected)
   38808     &lt;option&gt;Abyssinian
   38809     &lt;option&gt;Alpaca
   38810     &lt;!-- ... --&gt;
   38811    &lt;/select&gt;
   38812   &lt;/label&gt;
   38813  &lt;/datalist&gt;
   38814 &lt;/p&gt;
   38815 </pre>
   38816 
   38817    <p>The fallback content will only be shown in UAs that don't
   38818    support <code><a href=#the-datalist-element>datalist</a></code>. The options, on the other hand, will
   38819    be detected by all UAs, even though they are not direct children of
   38820    the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
   38821 
   38822    <p>Note that if an <code><a href=#the-option-element>option</a></code> element used in a
   38823    <code><a href=#the-datalist-element>datalist</a></code> is <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>, it will be selected
   38824    by default by legacy UAs (because it affects the
   38825    <code><a href=#the-select-element>select</a></code>), but it will not have any effect on the
   38826    <code><a href=#the-input-element>input</a></code> element in UAs that support
   38827    <code><a href=#the-datalist-element>datalist</a></code>.</p>
   38828 
   38829   </div>
   38830 
   38831 
   38832 
   38833   <h6 id=the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
   38834 
   38835   <p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
   38836   attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
   38837   or not the use can edit the form control. <span class=impl>When
   38838   specified, the element is <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>.</span></p>
   38839 
   38840   <div class=impl>
   38841 
   38842   <p><strong>Constraint validation</strong>: If the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute is specified
   38843   on an <code><a href=#the-input-element>input</a></code> element, the element is <a href=#barred-from-constraint-validation>barred from
   38844   constraint validation</a>.</p>
   38845 
   38846   </div>
   38847 
   38848   <div class=example>
   38849 
   38850    <p>In the following example, the existing product identifiers
   38851    cannot be modified, but they are still displayed as part of the
   38852    form, for consistency with the row representing a new product
   38853    (where the identifier is not yet filled in).</p>
   38854 
   38855    <pre>&lt;form action="products.cgi" method=post enctype="multipart/form-data"&gt;
   38856  &lt;table&gt;
   38857   &lt;tr&gt; &lt;th&gt; Product ID &lt;th&gt; Product name &lt;th&gt; Price &lt;th&gt; Action
   38858   &lt;tr&gt;
   38859    &lt;td&gt; &lt;input readonly name="1.pid" value="H412"&gt;
   38860    &lt;td&gt; &lt;input required name="1.pname" value="Floor lamp Ulke"&gt;
   38861    &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="1.pprice" value="49.99"&gt;
   38862    &lt;td&gt; &lt;button formnovalidate name="action" value="delete:1"&gt;Delete&lt;/button&gt;
   38863   &lt;tr&gt;
   38864    &lt;td&gt; &lt;input readonly name="2.pid" value="FG28"&gt;
   38865    &lt;td&gt; &lt;input required name="2.pname" value="Table lamp Ulke"&gt;
   38866    &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="2.pprice" value="24.99"&gt;
   38867    &lt;td&gt; &lt;button formnovalidate name="action" value="delete:2"&gt;Delete&lt;/button&gt;
   38868   &lt;tr&gt;
   38869    &lt;td&gt; &lt;input required name="3.pid" value="" pattern="[A-Z0-9]+"&gt;
   38870    &lt;td&gt; &lt;input required name="3.pname" value=""&gt;
   38871    &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="3.pprice" value=""&gt;
   38872    &lt;td&gt; &lt;button formnovalidate name="action" value="delete:3"&gt;Delete&lt;/button&gt;
   38873  &lt;/table&gt;
   38874  &lt;p&gt; &lt;button formnovalidate name="action" value="add"&gt;Add&lt;/button&gt; &lt;/p&gt;
   38875  &lt;p&gt; &lt;button name="action" value="update"&gt;Save&lt;/button&gt; &lt;/p&gt;
   38876 &lt;/form&gt;</pre>
   38877 
   38878   </div>
   38879 
   38880 
   38881 
   38882   <h6 id=the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
   38883 
   38884   <p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
   38885   attribute gives the number of characters that, in a visual
   38886   rendering, the user agent is to allow the user to see while editing
   38887   the element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   38888 
   38889   <p>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if
   38890   specified, must have a value that is a <a href=#valid-non-negative-integer>valid non-negative
   38891   integer</a> greater than zero.</p>
   38892 
   38893   <div class=impl>
   38894 
   38895   <p>If the attribute is present, then its value must be parsed using
   38896   the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>, and if the
   38897   result is a number greater than zero, then the user agent should
   38898   ensure that at least that many characters are visible.</p>
   38899 
   38900   <p>The <code title=dom-input-size><a href=#dom-input-size>size</a></code> IDL attribute is
   38901   <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to only non-negative numbers greater than
   38902   zero</a>.</p>
   38903 
   38904   </div>
   38905 
   38906 
   38907 
   38908   <h6 id=the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
   38909 
   38910   <p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
   38911   attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
   38912   element is <dfn id=concept-input-required title=concept-input-required><i>required</i></dfn>.</p>
   38913 
   38914   <div class=impl>
   38915 
   38916   <p><strong>Constraint validation</strong>: If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i>, and its <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute applies and is in
   38917   the mode <a href=#dom-input-value-value title=dom-input-value-value>value</a>, and the
   38918   element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, and the
   38919   element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty
   38920   string, then the element is <a href=#suffering-from-being-missing>suffering from being
   38921   missing</a>.</p>
   38922 
   38923   </div>
   38924 
   38925   <div class=example>
   38926 
   38927    <p>The following form has two required fields, one for an e-mail
   38928    address and one for a password. It also has a third field that is
   38929    only considerd valid if the user types the same password in the
   38930    password field and this third field.</p>
   38931 
   38932    <pre>&lt;h1&gt;Create new account&lt;/h1&gt;
   38933 &lt;form action="/newaccount" method=post&gt;
   38934  &lt;p&gt;
   38935   &lt;label for="username"&gt;E-mail address:&lt;/label&gt;
   38936   &lt;input id="username" type=email required name=un&gt;
   38937  &lt;p&gt;
   38938   &lt;label for="password1"&gt;Password:&lt;/label&gt;
   38939   &lt;input id="password1" type=password required name=up&gt;
   38940  &lt;p&gt;
   38941   &lt;label for="password2"&gt;Confirm password:&lt;/label&gt;
   38942   &lt;input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')"&gt;
   38943  &lt;p&gt;
   38944   &lt;input type=submit value="Create account"&gt;
   38945 &lt;/form&gt;</pre>
   38946 
   38947   </div>
   38948 
   38949 
   38950   <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
   38951 
   38952   <p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
   38953   attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
   38954   the user is to be allowed to specify more than one value.</p>
   38955 
   38956   <div class=example>
   38957 
   38958    <p>The following extract shows how an e-mail client's "Cc" field
   38959    could accept multiple e-mail addresses.</p>
   38960 
   38961    <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc&gt;&lt;/label&gt;</pre>
   38962 
   38963    <p>If the user had, amongst many friends in his user contacts
   38964    database, two friends "Arthur Dent" (with address
   38965    "art (a] example.net") and "Adam Josh" (with address
   38966    "adamjosh (a] example.net"), then, after the user has typed "a", the
   38967    user agent might suggest these two e-mail addresses to the
   38968    user.</p>
   38969 
   38970    <p><img alt="" src=images/sample-email-1.png></p>
   38971 
   38972    <p>The page could also link in the user's contacts database from the site:</p>
   38973 
   38974    <pre>&lt;label&gt;Cc: &lt;input type=email multiple name=cc list=contacts&gt;&lt;/label&gt;
   38975 ...
   38976 &lt;datalist id="contacts"&gt;
   38977  &lt;option value="hedral (a] damowmow.com"&gt;
   38978  &lt;option value="pillar (a] example.com"&gt;
   38979  &lt;option value="astrophy (a] cute.example"&gt;
   38980  &lt;option value="astronomy (a] science.example.org"&gt;
   38981 &lt;/datalist&gt;</pre>
   38982 
   38983    <p>Suppose the user had entered "bob (a] example.net" into this text
   38984    field, and then started typing a second e-mail address starting
   38985    with "a". The user agent might show both the two friends mentioned
   38986    earlier, as well as the "astrophy" and "astronomy" values given in
   38987    the <code><a href=#the-datalist-element>datalist</a></code> element.</p>
   38988 
   38989    <p><img alt="" src=images/sample-email-2.png></p>
   38990 
   38991   </div>
   38992 
   38993   <div class=example>
   38994 
   38995    <p>The following extract shows how an e-mail client's "Attachments"
   38996    field could accept multiple files for upload.</p>
   38997 
   38998    <pre>&lt;label&gt;Attachments: &lt;input type=file multiple name=att&gt;&lt;/label&gt;</pre>
   38999 
   39000   </div>
   39001 
   39002 
   39003   <h6 id=the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
   39004 
   39005   <p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
   39006   attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
   39007   controlled by the <code><a href=#the-input-element>input</a></code> element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value
   39008   flag</a></span>.</p>
   39009 
   39010   <p>If the <code><a href=#the-input-element>input</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed
   39011   value length</a>, then the <a href=#code-point-length>code-point length</a> of the
   39012   value of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   39013   attribute must be equal to or less than the element's <a href=#maximum-allowed-value-length>maximum
   39014   allowed value length</a>.</p>
   39015 
   39016   <div class=example>
   39017 
   39018    <p>The following extract shows how a messaging client's text entry
   39019    could be arbitrarily restricted to a fixed number of characters,
   39020    thus forcing any conversion through this medium to be terse and
   39021    discouraging intelligent discourse.</p>
   39022 
   39023    <pre>What are you doing? &lt;input name=status maxlength=140&gt;</pre>
   39024 
   39025   </div>
   39026 
   39027 
   39028 
   39029   <h6 id=the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
   39030 
   39031   <p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
   39032   attribute specifies a regular expression against which the control's
   39033   <a href=#concept-fe-value title=concept-fe-value>value</a> is to be checked.</p>
   39034 
   39035   <p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href=#refsECMA262>[ECMA262]</a></p>
   39036 
   39037   <div class=impl>
   39038 
   39039   <p><strong>Constraint validation</strong>: If the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is not the empty string, and
   39040   the element's <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
   39041   attribute is specified and the attribute's value, when compiled as a
   39042   JavaScript regular expression with the <code title="">global</code>,
   39043   <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled</em> (see ECMA262
   39044   Edition 5, sections 15.10.7.2 through 15.10.7.4), compiles
   39045   successfully but the resulting regular expression does not match the
   39046   entirety of the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, then the element is
   39047   <a href=#suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>. <a href=#refsECMA262>[ECMA262]</a></p>
   39048 
   39049   <p class=note>This implies that the regular expression language
   39050   used for this attribute is the same as that used in JavaScript,
   39051   except that the <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>
   39052   attribute must match the entire value, not just any subset (somewhat
   39053   as if it implied a <code title="">^(?:</code> at the start of the
   39054   pattern and a <code title="">)$</code> at the end).</p>
   39055 
   39056   </div>
   39057 
   39058   <p>When an <code><a href=#the-input-element>input</a></code> element has a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute specified,
   39059   authors should include a <code title=attr-title><a href=#the-title-attribute>title</a></code>
   39060   attribute to give a description of the pattern. User agents may use
   39061   the contents of this attribute, if it is present, when informing the
   39062   user that the pattern is not matched, or at any other suitable time,
   39063   such as in a tooltip or read out by assistive technology when the
   39064   control gains focus.</p>
   39065 
   39066   <div class=example>
   39067    <p>For example, the following snippet:</p>
   39068    <pre>&lt;label&gt; Part number:
   39069  &lt;input pattern="[0-9][A-Z]{3}" name="part"
   39070         title="A part number is a digit followed by three uppercase letters."/&gt;
   39071 &lt;/label&gt;</pre>
   39072    <p>...could cause the UA to display an alert such as:</p>
   39073    <pre><samp>A part number is a digit followed by three uppercase letters.
   39074 You cannot complete this form until the field is correct.</samp></pre>
   39075   </div>
   39076 
   39077   <p>When a control has a <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, if used, must describe
   39078   the pattern.  Additional information could also be included, so long
   39079   as it assists the user in filling in the control. Otherwise,
   39080   assistive technology would be impaired.</p>
   39081 
   39082   <p class=example>For instance, if the title attribute contained
   39083   the caption of the control, assistive technology could end up saying
   39084   something like <samp>The text you have entered does not match the
   39085   required pattern. Birthday</samp>, which is not useful.</p>
   39086 
   39087   <p>UAs may still show the <code><a href=#the-title-element-0>title</a></code> in non-error situations
   39088   (for example, as a tooltip when hovering over the control), so
   39089   authors should be careful not to word <code><a href=#the-title-element-0>title</a></code>s as if an
   39090   error has necessarily occurred.</p>
   39091 
   39092 
   39093 
   39094   <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
   39095 
   39096   <p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
   39097   the allowed range of values for the element.</p>
   39098 
   39099   <div class=impl>
   39100 
   39101   <p>Their syntax is defined by the section that defines the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state.</p>
   39102 
   39103   <p>If the element has a <code title=attr-input-min><a href=#attr-input-min>min</a></code>
   39104   attribute, and the result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39105   string to a number</a> to the value of the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute is a number, then that
   39106   number is the element's <dfn id=concept-input-min title=concept-input-min>minimum</dfn>; otherwise, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   39107   defines a <dfn id=concept-input-min-default title=concept-input-min-default>default
   39108   minimum</dfn>, then that is the <a href=#concept-input-min title=concept-input-min>minimum</a>; otherwise, the element has
   39109   no <a href=#concept-input-min title=concept-input-min>minimum</a>.</p>
   39110 
   39111   <p><strong>Constraint validation</strong>: When the element has a
   39112   <a href=#attr-input-min title=attr-input-min>minimum</a>, and the result of
   39113   applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39114   string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and the number
   39115   obtained from that algorithm is less than the <a href=#attr-input-min title=attr-input-min>minimum</a>, the element is
   39116   <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p>
   39117 
   39118   <p>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute also
   39119   defines the <a href=#concept-input-min-zero title=concept-input-min-zero>step
   39120   base</a>.</p>
   39121 
   39122   <p>If the element has a <code title=attr-input-max><a href=#attr-input-max>max</a></code>
   39123   attribute, and the result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39124   string to a number</a> to the value of the <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute is a number, then that
   39125   number is the element's <dfn id=concept-input-max title=concept-input-max>maximum</dfn>; otherwise, if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   39126   defines a <dfn id=concept-input-max-default title=concept-input-max-default>default
   39127   maximum</dfn>, then that is the <a href=#concept-input-max title=concept-input-max>maximum</a>; otherwise, the element has
   39128   no <a href=#concept-input-max title=concept-input-max>maximum</a>.</p>
   39129 
   39130   <p><strong>Constraint validation</strong>: When the element has a
   39131   <a href=#attr-input-max title=attr-input-max>maximum</a>, and the result of
   39132   applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39133   string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and the number
   39134   obtained from that algorithm is more than the <a href=#attr-input-max title=attr-input-max>maximum</a>, the element is
   39135   <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p>
   39136 
   39137   </div>
   39138 
   39139   <p>The <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute's value
   39140   (the <a href=#concept-input-max title=concept-input-max>maximum</a>) must not be
   39141   less than the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute's
   39142   value (its <a href=#concept-input-min title=concept-input-min>minimum</a>).</p>
   39143 
   39144   <div class=impl>
   39145 
   39146   <p class=note>If an element has a <a href=#attr-input-max title=attr-input-max>maximum</a> that is less than its <a href=#attr-input-min title=attr-input-min>minimum</a>, then so long as the element
   39147   has a <a href=#concept-fe-value title=concept-fe-value>value</a>, it will either be
   39148   <a href=#suffering-from-an-underflow>suffering from an underflow</a> or <a href=#suffering-from-an-overflow>suffering from an
   39149   overflow</a>.</p>
   39150 
   39151   </div>
   39152 
   39153   <div class=example>
   39154 
   39155    <p>The following date control limits input to dates that are before
   39156    the 1980s:</p>
   39157 
   39158    <pre>&lt;input name=bday type=date max="1979-12-31"&gt;</pre>
   39159 
   39160   </div>
   39161 
   39162   <div class=example>
   39163 
   39164    <p>The following number control limits input to whole numbers
   39165    greater than zero:</p>
   39166 
   39167    <pre>&lt;input name=quantity required type=number min=1 value=1&gt;</pre>
   39168 
   39169   </div>
   39170 
   39171 
   39172   <h6 id=the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
   39173 
   39174   <p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
   39175   attribute indicates the granularity that is expected (and required)
   39176   of the <a href=#concept-fe-value title=concept-fe-value>value</a>, by limiting the
   39177   allowed values. <span class=impl>The section that defines the
   39178   <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   39179   also defines the <dfn id=concept-input-step-default title=concept-input-step-default>default
   39180   step</dfn>, the <dfn id=concept-input-step-scale title=concept-input-step-scale>step scale
   39181   factor</dfn>, and in some cases the <dfn id=concept-input-step-default-base title=concept-input-step-default-base>default step base</dfn>,
   39182   which are used in processing the attribute as described
   39183   below.</span></p>
   39184 
   39185   <p>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute, if
   39186   specified, must either have a value that is a <a href=#valid-floating-point-number>valid floating
   39187   point number</a> that <a href=#rules-for-parsing-floating-point-number-values title="rules for parsing floating
   39188   point number values">parses</a> to a number that is greater than
   39189   zero, or must have a value that is an <a href=#ascii-case-insensitive>ASCII
   39190   case-insensitive</a> match for the string "<code title="">any</code>".</p>
   39191 
   39192   <div class=impl>
   39193 
   39194   <p>The attribute provides the <dfn id=concept-input-step title=concept-input-step>allowed value step</dfn> for the element,
   39195   as follows:</p>
   39196 
   39197   <ol><li>If the attribute is absent, then the <a href=#concept-input-step title=concept-input-step>allowed value step</a> is the <a href=#concept-input-step-default title=concept-input-step-default>default step</a> multiplied
   39198    by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale
   39199    factor</a>.</li>
   39200 
   39201    <li>Otherwise, if the attribute's value is an <a href=#ascii-case-insensitive>ASCII
   39202    case-insensitive</a> match for the string "<code title="">any</code>", then there is no <a href=#concept-input-step title=concept-input-step>allowed value step</a>.</li>
   39203 
   39204    <li>Otherwise, if the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number
   39205    values</a>, when they are applied to the attribute's value,
   39206    return an error, zero, or a number less than zero, then the <a href=#concept-input-step title=concept-input-step>allowed value step</a> is the <a href=#concept-input-step-default title=concept-input-step-default>default step</a> multiplied
   39207    by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale
   39208    factor</a>.</li>
   39209 
   39210    <li>Otherwise, the <a href=#concept-input-step title=concept-input-step>allowed value
   39211    step</a> is the number returned by the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing
   39212    floating point number values</a> when they are applied to the
   39213    attribute's value, multiplied by the <a href=#concept-input-step-scale title=concept-input-step-scale>step scale factor</a>.</li>
   39214 
   39215   </ol><p>The <dfn id=concept-input-min-zero title=concept-input-min-zero>step base</dfn> is the
   39216   result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39217   string to a number</a> to the value of the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute, unless the element does
   39218   not have a <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute
   39219   specified or the result of applying that algorithm is an error, in
   39220   which case the <a href=#concept-input-min-zero title=concept-input-min-zero>step base</a>
   39221   is the <a href=#concept-input-step-default-base title=concept-input-step-default-base>default step
   39222   base</a>, if one is defined, or zero, if not.</p>
   39223 
   39224   <p><strong>Constraint validation</strong>: When the element has an
   39225   <a href=#concept-input-step title=concept-input-step>allowed value step</a>, and the
   39226   result of applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39227   string to a number</a> to the string given by the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is a number, and that
   39228   number subtracted from the <a href=#concept-input-min-zero title=concept-input-min-zero>step
   39229   base</a> is not an integral multiple of the <a href=#concept-input-step title=concept-input-step>allowed value step</a>, the element is
   39230   <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p>
   39231 
   39232   </div>
   39233 
   39234   <div class=example>
   39235 
   39236    <p>The following range control only accepts values in the range
   39237    0..1, and allows 256 steps in that range:</p>
   39238 
   39239    <pre>&lt;input name=opacity type=range min=0 max=1 step=0.00392156863&gt;</pre>
   39240 
   39241   </div>
   39242 
   39243   <div class=example>
   39244 
   39245    <p>The following control allows any time in the day to be selected,
   39246    with any accuracy (e.g. thousandth-of-a-second accuracy or
   39247    more):</p>
   39248 
   39249    <pre>&lt;input name=favtime type=time step=any&gt;</pre>
   39250 
   39251    <p>Normally, time controls are limited to an accuracy of one
   39252    minute.</p>
   39253 
   39254   </div>
   39255 
   39256 
   39257 
   39258 
   39259   <h6 id=the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
   39260 
   39261   <!-- similar text in the <textarea> section -->
   39262 
   39263   <p>The <dfn id=attr-input-placeholder title=attr-input-placeholder><code>placeholder</code></dfn>
   39264   attribute represents a <em>short</em> hint (a word or short phrase)
   39265   intended to aid the user with data entry. A hint could be a sample
   39266   value or a brief description of the expected format. The attribute,
   39267   if specified, must have a value that contains no U+000A LINE FEED
   39268   (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>
   39269 
   39270   <p class=note>For a longer hint or other advisory text, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is more appropriate.</p>
   39271 
   39272   <p>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
   39273   attribute should not be used as an alternative to a
   39274   <code><a href=#the-label-element>label</a></code>.</p>
   39275 
   39276   <div class=impl>
   39277 
   39278   <p>User agents should present this hint to the user, after having
   39279   <a href=#strip-line-breaks title="strip line breaks">stripped line breaks</a> from it,
   39280   when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
   39281   the empty string and the control is not focused (e.g. by displaying
   39282   it inside a blank unfocused control).</p>
   39283 
   39284   </div>
   39285 
   39286   <div class=example>
   39287 
   39288    <p>Here is an example of a mail configuration user interface that
   39289    uses the <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>
   39290    attribute:</p>
   39291 
   39292    <pre>&lt;fieldset&gt;
   39293  &lt;legend&gt;Mail Account&lt;/legend&gt;
   39294  &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
   39295  &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="john (a] example.net"&gt;&lt;/label&gt;&lt;/p&gt;
   39296  &lt;p&gt;&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;&lt;/p&gt;
   39297  &lt;p&gt;&lt;label&gt;Description: &lt;input type="text" name="desc" placeholder="My Email Account"&gt;&lt;/label&gt;&lt;/p&gt;
   39298 &lt;/fieldset&gt;</pre>
   39299 
   39300   </div>
   39301 
   39302 
   39303 
   39304   <h5 id=common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
   39305 
   39306   <dl class=domintro><dt><var title="">input</var> . <code title=dom-input-value><a href=#dom-input-value>value</a></code> [ = <var title="">value</var> ]</dt>
   39307 
   39308    <dd>
   39309 
   39310     <p>Returns the current <a href=#concept-fe-value title=concept-fe-value>value</a>
   39311     of the form control.</p>
   39312 
   39313     <p>Can be set, to change the value.</p>
   39314 
   39315     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if it is
   39316     set to any value other than the empty string when the control is a
   39317     file upload control.</p>
   39318 
   39319    </dd>
   39320 
   39321    <dt><var title="">input</var> . <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code> [ = <var title="">value</var> ]</dt>
   39322 
   39323    <dd>
   39324 
   39325     <p>Returns the current <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the form
   39326     control.</p>
   39327 
   39328     <p>Can be set, to change the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a>.</p>
   39329 
   39330    </dd>
   39331 
   39332    <dt><var title="">input</var> . <code title=dom-input-files><a href=#dom-input-files>files</a></code></dt>
   39333 
   39334    <dd>
   39335 
   39336     <p>Returns a <code>FileList</code> object listing the <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> of
   39337     the form control.</p>
   39338 
   39339     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
   39340     control isn't a file control.</p>
   39341 
   39342    </dd>
   39343 
   39344    <dt><var title="">input</var> . <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> [ = <var title="">value</var> ]</dt>
   39345 
   39346    <dd>
   39347 
   39348     <p>Returns a <code>Date</code> object representing the form
   39349     control's <a href=#concept-fe-value title=concept-fe-value>value</a>, if
   39350     applicable; otherwise, returns null.</p>
   39351 
   39352     <p>Can be set, to change the value.</p>
   39353 
   39354     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
   39355     control isn't date- or time-based.</p>
   39356 
   39357    </dd>
   39358 
   39359    <dt><var title="">input</var> . <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>
   39360 
   39361    <dd>
   39362 
   39363     <p>Returns a number representing the form control's <a href=#concept-fe-value title=concept-fe-value>value</a>, if applicable; otherwise,
   39364     returns null.</p>
   39365 
   39366     <p>Can be set, to change the value.</p>
   39367 
   39368     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the
   39369     control is neither date- or time-based nor numeric.</p>
   39370 
   39371    </dd>
   39372 
   39373    <dt><var title="">input</var> . <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp</a></code>( [ <var title="">n</var> ] )</dt>
   39374    <dt><var title="">input</var> . <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown</a></code>( [ <var title="">n</var> ] )</dt>
   39375 
   39376    <dd>
   39377 
   39378     <p>Changes the form control's <a href=#concept-fe-value title=concept-fe-value>value</a> by the value given in the
   39379     <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute, multiplied by
   39380     <var title="">n</var>. The default is 1.</p>
   39381 
   39382     <p>Throws <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if the control
   39383     is neither date- or time-based nor numeric, if the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute's value is "<code title="">any</code>", if the current <a href=#concept-fe-value title=concept-fe-value>value</a> could not be parsed, or if
   39384     stepping in the given direction by the given amount would take the
   39385     value out of range.</p>
   39386 
   39387    </dd>
   39388 
   39389    <dt><var title="">input</var> . <code title=dom-input-list><a href=#dom-input-list>list</a></code></dt>
   39390 
   39391    <dd>
   39392 
   39393     <p>Returns the <code><a href=#the-datalist-element>datalist</a></code> element indicated by the
   39394     <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute.</p>
   39395 
   39396    </dd>
   39397 
   39398    <dt><var title="">input</var> . <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code></dt>
   39399 
   39400    <dd>
   39401 
   39402     <p>Returns the <code><a href=#the-option-element>option</a></code> element from the
   39403     <code><a href=#the-datalist-element>datalist</a></code> element indicated by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute that matches the
   39404     form control's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   39405 
   39406    </dd>
   39407 
   39408   </dl><div class=impl>
   39409 
   39410   <p>The <dfn id=dom-input-value title=dom-input-value><code>value</code></dfn> IDL
   39411   attribute allows scripts to manipulate the <a href=#concept-fe-value title=concept-fe-value>value</a> of an <code><a href=#the-input-element>input</a></code>
   39412   element. The attribute is in one of the following modes, which
   39413   define its behavior:</p>
   39414 
   39415   <dl><dt><dfn id=dom-input-value-value title=dom-input-value-value>value</dfn>
   39416 
   39417    <dd>On getting, it must return the current <a href=#concept-fe-value title=concept-fe-value>value</a> of the element. On setting,
   39418    it must set the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to the new value, set the
   39419    element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value
   39420    flag</a> to true, and then invoke the <a href=#value-sanitization-algorithm>value sanitization
   39421    algorithm</a>, if the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state
   39422    defines one.</dd>
   39423 
   39424    <dt><dfn id=dom-input-value-default title=dom-input-value-default>default</dfn>
   39425 
   39426    <dd>On getting, if the element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, it must return
   39427    that attribute's value; otherwise, it must return the empty
   39428    string. On setting, it must set the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute to the new
   39429    value.</dd>
   39430 
   39431    <dt><dfn id=dom-input-value-default-on title=dom-input-value-default-on>default/on</dfn>
   39432 
   39433    <dd>On getting, if the element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, it must return
   39434    that attribute's value; otherwise, it must return the string "<code title="">on</code>". On setting, it must set the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute to the new
   39435    value.</dd>
   39436 
   39437    <dt><dfn id=dom-input-value-filename title=dom-input-value-filename>filename</dfn>
   39438 
   39439    <dd>On getting, it must return the string "<code title="">C:\fakepath\</code>" followed by the filename of the first
   39440    file in the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, if
   39441    any, or the empty string if the list is empty. On setting, if the
   39442    new value is the empty string, it must empty the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>;
   39443    otherwise, it must throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   39444    exception.</dd>
   39445 
   39446   </dl><hr><p>The <dfn id=dom-input-checked title=dom-input-checked><code>checked</code></dfn> IDL
   39447   attribute allows scripts to manipulate the <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of an
   39448   <code><a href=#the-input-element>input</a></code> element. On getting, it must return the current
   39449   <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> of the element;
   39450   and on setting, it must set the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to the new value and
   39451   set the element's <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   39452   flag</a> to true.</p>
   39453 
   39454   <hr><p>The <dfn id=dom-input-files title=dom-input-files><code>files</code></dfn> IDL
   39455   attribute allows scripts to access the element's <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>. On
   39456   getting, if the IDL attribute applies, it must return a
   39457   <code>FileList</code> object that represents the current <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>. The
   39458   same object must be returned until the list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
   39459   changes. If the IDL attribute does not apply, then it must instead
   39460   throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. <a href=#refsFILEAPI>[FILEAPI]</a></p>
   39461 
   39462   <hr><p>The <dfn id=dom-input-valueasdate title=dom-input-valueAsDate><code>valueAsDate</code></dfn> IDL
   39463   attribute represents the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element, interpreted
   39464   as a date.</p>
   39465 
   39466   <p>On getting, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute does not
   39467   apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   39468   return null. Otherwise, run the <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   39469   string to a <code>Date</code> object</a> defined for that state;
   39470   if the algorithm returned a <code>Date</code> object, then return
   39471   it, otherwise, return null.</p>
   39472 
   39473   <p>On setting, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute does not
   39474   apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   39475   throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception; otherwise, if
   39476   the new value is null, then set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to the empty
   39477   string; otherwise, run the <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   39478   <code>Date</code> object to a string</a>, as defined for that
   39479   state, on the new value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element to resulting
   39480   string.</p>
   39481 
   39482   <hr><p>The <dfn id=dom-input-valueasnumber title=dom-input-valueAsNumber><code>valueAsNumber</code></dfn> IDL
   39483   attribute represents the <a href=#concept-fe-value title=concept-fe-value>value</a>
   39484   of the element, interpreted as a number.</p>
   39485 
   39486   <p>On getting, if the <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute does
   39487   not apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   39488   return a Not-a-Number (NaN) value. Otherwise, if the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAs<em>Date</em></a></code>
   39489   attribute applies, run the <a href=#concept-input-value-string-date title=concept-input-value-string-date>algorithm to convert a
   39490   string to a <code>Date</code> object</a> defined for that state;
   39491   if the algorithm returned a <code>Date</code> object, then return
   39492   the <i>time value</i> of the object (the number of milliseconds from
   39493   midnight UTC the morning of 1970-01-01 to the time represented by
   39494   the <code>Date</code> object), otherwise, return a Not-a-Number
   39495   (NaN) value. Otherwise, run the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39496   string to a number</a> defined for that state; if the algorithm
   39497   returned a number, then return it, otherwise, return a Not-a-Number
   39498   (NaN) value.</p>
   39499 
   39500   <p>On setting, if the <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute does
   39501   not apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   39502   throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. Otherwise, if
   39503   the <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAs<em>Date</em></a></code>
   39504   attribute applies, run the <a href=#concept-input-value-date-string title=concept-input-value-date-string>algorithm to convert a
   39505   <code>Date</code> object to a string</a> defined for that state,
   39506   passing it a <code>Date</code> object whose <i>time value</i> is the
   39507   new value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a>
   39508   of the element to resulting string. Otherwise, run the <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   39509   number to a string</a>, as defined for that state, on the new
   39510   value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a> of
   39511   the element to resulting string.</p>
   39512 
   39513   <hr><p>The <dfn id=dom-input-stepdown title=dom-input-stepDown><code>stepDown(<var title="">n</var>)</code></dfn> and <dfn id=dom-input-stepup title=dom-input-stepUp><code>stepUp(<var title="">n</var>)</code></dfn> methods, when invoked, must run the
   39514   following algorithm:</p>
   39515 
   39516   <ol><li><p>If the <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
   39517    <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods do not
   39518    apply, as defined for the <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, then
   39519    throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort these
   39520    steps.</li>
   39521 
   39522    <li><p>If the element has no <a href=#concept-input-step title=concept-input-step>allowed value step</a>, then throw an
   39523    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort these
   39524    steps.</li>
   39525 
   39526    <li><p>If applying the <a href=#concept-input-value-string-number title=concept-input-value-string-number>algorithm to convert a
   39527    string to a number</a> to the string given by the element's
   39528    <a href=#concept-fe-value title=concept-fe-value>value</a> results in an error,
   39529    then throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception, and abort
   39530    these steps; otherwise, let <var title="">value</var> be the result
   39531    of that algorithm.</li>
   39532 
   39533    <li><p>Let <var title="">n</var> be the argument, or 1 if the
   39534    argument was omitted.</li>
   39535 
   39536    <li><p>Let <var title="">delta</var> be the <a href=#concept-input-step title=concept-input-step>allowed value step</a> multiplied by
   39537    <var title="">n</var>.</li>
   39538 
   39539    <li><p>If the method invoked was the <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> method, negate <var title="">delta</var>.</li>
   39540 
   39541    <li><p>Let <var title="">value</var> be the result of adding <var title="">delta</var> to <var title="">value</var>.</li>
   39542    <li><p>If the element has a <a href=#concept-input-min title=concept-input-min>minimum</a>, and the <var title="">value</var> is less than that <a href=#concept-input-min title=concept-input-min>minimum</a>, then throw a
   39543    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</li>
   39544 
   39545    <li><p>If the element has a <a href=#concept-input-max title=concept-input-max>maximum</a>, and the <var title="">value</var> is greater than that <a href=#concept-input-max title=concept-input-max>maximum</a>, then throw a
   39546    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</li>
   39547 
   39548    <li><p>Let <var title="">value as string</var> be the result of
   39549    running the <a href=#concept-input-value-number-string title=concept-input-value-number-string>algorithm to convert a
   39550    number to a string</a>, as defined for the <code><a href=#the-input-element>input</a></code>
   39551    element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute's
   39552    current state, on <var title="">value</var>.</li>
   39553 
   39554    <li><p>Set the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
   39555    element to <var title="">value as string</var>.</li>
   39556 
   39557   </ol><hr><p>The <dfn id=dom-input-list title=dom-input-list><code>list</code></dfn> IDL
   39558   attribute must return the current <a href=#concept-input-list title=concept-input-list>suggestions source element</a>, if
   39559   any, or null otherwise.</p>
   39560 
   39561   <p>The <dfn id=dom-input-selectedoption title=dom-input-selectedOption><code>selectedOption</code></dfn>
   39562   IDL attribute must return the first <code><a href=#the-option-element>option</a></code> element, in
   39563   <a href=#tree-order>tree order</a>, to be a child of the <a href=#concept-input-list title=concept-input-list>suggestions source element</a> and
   39564   whose <a href=#concept-option-value title=concept-option-value>value</a> matches the
   39565   <code><a href=#the-input-element>input</a></code> element's <a href=#concept-fe-value title=concept-fe-value>value</a>, if any. If there is no <a href=#concept-input-list title=concept-input-list>suggestions source element</a>, or if
   39566   it contains no matching <code><a href=#the-option-element>option</a></code> element, then the <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> attribute
   39567   must return null.</p>
   39568 
   39569   </div>
   39570 
   39571 
   39572   <div class=impl>
   39573 
   39574   <h5 id=common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</h5>
   39575 
   39576   <p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
   39577   event applies, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, the user agent must
   39578   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
   39579   bubbles named <code title=event-input>input</code> at the
   39580   <code><a href=#the-input-element>input</a></code> element, then <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
   39581   <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>. User agents
   39582   may wait for a suitable break in the user's interaction before
   39583   queuing the task; for example, a user agent could wait for the user
   39584   to have not hit a key for 100ms, so as to only fire the event when
   39585   the user pauses, instead of continuously for each keystroke.</p>
   39586   <!-- same text is present in the <textarea> section -->
   39587 
   39588   <p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing
   39589   into a text field, pasting a new value into the field, or undoing an
   39590   edit in that field. Some user interactions do not cause changes to
   39591   the value, e.g. hitting the "delete" key in an empty text field, or
   39592   replacing some text in the field with text from the clipboard that
   39593   happens to be exactly the same text.</p>
   39594 
   39595   <p>When the <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event applies,
   39596   if the element does not have an <a href=#activation-behavior>activation behavior</a>
   39597   defined but uses a user interface that involves an explicit commit
   39598   action, then any time the user commits a change to the element's
   39599   <a href=#concept-fe-value title=concept-fe-value>value</a> or list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, the
   39600   user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   39601   event</a> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code>
   39602   element, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   39603   <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</p>
   39604 
   39605   <p class=example>An example of a user interface with a commit
   39606   action would be a <a href=#file-upload-state title=attr-input-type-file>File
   39607   Upload</a> control that consists of a single button that brings
   39608   up a file selection dialog: when the dialog is closed, if that the
   39609   <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>
   39610   changed as a result, then the user has committed a new <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>file selection</a>.</p>
   39611 
   39612   <p class=example>Another example of a user interface with a commit
   39613   action would be a <a href=#date-state title=attr-input-type-date>Date</a>
   39614   control that allows both text-based user input and user selection
   39615   from a drop-down calendar: while text input might not have an
   39616   explicit commit step, selecting a date from the drop down calendar
   39617   and then dismissing the drop down would be a commit action.</p>
   39618 
   39619   <p>When the user agent changes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> on behalf of the user (e.g. as
   39620   part of a form prefilling feature), the user agent must follow these
   39621   steps:</p>
   39622 
   39623   <ol><li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event
   39624    applies, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   39625    event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code>
   39626    element.</li>
   39627 
   39628    <li>If the <code title=event-input-input><a href=#event-input-input>input</a></code> event
   39629    applies, <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
   39630    <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</li>
   39631 
   39632    <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event
   39633    applies, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   39634    event</a> that bubbles named <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code>
   39635    element.</li>
   39636 
   39637    <li>If the <code title=event-input-change><a href=#event-input-change>change</a></code> event
   39638    applies, <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   39639    <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>.</li>
   39640 
   39641   </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
   39642   of the element's <a href=#activation-behavior>activation behavior</a> and as part of the
   39643   <a href=#unfocusing-steps>unfocusing steps</a>.</p>
   39644 
   39645   <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#user-interaction-task-source>user interaction task
   39646   source</a>.</p>
   39647 
   39648   </div>
   39649 
   39650 
   39651 
   39652   <h4 id=the-button-element><span class=secno>4.10.8 </span>The <dfn><code>button</code></dfn> element</h4>
   39653 
   39654   <dl class=element><dt>Categories</dt>
   39655    <dd><a href=#flow-content>Flow content</a>.</dd>
   39656    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   39657    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   39658    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-submit title=category-submit>submittable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   39659    <dt>Contexts in which this element may be used:</dt>
   39660    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   39661    <dt>Content model:</dt>
   39662    <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <a href=#interactive-content>interactive content</a> descendant.</dd>
   39663    <dt>Content attributes:</dt>
   39664    <dd><a href=#global-attributes>Global attributes</a></dd>
   39665    <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   39666    <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   39667    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   39668    <dd><code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code></dd>
   39669    <dd><code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code></dd>
   39670    <dd><code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code></dd>
   39671    <dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
   39672    <dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
   39673    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   39674    <dd><code title=attr-button-type><a href=#attr-button-type>type</a></code></dd>
   39675    <dd><code title=attr-button-value><a href=#attr-button-value>value</a></code></dd>
   39676    <dt>DOM interface:</dt>
   39677    <dd>
   39678 <pre class=idl>interface <dfn id=htmlbuttonelement>HTMLButtonElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   39679            attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
   39680            attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
   39681   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   39682            attribute DOMString <a href=#dom-fs-formaction title=dom-fs-formAction>formAction</a>;
   39683            attribute DOMString <a href=#dom-fs-formenctype title=dom-fs-formEnctype>formEnctype</a>;
   39684            attribute DOMString <a href=#dom-fs-formmethod title=dom-fs-formMethod>formMethod</a>;
   39685            attribute DOMString <a href=#dom-fs-formnovalidate title=dom-fs-formNoValidate>formNoValidate</a>;
   39686            attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
   39687            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   39688            attribute DOMString <a href=#dom-button-type title=dom-button-type>type</a>;
   39689            attribute DOMString <a href=#dom-button-value title=dom-button-value>value</a>;
   39690 
   39691   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   39692   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   39693   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   39694   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   39695   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   39696 
   39697   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   39698 };</pre>
   39699    </dd>
   39700   </dl><p>The <code><a href=#the-button-element>button</a></code> element <a href=#represents>represents</a> a
   39701   button. <span class=impl>If the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
   39702   should allow the user to activate the button.</span></p>
   39703 
   39704   <p>The element is a <a href=#concept-button title=concept-button>button</a>.</p>
   39705 
   39706   <p>The <dfn id=attr-button-type title=attr-button-type><code>type</code></dfn>
   39707   attribute controls the behavior of the button when it is activated.
   39708   It is an <a href=#enumerated-attribute>enumerated attribute</a>. The following table
   39709   lists the keywords and states for the attribute &mdash; the keywords
   39710   in the left column map to the states in the cell in the second
   39711   column on the same row as the keyword.</p>
   39712 
   39713   <table><thead><tr><th> Keyword
   39714      <th> State
   39715      <th> Brief description
   39716    <tbody><tr><td><dfn id=attr-button-type-submit title=attr-button-type-submit><code>submit</code></dfn>
   39717      <td><a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
   39718      <td>Submits the form.
   39719     <tr><td><dfn id=attr-button-type-reset title=attr-button-type-reset><code>reset</code></dfn>
   39720      <td><a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a>
   39721      <td>Resets the form.
   39722     <tr><td><dfn id=attr-button-type-button title=attr-button-type-button><code>button</code></dfn>
   39723      <td><a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a>
   39724      <td>Does nothing.
   39725   </table><p>The <i>missing value default</i> is the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
   39726   state.</p>
   39727 
   39728   <p>If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in
   39729   the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
   39730   state, the element is specifically a <a href=#concept-submit-button title=concept-submit-button>submit button</a>.</p>
   39731 
   39732   <div class=impl>
   39733 
   39734   <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state or
   39735   the <a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a> state,
   39736   the element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   39737 
   39738   <p>If the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, the <a href=#activation-behavior>activation
   39739   behavior</a> of the <code><a href=#the-button-element>button</a></code> element is to run the
   39740   steps defined in the following list for the current state of the
   39741   element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute.</p>
   39742 
   39743   <dl><dt> <dfn id=attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</dfn> </dt>
   39744 
   39745    <dd><p>If the element has a <a href=#form-owner>form owner</a>, the element
   39746    must <a href=#concept-form-submit title=concept-form-submit>submit</a> the <a href=#form-owner>form
   39747    owner</a> from the <code><a href=#the-button-element>button</a></code> element.</dd>
   39748 
   39749    <dt> <dfn id=attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</dfn> </dt>
   39750 
   39751    <dd><p>If the element has a <a href=#form-owner>form owner</a>, the element
   39752    must <a href=#concept-form-reset title=concept-form-reset>reset</a> the <a href=#form-owner>form
   39753    owner</a>.</dd>
   39754 
   39755    <dt> <dfn id=attr-button-type-button-state title=attr-button-type-button-state>Button</dfn>
   39756 
   39757    <dd><p>Do nothing.</dd>
   39758 
   39759   </dl></div>
   39760 
   39761   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   39762   explicitly associate the <code><a href=#the-button-element>button</a></code> element with its
   39763   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   39764   attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
   39765   the control non-interactive and to prevent its value from being
   39766   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   39767   attribute controls focus. The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attributes are
   39768   <a href=#attributes-for-form-submission>attributes for form submission</a>.</p>
   39769 
   39770   <p class=note>The <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute can
   39771   be used to make submit buttons that do not trigger the constraint
   39772   validation.</p>
   39773 
   39774   <p>The <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> must not be specified
   39775   if the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code>
   39776   attribute is not in the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
   39777   state.</p>
   39778 
   39779   <p>The <dfn id=attr-button-value title=attr-button-value><code>value</code></dfn>
   39780   attribute gives the element's value for the purposes of form
   39781   submission. The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the value of the element's
   39782   <code title=attr-button-value><a href=#attr-button-value>value</a></code> attribute, if there is
   39783   one, or the empty string otherwise.</p>
   39784 
   39785   <p class=note>A button (and its value) is only included in the
   39786   form submission if the button itself was used to initiate the form
   39787   submission.</p>
   39788 
   39789   <div class=impl>
   39790 
   39791   <p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> and
   39792   <dfn id=dom-button-type title=dom-button-type><code>type</code></dfn> IDL attributes
   39793   must <a href=#reflect>reflect</a> the respective content attributes of the
   39794   same name.</p>
   39795 
   39796   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   39797   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   39798   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   39799   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   39800   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   39801   element's forms API.</p>
   39802 
   39803   </div>
   39804 
   39805   <div class=example>
   39806 
   39807    <p>The following button is labeled "Show hint" and pops up a dialog
   39808    box when activated:</p>
   39809 
   39810    <pre>&lt;button type=button
   39811         onclick="alert('This 15-20 minute piece was composed by George Gershwin.')"&gt;
   39812  Show hint
   39813 &lt;/button&gt;</pre>
   39814 
   39815   </div>
   39816 
   39817 
   39818 
   39819 
   39820   <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select</code></dfn> element</h4>
   39821 
   39822   <dl class=element><dt>Categories</dt>
   39823    <dd><a href=#flow-content>Flow content</a>.</dd>
   39824    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   39825    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   39826    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   39827    <dt>Contexts in which this element may be used:</dt>
   39828    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   39829    <dt>Content model:</dt>
   39830    <dd>Zero or more <code><a href=#the-option-element>option</a></code> or <code><a href=#the-optgroup-element>optgroup</a></code> elements.</dd>
   39831    <dt>Content attributes:</dt>
   39832    <dd><a href=#global-attributes>Global attributes</a></dd>
   39833    <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   39834    <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   39835    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   39836    <dd><code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code></dd>
   39837    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   39838    <dd><code title=attr-select-size><a href=#attr-select-size>size</a></code></dd>
   39839    <dt>DOM interface:</dt>
   39840    <dd>
   39841 <pre class=idl>interface <dfn id=htmlselectelement>HTMLSelectElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   39842            attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
   39843            attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
   39844   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   39845            attribute boolean <a href=#dom-select-multiple title=dom-select-multiple>multiple</a>;
   39846            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   39847            attribute unsigned long <a href=#dom-select-size title=dom-select-size>size</a>;
   39848 
   39849   readonly attribute DOMString <a href=#dom-select-type title=dom-select-type>type</a>;
   39850 
   39851   readonly attribute <a href=#htmloptionscollection>HTMLOptionsCollection</a> <a href=#dom-select-options title=dom-select-options>options</a>;
   39852            attribute unsigned long <a href=#dom-select-length title=dom-select-length>length</a>;
   39853   caller getter any <a href=#dom-select-item title=dom-select-item>item</a>(in unsigned long index);
   39854   caller getter any <a href=#dom-select-nameditem title=dom-select-namedItem>namedItem</a>(in DOMString name);
   39855   void <a href=#dom-select-add title=dom-select-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in optional <a href=#htmlelement>HTMLElement</a> before);
   39856   void <a href=#dom-select-add title=dom-select-add>add</a>(in <a href=#htmlelement>HTMLElement</a> element, in long before);
   39857   void <a href=#dom-select-remove title=dom-select-remove>remove</a>(in long index);
   39858 
   39859   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-select-selectedoptions title=dom-select-selectedOptions>selectedOptions</a>;
   39860            attribute long <a href=#dom-select-selectedindex title=dom-select-selectedIndex>selectedIndex</a>;
   39861            attribute DOMString <a href=#dom-select-value title=dom-select-value>value</a>;
   39862 
   39863   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   39864   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   39865   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   39866   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   39867   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   39868 
   39869   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   39870 };</pre>
   39871    </dd>
   39872   </dl><!-- Proposals for v2:
   39873        * <select value=""> as an alternative to <option selected>
   39874          http://developers.slashdot.org/comments.pl?sid=426306&cid=22142072
   39875          <Philip`> http://www.ipiao.com.cn/ does <select size="1" name="to"><script>City_Default="PEK"</script><SCRIPT language=javascript
   39876                    src="/js/flightcity.js"></SCRIPT></select> which is the kind of thing that could be much simpler with <select value="PEK">
   39877        * a way to make the <select> not have a default value at all (ack
   39878          or to have a "placeholer" like value that doesn't count as a value being selected but shows a prompt until a value is selected
   39879        * once we can have no default, a way to require="" a value.
   39880        ack Weston Ruter: http://weston.ruter.net/projects/test-cases/html-select-element/
   39881        q.v. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-November/017583.html
   39882     --><p>The <code><a href=#the-select-element>select</a></code> element represents a control for
   39883   selecting amongst a set of options.</p>
   39884 
   39885   <p>The <dfn id=attr-select-multiple title=attr-select-multiple><code>multiple</code></dfn>
   39886   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If the attribute is
   39887   present, then the <code><a href=#the-select-element>select</a></code> element
   39888   <a href=#represents>represents</a> a control for selecting zero or more options
   39889   from the <a href=#concept-select-option-list title=concept-select-option-list>list of
   39890   options</a>. If the attribute is absent, then the
   39891   <code><a href=#the-select-element>select</a></code> element <a href=#represents>represents</a> a control for
   39892   selecting a single option from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
   39893 
   39894   <p>The <dfn id=concept-select-option-list title=concept-select-option-list>list of options</dfn>
   39895   for a <code><a href=#the-select-element>select</a></code> element consists of all the
   39896   <code><a href=#the-option-element>option</a></code> element children of the <code><a href=#the-select-element>select</a></code>
   39897   element, and all the <code><a href=#the-option-element>option</a></code> element children of all the
   39898   <code><a href=#the-optgroup-element>optgroup</a></code> element children of the <code><a href=#the-select-element>select</a></code>
   39899   element, in <a href=#tree-order>tree order</a>.</p>
   39900 
   39901   <p>The <dfn id=attr-select-size title=attr-select-size><code>size</code></dfn>
   39902   attribute gives the number of options to show to the user. The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if specified, must
   39903   have a value that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>
   39904   greater than zero. If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is present,
   39905   then the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute's
   39906   default value is 4. If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
   39907   then the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute's
   39908   default value is 1.</p>
   39909 
   39910   <div class=impl>
   39911 
   39912   <p>The <dfn id=concept-select-size title=concept-select-size>display size</dfn> of a
   39913   <code><a href=#the-select-element>select</a></code> element is the result of applying the
   39914   <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the value of
   39915   element's <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, if it
   39916   has one and parsing it is successful. If applying those rules to the
   39917   attribute's value is not successful, or if the <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute is absent, the
   39918   element's <a href=#concept-select-size title=concept-select-size>display size</a> is
   39919   the default value of the attribute.</p>
   39920 
   39921   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   39922   attribute is absent, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
   39923   should allow the user to pick an <code><a href=#the-option-element>option</a></code> element in its
   39924   <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that
   39925   is itself not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>. Upon this
   39926   <code><a href=#the-option-element>option</a></code> element being <dfn id=concept-select-pick title=concept-select-pick>picked</dfn> (either through a click, or
   39927   through unfocusing the element after changing its value, or through
   39928   a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or through any
   39929   other mechanism), and before the relevant user interaction event
   39930   <!-- interaction event spec point --> is queued (e.g. before the
   39931   <code title=event-click><a href=#event-click>click</a></code> event), the user agent must
   39932   set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
   39933   picked <code><a href=#the-option-element>option</a></code> element to true and then <a href=#queue-a-task>queue a
   39934   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
   39935   <code title=event-change>change</code> at the <code><a href=#the-select-element>select</a></code>
   39936   element, using the <a href=#user-interaction-task-source>user interaction task source</a> as the
   39937   task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   39938   element's <a href=#form-owner>form owner</a>.</p>
   39939 
   39940   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   39941   attribute is absent, whenever an <code><a href=#the-option-element>option</a></code> element in the
   39942   <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> has its
   39943   <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   39944   true, and whenever an <code><a href=#the-option-element>option</a></code> element with its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true
   39945   is added to the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, the user
   39946   agent must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
   39947   other <code><a href=#the-option-element>option</a></code> element in its <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to
   39948   false.</p>
   39949 
   39950   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   39951   attribute is absent and the element's <a href=#concept-select-size title=concept-select-size>display size</a> is greater than 1,
   39952   then the user agent should also allow the user to request that the
   39953   <code><a href=#the-option-element>option</a></code> whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, if
   39954   any, be unselected. Upon this request being conveyed to the user
   39955   agent, and before the relevant user interaction event <!--
   39956   interaction event spec point --> is queued (e.g. before the <code title=event-click><a href=#event-click>click</a></code> event), the user agent must set the
   39957   <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of
   39958   that <code><a href=#the-option-element>option</a></code> element to false and then <a href=#queue-a-task>queue a
   39959   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named
   39960   <code title=event-change>change</code> at the <code><a href=#the-select-element>select</a></code>
   39961   element, using the <a href=#user-interaction-task-source>user interaction task source</a> as the
   39962   task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   39963   element's <a href=#form-owner>form owner</a>.</p>
   39964 
   39965   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   39966   attribute is absent and the element's <a href=#concept-select-size title=concept-select-size>display size</a> is 1, then whenever
   39967   there are no <code><a href=#the-option-element>option</a></code> elements in the <code><a href=#the-select-element>select</a></code>
   39968   element's <a href=#concept-select-option-list title=concept-select-option-list>list of
   39969   options</a> that have their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
   39970   the user agent must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the first
   39971   <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
   39972   <a href=#tree-order>tree order</a> that is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, if any, to
   39973   true.</p>
   39974 
   39975   <p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   39976   attribute is present, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
   39977   should allow the user to <dfn id=concept-select-toggle title=concept-select-toggle>toggle</dfn> the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
   39978   <code><a href=#the-option-element>option</a></code> elements in its <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that are
   39979   themselves not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>
   39980   (either through a click, or through a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or any other
   39981   mechanism). Upon the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of one or
   39982   more <code><a href=#the-option-element>option</a></code> elements being changed by the user, and
   39983   before the relevant user interaction event <!-- interaction event
   39984   spec point --> is queued (e.g. before a related <code title=event-click><a href=#event-click>click</a></code> event), the user agent must
   39985   <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
   39986   bubbles named <code title=event-change>change</code> at the
   39987   <code><a href=#the-select-element>select</a></code> element, using the <a href=#user-interaction-task-source>user interaction task
   39988   source</a> as the task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
   39989   element's <a href=#form-owner>form owner</a>.</p>
   39990 
   39991   <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   39992   algorithm</a> for <code><a href=#the-select-element>select</a></code> elements is to go through
   39993   all the <code><a href=#the-option-element>option</a></code> elements in the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, and set
   39994   their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a>
   39995   to true if the <code><a href=#the-option-element>option</a></code> element has a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute, and false
   39996   otherwise.</p>
   39997 
   39998   </div>
   39999 
   40000   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   40001   explicitly associate the <code><a href=#the-select-element>select</a></code> element with its
   40002   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   40003   attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
   40004   the control non-interactive and to prevent its value from being
   40005   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   40006   attribute controls focus.</p>
   40007 
   40008   <dl class=domintro><dt><var title="">select</var> . <code title=dom-select-type><a href=#dom-select-type>type</a></code></dt>
   40009 
   40010    <dd>
   40011 
   40012     <p>Returns "<code title="">select-multiple</code>" if the element
   40013     has a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   40014     attribute, and "<code title="">select-one</code>"
   40015     otherwise.</p>
   40016 
   40017    </dd>
   40018 
   40019    <dt><var title="">select</var> . <code title=dom-select-options><a href=#dom-select-options>options</a></code></dt>
   40020 
   40021    <dd>
   40022 
   40023     <p>Returns an <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> of the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
   40024 
   40025    </dd>
   40026 
   40027    <dt><var title="">select</var> . <code title=dom-select-length><a href=#dom-select-length>length</a></code> [ = <var title="">value</var> ]</dt>
   40028    <dd>
   40029     <p>Returns the number of elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
   40030     <p>When set to a smaller number, truncates the number of <code><a href=#the-option-element>option</a></code> elements in the <code><a href=#the-select-element>select</a></code>.</p>
   40031     <p>When set to a greater number, adds new blank <code><a href=#the-option-element>option</a></code> elements to the <code><a href=#the-select-element>select</a></code>.</p>
   40032    </dd>
   40033 
   40034    <dt><var title="">element</var> = <var title="">select</var> . <code title=dom-select-item><a href=#dom-select-item>item</a></code>(<var title="">index</var>)</dt>
   40035    <dt><var title="">select</var>[<var title="">index</var>]</dt>
   40036    <dt><var title="">select</var>(<var title="">index</var>)</dt>
   40037    <dd>
   40038     <p>Returns the item with index <var title="">index</var> from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>. The items are sorted in <a href=#tree-order>tree order</a>.</p>
   40039     <p>Returns null if <var title="">index</var> is out of range.</p>
   40040    </dd>
   40041 
   40042    <dt><var title="">element</var> = <var title="">select</var> . <code title=dom-select-item><a href=#dom-select-item>namedItem</a></code>(<var title="">name</var>)</dt>
   40043    <dt><var title="">select</var>[<var title="">name</var>]</dt>
   40044    <dt><var title="">select</var>(<var title="">name</var>)</dt>
   40045    <dd>
   40046     <p>Returns the item with ID or <code title=attr-option-name><a href=#attr-option-name>name</a></code> <var title="">name</var> from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>.</p>
   40047     <p>If there are multiple matching items, then a <code><a href=#nodelist>NodeList</a></code> object containing all those elements is returned.</p>
   40048     <p>Returns null if no element with that ID could be found.</p>
   40049    </dd>
   40050 
   40051    <dt><var title="">select</var> . <code title=dom-select-add><a href=#dom-select-add>add</a></code>(<var title="">element</var> [, <var title="">before</var> ])</dt>
   40052    <dd>
   40053     <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
   40054     <p>The <var title="">before</var> argument can be a number, in
   40055     which case <var title="">element</var> is inserted before the item
   40056     with that number, or an element from the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, in
   40057     which case <var title="">element</var> is inserted before that
   40058     element.</p>
   40059     <p>If <var title="">before</var> is omitted, null, or a number out
   40060     of range, then <var title="">element</var> will be added at the
   40061     end of the list.</p>
   40062     <p>This method will throw a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code>
   40063     exception if <var title="">element</var> is an ancestor of the
   40064     element into which it is to be inserted. If <var title="">element</var> is not an <code><a href=#the-option-element>option</a></code> or
   40065     <code><a href=#the-optgroup-element>optgroup</a></code> element, then the method does nothing.</p>
   40066    </dd>
   40067 
   40068    <dt><var title="">select</var> . <code title=dom-select-selectedOptions><a href=#dom-select-selectedoptions>selectedOptions</a></code></dt>
   40069 
   40070    <dd>
   40071 
   40072     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that are
   40073     selected.</p>
   40074 
   40075    </dd>
   40076 
   40077    <dt><var title="">select</var> . <code title=dom-select-selectedIndex><a href=#dom-select-selectedindex>selectedIndex</a></code> [ = <var title="">value</var> ]</dt>
   40078 
   40079    <dd>
   40080 
   40081     <p>Returns the index of the first selected item, if any, or
   40082     &minus;1 if there is no selected item.</p>
   40083 
   40084     <p>Can be set, to change the selection.</p>
   40085 
   40086    </dd>
   40087 
   40088    <dt><var title="">select</var> . <code title=dom-select-value><a href=#dom-select-value>value</a></code> [ = <var title="">value</var> ]</dt>
   40089 
   40090    <dd>
   40091 
   40092     <p>Returns the <a href=#concept-fe-value title=concept-fe-value>value</a> of the
   40093     first selected item, if any, or the empty string if there is no
   40094     selected item.</p>
   40095 
   40096     <p>Can be set, to change the selection.</p>
   40097 
   40098    </dd>
   40099 
   40100   </dl><div class=impl>
   40101 
   40102   <p>The <dfn id=dom-select-type title=dom-select-type><code>type</code></dfn> IDL
   40103   attribute, on getting, must return the string "<code title="">select-one</code>" if the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
   40104   and the string "<code title="">select-multiple</code>" if the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is
   40105   present.</p>
   40106 
   40107   <p>The <dfn id=dom-select-options title=dom-select-options><code>options</code></dfn>
   40108   IDL attribute must return an <code><a href=#htmloptionscollection>HTMLOptionsCollection</a></code>
   40109   rooted at the <code><a href=#the-select-element>select</a></code> node, whose filter matches the
   40110   elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of
   40111   options</a>.</p>
   40112 
   40113   <p>The <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection is
   40114   also mirrored on the <code><a href=#htmlselectelement>HTMLSelectElement</a></code> object. The
   40115   <span>indices of the supported indexed properties</span> at any
   40116   instant are the indices supported by the object returned by the
   40117   <code title=dom-select-options><a href=#dom-select-options>options</a></code> attribute at that
   40118   instant. The <span>names of the supported named properties</span> at
   40119   any instant are the names supported by the object returned by the
   40120   <code title=dom-select-options><a href=#dom-select-options>options</a></code> attribute at that
   40121   instant.</p>
   40122 
   40123   <p>The <dfn id=dom-select-length title=dom-select-length><code>length</code></dfn> IDL
   40124   attribute must return the number of nodes <a href=#represented-by-the-collection title="represented
   40125   by the collection">represented</a> by the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection. On setting, it
   40126   must act like the attribute of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection.</p>
   40127 
   40128   <p>The <dfn id=dom-select-item title=dom-select-item><code>item(<var title="">index</var>)</code></dfn> method must return the value
   40129   returned by the method of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection, when invoked
   40130   with the same argument.</p>
   40131 
   40132   <p>The <dfn id=dom-select-nameditem title=dom-select-namedItem><code>namedItem(<var title="">name</var>)</code></dfn> method must return the value
   40133   returned by the method of the same name on the <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection, when invoked
   40134   with the same argument.</p>
   40135 
   40136   <p>Similarly, the <dfn id=dom-select-add title=dom-select-add><code>add()</code></dfn> and <dfn id=dom-select-remove title=dom-select-remove><code>remove()</code></dfn> methods must
   40137   act like their namesake methods on that same <code title=dom-select-options><a href=#dom-select-options>options</a></code> collection.</p>
   40138 
   40139   <p>The <dfn id=dom-select-selectedoptions title=dom-select-selectedOptions><code>selectedOptions</code></dfn>
   40140   IDL attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at
   40141   the <code><a href=#the-select-element>select</a></code> node, whose filter matches the elements in
   40142   the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>
   40143   that have their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   40144   true.</p>
   40145 
   40146   <p>The <dfn id=dom-select-selectedindex title=dom-select-selectedIndex><code>selectedIndex</code></dfn>
   40147   IDL attribute, on getting, must return the <a href=#concept-option-index title=concept-option-index>index</a> of the first
   40148   <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
   40149   <a href=#tree-order>tree order</a> that has its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
   40150   if any. If there isn't one, then it must return &minus;1.</p>
   40151 
   40152   <p>On setting, the <code title=dom-select-selectedIndex><a href=#dom-select-selectedindex>selectedIndex</a></code> attribute must
   40153   set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
   40154   <code><a href=#the-option-element>option</a></code> elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to false,
   40155   and then the <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> whose
   40156   <a href=#concept-option-index title=concept-option-index>index</a> is the given new
   40157   value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   40158   true.</p>
   40159 
   40160   <p>The <dfn id=dom-select-value title=dom-select-value><code>value</code></dfn> IDL
   40161   attribute, on getting, must return the <a href=#concept-option-value title=concept-option-value>value</a> of the first
   40162   <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> in
   40163   <a href=#tree-order>tree order</a> that has its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true,
   40164   if any. If there isn't one, then it must return the empty
   40165   string.</p>
   40166 
   40167   <p>On setting, the <code title=dom-select-value><a href=#dom-select-value>value</a></code>
   40168   attribute must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of all the
   40169   <code><a href=#the-option-element>option</a></code> elements in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> to false,
   40170   and then first the <code><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, in
   40171   <a href=#tree-order>tree order</a>, whose <a href=#concept-option-value title=concept-option-value>value</a> is equal to the given new
   40172   value, if any, must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to
   40173   true.</p>
   40174 
   40175   <p>The <dfn id=dom-select-multiple title=dom-select-multiple><code>multiple</code></dfn>
   40176   and <dfn id=dom-select-size title=dom-select-size><code>size</code></dfn> IDL
   40177   attributes must <a href=#reflect>reflect</a> the respective content
   40178   attributes of the same name. The <code title=dom-select-size><a href=#dom-select-size>size</a></code> IDL attribute <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited to
   40179   only non-negative numbers greater than zero</a>.</p>
   40180 
   40181   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   40182   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   40183   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   40184   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   40185   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   40186   element's forms API.</p>
   40187 
   40188   </div>
   40189 
   40190   <div class=example>
   40191 
   40192    <p>The following example shows how a <code><a href=#the-select-element>select</a></code> element
   40193    can be used to offer the user with a set of options from which the
   40194    user can select a single option. The default option is
   40195    preselected.</p>
   40196 
   40197    <pre>&lt;p&gt;
   40198  &lt;label for="unittype"&gt;Select unit type:&lt;/label&gt;
   40199  &lt;select id="unittype" name="unittype"&gt;
   40200   &lt;option value="1"&gt; Miner &lt;/option&gt;
   40201   &lt;option value="2"&gt; Puffer &lt;/option&gt;
   40202   &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
   40203   &lt;option value="4"&gt; Max &lt;/option&gt;
   40204   &lt;option value="5"&gt; Firebot &lt;/option&gt;
   40205  &lt;/select&gt;
   40206 &lt;/p&gt;</pre>
   40207 
   40208   </div>
   40209 
   40210   <div class=example>
   40211 
   40212    <p>Here, the user is offered a set of options from which he can
   40213    select any number. By default, all five options are selected.</p>
   40214 
   40215    <pre>&lt;p&gt;
   40216  &lt;label for="allowedunits"&gt;Select unit types to enable on this map:&lt;/label&gt;
   40217  &lt;select id="allowedunits" name="allowedunits" multiple&gt;
   40218   &lt;option value="1" selected&gt; Miner &lt;/option&gt;
   40219   &lt;option value="2" selected&gt; Puffer &lt;/option&gt;
   40220   &lt;option value="3" selected&gt; Snipey &lt;/option&gt;
   40221   &lt;option value="4" selected&gt; Max &lt;/option&gt;
   40222   &lt;option value="5" selected&gt; Firebot &lt;/option&gt;
   40223  &lt;/select&gt;
   40224 &lt;/p&gt;</pre>
   40225 
   40226   </div>
   40227 
   40228 
   40229 
   40230   <h4 id=the-datalist-element><span class=secno>4.10.10 </span>The <dfn><code>datalist</code></dfn> element</h4>
   40231 
   40232   <dl class=element><dt>Categories</dt>
   40233    <dd><a href=#flow-content>Flow content</a>.</dd>
   40234    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   40235    <dt>Contexts in which this element may be used:</dt>
   40236    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   40237    <dt>Content model:</dt>
   40238    <dd>Either: <a href=#phrasing-content>phrasing content</a>.</dd>
   40239    <dd>Or: Zero or more <code><a href=#the-option-element>option</a></code> elements.</dd>
   40240    <dt>Content attributes:</dt>
   40241    <dd><a href=#global-attributes>Global attributes</a></dd>
   40242    <dt>DOM interface:</dt>
   40243    <dd>
   40244 <pre class=idl>interface <dfn id=htmldatalistelement>HTMLDataListElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   40245   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-datalist-options title=dom-datalist-options>options</a>;
   40246 };</pre>
   40247    </dd>
   40248   </dl><p>The <code><a href=#the-datalist-element>datalist</a></code> element represents a set of
   40249   <code><a href=#the-option-element>option</a></code> elements that represent predefined options for
   40250   other controls. The contents of the element represents fallback
   40251   content for legacy user agents, intermixed with <code><a href=#the-option-element>option</a></code>
   40252   elements that represent the predefined options. In the rendering,
   40253   the <code><a href=#the-datalist-element>datalist</a></code> element <a href=#represents>represents</a>
   40254   nothing<span class=impl> and it, along with its children, should
   40255   be hidden</span>.</p>
   40256 
   40257   <p>The <code><a href=#the-datalist-element>datalist</a></code> element is hooked up to an
   40258   <code><a href=#the-input-element>input</a></code> element using the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute on the
   40259   <code><a href=#the-input-element>input</a></code> element. <!-- v2DATAGRID The
   40260   <code>datalist</code> element can also be used with a
   40261   <code>datagrid</code> element, as the source of autocompletion hints
   40262   for <code title="datagrid-type-editable">editable</code>
   40263   cells. --></p>
   40264 
   40265   <p>Each <code><a href=#the-option-element>option</a></code> element that is a descendant of the
   40266   <code><a href=#the-datalist-element>datalist</a></code> element, that is not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and whose <a href=#concept-option-value title=concept-option-value>value</a> is a string that isn't the
   40267   empty string, represents a suggestion. Each suggestion has a <a href=#concept-option-value title=concept-option-value>value</a> and a <a href=#concept-option-label title=concept-option-label>label</a>.
   40268 
   40269   <dl class=domintro><dt><var title="">datalist</var> . <code title=dom-datalist-options><a href=#dom-datalist-options>options</a></code></dt>
   40270 
   40271    <dd>
   40272     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
   40273    </dd>
   40274 
   40275   </dl><div class=impl>
   40276 
   40277   <p>The <dfn id=dom-datalist-options title=dom-datalist-options><code>options</code></dfn>
   40278   IDL attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at
   40279   the <code><a href=#the-datalist-element>datalist</a></code> node, whose filter matches
   40280   <code><a href=#the-option-element>option</a></code> elements.</p>
   40281 
   40282   <p><strong>Constraint validation</strong>: If an element has a
   40283   <code><a href=#the-datalist-element>datalist</a></code> element ancestor, it is <a href=#barred-from-constraint-validation>barred from
   40284   constraint validation</a>.</p>
   40285 
   40286   </div>
   40287 
   40288 
   40289   <h4 id=the-optgroup-element><span class=secno>4.10.11 </span>The <dfn><code>optgroup</code></dfn> element</h4>
   40290 
   40291   <dl class=element><dt>Categories</dt>
   40292    <dd>None.</dd>
   40293    <dt>Contexts in which this element may be used:</dt>
   40294    <dd>As a child of a <code><a href=#the-select-element>select</a></code> element.</dd>
   40295    <dt>Content model:</dt>
   40296    <dd>Zero or more <code><a href=#the-option-element>option</a></code> elements.</dd>
   40297    <dt>Content attributes:</dt>
   40298    <dd><a href=#global-attributes>Global attributes</a></dd>
   40299    <dd><code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code></dd>
   40300    <dd><code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code></dd>
   40301    <dt>DOM interface:</dt>
   40302    <dd>
   40303 <pre class=idl>interface <dfn id=htmloptgroupelement>HTMLOptGroupElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   40304            attribute boolean <a href=#dom-optgroup-disabled title=dom-optgroup-disabled>disabled</a>;
   40305            attribute DOMString <a href=#dom-optgroup-label title=dom-optgroup-label>label</a>;
   40306 };</pre>
   40307    </dd>
   40308   </dl><!-- v2: make optgroups selectable if they have a value. --><p>The <code><a href=#the-optgroup-element>optgroup</a></code> element <a href=#represents>represents</a> a group of
   40309   <code><a href=#the-option-element>option</a></code> elements with a common label.</p>
   40310 
   40311   <p>The element's group of <code><a href=#the-option-element>option</a></code> elements consists of
   40312   the <code><a href=#the-option-element>option</a></code> elements that are children of the
   40313   <code><a href=#the-optgroup-element>optgroup</a></code> element.</p>
   40314 
   40315   <div class=impl>
   40316 
   40317   <p>When showing <code><a href=#the-option-element>option</a></code> elements in <code><a href=#the-select-element>select</a></code>
   40318   elements, user agents should show the <code><a href=#the-option-element>option</a></code> elements
   40319   of such groups as being related to each other and separate from
   40320   other <code><a href=#the-option-element>option</a></code> elements.</p>
   40321 
   40322   </div>
   40323 
   40324   <p>The <dfn id=attr-optgroup-disabled title=attr-optgroup-disabled><code>disabled</code></dfn> attribute
   40325   is a <a href=#boolean-attribute>boolean attribute</a> and can be used to <a href=#concept-option-disabled title=concept-option-disabled>disable</a> a group of
   40326   <code><a href=#the-option-element>option</a></code> elements together.</p>
   40327 
   40328   <p>The <dfn id=attr-optgroup-label title=attr-optgroup-label><code>label</code></dfn>
   40329   attribute must be specified. Its value gives the name of the group,
   40330   for the purposes of the user interface. <span class=impl>User
   40331   agents should use this attribute's value when labelling the group of
   40332   <code><a href=#the-option-element>option</a></code> elements in a <code><a href=#the-select-element>select</a></code>
   40333   element.</span></p>
   40334 
   40335   <div class=impl>
   40336 
   40337   <p>The <dfn id=dom-optgroup-disabled title=dom-optgroup-disabled><code>disabled</code></dfn> and <dfn id=dom-optgroup-label title=dom-optgroup-label><code>label</code></dfn> attributes must
   40338   <a href=#reflect>reflect</a> the respective content attributes of the same
   40339   name.</p>
   40340 
   40341   </div>
   40342 
   40343   <div class=example>
   40344 
   40345    <p>The following snippet shows how a set of lessons from three
   40346    courses could be offered in a <code><a href=#the-select-element>select</a></code> drop-down
   40347    widget:</p>
   40348 
   40349    <pre>&lt;form action="courseselector.dll" method="get"&gt;
   40350  &lt;p&gt;Which course would you like to watch today?
   40351  &lt;p&gt;&lt;label&gt;Course:
   40352   &lt;select name="c"&gt;
   40353    &lt;optgroup label="8.01 Physics I: Classical Mechanics"&gt;
   40354     &lt;option value="8.01.1"&gt;Lecture 01: Powers of Ten
   40355     &lt;option value="8.01.2"&gt;Lecture 02: 1D Kinematics
   40356     &lt;option value="8.01.3"&gt;Lecture 03: Vectors
   40357    &lt;optgroup label="8.02 Electricity and Magnestism"&gt;
   40358     &lt;option value="8.02.1"&gt;Lecture 01: What holds our world together?
   40359     &lt;option value="8.02.2"&gt;Lecture 02: Electric Field
   40360     &lt;option value="8.02.3"&gt;Lecture 03: Electric Flux
   40361    &lt;optgroup label="8.03 Physics III: Vibrations and Waves"&gt;
   40362     &lt;option value="8.03.1"&gt;Lecture 01: Periodic Phenomenon
   40363     &lt;option value="8.03.2"&gt;Lecture 02: Beats
   40364     &lt;option value="8.03.3"&gt;Lecture 03: Forced Oscillations with Damping
   40365   &lt;/select&gt;
   40366  &lt;/label&gt;
   40367  &lt;p&gt;&lt;input type=submit value="&#9654; Play"&gt;
   40368 &lt;/form&gt;</pre>
   40369 
   40370   </div>
   40371 
   40372 
   40373 
   40374   <h4 id=the-option-element><span class=secno>4.10.12 </span>The <dfn><code>option</code></dfn> element</h4>
   40375 
   40376   <dl class=element><dt>Categories</dt>
   40377    <dd>None.</dd>
   40378    <dt>Contexts in which this element may be used:</dt>
   40379    <dd>As a child of a <code><a href=#the-select-element>select</a></code> element.</dd>
   40380    <dd>As a child of a <code><a href=#the-datalist-element>datalist</a></code> element.</dd>
   40381    <dd>As a child of an <code><a href=#the-optgroup-element>optgroup</a></code> element.</dd>
   40382    <dt>Content model:</dt>
   40383    <dd><a href=#text-content title="text content">Text</a>.</dd>
   40384    <dt>Content attributes:</dt>
   40385    <dd><a href=#global-attributes>Global attributes</a></dd>
   40386    <dd><code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code></dd>
   40387    <dd><code title=attr-option-label><a href=#attr-option-label>label</a></code></dd>
   40388    <dd><code title=attr-option-selected><a href=#attr-option-selected>selected</a></code></dd>
   40389    <dd><code title=attr-option-value><a href=#attr-option-value>value</a></code></dd>
   40390    <dt>DOM interface:</dt>
   40391    <dd>
   40392 <pre class=idl>[NamedConstructor=<a href=#dom-option title=dom-option>Option</a>(),
   40393  NamedConstructor=<a href=#dom-option-t title=dom-option-t>Option</a>(in DOMString text),
   40394  NamedConstructor=<a href=#dom-option-tv title=dom-option-tv>Option</a>(in DOMString text, in DOMString value),
   40395  NamedConstructor=<a href=#dom-option-tvd title=dom-option-tvd>Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected),
   40396  NamedConstructor=<a href=#dom-option-tvds title=dom-option-tvds>Option</a>(in DOMString text, in DOMString value, in boolean defaultSelected, in boolean selected)]
   40397 interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   40398            attribute boolean <a href=#dom-option-disabled title=dom-option-disabled>disabled</a>;
   40399   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-option-form title=dom-option-form>form</a>;
   40400            attribute DOMString <a href=#dom-option-label title=dom-option-label>label</a>;
   40401            attribute boolean <a href=#dom-option-defaultselected title=dom-option-defaultSelected>defaultSelected</a>;
   40402            attribute boolean <a href=#dom-option-selected title=dom-option-selected>selected</a>;
   40403            attribute DOMString <a href=#dom-option-value title=dom-option-value>value</a>;
   40404 
   40405            attribute DOMString <a href=#dom-option-text title=dom-option-text>text</a>;
   40406   readonly attribute long <a href=#dom-option-index title=dom-option-index>index</a>;
   40407 };</pre>
   40408    </dd>
   40409   </dl><p>The <code><a href=#the-option-element>option</a></code> element <a href=#represents>represents</a> an option
   40410   in a <code><a href=#the-select-element>select</a></code> element or as part of a list of suggestions
   40411   in a <code><a href=#the-datalist-element>datalist</a></code> element.</p>
   40412 
   40413   <p>The <dfn id=attr-option-disabled title=attr-option-disabled><code>disabled</code></dfn>
   40414   attribute is a <a href=#boolean-attribute>boolean attribute</a>. An
   40415   <code><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled title=concept-option-disabled>disabled</dfn> if its <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute is present or
   40416   if it is a child of an <code><a href=#the-optgroup-element>optgroup</a></code> element whose <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute is
   40417   present.</p>
   40418 
   40419   <div class=impl>
   40420 
   40421   <p>An <code><a href=#the-option-element>option</a></code> element that is <a href=#attr-option-disabled title=attr-option-disabled>disabled</a> must prevent any <code title=event-click><a href=#event-click>click</a></code> events that are <a href=#queue-a-task title="queue
   40422   a task">queued</a> on the <a href=#user-interaction-task-source>user interaction task
   40423   source</a> from being dispatched on the element.</p>
   40424 
   40425   </div>
   40426 
   40427   <p>The <dfn id=attr-option-label title=attr-option-label><code>label</code></dfn>
   40428   attribute provides a label for element. The <dfn id=concept-option-label title=concept-option-label>label</dfn> of an <code><a href=#the-option-element>option</a></code>
   40429   element is the value of the <code title=attr-option-label><a href=#attr-option-label>label</a></code> attribute, if there is one,
   40430   or the <code><a href=#textcontent>textContent</a></code> of the element, if there isn't.</p>
   40431 
   40432   <p>The <dfn id=attr-option-value title=attr-option-value><code>value</code></dfn>
   40433   attribute provides a value for element. The <dfn id=concept-option-value title=concept-option-value>value</dfn> of an <code><a href=#the-option-element>option</a></code>
   40434   element is the value of the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute, if there is one,
   40435   or the <code><a href=#textcontent>textContent</a></code> of the element, if there isn't.</p>
   40436 
   40437   <p>The <dfn id=attr-option-selected title=attr-option-selected><code>selected</code></dfn>
   40438   attribute represents the default <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
   40439   element.</p>
   40440 
   40441   <div class=impl>
   40442 
   40443   <p>The <dfn id=concept-option-selectedness title=concept-option-selectedness>selectedness</dfn>
   40444   of an <code><a href=#the-option-element>option</a></code> element is a boolean state, initially
   40445   false. If the element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, then the element's
   40446   <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is
   40447   always false and cannot be set to true. Except where otherwise
   40448   specified, when the element is created, its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must be set
   40449   to true if the element has a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute. Whenever an
   40450   <code><a href=#the-option-element>option</a></code> element's <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute is added, its
   40451   <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must
   40452   be set to true.</p>
   40453 
   40454   <p class=note>The <code title=dom-option-tvd><a href=#dom-option-tvd>Option()</a></code>
   40455   constructor with three or fewer arguments overrides the initial
   40456   state of the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> state to
   40457   always be false even if the third argument is true (implying that a
   40458   <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute is to
   40459   be set). The fourth argument can be used to explicitly set the
   40460   initial <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> state when
   40461   using the constructor.</p>
   40462 
   40463   </div>
   40464 
   40465   <p>A <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is not
   40466   specified must not have more than one descendant <code><a href=#the-option-element>option</a></code>
   40467   element with its <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>
   40468   attribute set.</p>
   40469 
   40470   <div class=impl>
   40471 
   40472   <p>An <code><a href=#the-option-element>option</a></code> element's <dfn id=concept-option-index title=concept-option-index>index</dfn> is the number of
   40473   <code><a href=#the-option-element>option</a></code> element that are in the same <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> but that
   40474   come before it in <a href=#tree-order>tree order</a>. If the
   40475   <code><a href=#the-option-element>option</a></code> element is not in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, then the
   40476   <code><a href=#the-option-element>option</a></code> element's <a href=#concept-option-index title=concept-option-index>index</a> is zero.</p>
   40477 
   40478   </div>
   40479 
   40480   <dl class=domintro><dt><var title="">option</var> . <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code></dt>
   40481 
   40482    <dd>
   40483 
   40484     <p>Returns true if the element is selected, and false otherwise.</p>
   40485 
   40486    </dd>
   40487 
   40488    <dt><var title="">option</var> . <code title=dom-option-index><a href=#dom-option-index>index</a></code></dt>
   40489 
   40490    <dd>
   40491 
   40492     <p>Returns the index of the element in its <code><a href=#the-select-element>select</a></code>
   40493     element's <code title=dom-select-options><a href=#dom-select-options>options</a></code>
   40494     list.</p>
   40495 
   40496    </dd>
   40497 
   40498    <dt><var title="">option</var> . <code title=dom-option-form><a href=#dom-option-form>form</a></code></dt>
   40499 
   40500    <dd>
   40501 
   40502     <p>Returns the element's <code><a href=#the-form-element>form</a></code> element, if any, or
   40503     null otherwise.</p>
   40504 
   40505    </dd>
   40506 
   40507    <dt><var title="">option</var> . <code title=dom-option-text><a href=#dom-option-text>text</a></code></dt>
   40508 
   40509    <dd>
   40510 
   40511     <p>Same as <code><a href=#textcontent>textContent</a></code>.</p>
   40512 
   40513    </dd>
   40514 
   40515    <dt><var title="">option</var> = new <code title=dom-option><a href=#dom-option>Option</a></code>( [ <var title="">text</var> [, <var title="">value</var> [, <var title="">defaultSelected</var> [, <var title="">selected</var> ] ] ] ] )</dt>
   40516 
   40517    <dd>
   40518 
   40519     <p>Returns a new <code><a href=#the-option-element>option</a></code> element.</p>
   40520 
   40521     <p>The <var title="">text</var> argument sets the contents of the element.</p>
   40522     <p>The <var title="">value</var> argument sets the <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute.</p>
   40523     <p>The <var title="">defaultSelected</var> argument sets the <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute.</p>
   40524     <p>The <var title="">selected</var> argument sets whether or not the element is selected. If it is omitted, even if the <var title="">defaultSelected</var> argument is true, the element is not selected.</p>
   40525 
   40526    </dd>
   40527 
   40528   </dl><div class=impl>
   40529 
   40530   <p>The <dfn id=dom-option-disabled title=dom-option-disabled><code>disabled</code></dfn>
   40531   and <dfn id=dom-option-label title=dom-option-label><code>label</code></dfn> IDL
   40532   attributes must <a href=#reflect>reflect</a> the respective content
   40533   attributes of the same name. The <dfn id=dom-option-defaultselected title=dom-option-defaultSelected><code>defaultSelected</code></dfn>
   40534   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> content attribute.</p>
   40535 
   40536   <p>The <dfn id=dom-option-value title=dom-option-value><code>value</code></dfn> IDL
   40537   attribute, on getting, must return the value of the element's <code title=attr-option-value><a href=#attr-option-value>value</a></code> content attribute, if it has
   40538   one, or else the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
   40539   attribute. On setting, the element's <code title=attr-option-value><a href=#attr-option-value>value</a></code> content attribute must be set
   40540   to the new value.</p>
   40541 
   40542   <p>The <dfn id=dom-option-selected title=dom-option-selected><code>selected</code></dfn>
   40543   IDL attribute must return true if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
   40544   false otherwise.</p>
   40545 
   40546   <p>The <dfn id=dom-option-index title=dom-option-index><code>index</code></dfn> IDL
   40547   attribute must return the element's <a href=#concept-option-index title=concept-option-index>index</a>.</p>
   40548 
   40549   <p>The <dfn id=dom-option-text title=dom-option-text><code>text</code></dfn> IDL
   40550   attribute, on getting, must return the same value as the
   40551   <code><a href=#textcontent>textContent</a></code> IDL attribute on the element, and on
   40552   setting, must act as if the <code><a href=#textcontent>textContent</a></code> IDL attribute
   40553   on the element had been set to the new value.</p>
   40554 
   40555   <p>The <dfn id=dom-option-form title=dom-option-form><code>form</code></dfn> IDL
   40556   attribute's behavior depends on whether the <code><a href=#the-option-element>option</a></code>
   40557   element is in a <code><a href=#the-select-element>select</a></code> element or not. If the
   40558   <code><a href=#the-option-element>option</a></code> has a <code><a href=#the-select-element>select</a></code> element as its parent,
   40559   or has a <code><a href=#the-colgroup-element>colgroup</a></code> element as its parent and that
   40560   <code><a href=#the-colgroup-element>colgroup</a></code> element has a <code><a href=#the-select-element>select</a></code> element as
   40561   its parent, then the <code title=dom-option-form><a href=#dom-option-form>form</a></code> IDL
   40562   attribute must return the same value as the <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute on that
   40563   <code><a href=#the-select-element>select</a></code> element. Otherwise, it must return null.</p>
   40564 
   40565   <p>Several constructors are provided for creating
   40566   <code><a href=#htmloptionelement>HTMLOptionElement</a></code> objects (in addition to the factory
   40567   methods from DOM Core such as <code title="">createElement()</code>): <dfn id=dom-option title=dom-option><code>Option()</code></dfn>, <dfn id=dom-option-t title=dom-option-t><code>Option(<var title="">text</var>)</code></dfn>, <dfn id=dom-option-tv title=dom-option-tv><code>Option(<var title="">text</var>, <var title="">value</var>)</code></dfn>, <dfn id=dom-option-tvd title=dom-option-tvd><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>)</code></dfn>, and <dfn id=dom-option-tvds title=dom-option-tvds><code>Option(<var title="">text</var>, <var title="">value</var>, <var title="">defaultSelected</var>, <var title="">selected</var>)</code></dfn>. When invoked as constructors,
   40568   these must return a new <code><a href=#htmloptionelement>HTMLOptionElement</a></code> object (a new
   40569   <code><a href=#the-option-element>option</a></code> element). If the <var title="">text</var>
   40570   argument is present, the new object must have as its only child a
   40571   <code><a href=#node>Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
   40572   whose data is the value of that argument<!-- we mention TEXT_NODE
   40573   and all that explicitly here because we redefine "text node" in this
   40574   spec to also include CDATA sections -->. If the <var title="">value</var> argument is present, the new object must have a
   40575   <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set with the
   40576   value of the argument as its value. If the <var title="">defaultSelected</var> argument is present and true, the new
   40577   object must have a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute set with no
   40578   value. If the <var title="">selected</var> argument is present and
   40579   true, the new object must have its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true;
   40580   otherwise the fourth argument is absent or false, and the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> must be set
   40581   to false, even if the <var title="">defaultSelected</var> argument
   40582   is present and true. The element's document must be the <a href=#active-document>active
   40583   document</a> of the <a href=#browsing-context>browsing context</a> of the
   40584   <code><a href=#window>Window</a></code> object on which the interface object of the
   40585   invoked constructor is found.</p>
   40586 
   40587   </div>
   40588 
   40589 
   40590 
   40591   <h4 id=the-textarea-element><span class=secno>4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4>
   40592 
   40593   <dl class=element><dt>Categories</dt>
   40594    <dd><a href=#flow-content>Flow content</a>.</dd>
   40595    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   40596    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   40597    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   40598    <dt>Contexts in which this element may be used:</dt>
   40599    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   40600    <dt>Content model:</dt>
   40601    <dd><a href=#text-content title="text content">Text</a>.</dd>
   40602    <dt>Content attributes:</dt>
   40603    <dd><a href=#global-attributes>Global attributes</a></dd>
   40604    <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   40605    <dd><code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code></dd>
   40606    <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   40607    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   40608    <dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code></dd>
   40609    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   40610    <dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code></dd>
   40611    <dd><code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code></dd>
   40612    <dd><code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code></dd>
   40613    <dd><code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code></dd>
   40614    <dd><code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code></dd>
   40615    <dt>DOM interface:</dt>
   40616    <dd>
   40617 <pre class=idl>interface <dfn id=htmltextareaelement>HTMLTextAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   40618            attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
   40619            attribute unsigned long <a href=#dom-textarea-cols title=dom-textarea-cols>cols</a>;
   40620            attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
   40621   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   40622            attribute long <a href=#dom-textarea-maxlength title=dom-textarea-maxLength>maxLength</a>;
   40623            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   40624            attribute DOMString <a href=#dom-textarea-placeholder title=dom-textarea-placeholder>placeholder</a>;
   40625            attribute boolean <a href=#dom-textarea-readonly title=dom-textarea-readOnly>readOnly</a>;
   40626            attribute boolean <a href=#dom-textarea-required title=dom-textarea-required>required</a>;
   40627            attribute unsigned long <a href=#dom-textarea-rows title=dom-textarea-rows>rows</a>;
   40628            attribute DOMString <a href=#dom-textarea-wrap title=dom-textarea-wrap>wrap</a>;
   40629 
   40630   readonly attribute DOMString <a href=#dom-textarea-type title=dom-textarea-type>type</a>;
   40631            attribute DOMString <a href=#dom-textarea-defaultvalue title=dom-textarea-defaultValue>defaultValue</a>;
   40632            attribute DOMString <a href=#dom-textarea-value title=dom-textarea-value>value</a>;
   40633   readonly attribute unsigned long <a href=#dom-textarea-textlength title=dom-textarea-textLength>textLength</a>;
   40634 
   40635   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   40636   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   40637   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   40638   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   40639   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   40640 
   40641   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   40642 
   40643   void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
   40644            attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
   40645            attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
   40646   void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);
   40647 };</pre>
   40648    </dd>
   40649   </dl><p>The <code><a href=#the-textarea-element>textarea</a></code> element <a href=#represents>represents</a> a
   40650   multiline plain text edit control<span class=impl> for the
   40651   element's <dfn id=concept-textarea-raw-value title=concept-textarea-raw-value>raw
   40652   value</dfn></span>. The contents of the control represent the
   40653   control's default value.</p>
   40654 
   40655   <div class=impl>
   40656 
   40657   <p>The <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> of
   40658   a <code><a href=#the-textarea-element>textarea</a></code> control must be initially the empty
   40659   string.</p>
   40660 
   40661   </div>
   40662 
   40663   <p>The <dfn id=attr-textarea-readonly title=attr-textarea-readonly><code>readonly</code></dfn> attribute
   40664   is a <a href=#boolean-attribute>boolean attribute</a> used to control whether the text
   40665   can be edited by the user or not.</p>
   40666 
   40667   <div class=impl>
   40668 
   40669   <p><strong>Constraint validation</strong>: If the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute is
   40670   specified on a <code><a href=#the-textarea-element>textarea</a></code> element, the element is
   40671   <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   40672 
   40673   <p>A <code><a href=#the-textarea-element>textarea</a></code> element is <dfn id=concept-textarea-mutable title=concept-textarea-mutable>mutable</dfn> if it is neither
   40674   <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> nor has a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute
   40675   specified.</p>
   40676 
   40677   <p>When a <code><a href=#the-textarea-element>textarea</a></code> is <a href=#concept-textarea-mutable title=concept-textarea-mutable>mutable</a>, its <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> should be
   40678   editable by the user. Any time the user causes the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> to change, the
   40679   user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   40680   event</a> that bubbles named <code title=event-input>input</code> at the <code><a href=#the-textarea-element>textarea</a></code>
   40681   element, then <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</a> at the
   40682   <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#form-owner>form owner</a>. User agents
   40683   may wait for a suitable break in the user's interaction before
   40684   queuing the task; for example, a user agent could wait for the user
   40685   to have not hit a key for 100ms, so as to only fire the event when
   40686   the user pauses, instead of continuously for each keystroke.</p>
   40687   <!-- same text is present in the <input> section -->
   40688 
   40689   <p>A <code><a href=#the-textarea-element>textarea</a></code> element has a <dfn id=concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</dfn>, which must be
   40690   initially set to false, and must be set to true whenever the user
   40691   interacts with the control in a way that changes the <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a>.</p>
   40692 
   40693   <p>When the <code><a href=#the-textarea-element>textarea</a></code> element's <code><a href=#textcontent>textContent</a></code>
   40694   IDL attribute changes value, if the element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a> is false,
   40695   then the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw
   40696   value</a> must be set to the value of the element's
   40697   <code><a href=#textcontent>textContent</a></code> IDL attribute.</p>
   40698 
   40699   <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   40700   algorithm</a> for <code><a href=#the-textarea-element>textarea</a></code> elements is to set the
   40701   element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>value</a> to
   40702   the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
   40703   attribute.</p>
   40704 
   40705   </div>
   40706 
   40707   <p>The <dfn id=attr-textarea-cols title=attr-textarea-cols><code>cols</code></dfn>
   40708   attribute specifies the expected maximum number of characters per
   40709   line. If the <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> attribute
   40710   is specified, its value must be a <a href=#valid-non-negative-integer>valid non-negative
   40711   integer</a> greater than zero. <span class=impl>If applying the
   40712   <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the
   40713   attribute's value results in a number greater than zero, then the
   40714   element's <dfn id=attr-textarea-cols-value title=attr-textarea-cols-value>character
   40715   width</dfn> is that value; otherwise, it is 20.</span></p>
   40716 
   40717   <div class=impl>
   40718 
   40719   <p>The user agent may use the <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character width</a> as a hint to
   40720   the user as to how many characters the server prefers per line
   40721   (e.g. for visual user agents by making the width of the control be
   40722   that many characters). In visual renderings, the user agent should
   40723   wrap the user's input in the rendering so that each line is no wider
   40724   than this number of characters.</p>
   40725 
   40726   </div>
   40727 
   40728   <p>The <dfn id=attr-textarea-rows title=attr-textarea-rows><code>rows</code></dfn>
   40729   attribute specifies the number of lines to show. If the <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code> attribute is specified, its
   40730   value must be a <a href=#valid-non-negative-integer>valid non-negative integer</a> greater than
   40731   zero. <span class=impl>If applying the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
   40732   non-negative integers</a> to the attribute's value results in a
   40733   number greater than zero, then the element's <dfn id=attr-textarea-rows-value title=attr-textarea-rows-value>character height</dfn> is that
   40734   value; otherwise, it is 2.</span></p>
   40735 
   40736   <div class=impl>
   40737 
   40738   <p>Visual user agents should set the height of the control to the
   40739   number of lines given by <a href=#attr-textarea-rows-value title=attr-textarea-rows-value>character height</a>.</p>
   40740 
   40741   </div>
   40742 
   40743   <p>The <dfn id=attr-textarea-wrap title=attr-textarea-wrap><code>wrap</code></dfn>
   40744   attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with two keywords
   40745   and states: the <dfn id=attr-textarea-wrap-soft title=attr-textarea-wrap-soft><code>soft</code></dfn> keyword
   40746   which maps to the <dfn id=attr-textarea-wrap-soft-state title=attr-textarea-wrap-soft-state>Soft</dfn> state, and the
   40747   <dfn id=attr-textarea-wrap-hard title=attr-textarea-wrap-hard><code>hard</code></dfn> keyword
   40748   which maps to the <dfn id=attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</dfn> state. The
   40749   <i>missing value default</i> is the <a href=#attr-textarea-wrap-soft-state title=attr-textarea-wrap-soft-state>Soft</a> state.</p>
   40750 
   40751   <p>If the element's <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code>
   40752   attribute is in the <a href=#attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</a> state, the <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> attribute must be
   40753   specified.</p>
   40754 
   40755   <!-- attr-textarea-wrap-off (attr-textarea-wrap-off-state): not
   40756   conforming; turns off the rendering of wrapping but otherwise acts
   40757   like 'soft' -->
   40758 
   40759   <div class=impl>
   40760 
   40761   <p>The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
   40762   defined to be the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a> with the
   40763   following transformation applied:</p>
   40764 
   40765   <ol><li><p>Replace every occurrence of a U+000D CARRIAGE RETURN (CR)
   40766    character not followed by a U+000A LINE FEED (LF) character, and
   40767    every occurrence of a U+000A LINE FEED (LF) character not preceded
   40768    by a U+000D CARRIAGE RETURN (CR) character, by a two-character
   40769    string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED
   40770    (CRLF) character pair.</li>
   40771 
   40772    <li><p>If the element's <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> attribute is in the <a href=#attr-textarea-wrap-hard-state title=attr-textarea-wrap-hard-state>Hard</a> state, insert
   40773    U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs
   40774    into the string using a UA-defined algorithm so that each line has
   40775    no more than <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character
   40776    width</a> characters. For the purposes of this requirement,
   40777    lines are delimited by the start of the string, the end of the
   40778    string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
   40779    character pairs.</li>
   40780 
   40781   </ol></div>
   40782 
   40783   <p>The <dfn id=attr-textarea-maxlength title=attr-textarea-maxlength><code>maxlength</code></dfn>
   40784   attribute is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a> controlled by the
   40785   <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a>.</p>
   40786 
   40787   <p>If the <code><a href=#the-textarea-element>textarea</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed
   40788   value length</a>, then the element's children must be such that
   40789   the <a href=#code-point-length>code-point length</a> of the value of the element's
   40790   <code><a href=#textcontent>textContent</a></code> IDL attribute is equal to or less than the
   40791   element's <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
   40792 
   40793   <p>The <dfn id=attr-textarea-required title=attr-textarea-required><code>required</code></dfn> attribute
   40794   is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the user will
   40795   be required to enter a value before submitting the form.</p>
   40796 
   40797   <div class=impl>
   40798 
   40799   <p><strong>Constraint validation</strong>: If the element has its
   40800   <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code> attribute
   40801   specified, and the element is <a href=#concept-textarea-mutable title=concept-textarea-mutable>mutable</a>, and the element's
   40802   <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string,
   40803   then the element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
   40804 
   40805   </div>
   40806 
   40807 
   40808   <!-- similar text in the <input> section -->
   40809 
   40810   <p>The <dfn id=attr-textarea-placeholder title=attr-textarea-placeholder><code>placeholder</code></dfn>
   40811   attribute represents a hint (a word or short phrase) intended to aid
   40812   the user with data entry. A hint could be a sample value or a brief
   40813   description of the expected format. The attribute, if specified,
   40814   must have a value that contains no U+000A LINE FEED (LF) or U+000D
   40815   CARRIAGE RETURN (CR) characters.</p>
   40816 
   40817   <p class=note>For a longer hint or other advisory text, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute is more appropriate.</p>
   40818 
   40819   <p>The <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>
   40820   attribute should not be used as an alternative to a
   40821   <code><a href=#the-label-element>label</a></code>.</p>
   40822 
   40823   <div class=impl>
   40824 
   40825   <p>User agents should present this hint to the user, after having
   40826   <a href=#strip-line-breaks title="strip line breaks">stripped line breaks</a> from it,
   40827   when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is
   40828   the empty string and the control is not focused (e.g. by displaying
   40829   it inside a blank unfocused control).</p>
   40830 
   40831   </div>
   40832 
   40833 
   40834   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   40835   explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its
   40836   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   40837   attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
   40838   the control non-interactive and to prevent its value from being
   40839   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   40840   attribute controls focus.</p>
   40841 
   40842   <dl class=domintro><dt><var title="">textarea</var> . <code title=attr-textarea-type>type</code></dt>
   40843 
   40844    <dd>
   40845 
   40846     <p>Returns the string "<code title="">textarea</code>".</p>
   40847 
   40848    </dd>
   40849 
   40850    <dt><var title="">textarea</var> . <code title=attr-textarea-value>value</code></dt>
   40851 
   40852    <dd>
   40853 
   40854     <p>Returns the current value of the element.</p>
   40855 
   40856     <p>Can be set, to change the value.</p>
   40857 
   40858    </dd>
   40859 
   40860   </dl><div class=impl>
   40861 
   40862   <p>The <dfn id=dom-textarea-cols title=dom-textarea-cols><code>cols</code></dfn>, <dfn id=dom-textarea-placeholder title=dom-textarea-placeholder><code>placeholder</code></dfn>,
   40863   <dfn id=dom-textarea-required title=dom-textarea-required><code>required</code></dfn>, <dfn id=dom-textarea-rows title=dom-textarea-rows><code>rows</code></dfn>, and <dfn id=dom-textarea-wrap title=dom-textarea-wrap><code>wrap</code></dfn> attributes must
   40864   <a href=#reflect>reflect</a> the respective content attributes of the same
   40865   name. The <code title=dom-textarea-cols><a href=#dom-textarea-cols>cols</a></code> and <code title=dom-textarea-rows><a href=#dom-textarea-rows>rows</a></code> attributes are <a href=#limited-to-only-non-negative-numbers-greater-than-zero>limited
   40866   to only non-negative numbers greater than zero</a>. The <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
   40867   attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> content attribute,
   40868   <a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>. The <dfn id=dom-textarea-readonly title=dom-textarea-readOnly><code>readOnly</code></dfn> IDL
   40869   attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> content
   40870   attribute.</p>
   40871 
   40872   <p>The <dfn id=dom-textarea-type title=dom-textarea-type><code>type</code></dfn> IDL
   40873   attribute must return the value "<code title="">textarea</code>".</p>
   40874 
   40875   <p>The <dfn id=dom-textarea-defaultvalue title=dom-textarea-defaultValue><code>defaultValue</code></dfn>
   40876   IDL attribute must act like the element's <code><a href=#textcontent>textContent</a></code>
   40877   IDL attribute.</p>
   40878 
   40879   <p>The <dfn id=dom-textarea-value title=dom-textarea-value><code>value</code></dfn>
   40880   attribute must, on getting, return the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw value</a>; on setting, it
   40881   must set the element's <a href=#concept-textarea-raw-value title=concept-textarea-raw-value>raw
   40882   value</a> to the new value.</p>
   40883 
   40884   <p>The <dfn id=dom-textarea-textlength title=dom-textarea-textLength><code>textLength</code></dfn> IDL
   40885   attribute must return the <a href=#code-point-length>code-point length</a> of the
   40886   element's <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
   40887 
   40888   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   40889   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   40890   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   40891   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   40892   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code>, <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
   40893   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
   40894   and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   40895   methods and attributes expose the element's text selection. The
   40896   <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   40897   element's forms API.</p>
   40898 
   40899   </div>
   40900 
   40901   <div class=example>
   40902 
   40903    <p>Here is an example of a <code><a href=#the-textarea-element>textarea</a></code> being used for
   40904    unrestricted free-form text input in a form:</p>
   40905 
   40906    <pre>&lt;p&gt;If you have any comments, please let us know: &lt;textarea cols=80 name=comments&gt;&lt;/textarea&gt;&lt;/p&gt;</pre>
   40907 
   40908   </div>
   40909 
   40910 
   40911 
   40912   <h4 id=the-keygen-element><span class=secno>4.10.14 </span>The <dfn><code>keygen</code></dfn> element</h4>
   40913 
   40914   <dl class=element><dt>Categories</dt>
   40915    <dd><a href=#flow-content>Flow content</a>.</dd>
   40916    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   40917    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   40918    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, <a href=#category-submit title=category-submit>submittable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   40919    <dt>Contexts in which this element may be used:</dt>
   40920    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   40921    <dt>Content model:</dt>
   40922    <dd>Empty.</dd>
   40923    <dt>Content attributes:</dt>
   40924    <dd><a href=#global-attributes>Global attributes</a></dd>
   40925    <dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
   40926    <dd><code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code></dd>
   40927    <dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
   40928    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   40929    <dd><code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code></dd>
   40930    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   40931    <dt>DOM interface:</dt>
   40932    <dd>
   40933 <pre class=idl>interface <dfn id=htmlkeygenelement>HTMLKeygenElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   40934            attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
   40935            attribute DOMString <a href=#dom-keygen-challenge title=dom-keygen-challenge>challenge</a>;
   40936            attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
   40937   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   40938            attribute DOMString <a href=#dom-keygen-keytype title=dom-keygen-keytype>keytype</a>;
   40939            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   40940 
   40941   readonly attribute DOMString <a href=#dom-keygen-type title=dom-keygen-type>type</a>;
   40942 
   40943   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   40944   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   40945   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   40946   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   40947   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   40948 
   40949   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   40950 };</pre>
   40951    </dd>
   40952   </dl><p>The <code><a href=#the-keygen-element>keygen</a></code> element <a href=#represents>represents</a> a key
   40953   pair generator control. When the control's form is submitted, the
   40954   private key is stored in the local keystore, and the public key is
   40955   packaged and sent to the server.</p>
   40956 
   40957   <p>The <dfn id=attr-keygen-challenge title=attr-keygen-challenge><code>challenge</code></dfn> attribute
   40958   may be specified. Its value will be packaged with the submitted
   40959   key.</p>
   40960 
   40961   <p>The <dfn id=attr-keygen-keytype title=attr-keygen-keytype><code>keytype</code></dfn>
   40962   attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
   40963   table lists the keywords and states for the attribute &mdash; the
   40964   keywords in the left column map to the states listed in the cell in
   40965   the second column on the same row as the keyword. User agents are
   40966   not required to support these values, and must only recognize values
   40967   whose corresponding algorithms they support.</p>
   40968 
   40969   <table><thead><tr><th> Keyword <th> State
   40970    <tbody><tr><td> <code title="">rsa</code>
   40971      <td> <i title="">RSA</i>
   40972 <!-- v2 (see below)
   40973     <tr>
   40974      <td> <code title="">ec</code>
   40975      <td> <i title="">EC</i>
   40976 -->
   40977   </table><p>The <i>invalid value default</i> state is the <i title="">unknown</i> state. The <i>missing value default</i> state
   40978   is the <i title="">RSA</i> state, if it is supported, or the <i title="">unknown</i> state otherwise.</p>
   40979 
   40980   <p class=note>This specification does not specify what key types
   40981   user agents are to support &mdash; it is possible for a user agent
   40982   to not support any key types at all.</p>
   40983 
   40984   <div class=impl>
   40985 
   40986   <p>The user agent may expose a user interface for each
   40987   <code><a href=#the-keygen-element>keygen</a></code> element to allow the user to configure settings
   40988   of the element's key pair generator, e.g. the key length.</p>
   40989 
   40990   <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   40991   algorithm</a> for <code><a href=#the-keygen-element>keygen</a></code> elements is to set these
   40992   various configuration settings back to their defaults.</p>
   40993 
   40994   <p>The element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the
   40995   string returned from the following algorithm:</p>
   40996 
   40997   <ol><li>
   40998 
   40999     <p>Use the appropriate step from the following list:</p>
   41000 
   41001     <dl class=switch><!-- v2 (see above)
   41002 
   41003      <dt>If the <code title="attr-keygen-keytype">keytype</code>
   41004      attribute is in the <i title="">EC</i> state</dt>
   41005 
   41006      <dd>
   41007 
   41008       <p>...
   41009 
   41010       http://www.mail-archive.com/dev-tech-crypto@lists.mozilla.org/msg05902.html
   41011 
   41012      </dd>
   41013 
   41014      --><dt>If the <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code>
   41015      attribute is in the <i title="">RSA</i> state</dt>
   41016 
   41017      <dd>
   41018 
   41019       <p>Generate an RSA key pair using the settings given by the
   41020       user, if appropriate, using the <code title="">md5WithRSAEncryption</code> RSA signature algorithm
   41021       (the signature algorithm with MD5 and the RSA encryption
   41022       algorithm) referenced in section 2.2.1 ("RSA Signature
   41023       Algorithm") of RFC 3279, and defined in RFC 2313. <a href=#refsRFC3279>[RFC3279]</a> <a href=#refsRFC2313>[RFC2313]</a></p>
   41024 
   41025      </dd>
   41026 
   41027      <dt>Otherwise, the <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code> attribute is in the <i title="">unknown</i> state</dt>
   41028 
   41029      <dd>
   41030 
   41031       <p>The given key type is not supported. Return the empty string
   41032       and abort this algorithm.</p>
   41033 
   41034      </dd>
   41035 
   41036     </dl><p>Let <var title="">private key</var> be the generated private key.</p>
   41037 
   41038     <p>Let <var title="">public key</var> be the generated public key.</p>
   41039 
   41040     <p>Let <var title="">signature algorithm</var> be the selected
   41041     signature algorithm.</p>
   41042 
   41043    </li>
   41044 
   41045    <li>
   41046 
   41047     <p>If the element has a <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code> attribute, then let
   41048     <var title="">challenge</var> be that attribute's value.
   41049     Otherwise, let <var title="">challenge</var> be the empty
   41050     string.</p>
   41051 
   41052    </li>
   41053 
   41054    <li>
   41055 
   41056     <p>Let <var title="">algorithm</var> be an ASN.1 <code title="">AlgorithmIdentifier</code> structure as defined by
   41057     RFC 5280, with the <code title="">algorithm</code> field giving the
   41058     ASN.1 OID used to identify <var title="">signature
   41059     algorithm</var>, using the OIDs defined in section 2.2 ("Signature
   41060     Algorithms") of RFC 3279, and the <code title="">parameters</code>
   41061     field set up as required by RFC 3279 for <code title="">AlgorithmIdentifier</code> structures for that
   41062     algorithm. <a href=#refsX690>[X690]</a> <a href=#refsRFC5280>[RFC5280]</a> <a href=#refsRFC3279>[RFC3279]</a></p>
   41063 
   41064    </li>
   41065 
   41066    <li>
   41067 
   41068     <p>Let <var title="">spki</var> be an ASN.1 <code title="">SubjectPublicKeyInfo</code> structure as defined by
   41069     RFC 5280, with the <code title="">algorithm</code> field set to the
   41070     <var title="">algorithm</var> structure from the previous step,
   41071     and the <code title="">subjectPublicKey</code> field set to the
   41072     BIT STRING value resulting from ASN.1 DER encoding the <var title="">public key</var>. <a href=#refsX690>[X690]</a> <a href=#refsRFC5280>[RFC5280]</a></p>
   41073 
   41074    </li>
   41075 
   41076    <li>
   41077 
   41078     <p>Let <var title="">publicKeyAndChallenge</var> be an ASN.1
   41079     <code><a href=#publickeyandchallenge>PublicKeyAndChallenge</a></code> structure as defined below,
   41080     with the <code title="">spki</code> field set to the <var title="">spki</var> structure from the previous step, and the
   41081     <code title="">challenge</code> field set to the string <var title="">challenge</var> obtained earlier. <a href=#refsX690>[X690]</a></p>
   41082 
   41083    </li>
   41084 
   41085    <li>
   41086 
   41087     <p>Let <var title="">signature</var> be the BIT STRING value
   41088     resulting from ASN.1 DER encoding the signature generated by
   41089     applying the <var title="">signature algorithm</var> to the byte
   41090     string obtained by ASN.1 DER encoding the <var title="">publicKeyAndChallenge</var> structure, using <var title="">private key</var> as the signing key. <a href=#refsX690>[X690]</a></p>
   41091 
   41092    </li>
   41093 
   41094    <li>
   41095 
   41096     <p>Let <var title="">signedPublicKeyAndChallenge</var> be an ASN.1
   41097     <code><a href=#signedpublickeyandchallenge>SignedPublicKeyAndChallenge</a></code> structure as defined
   41098     below, with the <code title="">publicKeyAndChallenge</code> field
   41099     set to the <var title="">publicKeyAndChallenge</var> structure,
   41100     the <code title="">signatureAlgorithm</code> field set to the <var title="">algorithm</var> structure, and the <code title="">signature</code> field set to the BIT STRING <var title="">signature</var> from the previous step. <a href=#refsX690>[X690]</a></p>
   41101 
   41102    </li>
   41103 
   41104    <li>
   41105 
   41106     <p>Return the result of base64 encoding the result of ASN.1 DER
   41107     encoding the <var title="">signedPublicKeyAndChallenge</var>
   41108     structure. <a href=#refsRFC3548>[RFC3548]</a><!--base64--> <a href=#refsX690>[X690]</a></p>
   41109 
   41110    </li>
   41111 
   41112   </ol><p>The data objects used by the above algorithm are defined as
   41113   follows. These definitions use the same "ASN.1-like" syntax defined
   41114   by RFC 5280. <a href=#refsRFC5280>[RFC5280]</a></p>
   41115 
   41116   <pre class=asn><dfn id=publickeyandchallenge>PublicKeyAndChallenge</dfn> ::= SEQUENCE {
   41117     spki <span>SubjectPublicKeyInfo</span>,
   41118     challenge IA5STRING
   41119 }
   41120 
   41121 <dfn id=signedpublickeyandchallenge>SignedPublicKeyAndChallenge</dfn> ::= SEQUENCE {
   41122     publicKeyAndChallenge <a href=#publickeyandchallenge>PublicKeyAndChallenge</a>,
   41123     signatureAlgorithm <span>AlgorithmIdentifier</span>,
   41124     signature BIT STRING
   41125 }</pre>
   41126 
   41127   <hr><p><strong>Constraint validation</strong>: The <code><a href=#the-keygen-element>keygen</a></code>
   41128   element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
   41129 
   41130   </div>
   41131 
   41132   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   41133   explicitly associate the <code><a href=#the-keygen-element>keygen</a></code> element with its
   41134   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   41135   attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make
   41136   the control non-interactive and to prevent its value from being
   41137   submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
   41138   attribute controls focus.</p>
   41139 
   41140   <dl class=domintro><dt><var title="">keygen</var> . <code title=attr-keygen-type>type</code></dt>
   41141 
   41142    <dd>
   41143 
   41144     <p>Returns the string "<code title="">keygen</code>".</p>
   41145 
   41146    </dd>
   41147 
   41148   </dl><div class=impl>
   41149 
   41150   <p>The <dfn id=dom-keygen-challenge title=dom-keygen-challenge><code>challenge</code></dfn> IDL
   41151   attribute must <a href=#reflect>reflect</a> the content attributes of the
   41152   same name.</p>
   41153 
   41154   <p>The <dfn id=dom-keygen-keytype title=dom-keygen-keytype><code>keytype</code></dfn>
   41155   IDL attribute must <a href=#reflect>reflect</a> the content attributes of
   41156   the same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
   41157 
   41158   <p>The <dfn id=dom-keygen-type title=dom-keygen-type><code>type</code></dfn> IDL
   41159   attribute must return the value "<code title="">keygen</code>".</p>
   41160 
   41161   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   41162   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   41163   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   41164   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   41165   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fe-autofocus><a href=#dom-fe-autofocus>autofocus</a></code>, <code title=dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>, <code title=dom-fae-form><a href=#dom-fae-form>form</a></code>, and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   41166   element's forms API.</p>
   41167 
   41168   </div>
   41169 
   41170   <p class=note>This specification does not specify how the private
   41171   key generated is to be used. It is expected that after receiving the
   41172   <code><a href=#signedpublickeyandchallenge>SignedPublicKeyAndChallenge</a></code> (SPKAC) structure, the
   41173   server will generate a client certificate and offer it back to the
   41174   user for download; this certificate, once downloaded and stored in
   41175   the key store along with the private key, can then be used to
   41176   authenticate to services that use SSL and certificate
   41177   authentication.</p>
   41178 
   41179   <!-- how does the UA know which private key is associated with a
   41180   certificate it gets back after the server has taken the public key
   41181   created by <keygen> and turned it into a client cert? -->
   41182 
   41183   <div class=example>
   41184 
   41185    <p>To generate a key pair, add the private key to the user's key
   41186    store, and submit the public key to the server, markup such as the
   41187    following can be used:</p>
   41188 
   41189    <pre>&lt;form action="processkey.cgi" method="post" enctype="multipart/form-data"&gt;
   41190  &lt;p&gt;&lt;keygen name="key"&gt;&lt;/p&gt;
   41191  &lt;p&gt;&lt;input type=submit value="Submit key..."&gt;&lt;/p&gt;
   41192 &lt;/form&gt;</pre>
   41193 
   41194    <p>The server will then receive a form submission with a packaged
   41195    RSA public key as the value of "<code title="">key</code>". This
   41196    can then be used for various purposes, such as generating a client
   41197    certificate, as mentioned above.</p>
   41198 
   41199   </div>
   41200 
   41201 
   41202 
   41203   <h4 id=the-output-element><span class=secno>4.10.15 </span>The <dfn><code>output</code></dfn> element</h4>
   41204 
   41205   <dl class=element><dt>Categories</dt>
   41206    <dd><a href=#flow-content>Flow content</a>.</dd>
   41207    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   41208    <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   41209    <dt>Contexts in which this element may be used:</dt>
   41210    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   41211    <dt>Content model:</dt>
   41212    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   41213    <dt>Content attributes:</dt>
   41214    <dd><a href=#global-attributes>Global attributes</a></dd>
   41215    <dd><code title=attr-output-for><a href=#attr-output-for>for</a></code></dd>
   41216    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   41217    <dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
   41218    <dt>DOM interface:</dt>
   41219    <dd>
   41220 <pre class=idl>interface <dfn id=htmloutputelement>HTMLOutputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   41221   [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] readonly attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <span title=dom-output-wrap>htmlFor</span>;
   41222   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   41223            attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
   41224 
   41225   readonly attribute DOMString <a href=#dom-output-type title=dom-output-type>type</a>;
   41226            attribute DOMString <a href=#dom-output-defaultvalue title=dom-output-defaultValue>defaultValue</a>;
   41227            attribute DOMString <a href=#dom-output-value title=dom-output-value>value</a>;
   41228 
   41229   readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
   41230   readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
   41231   readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
   41232   boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
   41233   void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
   41234 
   41235   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   41236 };</pre>
   41237    </dd>
   41238   </dl><p>The <code><a href=#the-output-element>output</a></code> element <a href=#represents>represents</a> the result of a
   41239   calculation.</p>
   41240 
   41241   <p>The <dfn id=attr-output-for title=attr-output-for><code>for</code></dfn> content
   41242   attribute allows an explicit relationship to be made between the
   41243   result of a calculation and the elements that represent the values
   41244   that went into the calculation or that otherwise influenced the
   41245   calculation. The <code title=attr-output-for><a href=#attr-output-for>for</a></code> attribute,
   41246   if specified, must contain a string consisting of an <a href=#unordered-set-of-unique-space-separated-tokens>unordered
   41247   set of unique space-separated tokens</a>, each of which must have
   41248   the value of an ID of an element in the same
   41249   <code><a href=#document>Document</a></code>.</p>
   41250 
   41251   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   41252   explicitly associate the <code><a href=#the-output-element>output</a></code> element with its
   41253   <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
   41254   attribute represents the element's name.</p>
   41255 
   41256   <div class=impl>
   41257 
   41258   <p>The element has a <dfn id=concept-output-mode title=concept-output-mode>value mode
   41259   flag</dfn> which is either <i title=concept-output-mode-value>value</i> or <i title=concept-output-mode-default>default</i>. Initially, the
   41260   <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> must be set
   41261   to <i title=concept-output-mode-default>default</i>.</p>
   41262 
   41263   <p>The element also has a <dfn id=concept-output-defaultvalue title=concept-output-defaultValue>default value</dfn>. Initially,
   41264   the <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>
   41265   must be the empty string.</p>
   41266 
   41267   <p>When the <a href=#concept-output-mode title=concept-output-mode>value mode flag</a>
   41268   is in mode <i title=concept-output-mode-default>default</i>, the
   41269   contents of the element represent both the value of the element and
   41270   its <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default
   41271   value</a>. When the <a href=#concept-output-mode title=concept-output-mode>value mode
   41272   flag</a> is in mode <i title=concept-output-mode-value>value</i>, the contents of the
   41273   element represent the value of the element only, and the <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> is only
   41274   accessible using the <code title=dom-output-defaultValue><a href=#dom-output-defaultvalue>defaultValue</a></code> IDL
   41275   attribute.</p>
   41276 
   41277   <p>Whenever the element's descendants are changed in any way, if the
   41278   <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> is in mode
   41279   <i title=concept-output-mode-default>default</i>, the element's
   41280   <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> must
   41281   be set to the value of the element's <code><a href=#textcontent>textContent</a></code> IDL
   41282   attribute.</p>
   41283 
   41284   <p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   41285   algorithm</a> for <code><a href=#the-output-element>output</a></code> elements is to set the
   41286   element's <a href=#concept-output-mode title=concept-output-mode>value mode flag</a>
   41287   to <i title=concept-output-mode-default>default</i> and then to
   41288   set the element's <code><a href=#textcontent>textContent</a></code> IDL attribute to the
   41289   value of the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a> (thus
   41290   replacing the element's child nodes).</p>
   41291 
   41292   </div>
   41293 
   41294   <dl class=domintro><dt><var title="">output</var> . <code title=dom-output-value><a href=#dom-output-value>value</a></code> [ = <var title="">value</var> ]</dt>
   41295 
   41296    <dd>
   41297 
   41298     <p>Returns the element's current value.</p>
   41299 
   41300     <p>Can be set, to change the value.</p>
   41301 
   41302    </dd>
   41303 
   41304    <dt><var title="">output</var> . <code title=dom-output-defaultValue><a href=#dom-output-defaultvalue>defaultValue</a></code> [ = <var title="">value</var> ]</dt>
   41305 
   41306    <dd>
   41307 
   41308     <p>Returns the element's current default value.</p>
   41309 
   41310     <p>Can be set, to change the default value.</p>
   41311 
   41312    </dd>
   41313 
   41314    <dt><var title="">output</var> . <code title=dom-output-type><a href=#dom-output-type>type</a></code></dt>
   41315 
   41316    <dd>
   41317 
   41318     <p>Returns the string "<code title="">output</code>".</p>
   41319 
   41320    </dd>
   41321 
   41322   </dl><div class=impl>
   41323 
   41324   <p>The <dfn id=dom-output-value title=dom-output-value><code>value</code></dfn> IDL
   41325   attribute must act like the element's <code><a href=#textcontent>textContent</a></code> IDL
   41326   attribute, except that on setting, in addition, before the child
   41327   nodes are changed, the element's <a href=#concept-output-mode title=concept-output-mode>value mode flag</a> must be set to <i title=concept-output-mode-value>value</i>.</p>
   41328 
   41329   <p>The <dfn id=dom-output-defaultvalue title=dom-output-defaultValue><code>defaultValue</code></dfn> IDL
   41330   attribute, on getting, must return the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>. On
   41331   setting, the attribute must set the element's <a href=#concept-output-defaultvalue title=concept-output-defaultValue>default value</a>, and, if
   41332   the element's <a href=#concept-output-mode title=concept-output-mode>value mode
   41333   flag</a> is in the mode <i title=concept-output-mode-default>default</i>, set the element's
   41334   <code><a href=#textcontent>textContent</a></code> IDL attribute as well.</p>
   41335 
   41336   <p>The <dfn id=dom-output-type title=dom-output-type><code>type</code></dfn>
   41337   attribute must return the string "<code title="">output</code>".</p>
   41338 
   41339   <p>The <dfn id=dom-output-htmlfor title=dom-output-htmlFor><code>htmlFor</code></dfn>
   41340   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-output-for><a href=#attr-output-for>for</a></code> content attribute.</p>
   41341 
   41342   <p>The <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code>, <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
   41343   attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   41344   methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
   41345   <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
   41346   of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> and <code title=dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes are part of the
   41347   element's forms API.</p>
   41348 
   41349   <p><strong>Constraint validation</strong>: <code><a href=#the-output-element>output</a></code>
   41350   elements are always <a href=#barred-from-constraint-validation>barred from constraint
   41351   validation</a>.</p>
   41352 
   41353   </div>
   41354 
   41355   <div class=example>
   41356 
   41357    <p>A simple calculator could use <code><a href=#the-output-element>output</a></code> for its
   41358    display of calculated results:</p>
   41359 
   41360    <pre>&lt;form onsubmit="return false"&gt;
   41361  &lt;input name=a type=number step=any&gt; +
   41362  &lt;input name=b type=number step=any&gt; =
   41363  &lt;output onforminput="value = a.valueAsNumber + b.valueAsNumber"&gt;&lt;/output&gt;
   41364 &lt;/form&gt;</pre>
   41365 
   41366   </div>
   41367 
   41368 
   41369 
   41370   <h4 id=the-progress-element><span class=secno>4.10.16 </span>The <dfn><code>progress</code></dfn> element</h4>
   41371 
   41372   <dl class=element><dt>Categories</dt>
   41373    <dd><a href=#flow-content>Flow content</a>.</dd>
   41374    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   41375    <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   41376    <dt>Contexts in which this element may be used:</dt>
   41377    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   41378    <dt>Content model:</dt>
   41379    <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
   41380    <dt>Content attributes:</dt>
   41381    <dd><a href=#global-attributes>Global attributes</a></dd>
   41382    <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
   41383    <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
   41384    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   41385    <dt>DOM interface:</dt>
   41386    <dd>
   41387 <pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   41388            attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
   41389            attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
   41390   readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
   41391   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   41392   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   41393 };</pre>
   41394    </dd>
   41395   </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
   41396   completion progress of a task. The progress is either indeterminate,
   41397   indicating that progress is being made but that it is not clear how
   41398   much more work remains to be done before the task is complete
   41399   (e.g. because the task is waiting for a remote host to respond), or
   41400   the progress is a number in the range zero to a maximum, giving the
   41401   fraction of work that has so far been completed.</p>
   41402 
   41403   <p>There are two attributes that determine the current task
   41404   completion represented by the element.</p>
   41405 
   41406   <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
   41407   attribute specifies how much of the task has been completed, and the
   41408   <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
   41409   specifies how much work the task requires in total. The units are
   41410   arbitrary and not specified.</p>
   41411 
   41412   <p>Authors are encouraged to also include the current value and the
   41413   maximum value inline as text inside the element, so that the
   41414   progress is made available to users of legacy user agents.</p>
   41415 
   41416   <div class=example>
   41417    <p>Here is a snippet of a Web application that shows the progress
   41418    of some automated task:</p>
   41419    <pre>&lt;section&gt;
   41420  &lt;h2&gt;Task Progress&lt;/h2&gt;
   41421  &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
   41422  &lt;script&gt;
   41423   var progressBar = document.getElementById('p');
   41424   function updateProgress(newValue) {
   41425     progressBar.value = newValue;
   41426     progressBar.getElementsByTagName('span')[0].textContent = newValue;
   41427   }
   41428  &lt;/script&gt;
   41429 &lt;/section&gt;</pre>
   41430    <p>(The <code>updateProgress()</code> method in this example would
   41431    be called by some other code on the page to update the actual
   41432    progress bar as the task progressed.)</p>
   41433   </div>
   41434 
   41435   <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
   41436   have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
   41437   floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
   41438   have a value equal to or greater than zero, and less than or equal
   41439   to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
   41440   attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
   41441   have a value greater than zero.</p>
   41442 
   41443   <p class=note>The <code><a href=#the-progress-element>progress</a></code> element is the wrong
   41444   element to use for something that is just a gauge, as opposed to
   41445   task progress. For instance, indicating disk space usage using
   41446   <code><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the
   41447   <code><a href=#the-meter-element>meter</a></code> element is available for such use cases.</p>
   41448 
   41449   <div class=impl>
   41450 
   41451   <p><strong>User agent requirements</strong>: If the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute is omitted, then
   41452   the progress bar is an indeterminate progress bar. Otherwise, it is
   41453   a determinate progress bar.</p>
   41454 
   41455   <p>If the progress bar is a determinate progress bar and the element
   41456   has a <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, the user
   41457   agent must parse the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
   41458   attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
   41459   point number values</a>. If this does not result in an error, and
   41460   if the parsed value is greater than zero, then the maximum value of
   41461   the progress bar is that value. Otherwise, if the element has no
   41462   <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, or if it has
   41463   one but parsing it resulted in an error, or if the parsed value was
   41464   less than or equal to zero, then the maximum value of the progress
   41465   bar is 1.0.</p>
   41466 
   41467   <p>If the progress bar is a determinate progress bar, user agents
   41468   must parse the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>
   41469   attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
   41470   point number values</a>. If this does not result in an error, and
   41471   if the parsed value is less than the maximum value and greater than
   41472   zero, then the current value of the progress bar is that parsed
   41473   value. Otherwise, if the parsed value was greater than or equal to
   41474   the maximum value, then the current value of the progress bar is the
   41475   maximum value of the progress bar. Otherwise, if parsing the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute's value resulted
   41476   in an error, or a number less than or equal to zero, then the
   41477   current value of the progress bar is zero.</p>
   41478 
   41479   <p><strong>UA requirements for showing the progress bar</strong>:
   41480   When representing a <code><a href=#the-progress-element>progress</a></code> element to the user, the
   41481   UA should indicate whether it is a determinate or indeterminate
   41482   progress bar, and in the former case, should indicate the relative
   41483   position of the current value relative to the maximum value.</p>
   41484 
   41485   <p>The <dfn id=dom-progress-max title=dom-progress-max><code>max</code></dfn> and <dfn id=dom-progress-value title=dom-progress-value><code>value</code></dfn> IDL attributes
   41486   must <a href=#reflect>reflect</a> the respective content attributes of the
   41487   same name. When the relevant content attributes are absent, the IDL
   41488   attributes must return zero.</p>
   41489 
   41490   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   41491   explicitly associate the <code><a href=#the-progress-element>progress</a></code> element with its
   41492   <a href=#form-owner>form owner</a>.</p>
   41493 
   41494   </div>
   41495 
   41496   <dl class=domintro><dt><var title="">progress</var> . <code title=dom-progress-position><a href=#dom-progress-position>position</a></code></dt>
   41497 
   41498    <dd>
   41499 
   41500     <p>For a determinate progress bar (one with known current and
   41501     maximum values), returns the result of dividing the current value
   41502     by the maximum value.</p>
   41503 
   41504     <p>For an indeterminate progress bar, returns &minus;1.</p>
   41505 
   41506   </dl><div class=impl>
   41507 
   41508   <p>If the progress bar is an indeterminate progress bar, then the
   41509   <dfn id=dom-progress-position title=dom-progress-position><code>position</code></dfn> IDL
   41510   attribute must return &minus;1. Otherwise, it must return the result of
   41511   dividing the current value by the maximum value.</p>
   41512 
   41513   <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
   41514   a list of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
   41515   element's forms API.</p>
   41516 
   41517   </div>
   41518 
   41519 
   41520 
   41521   <h4 id=the-meter-element><span class=secno>4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4>
   41522   <!-- Keep this after <progress> and NOT close to <time> -->
   41523 
   41524   <dl class=element><dt>Categories</dt>
   41525    <dd><a href=#flow-content>Flow content</a>.</dd>
   41526    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   41527    <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
   41528    <dt>Contexts in which this element may be used:</dt>
   41529    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   41530    <dt>Content model:</dt>
   41531    <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-meter-element>meter</a></code> element descendants.</dd>
   41532    <dt>Content attributes:</dt>
   41533    <dd><a href=#global-attributes>Global attributes</a></dd>
   41534    <dd><code title=attr-meter-value><a href=#attr-meter-value>value</a></code></dd>
   41535    <dd><code title=attr-meter-min><a href=#attr-meter-min>min</a></code></dd>
   41536    <dd><code title=attr-meter-max><a href=#attr-meter-max>max</a></code></dd>
   41537    <dd><code title=attr-meter-low><a href=#attr-meter-low>low</a></code></dd>
   41538    <dd><code title=attr-meter-high><a href=#attr-meter-high>high</a></code></dd>
   41539    <dd><code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></dd>
   41540    <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
   41541    <dt>DOM interface:</dt>
   41542    <dd>
   41543 <pre class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   41544            attribute float <a href=#dom-meter-value title=dom-meter-value>value</a>;
   41545            attribute float <a href=#dom-meter-min title=dom-meter-min>min</a>;
   41546            attribute float <a href=#dom-meter-max title=dom-meter-max>max</a>;
   41547            attribute float <a href=#dom-meter-low title=dom-meter-low>low</a>;
   41548            attribute float <a href=#dom-meter-high title=dom-meter-high>high</a>;
   41549            attribute float <a href=#dom-meter-optimum title=dom-meter-optimum>optimum</a>;
   41550   readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
   41551   readonly attribute <a href=#nodelist>NodeList</a> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
   41552 };</pre>
   41553    </dd>
   41554   </dl><p>The <code><a href=#the-meter-element>meter</a></code> element <a href=#represents>represents</a> a scalar
   41555   measurement within a known range, or a fractional value; for example
   41556   disk usage, the relevance of a query result, or the fraction of a
   41557   voting population to have selected a particular candidate.</p>
   41558 
   41559   <p>This is also known as a gauge.</p>
   41560 
   41561   <p class=note>The <code><a href=#the-meter-element>meter</a></code> element should not be used to
   41562   indicate progress (as in a progress bar). For that role, HTML
   41563   provides a separate <code><a href=#the-progress-element>progress</a></code> element.</p>
   41564 
   41565   <p class=note>The <code><a href=#the-meter-element>meter</a></code> element also does not
   41566   represent a scalar value of arbitrary range &mdash; for example, it
   41567   would be wrong to use this to report a weight, or height, unless
   41568   there is a known maximum value.</p>
   41569 
   41570   <p>There are six attributes that determine the semantics of the
   41571   gauge represented by the element.</p>
   41572 
   41573   <p>The <dfn id=attr-meter-min title=attr-meter-min><code>min</code></dfn> attribute
   41574   specifies the lower bound of the range, and the <dfn id=attr-meter-max title=attr-meter-max><code>max</code></dfn> attribute specifies
   41575   the upper bound. The <dfn id=attr-meter-value title=attr-meter-value><code>value</code></dfn> attribute
   41576   specifies the value to have the gauge indicate as the "measured"
   41577   value.</p>
   41578 
   41579   <p>The other three attributes can be used to segment the gauge's
   41580   range into "low", "medium", and "high" parts, and to indicate which
   41581   part of the gauge is the "optimum" part. The <dfn id=attr-meter-low title=attr-meter-low><code>low</code></dfn> attribute specifies
   41582   the range that is considered to be the "low" part, and the <dfn id=attr-meter-high title=attr-meter-high><code>high</code></dfn> attribute specifies
   41583   the range that is considered to be the "high" part. The <dfn id=attr-meter-optimum title=attr-meter-optimum><code>optimum</code></dfn> attribute
   41584   gives the position that is "optimum"; if that is higher than the
   41585   "high" value  then this indicates that the higher the value, the
   41586   better; if it's lower than the "low" mark then it indicates that
   41587   lower values are better, and naturally if it is in between then it
   41588   indicates that neither high nor low values are good.</p>
   41589 
   41590   <p><span class=impl><strong>Authoring
   41591   requirements</strong>:</span> The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute must be
   41592   specified. The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes, when present,
   41593   must have values that are <a href=#valid-floating-point-number title="valid floating point
   41594   number">valid floating point numbers</a>.</p>
   41595 
   41596   <p>In addition, the attributes' values are further constrained:</p>
   41597 
   41598   <p>Let <var title="">value</var> be the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute's number.</p>
   41599 
   41600   <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute
   41601   attribute is specified, then let <var title="">minimum</var> be that
   41602   attribute's value; otherwise, let it be zero.</p>
   41603 
   41604   <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute
   41605   attribute is specified, then let <var title="">maximum</var> be that
   41606   attribute's value; otherwise, let it be 1.0.</p>
   41607 
   41608   <p>The following inequalities must hold, as applicable:</p>
   41609 
   41610   <ul class=brief><li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
   41611    <li><var title="">minimum</var> &le; <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> is specified)</li>
   41612    <li><var title="">minimum</var> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> is specified)</li>
   41613    <li><var title="">minimum</var> &le; <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> is specified)</li>
   41614    <li><code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> (if both <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> and <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> are specified)</li>
   41615   </ul><p class=note>If no minimum or maximum is specified, then the
   41616   range is assumed to be 0..1, and the value thus has to be within
   41617   that range.</p>
   41618 
   41619   <p>Authors are encouraged to include a textual representation of the
   41620   gauge's state in the element's contents, for users of user agents
   41621   that do not support the <code><a href=#the-meter-element>meter</a></code> element.</p>
   41622 
   41623   <div class=example>
   41624 
   41625    <p>The following examples show three gauges that would all be
   41626    three-quarters full:</p>
   41627 
   41628    <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
   41629 Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
   41630 Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>
   41631 
   41632    <p>The following example is incorrect use of the element, because
   41633    it doesn't give a range (and since the default maximum is 1, both
   41634    of the gauges would end up looking maxed out):</p>
   41635 
   41636    <pre class=bad>&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
   41637 and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>
   41638 
   41639    <p>Instead, one would either not include the meter element, or use
   41640    the meter element with a defined range to give the dimensions in
   41641    context compared to other pies:</p>
   41642 
   41643    <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
   41644 2cm.&lt;/p&gt;
   41645 &lt;dl&gt;
   41646  &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
   41647  &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
   41648 &lt;/dl&gt;</pre>
   41649 
   41650   </div>
   41651 
   41652   <p>There is no explicit way to specify units in the
   41653   <code><a href=#the-meter-element>meter</a></code> element, but the units may be specified in the
   41654   <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in free-form text.</p>
   41655 
   41656   <div class=example>
   41657 
   41658    <p>The example above could be extended to mention the units:</p>
   41659 
   41660    <pre>&lt;dl&gt;
   41661  &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
   41662  &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
   41663 &lt;/dl&gt;</pre>
   41664 
   41665   </div>
   41666 
   41667   <div class=impl>
   41668 
   41669   <p><strong>User agent requirements</strong>: User agents must parse
   41670   the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes using the
   41671   <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a>.</p>
   41672 
   41673   <p>User agents must then use all these numbers to obtain values for
   41674   six points on the gauge, as follows. (The order in which these are
   41675   evaluated is important, as some of the values refer to earlier
   41676   ones.)</p>
   41677 
   41678   <dl><dt>The minimum value</dt>
   41679 
   41680    <dd>
   41681     <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute is
   41682     specified and a value could be parsed out of it, then the minimum
   41683     value is that value. Otherwise, the minimum value is zero.</p>
   41684    </dd>
   41685 
   41686    <dt>The maximum value</dt>
   41687 
   41688    <dd>
   41689 
   41690     <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute is
   41691     specified and a value could be parsed out of it, the maximum value
   41692     is that value. Otherwise, the maximum value is 1.0.</p>
   41693 
   41694     <p>If the maximum value would be less than the minimum value, then
   41695     the maximum value is actually the same as the minimum value.</p>
   41696 
   41697    </dd>
   41698 
   41699    <dt>The actual value</dt>
   41700 
   41701    <dd>
   41702 
   41703     <p>If the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute is
   41704     specified and a value could be parsed out of it, then that value
   41705     is the actual value. Otherwise, the actual value is zero.</p>
   41706 
   41707     <p>If the actual value would be less than the minimum value, then
   41708     the actual value is actually the same as the minimum value.</p>
   41709 
   41710     <p>If, on the other hand, the actual value would be greater than
   41711     the maximum value, then the actual value is the maximum value.</p>
   41712 
   41713    </dd>
   41714 
   41715    <dt>The low boundary</dt>
   41716 
   41717    <dd>
   41718 
   41719     <p>If the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute is
   41720     specified and a value could be parsed out of it, then the low
   41721     boundary is that value. Otherwise, the low boundary is the same as
   41722     the minimum value.</p>
   41723 
   41724     <p>If the low boundary is then less than the minimum value, then
   41725     the low boundary is actually the same as the minimum
   41726     value. Similarly, if the low boundary is greater than the maximum
   41727     value, then it is actually the maximum value instead.</p>
   41728 
   41729    </dd>
   41730 
   41731    <dt>The high boundary</dt>
   41732 
   41733    <dd>
   41734 
   41735     <p>If the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute is
   41736     specified and a value could be parsed out of it, then the high
   41737     boundary is that value. Otherwise, the high boundary is the same
   41738     as the maximum value.</p>
   41739 
   41740     <p>If the high boundary is then less than the low boundary, then
   41741     the high boundary is actually the same as the low
   41742     boundary. Similarly, if the high boundary is greater than the
   41743     maximum value, then it is actually the maximum value instead.</p>
   41744 
   41745    </dd>
   41746 
   41747    <dt>The optimum point</dt>
   41748 
   41749    <dd>
   41750 
   41751     <p>If the <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>
   41752     attribute is specified and a value could be parsed out of it, then
   41753     the optimum point is that value. Otherwise, the optimum point is
   41754     the midpoint between the minimum value and the maximum value.</p>
   41755 
   41756     <p>If the optimum point is then less than the minimum value, then
   41757     the optimum point is actually the same as the minimum
   41758     value. Similarly, if the optimum point is greater than the maximum
   41759     value, then it is actually the maximum value instead.</p>
   41760 
   41761    </dd>
   41762 
   41763   </dl><p>All of which will result in the following inequalities all being
   41764   true:</p>
   41765 
   41766   <ul class=brief><li>minimum value &le; actual value &le; maximum value</li>
   41767    <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
   41768    <li>minimum value &le; optimum point &le; maximum value</li>
   41769   </ul><!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] --><p><strong>UA requirements for regions of the gauge</strong>: If the
   41770   optimum point is equal to the low boundary or the high boundary, or
   41771   anywhere in between them, then the region between the low and high
   41772   boundaries of the gauge must be treated as the optimum region, and
   41773   the low and high parts, if any, must be treated as
   41774   suboptimal. Otherwise, if the optimum point is less than the low
   41775   boundary, then the region between the minimum value and the low
   41776   boundary must be treated as the optimum region, the region between
   41777   the low boundary and the high boundary must be treated as a
   41778   suboptimal region, and the region between the high boundary and the
   41779   maximum value must be treated as an even less good region. Finally,
   41780   if the optimum point is higher than the high boundary, then the
   41781   situation is reversed; the region between the high boundary and the
   41782   maximum value must be treated as the optimum region, the region
   41783   between the high boundary and the low boundary must be treated as a
   41784   suboptimal region, and the remaining region between the low boundary
   41785   and the minimum value must be treated as an even less good
   41786   region.</p>
   41787 
   41788   <p><strong>UA requirements for showing the gauge</strong>: When
   41789   representing a <code><a href=#the-meter-element>meter</a></code> element to the user, the UA should
   41790   indicate the relative position of the actual value to the minimum
   41791   and maximum values, and the relationship between the actual value
   41792   and the three regions of the gauge.</p>
   41793 
   41794   </div>
   41795 
   41796   <div class=example>
   41797    <p>The following markup:</p>
   41798    <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
   41799 &lt;menu type="toolbar"&gt;
   41800  &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
   41801 &lt;/menu&gt;
   41802 &lt;ul&gt;
   41803  &lt;li&gt;
   41804   &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
   41805      &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
   41806   &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
   41807   &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
   41808  &lt;/li&gt;
   41809  &lt;li&gt;
   41810   &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
   41811      &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
   41812   &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
   41813   &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
   41814  &lt;/li&gt;
   41815  &lt;li&gt;
   41816   &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
   41817      &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
   41818   &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
   41819  &lt;/li&gt;
   41820 &lt;/ul&gt;</pre>
   41821    <p>Might be rendered as follows:</p>
   41822    <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
   41823   </div>
   41824 
   41825   <p>User agents <span class=impl>may</span> combine the value of
   41826   the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute and the other
   41827   attributes to provide context-sensitive help or inline text
   41828   detailing the actual values.</p>
   41829 
   41830   <div class=example>
   41831    <p>For example, the following snippet:</p>
   41832    <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
   41833    <p>...might cause the user agent to display a gauge with a tooltip
   41834    saying "Value: 23.2 out of 60." on one line and "seconds" on a
   41835    second line.</p>
   41836   </div>
   41837 
   41838   <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
   41839   explicitly associate the <code><a href=#the-meter-element>meter</a></code> element with its
   41840   <a href=#form-owner>form owner</a>.</p>
   41841 
   41842   <div class=impl>
   41843 
   41844   <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
   41845   must <a href=#reflect>reflect</a> the respective content attributes of the
   41846   same name. When the relevant content attributes are absent, the IDL
   41847   attributes must return zero.</p>
   41848 
   41849   <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
   41850   a list of the element's <code><a href=#the-label-element>label</a></code>s. The <code title=dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute is part of the
   41851   element's forms API.</p>
   41852 
   41853   </div>
   41854 
   41855   <div class=example>
   41856 
   41857    <p>The following example shows how a gauge could fall back to
   41858    localized or pretty-printed text.</p>
   41859 
   41860    <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&thinsp;261&thinsp;928 bytes used
   41861 out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
   41862 
   41863   </div>
   41864 
   41865 
   41866 
   41867 
   41868   <h4 id=association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</h4>
   41869 
   41870   <p>A <a href=#form-associated-element>form-associated element</a> can have a relationship
   41871   with a <code><a href=#the-form-element>form</a></code> element, which is called the element's
   41872   <dfn id=form-owner>form owner</dfn>. If a <a href=#form-associated-element>form-associated element</a> is
   41873   not associated with a <code><a href=#the-form-element>form</a></code> element, its <a href=#form-owner>form
   41874   owner</a> is said to be null.</p>
   41875 
   41876   <p>A <a href=#form-associated-element>form-associated element</a> is, by default, associated
   41877   with its nearest ancestor <code><a href=#the-form-element>form</a></code> element<span class=impl> (as described below)</span>, but may have a <dfn id=attr-fae-form title=attr-fae-form><code>form</code></dfn> attribute specified to
   41878   override this.</p>
   41879 
   41880   <p>If a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute specified, then its
   41881   value must be the ID of a <code><a href=#the-form-element>form</a></code> element in the element's
   41882   owner <code><a href=#document>Document</a></code>.</p>
   41883 
   41884   <div class=impl>
   41885 
   41886   <p>When a <a href=#form-associated-element>form-associated element</a> is created, its
   41887   <a href=#form-owner>form owner</a> must be initialized to null (no owner).</p>
   41888 
   41889   <p>When a <a href=#form-associated-element>form-associated element</a> is to be <dfn id=concept-form-association title=concept-form-association>associated</dfn> with a form, its
   41890   <a href=#form-owner>form owner</a> must be set to that form.</p>
   41891 
   41892   <p>When a <a href=#form-associated-element>form-associated element</a>'s ancestor chain
   41893   changes, e.g. because it or one of its ancestors was <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted</a> or <a href=#remove-an-element-from-a-document title="remove an element from a document">removed</a> from a
   41894   <code><a href=#document>Document</a></code>, then the user agent must <a href=#reset-the-form-owner>reset the form
   41895   owner</a> of that element.</p>
   41896 
   41897   <p>When a <a href=#form-associated-element>form-associated element</a>'s <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is added, removed, or
   41898   has its value changed, then the user agent must <a href=#reset-the-form-owner>reset the form
   41899   owner</a> of that element.</p>
   41900 
   41901   <p>When a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute and the ID of any of the
   41902   elements in the <code><a href=#document>Document</a></code> changes, then the user agent
   41903   must <a href=#reset-the-form-owner>reset the form owner</a> of that <a href=#form-associated-element>form-associated
   41904   element</a>.</p>
   41905 
   41906   <p>When a <a href=#form-associated-element>form-associated element</a> has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute and an element with an
   41907   ID is <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted
   41908   into</a> or <a href=#remove-an-element-from-a-document title="remove an element from a
   41909   document">removed from</a> the <code><a href=#document>Document</a></code>, then the
   41910   user agent must <a href=#reset-the-form-owner>reset the form owner</a> of that
   41911   <a href=#form-associated-element>form-associated element</a>.</p>
   41912 
   41913   <p>When the user agent is to <dfn id=reset-the-form-owner>reset the form owner</dfn> of a
   41914   <a href=#form-associated-element>form-associated element</a>, it must run the following
   41915   steps:</p>
   41916 
   41917   <ol><li><p>If the element's <a href=#form-owner>form owner</a> is not null, and
   41918    the element's <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content
   41919    attribute is not present, and the element's <a href=#form-owner>form owner</a>
   41920    is its nearest <code><a href=#the-form-element>form</a></code> element ancestor after the change
   41921    to the ancestor chain, then do nothing, and abort these
   41922    steps.</li>
   41923 
   41924    <li><p>Let the element's <a href=#form-owner>form owner</a> be null.</li>
   41925 
   41926    <li>
   41927 
   41928     <p>If the element has a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>
   41929     content attribute, then run these substeps:</p>
   41930 
   41931     <ol><!-- note that this ignores the name="" attribute and is
   41932      unaffected by quirks mode (it's always case sensitive) --><li><p>If the first element <a href=#in-a-document title="in a Document">in the
   41933      <code>Document</code></a> to have an ID that is <a href=#case-sensitive title=case-sensitive>case-sensitively</a> equal to the
   41934      element's <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> content
   41935      attribute's value is a <code><a href=#the-form-element>form</a></code> element, then <a href=#concept-form-association title=concept-form-association>associate</a> the
   41936      <a href=#form-associated-element>form-associated element</a> with that <code><a href=#the-form-element>form</a></code>
   41937      element.</li>
   41938 
   41939      <li><p>Abort the "reset the form owner" steps.</li>
   41940 
   41941     </ol></li>
   41942 
   41943    <li><p>Otherwise, if the <a href=#form-associated-element>form-associated element</a> in
   41944    question has an ancestor <code><a href=#the-form-element>form</a></code> element, then <a href=#concept-form-association title=concept-form-association>associate</a> the
   41945    <a href=#form-associated-element>form-associated element</a> with the nearest such ancestor
   41946    <code><a href=#the-form-element>form</a></code> element.</li>
   41947 
   41948    <li><p>Otherwise, the element is left unassociated.</li>
   41949 
   41950   </ol><div class=example>
   41951 
   41952    <p>In the following non-conforming snippet:</p>
   41953 
   41954    <pre class=bad>...
   41955  &lt;form id="a"&gt;
   41956   &lt;div id="b"&gt;&lt;/div&gt;
   41957  &lt;/form&gt;
   41958  &lt;script&gt;
   41959   document.getElementById('b').innerHTML =
   41960      '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;form id="c"&gt;&lt;input id="d"&gt;&lt;/table&gt;' +
   41961      '&lt;input id="e"&gt;';
   41962  &lt;/script&gt;
   41963 ...</pre>
   41964 
   41965    <p>The <a href=#form-owner>form owner</a> of "d" would be the inner nested
   41966    form "c", while the <a href=#form-owner>form owner</a> of "e" would be the
   41967    outer form "a".</p>
   41968 
   41969    <p>This is because despite the association of "e" with "c" in the
   41970    <a href=#html-parser>HTML parser</a>, when the <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> algorithm moves the nodes
   41971    from the temporary document to the "b" element, the nodes see their
   41972    ancestor chain change, and thus all the "magic" associations done
   41973    by the parser are reset to normal ancestor associations.</p>
   41974 
   41975    <p>This example is a non-conforming document, though, as it is a
   41976    violation of the content models to nest <code><a href=#the-form-element>form</a></code>
   41977    elements.</p>
   41978 
   41979   </div>
   41980 
   41981   </div>
   41982 
   41983   <dl class=domintro><dt><var title="">element</var> . <code title=dom-fae-form><a href=#dom-fae-form>form</a></code></dt>
   41984 
   41985    <dd>
   41986 
   41987     <p>Returns the element's <a href=#form-owner>form owner</a>.</p>
   41988 
   41989     <p>Returns null if there isn't one.</p>
   41990 
   41991    </dd>
   41992 
   41993   </dl><div class=impl>
   41994 
   41995   <p><a href=#form-associated-element title="form-associated element">Form-associated
   41996   elements</a> have a <dfn id=dom-fae-form title=dom-fae-form><code>form</code></dfn> IDL attribute, which,
   41997   on getting, must return the element's <a href=#form-owner>form owner</a>, or
   41998   null if there isn't one.</p>
   41999 
   42000   </div>
   42001 
   42002 
   42003 
   42004   <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19 </span><dfn>Attributes common to form controls</dfn></h4>
   42005 
   42006   <h5 id=naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</h5>
   42007 
   42008   <p>The <dfn id=attr-fe-name title=attr-fe-name><code>name</code></dfn> content
   42009   attribute gives the name of the form control, as used in <a href=#form-submission>form
   42010   submission</a> and in the <code><a href=#the-form-element>form</a></code> element's <code title=dom-form-elements><a href=#dom-form-elements>elements</a></code> object. If the attribute
   42011   is specified, its value must not be the empty string.</p>
   42012 
   42013   <div class=impl>
   42014 
   42015   <p>The <dfn id=dom-fe-name title=dom-fe-name><code>name</code></dfn> IDL
   42016   attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> content attribute.</p>
   42017 
   42018   </div>
   42019 
   42020 
   42021   <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</h5>
   42022 
   42023   <p>The <dfn id=attr-fe-disabled title=attr-fe-disabled><code>disabled</code></dfn>
   42024   content attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
   42025 
   42026   <p>A form control is <dfn id=concept-fe-disabled title=concept-fe-disabled>disabled</dfn>
   42027   if its <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is
   42028   set, or if it is a descendant of a <code><a href=#the-fieldset-element>fieldset</a></code> element
   42029   whose <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute
   42030   is set and is <em>not</em> a descendant of that
   42031   <code><a href=#the-fieldset-element>fieldset</a></code> element's first <code><a href=#the-legend-element>legend</a></code> element
   42032   child, if any.</p>
   42033 
   42034   <div class=impl>
   42035 
   42036   <p>A form control that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> must prevent any <code title=event-click><a href=#event-click>click</a></code> events that are <a href=#queue-a-task title="queue
   42037   a task">queued</a> on the <a href=#user-interaction-task-source>user interaction task
   42038   source</a> from being dispatched on the element.</p>
   42039 
   42040   <p><strong>Constraint validation</strong>: If an element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, it is <a href=#barred-from-constraint-validation>barred from
   42041   constraint validation</a>.</p>
   42042 
   42043   <p>The <dfn id=dom-fe-disabled title=dom-fe-disabled><code>disabled</code></dfn> IDL
   42044   attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> content attribute.</p>
   42045 
   42046   </div>
   42047 
   42048 
   42049 
   42050   <div class=impl>
   42051 
   42052   <h5 id="a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</h5>
   42053 
   42054   <p>Form controls have a <dfn id=concept-fe-value title=concept-fe-value>value</dfn>
   42055   and a <dfn id=concept-fe-checked title=concept-fe-checked>checkedness</dfn>. (The latter
   42056   is only used by <code><a href=#the-input-element>input</a></code> elements.) These are used to
   42057   describe how the user interacts with the control.</p>
   42058 
   42059   </div>
   42060 
   42061 
   42062 
   42063   <h5 id=autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</h5>
   42064 
   42065   <!-- v2: Apply this to contentEditable elements -->
   42066 
   42067   <p>The <dfn id=attr-fe-autofocus title=attr-fe-autofocus><code>autofocus</code></dfn>
   42068   content attribute allows the user to indicate that a control is to
   42069   be focused as soon as the page is loaded, allowing the user to just
   42070   start typing without having to manually focus the main control.</p>
   42071 
   42072   <p>The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute is
   42073   a <a href=#boolean-attribute>boolean attribute</a>.</p>
   42074 
   42075   <p>There must not be more than one element in the document with the
   42076   <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute
   42077   specified.</p>
   42078 
   42079   <div class=impl>
   42080 
   42081   <p>Whenever an element with the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified is
   42082   <a href=#insert-an-element-into-a-document title="insert an element into a document">inserted into a
   42083   document</a> whose <a href=#browsing-context>browsing context</a> did not have the
   42084   <a href=#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context flag</a> set
   42085   when the <code><a href=#document>Document</a></code> was created, the user agent should
   42086   <a href=#queue-a-task>queue a task</a> that checks to see if the element is
   42087   <a href=#focusable>focusable</a>, and if so, runs the <a href=#focusing-steps>focusing
   42088   steps</a> for that element. User agents may also change the
   42089   scrolling position of the document, or perform some other action
   42090   that brings the element to the user's attention. The <a href=#task-source>task
   42091   source</a> for this task is the <a href=#dom-manipulation-task-source>DOM manipulation task
   42092   source</a>.</p>
   42093 
   42094   <p>User agents may ignore this attribute if the user has indicated
   42095   (for example, by starting to type in a form control) that he does
   42096   not wish focus to be changed.</p>
   42097 
   42098   <p class=note>Focusing the control does not imply that the user
   42099   agent must focus the browser window if it has lost focus.</p>
   42100 
   42101   <p>The <dfn id=dom-fe-autofocus title=dom-fe-autofocus><code>autofocus</code></dfn>
   42102   IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
   42103   same name.</p>
   42104 
   42105   </div>
   42106 
   42107   <div class=example>
   42108    <p>In the following snippet, the text control would be focused when
   42109    the document was loaded.</p>
   42110    <pre>&lt;input maxlength="256" name="q" value="" autofocus&gt;
   42111 &lt;input type="submit" value="Search"&gt;</pre>
   42112   </div>
   42113 
   42114 
   42115   <h5 id=limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</h5>
   42116 
   42117   <p>A <dfn id=attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var> declares a limit on the number of
   42118   characters a user can input.</p>
   42119 
   42120   <p>If an element has its <a href=#attr-fe-maxlength title=attr-fe-maxlength>form
   42121   control <code title="">maxlength</code> attribute</a> specified,
   42122   the attribute's value must be a <a href=#valid-non-negative-integer>valid non-negative
   42123   integer</a>. If the attribute is specified and applying the
   42124   <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value
   42125   results in a number, then that number is the element's <dfn id=maximum-allowed-value-length>maximum
   42126   allowed value length</dfn>. If the attribute is omitted or parsing
   42127   its value results in an error, then there is no <a href=#maximum-allowed-value-length>maximum
   42128   allowed value length</a>.</p>
   42129 
   42130   <div class=impl>
   42131 
   42132   <p><strong>Constraint validation</strong>: If an element has a
   42133   <a href=#maximum-allowed-value-length>maximum allowed value length</a>, and its <var title="">dirty value flag</var> is true, and the <a href=#code-point-length>code-point
   42134   length</a> of the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is greater than the element's
   42135   <a href=#maximum-allowed-value-length>maximum allowed value length</a>, then the element is
   42136   <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p>
   42137 
   42138   <p>User agents may prevent the user from causing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to be set to a value whose
   42139   <a href=#code-point-length>code-point length</a> is greater than the element's
   42140   <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
   42141 
   42142   </div>
   42143 
   42144 
   42145 
   42146   <h5 id=form-submission-0><span class=secno>4.10.19.6 </span>Form submission</h5>
   42147 
   42148   <p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both
   42149   on <code><a href=#the-form-element>form</a></code> elements and on <a href=#concept-submit-button title=concept-submit-button>submit buttons</a> (elements that
   42150   represent buttons that submit forms, e.g. an <code><a href=#the-input-element>input</a></code>
   42151   element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is
   42152   in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>
   42153   state).
   42154 
   42155   <p>The <a href=#attributes-for-form-submission>attributes for form submission</a> that may be
   42156   specified on <code><a href=#the-form-element>form</a></code> elements are <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
   42157 
   42158   <p>The corresponding <a href=#attributes-for-form-submission>attributes for form submission</a>
   42159   that may be specified on <a href=#concept-submit-button title=concept-submit-button>submit
   42160   buttons</a> are <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>. When omitted, they
   42161   default to the values given on the corresponding attributes on the
   42162   <code><a href=#the-form-element>form</a></code> element.</p>
   42163 
   42164   <hr><p>The <dfn id=attr-fs-action title=attr-fs-action><code>action</code></dfn> and
   42165   <dfn id=attr-fs-formaction title=attr-fs-formaction><code>formaction</code></dfn>
   42166   content attributes, if specified, must have a value that is a
   42167   <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</a>.</p>
   42168 
   42169   <p>The <dfn id=concept-fs-action title=concept-fs-action>action</dfn> of an element is
   42170   the value of the element's <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code> attribute, if the
   42171   element is a <a href=#concept-submit-button title=concept-submit-button>submit
   42172   button</a> and has such an attribute, or the value of its
   42173   <a href=#form-owner>form owner</a>'s <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>
   42174   attribute, if <em>it</em> has one, or else the empty string.</p>
   42175 
   42176   <hr><p>The <dfn id=attr-fs-method title=attr-fs-method><code>method</code></dfn> and
   42177   <dfn id=attr-fs-formmethod title=attr-fs-formmethod><code>formmethod</code></dfn>
   42178   content attributes are <a href=#enumerated-attribute title="enumerated attribute">enumerated
   42179   attributes</a> with the following keywords and states:</p>
   42180 
   42181   <ul><li>The keyword <dfn id=attr-fs-method-get-keyword title=attr-fs-method-GET-keyword><code>GET</code></dfn>, mapping
   42182    to the state <dfn id=attr-fs-method-get title=attr-fs-method-GET>GET</dfn>, indicating
   42183    the HTTP GET method.</li>
   42184 
   42185    <li>The keyword <dfn id=attr-fs-method-post-keyword title=attr-fs-method-POST-keyword><code>POST</code></dfn>, mapping
   42186    to the state <dfn id=attr-fs-method-post title=attr-fs-method-POST>POST</dfn>, indicating
   42187    the HTTP POST method.</li>
   42188 
   42189    <li>The keyword <dfn id=attr-fs-method-put-keyword title=attr-fs-method-PUT-keyword><code>PUT</code></dfn>, mapping
   42190    to the state <dfn id=attr-fs-method-put title=attr-fs-method-PUT>PUT</dfn>, indicating
   42191    the HTTP PUT method.</li>
   42192 
   42193    <li>The keyword <dfn id=attr-fs-method-delete-keyword title=attr-fs-method-DELETE-keyword><code>DELETE</code></dfn>, mapping
   42194    to the state <dfn id=attr-fs-method-delete title=attr-fs-method-DELETE>DELETE</dfn>, indicating
   42195    the HTTP DELETE method.</li>
   42196 
   42197   </ul><p>The <i>missing value default</i> for these attributes is the
   42198   <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a> state.</p>
   42199 
   42200   <p>The <dfn id=concept-fs-method title=concept-fs-method>method</dfn> of an element is
   42201   one of those four states. If the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and has a <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code> attribute, then the
   42202   element's <a href=#concept-fs-method title=concept-fs-method>method</a> is that
   42203   attribute's state; otherwise, it is the <a href=#form-owner>form owner</a>'s
   42204   <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute's state.</p>
   42205 
   42206   <hr><p>The <dfn id=attr-fs-enctype title=attr-fs-enctype><code>enctype</code></dfn> and
   42207   <dfn id=attr-fs-formenctype title=attr-fs-formenctype><code>formenctype</code></dfn>
   42208   content attributes are <a href=#enumerated-attribute title="enumerated attribute">enumerated
   42209   attributes</a> with the following keywords and states:</p>
   42210 
   42211   <ul><li>The "<dfn id=attr-fs-enctype-urlencoded title=attr-fs-enctype-urlencoded><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
   42212    <li>The "<dfn id=attr-fs-enctype-formdata title=attr-fs-enctype-formdata><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
   42213    <li>The "<dfn id=attr-fs-enctype-text title=attr-fs-enctype-text><code>text/plain</code></dfn>" keyword and corresponding state.</li>
   42214   </ul><p>The <i>missing value default</i> for these attributes is the
   42215   <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
   42216   state.</p>
   42217 
   42218   <p>The <dfn id=concept-fs-enctype title=concept-fs-enctype>enctype</dfn> of an element
   42219   is one of those three states. If the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and has a <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code> attribute, then the
   42220   element's <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a> is that
   42221   attribute's state; otherwise, it is the <a href=#form-owner>form owner</a>'s
   42222   <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code> attribute's state.</p>
   42223 
   42224   <hr><p>The <dfn id=attr-fs-target title=attr-fs-target><code>target</code></dfn> and
   42225   <dfn id=attr-fs-formtarget title=attr-fs-formtarget><code>formtarget</code></dfn>
   42226   content attributes, if specified, must have values that are <a href=#valid-browsing-context-name-or-keyword title="valid browsing context name or keyword">valid browsing
   42227   context names or keywords</a>.</p>
   42228 
   42229   <p>The <dfn id=concept-fs-target title=concept-fs-target>target</dfn> of an element is
   42230   the value of the element's <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attribute, if the
   42231   element is a <a href=#concept-submit-button title=concept-submit-button>submit
   42232   button</a> and has such an attribute; or the value of its
   42233   <a href=#form-owner>form owner</a>'s <code title=attr-fs-target><a href=#attr-fs-target>target</a></code>
   42234   attribute, if <em>it</em> has such an attribute; or, if one of the
   42235   child nodes of <a href=#the-head-element>the <code>head</code> element</a> is a
   42236   <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, then the value of
   42237   the <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute of the
   42238   first such <code><a href=#the-base-element>base</a></code> element; or, if there is no such
   42239   element, the empty string.</p> <!-- c.f. hyperlink following -->
   42240 
   42241   <hr><p>The <dfn id=attr-fs-novalidate title=attr-fs-novalidate><code>novalidate</code></dfn>
   42242   and <dfn id=attr-fs-formnovalidate title=attr-fs-formnovalidate><code>formnovalidate</code></dfn>
   42243   content attributes are <a href=#boolean-attribute title="boolean attribute">boolean
   42244   attributes</a>. If present, they indicate that the form is not to
   42245   be validated during submission.</p>
   42246 
   42247   <p>The <dfn id=concept-fs-novalidate title=concept-fs-novalidate>no-validate state</dfn> of
   42248   an element is true if the element is a <a href=#concept-submit-button title=concept-submit-button>submit button</a> and the element's
   42249   <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute
   42250   is present, or if the element's <a href=#form-owner>form owner</a>'s <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code> attribute is present,
   42251   and false otherwise.</p>
   42252 
   42253   <div class=example>
   42254 
   42255    <p>This attribute is useful to include "save" buttons on forms that
   42256    have validation constraints, to allow users to save their progress
   42257    even though they haven't fully entered the data in the form. The
   42258    following example shows a simple form that has two required
   42259    fields. There are three buttons: one to submit the form, which
   42260    requires both fields to be filled in; one to save the form so that
   42261    the user can come back and fill it in later; and one to cancel the
   42262    form altogether.</p>
   42263 
   42264    <pre>&lt;form action="editor.cgi" method="post"&gt;
   42265  &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
   42266  &lt;p&gt;&lt;label&gt;Essay: &lt;textarea name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
   42267  &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
   42268  &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
   42269  &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
   42270 &lt;/form&gt;</pre>
   42271 
   42272   </div>
   42273 
   42274   <div class=impl>
   42275 
   42276   <hr><p>The <dfn id=dom-fs-action title=dom-fs-action><code>action</code></dfn>, <dfn id=dom-fs-method title=dom-fs-method><code>method</code></dfn>, <dfn id=dom-fs-enctype title=dom-fs-enctype><code>enctype</code></dfn>, and <dfn id=dom-fs-target title=dom-fs-target><code>target</code></dfn> IDL attributes must
   42277   <a href=#reflect>reflect</a> the respective content attributes of the same
   42278   name. The <dfn id=dom-fs-novalidate title=dom-fs-noValidate><code>noValidate</code></dfn> IDL
   42279   attribute must reflect the <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code> content attribute.  The
   42280   <dfn id=dom-fs-formaction title=dom-fs-formAction><code>formAction</code></dfn> IDL
   42281   attribute must reflect the <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code> content attribute. The
   42282   <dfn id=dom-fs-formenctype title=dom-fs-formEnctype><code>formEnctype</code></dfn> IDL
   42283   attribute must reflect the <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code> content attribute.
   42284   The <dfn id=dom-fs-formmethod title=dom-fs-formMethod><code>formMethod</code></dfn> IDL
   42285   attribute must reflect the <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code> content attribute. The
   42286   <dfn id=dom-fs-formnovalidate title=dom-fs-formNoValidate><code>formNoValidate</code></dfn>
   42287   IDL attribute must reflect the <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code> content
   42288   attribute. The <dfn id=dom-fs-formtarget title=dom-fs-formTarget><code>formTarget</code></dfn> IDL
   42289   attribute must reflect the <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> content attribute.
   42290 
   42291   </div>
   42292 
   42293 
   42294 
   42295   <h4 id=constraints><span class=secno>4.10.20 </span>Constraints</h4>
   42296 
   42297   <h5 id=definitions><span class=secno>4.10.20.1 </span>Definitions</h5>
   42298 
   42299   <div class=impl>
   42300 
   42301   <p>A <a href=#category-listed title=category-listed>listed form-associated
   42302   element</a> is a <dfn id=candidate-for-constraint-validation>candidate for constraint validation</dfn>
   42303   except when a condition has <dfn id=barred-from-constraint-validation title="barred from constraint
   42304   validation">barred the element from constraint
   42305   validation</dfn>. (For example, an element is <a href=#barred-from-constraint-validation>barred from
   42306   constraint validation</a> if it is an <code><a href=#the-output-element>output</a></code> or
   42307   <code><a href=#the-fieldset-element>fieldset</a></code> element.)</p>
   42308 
   42309   <p>An element can have a <dfn id=custom-validity-error-message>custom validity error message</dfn>
   42310   defined. Initially, an element must have its <a href=#custom-validity-error-message>custom validity
   42311   error message</a> set to the empty string. When its value is not
   42312   the empty string, the element is <a href=#suffering-from-a-custom-error>suffering from a custom
   42313   error</a>. It can be set using the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   42314   method. The user agent should use the <a href=#custom-validity-error-message>custom validity error
   42315   message</a> when alerting the user to the problem with the
   42316   control.</p>
   42317 
   42318   <p>An element can be constrained in various ways. The following is
   42319   the list of <dfn id=validity-states>validity states</dfn> that a form control can be
   42320   in, making the control invalid for the purposes of constraint
   42321   validation. (The definitions below are non-normative; other parts of
   42322   this specification define more precisely when each state applies or
   42323   does not.)</p>
   42324 
   42325   <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> </dt>
   42326 
   42327    <dd> <p>When a control has no <a href=#concept-fe-value title=concept-fe-value>value</a> but has a <code title="">required</code> attribute (<code><a href=#the-input-element>input</a></code> <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
   42328    <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>). </dd>
   42329 
   42330    <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> </dt>
   42331 
   42332    <dd> <p>When a control that allows arbitrary user
   42333    input has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is not
   42334    in the correct syntax (<a href=#e-mail-state title=attr-input-type-email>E-mail</a>, <a href=#url-state title=attr-input-type-url>URL</a>). </dd>
   42335 
   42336    <dt> <dfn id=suffering-from-a-pattern-mismatch>Suffering from a pattern mismatch</dfn> </dt>
   42337 
   42338    <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't satisfy the
   42339    <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute.</dd>
   42340 
   42341    <dt> <dfn id=suffering-from-being-too-long>Suffering from being too long</dfn> </dt>
   42342 
   42343    <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too long for the
   42344    <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a> (<code><a href=#the-input-element>input</a></code>
   42345    <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
   42346    <code><a href=#the-textarea-element>textarea</a></code> <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>). </dd>
   42347 
   42348    <dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> </dt>
   42349 
   42350    <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the <code title=attr-input-min><a href=#attr-input-min>min</a></code> attribute.</dd>
   42351 
   42352    <dt> <dfn id=suffering-from-an-overflow>Suffering from an overflow</dfn> </dt>
   42353 
   42354    <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too high for the
   42355    <code title=attr-input-max><a href=#attr-input-max>max</a></code> attribute.</dd>
   42356 
   42357    <dt> <dfn id=suffering-from-a-step-mismatch>Suffering from a step mismatch</dfn> </dt>
   42358 
   42359    <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that doesn't fit the rules
   42360    given by the <code title=attr-input-step><a href=#attr-input-step>step</a></code>
   42361    attribute.</dd>
   42362 
   42363    <dt> <dfn id=suffering-from-a-custom-error>Suffering from a custom error</dfn> </dt>
   42364 
   42365    <dd> <p>When a control's <a href=#custom-validity-error-message>custom validity error
   42366    message</a> (as set by the element's <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
   42367    method) is not the empty string.</p> </dd>
   42368 
   42369   </dl><p class=note>An element can still suffer from these states even
   42370   when the element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>; thus these states can
   42371   be represented in the DOM even if validating the form during
   42372   submission wouldn't indicate a problem to the user.</p>
   42373 
   42374   <p>An element <dfn id=concept-fv-valid title=concept-fv-valid>satisfies its
   42375   constraints</dfn> if it is not suffering from any of the above
   42376   <a href=#validity-states>validity states</a>.</p>
   42377 
   42378   </div>
   42379 
   42380 
   42381 
   42382   <div class=impl>
   42383 
   42384   <h5 id=constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</h5>
   42385 
   42386   <p>When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the
   42387   constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps, which return
   42388   either a <i>positive</i> result (all the controls in the form are
   42389   valid) or a <i>negative</i> result (there are invalid controls)
   42390   along with a (possibly empty) list of elements that are invalid and
   42391   for which no script has claimed responsibility:</p>
   42392 
   42393   <ol><li><p>Let <var title="">controls</var> be a list of all the <a href=#category-submit title=category-submit>submittable elements</a> whose
   42394    <a href=#form-owner>form owner</a> is <var title="">form</var>, in <a href=#tree-order>tree
   42395    order</a>.</li>
   42396 
   42397    <li><p>Let <var title="">invalid controls</var> be an initially
   42398    empty list of elements.</li>
   42399 
   42400    <li>
   42401 
   42402     <p>For each element <var title="">field</var> in <var title="">controls</var>, in <a href=#tree-order>tree order</a>, run the
   42403     following substeps:</p>
   42404 
   42405     <ol><li><p>If <var title="">field</var> is not a <a href=#candidate-for-constraint-validation>candidate for
   42406      constraint validation</a>, then move on to the next
   42407      element.</li>
   42408 
   42409      <li><p>Otherwise, if <var title="">field</var> <a href=#concept-fv-valid title=concept-fv-valid>satisfies its constraints</a>, then
   42410      move on to the next element.</li>
   42411 
   42412      <li><p>Otherwise, add <var title="">field</var> to <var title="">invalid controls</var>.</li>
   42413 
   42414     </ol></li>
   42415 
   42416    <li><p>If <var title="">invalid controls</var> is empty, then
   42417    return a <i>positive</i> result and abort these steps.</li>
   42418 
   42419    <li><p>Let <var title="">unhandled invalid controls</var> be an
   42420    initially empty list of elements.</li>
   42421 
   42422    <li>
   42423 
   42424     <p>For each element <var title="">field</var> in <var title="">invalid controls</var>, if any, in <a href=#tree-order>tree
   42425     order</a>, run the following substeps:</p>
   42426 
   42427     <ol><li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-invalid>invalid</code> that is cancelable at <var title="">field</var>.</li>
   42428 
   42429      <li><p>If the event was not canceled, then add <var title="">field</var> to <var title="">unhandled invalid
   42430      controls</var>.</li>
   42431 
   42432     </ol></li>
   42433 
   42434    <li><p>Return a <i>negative</i> result with the list of elements in
   42435    the <var title="">unhandled invalid controls</var> list.</li>
   42436 
   42437   </ol><p>If a user agent is to <dfn id=interactively-validate-the-constraints>interactively validate the
   42438   constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, then the user agent must run the following
   42439   steps:</p>
   42440 
   42441   <ol><li><p><a href=#statically-validate-the-constraints>Statically validate the constraints</a> of <var title="">form</var>, and let <var title="">unhandled invalid
   42442    controls</var> be the list of elements returned if the result was
   42443    <i>negative</i>.</li>
   42444 
   42445    <li><p>If the result was <i>positive</i>, then return that result
   42446    and abort these steps.</li>
   42447 
   42448    <li><p>Report the problems with the constraints of at least one of
   42449    the elements given in <var title="">unhandled invalid
   42450    controls</var> to the user. User agents may focus one of those
   42451    elements in the process, by running the <a href=#focusing-steps>focusing steps</a>
   42452    for that element, and may change the scrolling position of the
   42453    document, or perform some other action that brings the element to
   42454    the user's attention. User agents may report more than one
   42455    constraint violation. User agents may coalesce related constraint
   42456    violation reports if appropriate (e.g. if multiple radio buttons in
   42457    a <a href=#radio-button-group title="radio button group">group</a> are marked as
   42458    required, only one error need be reported). If one of the controls
   42459    is not <a href=#being-rendered>being rendered</a> (e.g. it has the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute set) then user agents
   42460    may report a script error.</li>
   42461 
   42462    <li><p>Return a <i>negative</i> result.</li>
   42463 
   42464   </ol></div>
   42465 
   42466 
   42467 
   42468   <h5 id=the-constraint-validation-api><span class=secno>4.10.20.3 </span>The <dfn>constraint validation API</dfn></h5>
   42469 
   42470   <dl class=domintro><dt><var title="">element</var> . <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code></dt>
   42471 
   42472    <dd>
   42473 
   42474     <p>Returns true if the element will be validated when the form is submitted; false otherwise.</p>
   42475 
   42476    </dd>
   42477 
   42478    <dt><var title="">element</var> . <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity</a></code>(<var title="">message</var>)</dt>
   42479 
   42480    <dd>
   42481 
   42482     <p>Sets a custom error, so that the element would fail to
   42483     validate. The given message is the message to be shown to the user
   42484     when reporting the problem to the user.</p>
   42485 
   42486     <p>If the argument is the empty string, clears the custom error.</p>
   42487 
   42488    </dd>
   42489 
   42490    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-valueMissing><a href=#dom-validitystate-valuemissing>valueMissing</a></code></dt>
   42491 
   42492    <dd>
   42493 
   42494     <p>Returns true if the element has no value but is a required field; false otherwise.</p>
   42495 
   42496    </dd>
   42497 
   42498    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-typeMismatch><a href=#dom-validitystate-typemismatch>typeMismatch</a></code></dt>
   42499 
   42500    <dd>
   42501 
   42502     <p>Returns true if the element's value is not in the correct syntax; false otherwise.</p>
   42503 
   42504    </dd>
   42505 
   42506    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-patternMismatch><a href=#dom-validitystate-patternmismatch>patternMismatch</a></code></dt>
   42507 
   42508    <dd>
   42509 
   42510     <p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p>
   42511 
   42512    </dd>
   42513 
   42514    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-tooLong><a href=#dom-validitystate-toolong>tooLong</a></code></dt>
   42515 
   42516    <dd>
   42517 
   42518     <p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p>
   42519 
   42520    </dd>
   42521 
   42522    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeUnderflow><a href=#dom-validitystate-rangeunderflow>rangeUnderflow</a></code></dt>
   42523 
   42524    <dd>
   42525 
   42526     <p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p>
   42527 
   42528    </dd>
   42529 
   42530    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeOverflow><a href=#dom-validitystate-rangeoverflow>rangeOverflow</a></code></dt>
   42531 
   42532    <dd>
   42533 
   42534     <p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p>
   42535 
   42536    </dd>
   42537 
   42538    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-stepMismatch><a href=#dom-validitystate-stepmismatch>stepMismatch</a></code></dt>
   42539 
   42540    <dd>
   42541 
   42542     <p>Returns true if the element's value doesn't fit the rules given by the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute; false otherwise.</p>
   42543 
   42544    </dd>
   42545 
   42546    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-customError><a href=#dom-validitystate-customerror>customError</a></code></dt>
   42547 
   42548    <dd>
   42549 
   42550     <p>Returns true if the element has a custom error; false otherwise.</p>
   42551 
   42552    </dd>
   42553 
   42554    <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-valid><a href=#dom-validitystate-valid>valid</a></code></dt>
   42555 
   42556    <dd>
   42557 
   42558     <p>Returns true if the element's value has no validity problems; false otherwise.</p>
   42559 
   42560    </dd>
   42561 
   42562    <dt><var title="">valid</var> = <var title="">element</var> . <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity</a></code>()</dt>
   42563 
   42564    <dd>
   42565 
   42566     <p>Returns true if the element's value has no validity problems;
   42567     false otherwise. Fires an <code title=event-invalid>invalid</code> event at the element in the
   42568     latter case.</p>
   42569 
   42570    </dd>
   42571 
   42572    <dt><var title="">element</var> . <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code></dt>
   42573 
   42574    <dd>
   42575 
   42576     <p>Returns the error message that would be shown to the user if
   42577     the element was to be checked for validity.</p>
   42578 
   42579    </dd>
   42580 
   42581   </dl><div class=impl>
   42582 
   42583   <p>The <dfn id=dom-cva-willvalidate title=dom-cva-willValidate><code>willValidate</code></dfn>
   42584   attribute must return true if an element is a <a href=#candidate-for-constraint-validation>candidate for
   42585   constraint validation</a>, and false otherwise (i.e. false if any
   42586   conditions are <a href=#barred-from-constraint-validation title="barred from constraint
   42587   validation">barring it from constraint validation</a>).</p>
   42588 
   42589   <p>The <dfn id=dom-cva-setcustomvalidity title=dom-cva-setCustomValidity><code>setCustomValidity(<var title="">message</var>)</code></dfn>, when invoked, must set the
   42590   <a href=#custom-validity-error-message>custom validity error message</a> to the value of the given
   42591   <var title="">message</var> argument.</p>
   42592 
   42593   </div>
   42594 
   42595   <div class=example>
   42596 
   42597    <p>In the following example, a script checks the value of a form
   42598    control each time it is edited, and whenever it is not a valid
   42599    value, uses the <code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method
   42600    to set an appropriate message.</p>
   42601 
   42602    <pre>&lt;label&gt;Feeling: &lt;input name=f type="text" oninput="check(this)"&gt;&lt;/label&gt;
   42603 &lt;script&gt;
   42604  function check(input) {
   42605    if (input.value == "good" ||
   42606        input.value == "fine" ||
   42607        input.value == "tired") {
   42608      input.setCustomValidity('"' + input.value + '" is not a feeling.');
   42609 <!--   } else if (input.value == "...") {
   42610      input.setCustomValidity('...');
   42611 -->   } else {
   42612      // input is fine -- reset the error message
   42613      input.setCustomValidity('');
   42614    }
   42615  }
   42616 &lt;/script&gt;</pre>
   42617 
   42618   </div>
   42619 
   42620   <div class=impl>
   42621 
   42622   <p>The <dfn id=dom-cva-validity title=dom-cva-validity><code>validity</code></dfn>
   42623   attribute must return a <code><a href=#validitystate>ValidityState</a></code> object that
   42624   represents the <a href=#validity-states>validity states</a> of the element. This
   42625   object is <a href=#live>live</a>, and the same object must be returned
   42626   each time the element's <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> attribute is retrieved.</p>
   42627 
   42628 <pre class=idl>interface <dfn id=validitystate>ValidityState</dfn> {
   42629   readonly attribute boolean <a href=#dom-validitystate-valuemissing title=dom-ValidityState-valueMissing>valueMissing</a>;
   42630   readonly attribute boolean <a href=#dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch>typeMismatch</a>;
   42631   readonly attribute boolean <a href=#dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch>patternMismatch</a>;
   42632   readonly attribute boolean <a href=#dom-validitystate-toolong title=dom-ValidityState-tooLong>tooLong</a>;
   42633   readonly attribute boolean <a href=#dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow>rangeUnderflow</a>;
   42634   readonly attribute boolean <a href=#dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow>rangeOverflow</a>;
   42635   readonly attribute boolean <a href=#dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch>stepMismatch</a>;
   42636   readonly attribute boolean <a href=#dom-validitystate-customerror title=dom-ValidityState-customError>customError</a>;
   42637   readonly attribute boolean <a href=#dom-validitystate-valid title=dom-ValidityState-valid>valid</a>;
   42638 };</pre>
   42639 
   42640   <p>A <code><a href=#validitystate>ValidityState</a></code> object has the following
   42641   attributes. On getting, they must return true if the corresponding
   42642   condition given in the following list is true, and false
   42643   otherwise.</p>
   42644 
   42645   <dl><dt><dfn id=dom-validitystate-valuemissing title=dom-ValidityState-valueMissing><code>valueMissing</code></dfn></dt>
   42646    <dd> <p>The control is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p> </dd>
   42647 
   42648    <dt><dfn id=dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch><code>typeMismatch</code></dfn></dt>
   42649    <dd> <p>The control is <a href=#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p> </dd>
   42650 
   42651    <dt><dfn id=dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch><code>patternMismatch</code></dfn></dt>
   42652    <dd> <p>The control is <a href=#suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>.</p> </dd>
   42653 
   42654    <dt><dfn id=dom-validitystate-toolong title=dom-ValidityState-tooLong><code>tooLong</code></dfn></dt>
   42655    <dd> <p>The control is <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p> </dd>
   42656 
   42657    <dt><dfn id=dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow><code>rangeUnderflow</code></dfn></dt>
   42658    <dd> <p>The control is <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p> </dd>
   42659 
   42660    <dt><dfn id=dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow><code>rangeOverflow</code></dfn></dt>
   42661    <dd> <p>The control is <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p> </dd>
   42662 
   42663    <dt><dfn id=dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch><code>stepMismatch</code></dfn></dt>
   42664    <dd> <p>The control is <a href=#suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p> </dd>
   42665 
   42666    <dt><dfn id=dom-validitystate-customerror title=dom-ValidityState-customError><code>customError</code></dfn></dt>
   42667    <dd> <p>The control is <a href=#suffering-from-a-custom-error>suffering from a custom error</a>.</p> </dd>
   42668 
   42669    <dt><dfn id=dom-validitystate-valid title=dom-ValidityState-valid><code>valid</code></dfn></dt>
   42670    <dd> <p>None of the other conditions are true.</p> </dd>
   42671 
   42672   </dl><p>When the <dfn id=dom-cva-checkvalidatity title=dom-cva-checkValidatity><code>checkValidity()</code></dfn>
   42673   method is invoked, if the element is a <a href=#candidate-for-constraint-validation>candidate for
   42674   constraint validation</a> and does not <a href=#concept-fv-valid title=concept-fv-valid>satisfy its constraints</a>, the user
   42675   agent must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-invalid>invalid</code> that is cancelable (but in this
   42676   case has no default action) at the element and return
   42677   false. Otherwise, it must only return true without doing anything
   42678   else.</p>
   42679 
   42680   <p>The <dfn id=dom-cva-validationmessage title=dom-cva-validationMessage><code>validationMessage</code></dfn>
   42681   attribute must return the empty string if the element is not a
   42682   <a href=#candidate-for-constraint-validation>candidate for constraint validation</a> or if it is one but
   42683   it <a href=#concept-fv-valid title=concept-fv-valid>satisfies its constraints</a>;
   42684   otherwise, it must return a suitably localized message that the user
   42685   agent would show the user if this were the only form control with a
   42686   validity constraint problem. If the user agent would not actually
   42687   show a textual message in such a situation (e.g. it would show a
   42688   graphical cue instead), then the attribute must return a suitably
   42689   localized message that expresses (one or more of) the validity
   42690   constraint(s) that the control does not satisfy. If the element is a
   42691   <a href=#candidate-for-constraint-validation>candidate for constraint validation</a> and is
   42692   <a href=#suffering-from-a-custom-error>suffering from a custom error</a>, then the <a href=#custom-validity-error-message>custom
   42693   validity error message</a> should be present in the return
   42694   value.</p>
   42695 
   42696   </div>
   42697 
   42698 
   42699   <h5 id=security-forms><span class=secno>4.10.20.4 </span>Security</h5>
   42700 
   42701   <p id=security-0>Servers should not rely on client-side
   42702   validation. Client-side validation can be intentionally bypassed by
   42703   hostile users, and unintentionally bypassed by users of older user
   42704   agents or automated tools that do not implement these features. The
   42705   constraint validation features are only intended to improve the user
   42706   experience, not to provide any kind of security mechanism.</p>
   42707 
   42708 
   42709 
   42710 
   42711   <h4 id=form-submission><span class=secno>4.10.21 </span><dfn>Form submission</dfn></h4>
   42712 
   42713   <div class=impl>
   42714 
   42715   <h5 id=introduction-1><span class=secno>4.10.21.1 </span>Introduction</h5>
   42716 
   42717   </div>
   42718 
   42719   <p><i>This section is non-normative.</i></p>
   42720 
   42721   <p>When forms are submitted, the data in the form is converted into
   42722   the form specified by the <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a>, and then sent to the
   42723   destination specified by the <a href=#concept-fs-action title=concept-fs-action>action</a> using the given <a href=#concept-fs-method title=concept-fs-method>method</a>.</p>
   42724 
   42725   <p>For example, take the following form:</p>
   42726 
   42727   <pre>&lt;form action="/find.cgi" method=get&gt;
   42728  &lt;input type=text name=t&gt;
   42729  &lt;input type=search name=q&gt;
   42730  &lt;input type=submit&gt;
   42731 &lt;/form&gt;</pre>
   42732 
   42733   <p>If the user types in "cats" in the first field and "fur" in the
   42734   second, and then hits the submit button, then the user agent will
   42735   load <code title="">/find.cgi?t=cats&amp;q=fur</code>.</p>
   42736 
   42737   <p>On the other hand, consider this form:</p>
   42738 
   42739   <pre>&lt;form action="/find.cgi" method=post enctype="multipart/form-data"&gt;
   42740  &lt;input type=text name=t&gt;
   42741  &lt;input type=search name=q&gt;
   42742  &lt;input type=submit&gt;
   42743 &lt;/form&gt;</pre>
   42744 
   42745   <p>Given the same user input, the result on submission is quite
   42746   different: the user agent instead does an HTTP POST to the given
   42747   URL, with as the entity body something like the following text:</p>
   42748 
   42749   <pre>------kYFrd4jNJEgCervE
   42750 Content-Disposition: form-data; name="t"
   42751 
   42752 cats
   42753 ------kYFrd4jNJEgCervE
   42754 Content-Disposition: form-data; name="q"
   42755 
   42756 fur
   42757 ------kYFrd4jNJEgCervE--</pre>
   42758 
   42759 
   42760 
   42761   <div class=impl>
   42762 
   42763   <h5 id=implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</h5>
   42764 
   42765   <p>User agents may establish a <a href=#concept-button title=concept-button>button</a> in each form as being the
   42766   form's <dfn id=default-button>default button</dfn>. This should be the first <a href=#concept-submit-button title=concept-submit-button>submit button</a> in <a href=#tree-order>tree
   42767   order</a> whose <a href=#form-owner>form owner</a> is that <code><a href=#the-form-element>form</a></code>
   42768   element, but user agents may pick another button if another would be
   42769   more appropriate for the platform. If the platform supports letting
   42770   the user submit a form implicitly (for example, on some platforms
   42771   hitting the "enter" key while a text field is focused implicitly
   42772   submits the form), then doing so must cause the form's <a href=#default-button>default
   42773   button</a>'s <a href=#activation-behavior>activation behavior</a>, if any, to be
   42774   run.</p>
   42775 
   42776   <p class=note>Consequently, if the <a href=#default-button>default button</a> is
   42777   <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, the form is not
   42778   submitted when such an implicit submission mechanism is used. (A
   42779   button has no <a href=#activation-behavior>activation behavior</a> when disabled.)</p>
   42780 
   42781   <p>If the form has no <a href=#concept-submit-button title=concept-submit-button>submit
   42782   button</a>, then the implicit submission mechanism must just
   42783   <a href=#concept-form-submit title=concept-form-submit>submit</a> the
   42784   <code><a href=#the-form-element>form</a></code> element from the <code><a href=#the-form-element>form</a></code> element
   42785   itself.</p>
   42786 
   42787   </div>
   42788 
   42789 
   42790   <div class=impl>
   42791 
   42792   <h5 id=form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</h5>
   42793 
   42794   <p>When a form <var title="">form</var> is <dfn id=concept-form-submit title=concept-form-submit>submitted</dfn> from an element <var title="">submitter</var> (typically a button), optionally with a
   42795   <var title="">scripted-submit</var> flag set, the user agent must
   42796   run the following steps:</p>
   42797 
   42798   <ol><li id=sandboxSubmitBlocked><p>If <var title="">form</var> is in
   42799    a <code><a href=#document>Document</a></code> that has no associated <a href=#browsing-context>browsing
   42800    context</a> or whose <a href=#browsing-context>browsing context</a> had its
   42801    <a href=#sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</a> set when the
   42802    <code><a href=#document>Document</a></code> was created, then abort these steps without
   42803    doing anything.</li>
   42804 
   42805    <li><p>If <var title="">form</var> is already being submitted
   42806    (i.e. the form was <a href=#concept-form-submit title=concept-form-submit>submitted</a> again while processing
   42807    the events fired from the next two steps, probably from a script
   42808    redundantly calling the <code title=dom-form-submit><a href=#dom-form-submit>submit()</a></code> method on <var title="">form</var>), then abort these steps. This doesn't affect
   42809    the earlier instance of this algorithm.</li>
   42810 
   42811    <!-- lock (implicit in previous step) -->
   42812 
   42813    <li><p>If the <var title="">scripted-submit</var> flag is not set,
   42814    and the <var title="">submitter</var> element's <a href=#concept-fs-novalidate title=concept-fs-novalidate>no-validate state</a> is false,
   42815    then <a href=#interactively-validate-the-constraints>interactively validate the constraints</a> of <var title="">form</var> and examine the result: if the result is
   42816    negative (the constraint validation concluded that there were
   42817    invalid fields and probably informed the user of this) then abort
   42818    these steps.</li>
   42819 
   42820    <li><p>If the <var title="">scripted-submit</var> flag is not set,
   42821    then <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named
   42822    <code title=event-submit>submit</code>, at <var title="">form</var>. If the event's default action is prevented
   42823    (i.e. if the event is canceled) then abort these steps. Otherwise,
   42824    continue (effectively the default action is to perform the
   42825    submission).</li>
   42826 
   42827    <!-- if you add any steps between the "lock" and "unlock" lines,
   42828    make sure to update the step immediately before the "lock" line -->
   42829 
   42830    <!-- unlock -->
   42831 
   42832    <li><p>Let <var title="">controls</var> be a list of all the <a href=#category-submit title=category-submit>submittable elements</a> whose
   42833    <a href=#form-owner>form owner</a> is <var title="">form</var>, in <a href=#tree-order>tree
   42834    order</a>.</li>
   42835 
   42836    <li><p>Let the <var title="">form data set</var> be a list of
   42837    name-value-type tuples, initially empty.</li>
   42838 
   42839    <li id=constructing-form-data-set>
   42840 
   42841     <p><strong>Constructing the form data set</strong>. For each
   42842     element <var title="">field</var> in <var title="">controls</var>,
   42843     in <a href=#tree-order>tree order</a>, run the following substeps:</p>
   42844 
   42845     <ol><li>
   42846 
   42847       <p>If any of the following conditions are met, then skip these
   42848       substeps for this element:</p>
   42849 
   42850       <ul><li>The <var title="">field</var> element has a
   42851        <code><a href=#the-datalist-element>datalist</a></code> element ancestor.</li>
   42852 
   42853        <li>The <var title="">field</var> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</li>
   42854 
   42855        <li>The <var title="">field</var> element is a <a href=#concept-button title=concept-button>button</a> but it is not <var title="">submitter</var>.</li>
   42856 
   42857        <li>The <var title="">field</var> element is an
   42858        <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and
   42859        whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is
   42860        false.</li>
   42861 
   42862        <li>The <var title="">field</var> element is an
   42863        <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state and
   42864        whose <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is
   42865        false.</li>
   42866 
   42867        <li>The <var title="">field</var> element is not an
   42868        <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and
   42869        either the <var title="">field</var> element does not have a
   42870        <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute specified, or
   42871        its <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute's value is
   42872        the empty string.</li>
   42873 
   42874        <li>The <var title="">field</var> element is an
   42875        <code><a href=#the-object-element>object</a></code> element that is not using a
   42876        <a href=#plugin>plugin</a>.</li>
   42877 
   42878       </ul><p>Otherwise, process <var title="">field</var> as follows:</p>
   42879 
   42880      </li>
   42881 
   42882      <li><p>Let <var title="">type</var> be the value of the <code title="">type</code> IDL attribute of <var title="">field</var>.</li> <!-- if the field is an <object>
   42883      element, this will get ignored. -->
   42884 
   42885      <li>
   42886 
   42887       <p>If the <var title="">field</var> element is an
   42888       <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
   42889       then run these further nested substeps:</p>
   42890 
   42891       <ol><li><p>If the <var title="">field</var> element has an <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute specified and value
   42892        is not the empty string, let <var title="">name</var> be that
   42893        value followed by a single U+002E FULL STOP character
   42894        (.). Otherwise, let <var title="">name</var> be the empty
   42895        string.</li>
   42896 
   42897        <li><p>Let <var title="">name<sub title="">x</sub></var> be the
   42898        string consisting of the concatenation of <var title="">name</var> and a single U+0078 LATIN SMALL LETTER X
   42899        character (x).</li>
   42900 
   42901        <li><p>Let <var title="">name<sub title="">y</sub></var> be the
   42902        string consisting of the concatenation of <var title="">name</var> and a single U+0079 LATIN SMALL LETTER Y
   42903        character (y).</li>
   42904 
   42905        <li><p>The <var title="">field</var> element is <var title="">submitter</var>, and before this algorithm was invoked
   42906        the user <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>indicated a
   42907        coordinate</a>. Let <var title="">x</var> be the <var title="">x</var>-component of the coordinate selected by the
   42908        user, and let <var title="">y</var> be the <var title="">y</var>-component of the coordinate selected by the
   42909        user.</li>
   42910 
   42911        <li><p>Append an entry in the <var title="">form data set</var>
   42912        with the name <var title="">name<sub title="">x</sub></var>,
   42913        the value <var title="">x</var>, and the type <var title="">type</var>.</li>
   42914 
   42915        <li><p>Append an entry in the <var title="">form data set</var>
   42916        with the name <var title="">name<sub title="">y</sub></var> and
   42917        the value <var title="">y</var>, and the type <var title="">type</var>.</li>
   42918 
   42919        <li><p>Skip the remaining substeps for this element: if there
   42920        are any more elements in <var title="">controls</var>, return
   42921        to the top of the <a href=#constructing-form-data-set>constructing the form data
   42922        set</a> step, otherwise, jump to the next step in the overall
   42923        form submission algorithm.</li>
   42924 
   42925       </ol></li>
   42926 
   42927      <li><p>Let <var title="">name</var> be the value of the <var title="">field</var> element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute.</li>
   42928 
   42929      <li><p>If the <var title="">field</var> element is a
   42930      <code><a href=#the-select-element>select</a></code> element, then for each <code><a href=#the-option-element>option</a></code>
   42931      element in the <code><a href=#the-select-element>select</a></code> element whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true,
   42932      append an entry in the <var title="">form data set</var> with the
   42933      <var title="">name</var> as the name, the <a href=#concept-option-value title=concept-option-value>value</a> of the
   42934      <code><a href=#the-option-element>option</a></code> element as the value, and <var title="">type</var> as the type.</li>
   42935 
   42936      <li>
   42937 
   42938       <p>Otherwise, if the <var title="">field</var> element is an
   42939       <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state or the
   42940       <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state,
   42941       then run these further nested substeps:</p>
   42942 
   42943       <ol><li><p>If the <var title="">field</var> element has a <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute specified, then
   42944        let <var title="">value</var> be the value of that attribute;
   42945        otherwise, let <var title="">value</var> be the string
   42946        "<code title="">on</code>".</li>
   42947 
   42948        <li><p>Append an entry in the <var title="">form data set</var>
   42949        with <var title="">name</var> as the name, <var title="">value</var> as the value, and <var title="">type</var>
   42950        as the type.</li>
   42951 
   42952       </ol></li>
   42953 
   42954      <li><p>Otherwise, if the <var title="">field</var> element is an
   42955      <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, then for
   42956      each file <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected</a> in the
   42957      <code><a href=#the-input-element>input</a></code> element, append an entry in the <var title="">form data set</var> with the <var title="">name</var> as
   42958      the name, the file (consisting of the name, the type, and the
   42959      body) as the value, and <var title="">type</var> as the type. If
   42960      there are no <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>,
   42961      then append an entry in the <var title="">form data set</var>
   42962      with the <var title="">name</var> as the name, the empty string
   42963      as the value, and <code title="">application/octet-stream</code>
   42964      as the type.</li>
   42965      <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=529859 -->
   42966 
   42967      <li><p>Otherwise, if the <var title="">field</var> element is an
   42968      <code><a href=#the-object-element>object</a></code> element: try to obtain a form submission
   42969      value from the <a href=#plugin>plugin</a><!-- using NPAPI's
   42970      NPP_GetValue() entry point with the NPPVformValue variable -->,
   42971      and if that is successful, append an entry in the <var title="">form data set</var> with <var title="">name</var> as the
   42972      name, the returned form submission value as the value, and the
   42973      string "<code title="">object</code>" as the type.</li>
   42974 
   42975      <li><p>Otherwise, append an entry in the <var title="">form data
   42976      set</var> with <var title="">name</var> as the name, the <a href=#concept-fe-value title=concept-fe-value>value</a> of the <var title="">field</var> element as the value, and <var title="">type</var> as the type.</li>
   42977 
   42978     </ol></li>
   42979 
   42980    <li><p>Let <var title="">action</var> be the <var title="">submitter</var> element's <a href=#concept-fs-action title=concept-fs-action>action</a>.</li>
   42981 
   42982    <li>
   42983 
   42984     <p>If <var title="">action</var> is the empty string, let <var title="">action</var> be <a href="#the-document's-address">the document's address</a>.</p>
   42985 
   42986     <p class=note>This step is a <a href=#willful-violation>willful violation</a> of
   42987     RFC 3986, which would require base URL processing here. This
   42988     violation is motivated by a desire for compatibility with legacy
   42989     content. <a href=#refsRFC3986>[RFC3986]</a></p>
   42990 
   42991     <!-- Don't ask me why. But that's what IE does. It even treats
   42992     action="" differently from action=" " or action="#" (the latter
   42993     two resolve to the base URL, the first one resolves to the doc
   42994     URL). And other browsers concur. It is even required, see e.g.
   42995       http://bugs.webkit.org/show_bug.cgi?id=7763
   42996       https://bugzilla.mozilla.org/show_bug.cgi?id=297761
   42997     -->
   42998 
   42999    </li>
   43000 
   43001    <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
   43002    <a href=#url>URL</a> <var title="">action</var>, relative to the <var title="">submitter</var> element. If this fails, abort these
   43003    steps. Otherwise, let <var title="">action</var> be the resulting
   43004    <a href=#absolute-url>absolute URL</a>.</li>
   43005 
   43006    <li><p>Let <var title="">scheme</var> be the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> of the resulting
   43007    <a href=#absolute-url>absolute URL</a>.</li>
   43008 
   43009    <li><p>Let <var title="">enctype</var> be the <var title="">submitter</var> element's <a href=#concept-fs-enctype title=concept-fs-enctype>enctype</a>.</li>
   43010 
   43011    <li><p>Let <var title="">method</var> be the <var title="">submitter</var> element's <a href=#concept-fs-method title=concept-fs-method>method</a>.</li>
   43012 
   43013    <li><p>Let <var title="">target</var> be the <var title="">submitter</var> element's <a href=#concept-fs-target title=concept-fs-target>target</a>.</li>
   43014 
   43015    <li>
   43016 
   43017     <p>Select the appropriate row in the table below based on the
   43018     value of <var title="">scheme</var> as given by the first cell of
   43019     each row. Then, select the appropriate cell on that row based on
   43020     the value of <var title="">method</var> as given in the first cell
   43021     of each column. Then, jump to the steps named in that cell and
   43022     defined below the table.</p>
   43023 
   43024     <table><thead><tr><td>
   43025       <th> <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a>
   43026       <th> <a href=#attr-fs-method-post title=attr-fs-method-POST>POST</a>
   43027       <th> <a href=#attr-fs-method-put title=attr-fs-method-PUT>PUT</a>
   43028       <th> <a href=#attr-fs-method-delete title=attr-fs-method-DELETE>DELETE</a>
   43029      <tbody><tr><th> <code title="">http</code>
   43030       <td> <a href=#submit-mutate-action title=submit-mutate-action>Mutate action</a>
   43031       <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
   43032       <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
   43033       <td> <a href=#submit-delete-action title=submit-delete-action>Delete action</a>
   43034      <tr><th> <code title="">https</code>
   43035       <td> <a href=#submit-mutate-action title=submit-mutate-action>Mutate action</a>
   43036       <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
   43037       <td> <a href=#submit-body title=submit-body>Submit as entity body</a>
   43038       <td> <a href=#submit-delete-action title=submit-delete-action>Delete action</a>
   43039      <tr><th> <code title="">ftp</code>
   43040       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43041       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43042       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43043       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43044      <tr><th> <code title="">javascript</code>
   43045       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43046       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43047       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43048       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43049      <tr><th> <code title="">data</code>
   43050       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43051       <td> <a href=#submit-data-post title=submit-data-post>Post to data:</a>
   43052       <td> <a href=#submit-data-put title=submit-data-put>Put to data:</a>
   43053       <td> <a href=#submit-get-action title=submit-get-action>Get action</a>
   43054      <tr><th> <code title="">mailto</code>
   43055       <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
   43056       <td> <a href=#submit-mailto-body title=submit-mailto-body>Mail as body</a>
   43057       <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
   43058       <td> <a href=#submit-mailto-headers title=submit-mailto-headers>Mail with headers</a>
   43059     </table><p>If <var title="">scheme</var> is not one of those listed in
   43060     this table, then the behavior is not defined by this
   43061     specification. User agents should, in the absence of another
   43062     specification defining this, act in a manner analogous to that
   43063     defined in this specification for similar schemes.</p>
   43064 
   43065     <p>The behaviors are as follows:</p>
   43066 
   43067     <dl><dt><dfn id=submit-mutate-action title=submit-mutate-action>Mutate action</dfn>
   43068      <dd>
   43069 
   43070       <p>Let <var title="">query</var> be the result of encoding the
   43071       <var title="">form data set</var> using the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
   43072       algorithm</a>, interpreted as a US-ASCII string.</p>
   43073 
   43074       <!-- by this point we've already tried to resolve the URL, so we
   43075       know we can parse it -->
   43076 
   43077       <p>Let <var title="">destination</var> be a new <a href=#url>URL</a>
   43078       that is equal to the <var title="">action</var> except that its
   43079       <a href=#url-query title=url-query>&lt;query&gt;</a> component is
   43080       replaced by <var title="">query</var> (adding a U+003F QUESTION
   43081       MARK character (?) if appropriate).</p>
   43082 
   43083       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43084       form submission target browsing context</a>.</p>
   43085 
   43086       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43087       context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
   43088       this purpose by the steps above, then it must be navigated with
   43089       <a href=#replacement-enabled>replacement enabled</a>.</p>
   43090 
   43091      </dd>
   43092 
   43093      <dt><dfn id=submit-body title=submit-body>Submit as entity body</dfn>
   43094      <dd>
   43095 
   43096       <p>Let <var title="">entity body</var> be the result of encoding
   43097       the <var title="">form data set</var> using the
   43098       <a href=#appropriate-form-encoding-algorithm>appropriate form encoding algorithm</a>.</p>
   43099 
   43100       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43101       form submission target browsing context</a>.</p>
   43102 
   43103       <p>Let <var title="">MIME type</var> be determined as
   43104       follows:</p>
   43105 
   43106       <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>
   43107 
   43108        <dd>Let <var title="">MIME type</var> be "<code title="">application/x-www-form-urlencoded</code>".</dd>
   43109 
   43110        <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>
   43111 
   43112        <dd>Let <var title="">MIME type</var> be "<code title="">multipart/form-data</code>".</dd>
   43113 
   43114        <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>
   43115 
   43116        <dd>Let <var title="">MIME type</var> be "<code title="">text/plain</code>".</dd>
   43117 
   43118       </dl><p>If <var title="">method</var> is anything but GET or POST,
   43119       and the <a href=#origin>origin</a> of <var title="">action</var> is not
   43120       the <a href=#same-origin>same origin</a> as that of the <code><a href=#the-form-element>form</a></code>
   43121       element's <code><a href=#document>Document</a></code>, then abort these steps.</p>
   43122       <!-- CORS, one day -->
   43123 
   43124       <p>Otherwise, <a href=#navigate>navigate</a> <var title="">target
   43125       browsing context</var> to <var title="">action</var> using the
   43126       HTTP method given by <var title="">method</var> and with <var title="">entity body</var> as the entity body, of type <var title="">MIME type</var>. If <var title="">target browsing
   43127       context</var> was newly created for this purpose by the steps
   43128       above, then it must be navigated with <a href=#replacement-enabled>replacement
   43129       enabled</a>.</p>
   43130 
   43131      </dd>
   43132 
   43133      <dt><dfn id=submit-delete-action title=submit-delete-action>Delete action</dfn>
   43134      <dd>
   43135 
   43136       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43137       form submission target browsing context</a>.</p>
   43138 
   43139       <p>If the <a href=#origin>origin</a> of <var title="">action</var> is
   43140       not the <a href=#same-origin>same origin</a> as that of the
   43141       <code><a href=#the-form-element>form</a></code> element's <code><a href=#document>Document</a></code>, then abort
   43142       these steps.</p> <!-- CORS, one day -->
   43143 
   43144       <p>Otherwise, <a href=#navigate>navigate</a> <var title="">target
   43145       browsing context</var> to <var title="">action</var> using the
   43146       DELETE method. If <var title="">target browsing context</var>
   43147       was newly created for this purpose by the steps above, then it
   43148       must be navigated with <a href=#replacement-enabled>replacement enabled</a>.</p>
   43149 
   43150      </dd>
   43151 
   43152      <dt><dfn id=submit-get-action title=submit-get-action>Get action</dfn>
   43153      <dd>
   43154 
   43155       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43156       form submission target browsing context</a>.</p>
   43157 
   43158       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43159       context</var> to <var title="">action</var>. If <var title="">target browsing context</var> was newly created for
   43160       this purpose by the steps above, then it must be navigated with
   43161       <a href=#replacement-enabled>replacement enabled</a>.</p>
   43162 
   43163      </dd>
   43164 
   43165      <dt><dfn id=submit-data-post title=submit-data-post>Post to data:</dfn>
   43166      <dd>
   43167 
   43168       <p>Let <var title="">data</var> be the result of encoding the
   43169       <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
   43170       form encoding algorithm</a>.</p>
   43171 
   43172       <p>If <var title="">action</var> contains the string "<code title="">%%%%</code>" (four U+0025 PERCENT SIGN characters),
   43173       then %-escape all bytes in <var title="">data</var> that, if
   43174       interpreted as US-ASCII, do not match the <code title="">unreserved</code> production in the URI Generic Syntax,
   43175       and then, treating the result as a US-ASCII string, further
   43176       %-escape all the U+0025 PERCENT SIGN characters in the resulting
   43177       string and replace the first occurrence of "<code title="">%%%%</code>" in <var title="">action</var> with the
   43178       resulting double-escaped string. <a href=#refsRFC3986>[RFC3986]</a></p>
   43179 
   43180       <p>Otherwise, if <var title="">action</var> contains the string
   43181       "<code title="">%%</code>" (two U+0025 PERCENT SIGN characters
   43182       in a row, but not four), then %-escape all characters in <var title="">data</var> that, if interpreted as US-ASCII, do not
   43183       match the <code title="">unreserved</code> production in the URI
   43184       Generic Syntax, and then, treating the result as a US-ASCII
   43185       string, replace the first occurrence of "<code title="">%%</code>" in <var title="">action</var> with the
   43186       resulting escaped string. <a href=#refsRFC3986>[RFC3986]</a></p>
   43187 
   43188       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43189       form submission target browsing context</a>.</p>
   43190 
   43191       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43192       context</var> to the potentially modified <var title="">action</var>. If <var title="">target browsing
   43193       context</var> was newly created for this purpose by the steps
   43194       above, then it must be navigated with <a href=#replacement-enabled>replacement
   43195       enabled</a>.</p>
   43196 
   43197      </dd>
   43198 
   43199      <dt><dfn id=submit-data-put title=submit-data-put>Put to data:</dfn>
   43200      <dd>
   43201 
   43202       <p>Let <var title="">data</var> be the result of encoding the
   43203       <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
   43204       form encoding algorithm</a>.</p>
   43205 
   43206       <p>Let <var title="">MIME type</var> be determined as
   43207       follows:</p>
   43208 
   43209       <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>
   43210 
   43211        <dd>Let <var title="">MIME type</var> be "<code title="">application/x-www-form-urlencoded</code>".</dd>
   43212 
   43213        <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>
   43214 
   43215        <dd>Let <var title="">MIME type</var> be "<code title="">multipart/form-data</code>".</dd>
   43216 
   43217        <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>
   43218 
   43219        <dd>Let <var title="">MIME type</var> be "<code title="">text/plain</code>".</dd>
   43220 
   43221       </dl><p>Let <var title="">destination</var> be the result of
   43222       concatenating the following:</p>
   43223 
   43224       <ol class=brief><li>The string "<code title="">data:</code>".</li>
   43225 
   43226        <li>The value of <var title="">MIME type</var>.</li>
   43227 
   43228        <li>The string "<code title="">;base64,</code>".</li>
   43229 
   43230        <li>A base-64 encoded representation of <var title="">data</var>. <a href=#refsRFC2045>[RFC2045]</a></li>
   43231 
   43232       </ol><p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43233       form submission target browsing context</a>.</p>
   43234 
   43235       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43236       context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
   43237       this purpose by the steps above, then it must be navigated with
   43238       <a href=#replacement-enabled>replacement enabled</a>.</p>
   43239 
   43240      </dd>
   43241 
   43242      <dt><dfn id=submit-mailto-headers title=submit-mailto-headers>Mail with headers</dfn>
   43243      <dd>
   43244 
   43245       <p>Let <var title="">headers</var> be the resulting encoding the
   43246       <var title="">form data set</var> using the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
   43247       algorithm</a>, interpreted as a US-ASCII string.</p>
   43248 
   43249       <p>Replace occurrences of U+002B PLUS SIGN characters (+) in
   43250       <var title="">headers</var> with the string "<code title="">%20</code>".</p>
   43251 
   43252       <p>Let <var title="">destination</var> consist of all the
   43253       characters from the first character in <var title="">action</var> to the character immediately before the
   43254       first U+003F QUESTION MARK character (?), if any, or the end of
   43255       the string if there are none.</p>
   43256 
   43257       <p>Append a single U+003F QUESTION MARK character (?) to <var title="">destination</var>.</p>
   43258 
   43259       <p>Append <var title="">headers</var> to <var title="">destination</var>.</p>
   43260 
   43261       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43262       form submission target browsing context</a>.</p>
   43263 
   43264       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43265       context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
   43266       this purpose by the steps above, then it must be navigated with
   43267       <a href=#replacement-enabled>replacement enabled</a>.</p>
   43268 
   43269      </dd>
   43270 
   43271      <dt><dfn id=submit-mailto-body title=submit-mailto-body>Mail as body</dfn>
   43272      <dd>
   43273 
   43274       <p>Let <var title="">body</var> be the resulting encoding the
   43275       <var title="">form data set</var> using the <a href=#appropriate-form-encoding-algorithm>appropriate
   43276       form encoding algorithm</a> and then %-escaping all the bytes
   43277       in the resulting byte string that, when interpreted as US-ASCII,
   43278       do not match the <code title="">unreserved</code> production in
   43279       the URI Generic Syntax. <a href=#refsRFC3986>[RFC3986]</a></p>
   43280 
   43281       <p>Let <var title="">destination</var> have the same value as
   43282       <var title="">action</var>.</p>
   43283 
   43284       <p>If <var title="">destination</var> does not contain a U+003F
   43285       QUESTION MARK character (?), append a single U+003F QUESTION
   43286       MARK character (?) to <var title="">destination</var>. Otherwise, append a single U+0026
   43287       AMPERSAND character (&amp;).</p>
   43288 
   43289       <p>Append the string "<code title="">body=</code>" to <var title="">destination</var>.</p>
   43290 
   43291       <p>Append <var title="">body</var>, interpreted as a US-ASCII
   43292       string, to <var title="">destination</var>.</p>
   43293 
   43294       <p>Let <var title="">target browsing context</var> be <a href=#the-form-submission-target-browsing-context>the
   43295       form submission target browsing context</a>.</p>
   43296 
   43297       <p><a href=#navigate>Navigate</a> <var title="">target browsing
   43298       context</var> to <var title="">destination</var>. If <var title="">target browsing context</var> was newly created for
   43299       this purpose by the steps above, then it must be navigated with
   43300       <a href=#replacement-enabled>replacement enabled</a>.</p>
   43301 
   43302      </dd>
   43303 
   43304     </dl><p><dfn id=the-form-submission-target-browsing-context>The form submission target browsing context</dfn> is
   43305     obtained, when needed by the behaviors described above, as
   43306     follows: If the user indicated a specific <a href=#browsing-context>browsing
   43307     context</a> to use when submitting the form, then that is the
   43308     target browsing context. Otherwise, apply <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for
   43309     choosing a browsing context given a browsing context name</a>
   43310     using <var title="">target</var> as the name and the
   43311     <a href=#browsing-context>browsing context</a> of <var title="">form</var> as the
   43312     context in which the algorithm is executed; the resulting
   43313     <a href=#browsing-context>browsing context</a> is the target browsing context.</p>
   43314 
   43315     <p>The <dfn id=appropriate-form-encoding-algorithm>appropriate form encoding algorithm</dfn> is
   43316     determined as follows:</p>
   43317 
   43318     <dl><dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code></dt>
   43319 
   43320      <dd>Use the <a href=#application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
   43321      algorithm</a>.</dd>
   43322 
   43323      <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code></dt>
   43324 
   43325      <dd>Use the <a href=#multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
   43326      algorithm</a>.</dd>
   43327 
   43328      <dt>If <var title="">enctype</var> is <code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code></dt>
   43329 
   43330      <dd>Use the <a href=#text/plain-encoding-algorithm><code title="">text/plain</code> encoding
   43331      algorithm</a>.</dd>
   43332 
   43333     </dl></li>
   43334 
   43335   </ol></div>
   43336 
   43337 
   43338   <div class=impl>
   43339 
   43340   <h5 id=url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</h5>
   43341 
   43342   <p>The <dfn id=application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
   43343   algorithm</dfn> is as follows:</p>
   43344 
   43345   <ol><li><p>Let <var title="">result</var> be the empty string.</li>
   43346 
   43347    <li>
   43348 
   43349     <p>If the <code><a href=#the-form-element>form</a></code> element has an <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute,
   43350     then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
   43351     encodings supported by the user agent, select a character encoding
   43352     from the list given in the <code><a href=#the-form-element>form</a></code>'s <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute
   43353     that is an <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>. If
   43354     none of the encodings are supported, then let the selected
   43355     character encoding be UTF-8.</p>
   43356 
   43357     <p>Otherwise, if the <a href="#document's-character-encoding">document's character encoding</a> is
   43358     an <a href=#ascii-compatible-character-encoding>ASCII-compatible character encoding</a>, then that is
   43359     the selected character encoding.</p>
   43360 
   43361     <p>Otherwise, let the selected character encoding be UTF-8.</p>
   43362 
   43363    </li>
   43364 
   43365    <li><p>Let <var title="">charset</var> be the <a href=#preferred-mime-name>preferred MIME
   43366    name</a> of the selected character encoding.</li>
   43367 
   43368    <li>
   43369 
   43370     <p>For each entry in the <var title="">form data set</var>,
   43371     perform these substeps:</p>
   43372 
   43373     <ol><li><p>If the entry's name is "<code title="">_charset_</code>"
   43374      and its type is "<code title="">hidden</code>", replace its value
   43375      with <var title="">charset</var>.</li>
   43376 
   43377      <li><p>If the entry's type is "<code title="">file</code>",
   43378      replace its value with the file's filename only.</li>
   43379 
   43380      <li><p>For each character in the entry's name and value that
   43381      cannot be expressed using the selected character encoding,
   43382      replace the character by a string consisting of a U+0026
   43383      AMPERSAND character (&amp;), a U+0023 NUMBER SIGN character (#),
   43384      one or more characters in the range U+0030 DIGIT ZERO (0) to
   43385      U+0039 DIGIT NINE (9) representing the Unicode code point of the
   43386      character in base ten, and finally a U+003B SEMICOLON character
   43387      (;).</li><!-- we should say it should be the shortest
   43388      possible string, no leading zeros. this whole step as asinine,
   43389      though, so... -->
   43390 
   43391      <li>
   43392 
   43393       <p>For each character in the entry's name and value, apply the
   43394       appropriate subsubsteps from the following list:</p>
   43395 
   43396       <dl class=switch><dt>The character is a U+0020 SPACE character</dt>
   43397 
   43398        <dd>Replace the character with a single U+002B PLUS SIGN
   43399        character (+).</dd>
   43400 
   43401 
   43402        <!-- * - . _ 0-9 a-z A-Z -->
   43403 
   43404        <dt>If the character isn't in the range U+0020, U+002A,
   43405        U+002D, U+002E, U+0030 to U+0039, U+0041 to U+005A, U+005F,
   43406        U+0061 to U+007A</dt>
   43407 
   43408        <dd>
   43409 
   43410         <p>Replace the character with a string formed as follows:</p>
   43411 
   43412         <ol><li><p>Let <var title="">s</var> be an empty string.</li>
   43413 
   43414          <li>
   43415 
   43416           <p>For each byte <var title="">b</var> of the character when
   43417           expressed in the selected character encoding in turn, run
   43418           the appropriate subsubsubstep from the list below:</p>
   43419 
   43420           <dl class=switch><dt>If the byte is in the range 0x20, 0x2A, 0x2D, 0x2E,
   43421            0x30 to 0x39, 0x41 to 0x5A, 0x5F, 0x61 to 0x7A</dt>
   43422 
   43423            <dd><p>Append to <var title="">s</var> the Unicode
   43424            character with the codepoint equal to the byte.</dd>
   43425 
   43426            <dt>Otherwise</dt>
   43427 
   43428            <dd><p>Append to the string a U+0025 PERCENT SIGN character
   43429            (%) followed by two characters in the ranges U+0030 DIGIT
   43430            ZERO (0) to U+0039 DIGIT NINE (9) and U+0041 LATIN CAPITAL
   43431            LETTER A to U+0046 LATIN CAPITAL LETTER F representing the
   43432            hexadecimal value of the byte (zero-padded if
   43433            necessary).</dd>
   43434 
   43435           </dl></li>
   43436 
   43437         </ol></dd>
   43438 
   43439        <dt>Otherwise</dt>
   43440 
   43441        <dd><p>Leave the character as is.</dd>
   43442 
   43443       </dl></li>
   43444 
   43445      <li><p>If the entry's name is "<code title="">isindex</code>",
   43446      its type is "<code title="">text</code>", and this is the first
   43447      entry in the <var title="">form data set</var>, then append the
   43448      value to <var title="">result</var> and skip the rest of the
   43449      substeps for this entry, moving on to the next entry, if any, or
   43450      the next step in the overall algorithm otherwise.</li>
   43451 
   43452      <li><p>If this is not the first entry, append a single U+0026
   43453      AMPERSAND character (&amp;) to <var title="">result</var>.</li>
   43454 
   43455      <li><p>Append the entry's name to <var title="">result</var>.</li>
   43456 
   43457      <li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</li>
   43458 
   43459      <li><p>Append the entry's value to <var title="">result</var>.</li>
   43460 
   43461     </ol></li>
   43462 
   43463    <li><p>Encode <var title="">result</var> as US-ASCII and return the
   43464    resulting byte stream.</li>
   43465 
   43466   </ol></div>
   43467 
   43468 
   43469 
   43470   <div class=impl>
   43471 
   43472   <h5 id=multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</h5>
   43473 
   43474   <p>The <dfn id=multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
   43475   algorithm</dfn> is to encode the <var title="">form data set</var>
   43476   using the rules described by RFC2388, <cite>Returning Values from
   43477   Forms: <code title="">multipart/form-data</code></cite>, and return
   43478   the resulting byte stream. <a href=#refsRFC2388>[RFC2388]</a></p>
   43479 
   43480   <p>Each entry in the <var title="">form data set</var> is a
   43481   <i>field</i>, the name of the entry is the <i>field name</i> and the
   43482   value of the entry is the <i>field value</i>, unless the entry's
   43483   name is "<code title="">_charset_</code>" and its type is "<code title="">hidden</code>", in which case the <i>field value</i> is the
   43484   character encoding used by the aforementioned algorithm to encode
   43485   the value of the field.</p>
   43486 
   43487   <p>The order of parts must be the same as the order of fields in the
   43488   <var title="">form data set</var>. Multiple entries with the same
   43489   name must be treated as distinct fields.</p>
   43490 
   43491   </div>
   43492 
   43493 
   43494 
   43495   <div class=impl>
   43496 
   43497   <h5 id=plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</h5>
   43498 
   43499   <p>The <dfn id=text/plain-encoding-algorithm><code title="">text/plain</code> encoding
   43500   algorithm</dfn> is as follows:</p>
   43501 
   43502   <ol><li><p>Let <var title="">result</var> be the empty string.</li>
   43503 
   43504    <li>
   43505 
   43506     <!-- this is different from application/x-www-form-urlencoded in
   43507     that it isn't limited to ASCII-compatible encodings -->
   43508 
   43509     <p>If the <code><a href=#the-form-element>form</a></code> element has an <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code> attribute,
   43510     then, taking into account the characters found in the <var title="">form data set</var>'s names and values, and the character
   43511     encodings supported by the user agent, select a character encoding
   43512     from the list given in the <code><a href=#the-form-element>form</a></code>'s <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code>
   43513     attribute. If none of the encodings are supported, then let the
   43514     selected character encoding be UTF-8.</p>
   43515 
   43516     <p>Otherwise, the selected character encoding is the
   43517     <a href="#document's-character-encoding">document's character encoding</a>.</p>
   43518 
   43519    </li>
   43520 
   43521    <li><p>Let <var title="">charset</var> be the <a href=#preferred-mime-name>preferred MIME
   43522    name</a> of the selected character encoding.</li>
   43523 
   43524    <li><p>If the entry's name is "<code title="">_charset_</code>" and
   43525    its type is "<code title="">hidden</code>", replace its value with
   43526    <var title="">charset</var>.</li>
   43527 
   43528    <li><p>If the entry's type is "<code title="">file</code>", replace
   43529    its value with the file's filename only.</li>
   43530 
   43531    <li>
   43532 
   43533     <p>For each entry in the <var title="">form data set</var>,
   43534     perform these substeps:</p>
   43535 
   43536     <ol><li><p>Append the entry's name to <var title="">result</var>.</li>
   43537 
   43538      <li><p>Append a single U+003D EQUALS SIGN character (=) to <var title="">result</var>.</li>
   43539 
   43540      <li><p>Append the entry's value to <var title="">result</var>.</li>
   43541 
   43542      <li><p>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF)
   43543      character pair to <var title="">result</var>.</li>
   43544 
   43545     </ol></li>
   43546 
   43547    <li><p>Encode <var title="">result</var> using the selected
   43548    character encoding and return the resulting byte stream.</li>
   43549 
   43550   </ol></div>
   43551 
   43552 
   43553 
   43554   <div class=impl>
   43555 
   43556   <h4 id=resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</h4>
   43557 
   43558   <p>When a form <var title="">form</var> is <dfn id=concept-form-reset title=concept-form-reset>reset</dfn>, the user agent must
   43559   <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-reset>reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must
   43560   invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset
   43561   algorithm</a> of each <a href=#category-reset title=category-reset>resettable elements</a> whose <a href=#form-owner>form
   43562   owner</a> is <var title="">form</var>, and <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> from <var title="">form</var>.</p>
   43563 
   43564   <p>Each <a href=#category-reset title=category-reset>resettable element</a>
   43565   defines its own <dfn id=concept-form-reset-control title=concept-form-reset-control>reset
   43566   algorithm</dfn>. Changes made to form controls as part of these
   43567   algorithms do not count as changes caused by the user (and thus,
   43568   e.g., do not cause <code title=event-input>input</code> events to
   43569   fire).</p>
   43570 
   43571   </div>
   43572 
   43573 
   43574 
   43575   <div class=impl>
   43576 
   43577   <h4 id=event-dispatch><span class=secno>4.10.23 </span>Event dispatch</h4>
   43578 
   43579   <p>When the user agent is to <dfn id=broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</dfn> or
   43580   <dfn id=broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
   43581   events</dfn> from a <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps:</p>
   43582 
   43583   <ol><li><p>Let <var title="">controls</var> be a list of all the <a href=#category-reset title=category-reset>resettable elements</a> whose <a href=#form-owner>form
   43584    owner</a> is <var title="">form</var>.</li>
   43585 
   43586    <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
   43587    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>
   43588 
   43589    <li><p>For each element in <var title="">controls</var>, in
   43590    <a href=#tree-order>tree order</a>, <a href=#fire-a-simple-event>fire a simple event</a> named
   43591    <var title="">event name</var> at the element.</li>
   43592 
   43593   </ol></div>
   43594 
   43595 
   43596   <h3 id=interactive-elements><span class=secno>4.11 </span>Interactive elements</h3>
   43597 
   43598   <h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>details</code></dfn> element</h4>
   43599 
   43600   <dl class=element><dt>Categories</dt>
   43601    <dd><a href=#flow-content>Flow content</a>.</dd>
   43602    <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
   43603    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   43604    <dt>Contexts in which this element may be used:</dt>
   43605    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   43606    <dt>Content model:</dt>
   43607    <dd>One <code><a href=#the-summary-element>summary</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
   43608    <dt>Content attributes:</dt>
   43609    <dd><a href=#global-attributes>Global attributes</a></dd>
   43610    <dd><code title=attr-details-open><a href=#attr-details-open>open</a></code></dd>
   43611    <dt>DOM interface:</dt>
   43612    <dd>
   43613 <pre class=idl>interface <dfn id=htmldetailselement>HTMLDetailsElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   43614            attribute boolean <a href=#dom-details-open title=dom-details-open>open</a>;
   43615 };</pre>
   43616    </dd>
   43617   </dl><p>The <code><a href=#the-details-element>details</a></code> element <a href=#represents>represents</a> a
   43618   disclosure widget from which the user can obtain additional
   43619   information or controls.</p>
   43620 
   43621   <p class=note>The <code><a href=#the-details-element>details</a></code> element is not appropriate
   43622   for footnotes. Please see <a href=#footnotes>the section on
   43623   footnotes</a> for details on how to mark up footnotes.</p>
   43624 
   43625   <p>The <span class=impl>first</span> <code><a href=#the-summary-element>summary</a></code> element
   43626   child of the element, if any, <a href=#represents>represents</a> the summary or
   43627   legend of the details. <span class=impl>If there is no child
   43628   <code><a href=#the-summary-element>summary</a></code> element, the user agent should provide its own
   43629   legend (e.g. "Details").</span></p>
   43630 
   43631   <p>The <dfn id=attr-details-open title=attr-details-open><code>open</code></dfn>
   43632   content attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present,
   43633   it indicates that the details are to be shown to the user. If the
   43634   attribute is absent, the details are not to be shown.</p>
   43635 
   43636   <div class=impl>
   43637 
   43638   <p>If the attribute is removed, then the details should be
   43639   hidden. If the attribute is added, the details should be shown.</p>
   43640 
   43641   <p>The user agent should allow the user to request that the details
   43642   be shown or hidden. To honor a request for the details to be shown,
   43643   the user agent must set the <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute on the element to
   43644   the value <code title="">open</code>. To honor a request for the
   43645   details to be hidden, the user agent must remove the <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute from the
   43646   element.</p>
   43647 
   43648   <p>The <dfn id=dom-details-open title=dom-details-open><code>open</code></dfn>
   43649   attribute must <a href=#reflect>reflect</a> the <code title=attr-details-open><a href=#attr-details-open>open</a></code> content attribute.</p>
   43650 
   43651   </div>
   43652 
   43653   <div class=example>
   43654 
   43655    <p>The following example shows the <code><a href=#the-details-element>details</a></code> element
   43656    being used to hide technical details in a progress report.</p>
   43657 
   43658    <pre>&lt;section class="progress window"&gt;
   43659  &lt;h1&gt;Copying "Really Achieving Your Childhood Dreams"&lt;/h1&gt;
   43660  &lt;details&gt;
   43661   &lt;summary&gt;Copying... &lt;progress max="375505392" value="97543282"&gt;&lt;/progress&gt; 25%&lt;/summary&gt;
   43662   &lt;dl&gt;
   43663    &lt;dt&gt;Transfer rate:&lt;/dt&gt; &lt;dd&gt;452KB/s&lt;/dd&gt;
   43664    &lt;dt&gt;Local filename:&lt;/dt&gt; &lt;dd&gt;/home/rpausch/raycd.m4v&lt;/dd&gt;
   43665    &lt;dt&gt;Remote filename:&lt;/dt&gt; &lt;dd&gt;/var/www/lectures/raycd.m4v&lt;/dd&gt;
   43666    &lt;dt&gt;Duration:&lt;/dt&gt; &lt;dd&gt;01:16:27&lt;/dd&gt;
   43667    &lt;dt&gt;Color profile:&lt;/dt&gt; &lt;dd&gt;SD (6-1-6)&lt;/dd&gt;
   43668    &lt;dt&gt;Dimensions:&lt;/dt&gt; &lt;dd&gt;320&times;240&lt;/dd&gt;
   43669   &lt;/dl&gt;
   43670  &lt;/details&gt;
   43671 &lt;/section&gt;</pre>
   43672 
   43673   </div>
   43674 
   43675   <div class=example>
   43676 
   43677    <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
   43678    used to hide some controls by default:</p>
   43679 
   43680    <pre>&lt;details&gt;
   43681  &lt;summary&gt;Name &amp; Extension:&lt;/summary&gt;
   43682  &lt;p&gt;&lt;input type=text name=fn value="Pillar Magazine.pdf"&gt;
   43683  &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=ext checked&gt; Hide extension&lt;/label&gt;
   43684 &lt;/details&gt;</pre>
   43685 
   43686    <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
   43687    in a list to allow the user to collapse a set of fields down to a
   43688    small set of headings, with the ability to open each one.</p>
   43689 
   43690    <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
   43691 
   43692    <p>In these examples, the summary really just summarises what the
   43693    controls can change, and not the actual values, which is less than
   43694    ideal.</p>
   43695 
   43696   </div>
   43697 
   43698 
   43699   <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>
   43700 
   43701   <dl class=element><dt>Categories</dt>
   43702    <dd>None.</dd>
   43703    <dt>Contexts in which this element may be used:</dt>
   43704    <dd>As the first child of a <code><a href=#the-details-element>details</a></code> element.</dd>
   43705    <dt>Content model:</dt>
   43706    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   43707    <dt>Content attributes:</dt>
   43708    <dd><a href=#global-attributes>Global attributes</a></dd>
   43709    <dt>DOM interface:</dt>
   43710    <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
   43711   </dl><p>The <code><a href=#the-summary-element>summary</a></code> element <a href=#represents>represents</a> a
   43712   summary, caption, or legend for the rest of the contents of the
   43713   <code><a href=#the-summary-element>summary</a></code> element's parent <code><a href=#the-details-element>details</a></code>
   43714   element<span class=impl>, if any</span>.</p>
   43715 
   43716 
   43717 
   43718 <!-- v2DATAGRID
   43719   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
   43720 
   43721   <dl class="element">
   43722    <dt>Categories</dt>
   43723    <dd><span>Flow content</span>.</dd>
   43724    <dd><span>Interactive content</span>.</dd>
   43725    <dd><span>Sectioning root</span>.</dd>
   43726    <dt>Contexts in which this element may be used:</dt>
   43727    <dd>Where <span>flow content</span> is expected.</dd>
   43728    <dt>Content model:</dt>
   43729    <dd><span>Flow content</span>.</dd>
   43730    <dt>Content attributes:</dt>
   43731    <dd><span>Global attributes</span></dd>
   43732 <!- -v2DGS:
   43733    <dd><code title="attr-datagrid-multiple">multiple</code></dd>
   43734 - ->
   43735    <dd><code title="attr-datagrid-disabled">disabled</code></dd>
   43736    <dt>DOM interface:</dt>
   43737    <dd>
   43738 <pre class="idl">interface <dfn>HTMLDataGridElement</dfn> : <span>HTMLElement</span> {
   43739 <!- -v2DGS:
   43740            attribute boolean <span title="dom-datagrid-multiple">multiple</span>;
   43741 - ->           attribute boolean <span title="dom-datagrid-disabled">disabled</span>;
   43742            attribute <span>DataGridListener</span> <span title="dom-datagrid-listener">listener</span>;
   43743 <!- - v2DGS:
   43744   readonly attribute <span>DataGridSelection</span> <span title="dom-datagrid-selection">selection</span>;
   43745 - ->
   43746   // columns
   43747   void <span title="dom-datagrid-addColumn">addColumn</span>(in <span>Column</span> id, in DOMString label, in DOMString type, in optional HTMLImageElement icon, in optional boolean sortable, in optional boolean hidden);
   43748            attribute DOMString <span title="dom-datagrid-sortColumn">sortColumn</span>;
   43749            attribute boolean <span title="dom-datagrid-sortAscending">sortAscending</span>;
   43750   void <span title="dom-datagrid-clearColumns">clearColumns</span>();
   43751 
   43752   // rows
   43753   void <span title="dom-datagrid-renotify">renotify</span>();
   43754   void <span title="dom-datagrid-setRowCount">setRowCount</span>(in long childCount, in long rowCount);
   43755   void <span title="dom-datagrid-setRows">setRows</span>(in <span>RowList</span> rows);
   43756   void <span title="dom-datagrid-insertRows">insertRows</span>(in <span>RowList</span> rows);
   43757   void <span title="dom-datagrid-deleteRows">deleteRows</span>(in <span>RowIDList</span> rows);
   43758   void <span title="dom-datagrid-repaint">repaint</span>(in <span>RowID</span> row, in DOMString column);
   43759   void <span title="dom-datagrid-clearRows">clearRows</span>();
   43760 <!- -
   43761  v2: opening and closing a row
   43762      moving a row's actual ID
   43763       - imagine new mail moving a thread up; you just want to add the new mail to the thread and move the thread's first mail to the top
   43764       - though actually that should probably just be done using display sorting
   43765 - ->
   43766 };
   43767 
   43768 typedef DOMString <dfn>Column</dfn>;
   43769 typedef sequence&lt;<span>Column</span>> <dfn>ColumnList</dfn>;
   43770 typedef sequence&lt;any> <dfn>Cell</dfn>; // <span>Column</span>, any... (exact types expected depend on the column type)
   43771 typedef sequence&lt;<span>Cell</span>> <dfn>CellList</dfn>;
   43772 typedef sequence&lt;any> <dfn>Row</dfn>; // <span>RowID</span>, long, long, <span>CellList</span>, optional boolean, optional long
   43773 typedef sequence&lt;<span>Row</span>> <dfn>RowList</dfn>;
   43774 typedef sequence&lt;unsigned long> <dfn>RowID</dfn>;
   43775 typedef sequence&lt;<span>RowID</span>> <dfn>RowIDList</dfn>;
   43776 
   43777 [Callback=FunctionOnly, NoInterfaceObject]
   43778 interface <dfn>RenderingContext2DCallback</dfn> {
   43779   DOMString <span title="dom-Rendering2DContextCallback-handleEvent">handleEvent</span>(in <span>CanvasRenderingContext2D</span> context, in unsigned long width, in unsigned long height);
   43780 };</pre>
   43781    </dd>
   43782   </dl>
   43783 
   43784  <!- - v2:
   43785    * datagrid: cells that are links (<a href=""></a>)
   43786   - ->
   43787 
   43788   <p>The <code>datagrid</code> element <span>represents</span> an
   43789   interactive representation of tree, list, or tabular data.</p>
   43790 
   43791   <p>The data being presented is provided by script using the methods
   43792   described in the following sections.</p>
   43793 
   43794 <!- -v2DGS:
   43795   <p>The <dfn
   43796   title="attr-datagrid-multiple"><code>multiple</code></dfn> attribute
   43797   is a <span>boolean attribute</span>. When set, it indicates that the
   43798   user can select more than one row at a time.</p>
   43799 - ->
   43800 
   43801   <p>The <dfn
   43802   title="attr-datagrid-disabled"><code>disabled</code></dfn> attribute
   43803   is a <span>boolean attribute</span> used to disable the
   43804   control. <span class="impl">When the attribute is set, the user
   43805   agent must disable the <code>datagrid</code>, preventing the user
   43806   from interacting with it. The <code>datagrid</code> element should
   43807   still continue to update itself when the underlying data changes,
   43808   though, as described in the next few sections. However, conformance
   43809   requirements stating that <code>datagrid</code> elements must react
   43810   to users in particular ways do not apply when the
   43811   <code>datagrid</code> is disabled.</span></p>
   43812 
   43813   <div class="impl">
   43814 
   43815   <!- -vsDGS: multiple - ->
   43816 
   43817   <p>The <dfn
   43818   title="dom-datagrid-disabled"><code>disabled</code></dfn> IDL
   43819   attribute must <span>reflect</span> the content attribute of the
   43820   same name.</p>
   43821 
   43822   </div>
   43823 
   43824   <!- - v2DGPA: One possible thing to be added is a way to detect when a
   43825   row/selection has been deleted, activated, etc, by the user (delete
   43826   key, enter key, etc). (v2DGPA = <datagrid> Perform Action) - ->
   43827 
   43828 
   43829   <h5>Introduction</h5>
   43830 
   43831   <p><i>This section is non-normative.</i></p>
   43832 
   43833   <p>In the <code>datagrid</code> data model, data is structured as a
   43834   set of rows representing a tree, each row being split into a number
   43835   of columns. The columns are always present in the data model,
   43836   although individual columns might be hidden in the presentation.</p>
   43837 
   43838   <hr>
   43839 
   43840   <p>Each row can have child rows. Child rows may be hidden or
   43841   shown, by closing or opening (respectively) the parent row.</p>
   43842 
   43843   <p>Rows are referred to by the path along the tree that one would
   43844   take to reach the row, using zero-based indices. Thus, the first row
   43845   of a list is row "0", the second row is row "1"; the first child row
   43846   of the first row is row "0,0", the second child row of the first row
   43847   is row "0,1"; the fourth child of the seventh child of the third
   43848   child of the tenth row is "9,2,6,3", etc.</p>
   43849 
   43850   <p>The chains of numbers that give a row's path, or identifier, are
   43851   represented by arrays of positions, represented in IDL by the
   43852   <span>RowID</span> interface.</p>
   43853 
   43854   <p>The root of the tree is represented by an empty array.</p>
   43855 
   43856   <hr>
   43857 
   43858   <p>Each column has a string that is used to identify it in the API,
   43859   a label that is shown to users interacting with the column, a type,
   43860   and optionally an icon.</p>
   43861 
   43862   <p>The possible types are as follows:</p>
   43863 
   43864   <table>
   43865    <thead>
   43866     <tr>
   43867      <td>Keyword
   43868      <td>Description
   43869    <tbody>
   43870     <tr>
   43871      <td><code title="datagrid-type-text">text</code>
   43872      <td>Simple text.
   43873     <tr>
   43874      <td><code title="datagrid-type-editable">editable</code>
   43875      <td>Editable text.
   43876     <tr>
   43877      <td><code title="datagrid-type-checkable">checkable</code>
   43878      <td>Text with a check box.
   43879     <tr>
   43880      <td><code title="datagrid-type-list">list</code>
   43881      <td>A list of values that the user can switch between.
   43882     <tr>
   43883      <td><code title="datagrid-type-progress">progress</code>
   43884      <td>A progress bar.
   43885     <tr>
   43886      <td><code title="datagrid-type-meter">meter</code>
   43887      <td>A gauge.
   43888     <tr>
   43889      <td><code title="datagrid-type-custom">custom</code>
   43890      <td>A canvas onto which arbitrary content can be drawn.
   43891   </table>
   43892 
   43893   <p>Each column can be flagged as sortable, in which case the user
   43894   will be able to sort the view using that column.</p>
   43895 
   43896   <p>Columns are not necessarily visible. A column can be created
   43897   invisible by default. The user can select which columns are to be
   43898   shown.</p>
   43899 
   43900   <p>When no columns have been added to the <code>datagrid</code>, a
   43901   column with no name, whose identifier is the empty string, whose
   43902   type is <code title="datagrid-type-text">text</code>, and which is
   43903   not sortable, is implied. This column is removed if any explicit
   43904   columns are declared.</p>
   43905 
   43906   <p>Each cell uses the type given for its column, so all cells in a
   43907   column present the same type of information.</p>
   43908 
   43909 <!- -v2DGS:
   43910   <p>Selection of data in a <code>datagrid</code> operates at the row
   43911   level. If the <code title="attr-datagrid-multiple">multiple</code>
   43912   attribute is present, multiple rows can be selected at once,
   43913   otherwise the user can only select one row at a time.</p>
   43914 - ->
   43915 
   43916   <!- - v2DGDND: selection should draggable to and from datagrids - ->
   43917 
   43918 
   43919   <h6>Example: a <code>datagrid</code> backed by a static <code>table</code> element</h6>
   43920 
   43921   ...
   43922 
   43923 
   43924   <h6>Example: a <code>datagrid</code> backed by nested <code>ol</code> elements</h6>
   43925 
   43926   ...
   43927 
   43928 
   43929   <h6>Example: a <code>datagrid</code> backed by a server</h6>
   43930 
   43931   ...
   43932 
   43933 
   43934   <h5>Populating the <code>datagrid</code></h5>
   43935 
   43936   <dl class="domintro">
   43937 
   43938    <dt><var title="">datagrid</var> . <code title="dom-datagrid-listener">listener</code> [ = <var title="">value</var> ]</dt>
   43939    <dd>
   43940 
   43941     <p>Return the current object that is configured as the
   43942     <code>datagrid</code> listener, if any. Returns null if there is
   43943     none.</p>
   43944 
   43945     <p>The listener is an object provided by the script author that
   43946     receives notifications when the <code>datagrid</code> needs row
   43947     data to render itself, when the user opens and closes rows with
   43948     children, when the user edits a cell, and when the user invokes a
   43949     row's context menu. (The <code>DataGridListener</code> interface
   43950     used for this purpose is described in the next section.)</p>
   43951 
   43952     <p>Can be set, to change the current listener.</p>
   43953 
   43954    </dd>
   43955 
   43956 
   43957    <dt><var title="">datagrid</var> . <code title="dom-datagrid-renotify">renotify</code>()</dt>
   43958    <dd>
   43959 
   43960     <p>Causes the <code>datagrid</code> to resend notifications to the
   43961     listener (if any) for any rows or cells that the
   43962     <code>datagrid</code> does not yet have information for.</p>
   43963 
   43964     <!- - useful, e.g., if there is a server error and the script loses
   43965     track of what rows it's supposed to be reporting. - ->
   43966 
   43967    </dd>
   43968 
   43969 
   43970    <dt><var title="">datagrid</var> . <code title="dom-datagrid-addColumn">addColumn</code>(<var title="">id</var>, <var title="">label</var>, <var title="">type</var> [, <var title="">icon</var> [, <var title="">sortable</var> [, <var title="">hidden</var> ] ] ] )</dt>
   43971    <dd>
   43972 
   43973     <p>Adds a column to the <code>datagrid</code>.</p>
   43974 
   43975     <p>If a column with the given identifier has already been added,
   43976     it just replaces the information for that column.</p>
   43977 
   43978     <p>The possible types are enumerated in the previous section.</p>
   43979 
   43980    </dd>
   43981 
   43982 
   43983    <dt><var title="">datagrid</var> . <code title="dom-datagrid-sortColumn">sortColumn</code> [ = <var title="">value</var> ]</dt>
   43984    <dd>
   43985 
   43986     <p>Returns the identifier of the column by which the data is to be
   43987     sorted.</p>
   43988 
   43989     <p>Can be set, to indicate that the sort order has changed. This
   43990     will cause the <code>datagrid</code> to clear its position
   43991     information for rows, so <code
   43992     title="dom-datagrid-setRows">setRows()</code> will have to be
   43993     called again with the new sort order.</p>
   43994 
   43995     <p>The columns are not actually sorted by the
   43996     <code>datagrid</code>; the data has to be sorted by the script
   43997     that adds the rows to the <code>datagrid</code>.</p>
   43998 
   43999    </dd>
   44000 
   44001 
   44002    <dt><var title="">datagrid</var> . <code title="dom-datagrid-sortAscending">sortAscending</code> [ = <var title="">value</var> ]</dt>
   44003    <dd>
   44004 
   44005     <p>Returns true if the data is to be sorted with smaller values
   44006     first; otherwise, returns false, indicating that bigger values are
   44007     to be put first.</p>
   44008 
   44009     <p>Can be set, to indicate that the order is about to change.</p>
   44010 
   44011    </dd>
   44012 
   44013 
   44014    <dt><var title="">datagrid</var> . <code title="dom-datagrid-clearColumns">clearColumns</code>()</dt>
   44015    <dd>
   44016 
   44017     <p>Removes all the columns in the <code>datagrid</code>,
   44018     reinstating the implied column.</p>
   44019 
   44020    </dd>
   44021 
   44022 
   44023    <dt><var title="">datagrid</var> . <code title="dom-datagrid-setRowCount">setRowCount</code>(<var title="">childCount</var>, <var title="">rowCount</var>)</dt>
   44024    <dd>
   44025 
   44026     <p>Sets the numbers of rows in the <code>datagrid</code>,
   44027     excluding rows that are descendants of rows that are closed.</p>
   44028 
   44029     <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
   44030     arguments contradict each other or previously declared information
   44031     (e.g. declaring that the <code>datagrid</code> has three rows when
   44032     the 12th row has been declared).</p>
   44033 
   44034    </dd>
   44035 
   44036 
   44037    <dt><var title="">datagrid</var> . <code title="dom-datagrid-setRows">setRows</code>(<var title="">rows</var>)</dt>
   44038    <dd>
   44039 
   44040     <p>Updates data for rows in the <code>datagrid</code>, or fills in
   44041     data for rows previously implied by a call to <code
   44042     title="dom-datagrid-setRowCount">setRowCount()</code> but not
   44043     previously declared.</p>
   44044 
   44045     <p>The <var title="">rows</var> argument is an array of rows, each
   44046     represented by a further array consisting of:</p>
   44047 
   44048     <ol class="brief">
   44049 
   44050      <li>A <code>RowID</code> object identifying the row.</li>
   44051 
   44052      <li>An integer giving the position of the row in its parent,
   44053      given the current sort order, or &#x2212;1 to set other row data
   44054      without setting a position or changing a previously declared
   44055      position.</li>
   44056 
   44057      <li>An integer giving the number of children of the row, or 0 if
   44058      the row has no children, or &#x2212;1 if the row has children but
   44059      the count is currently unknown. If the number of children has
   44060      already been set to 0 or a positive integer, then passing
   44061      &#x2212;1 leaves the previous count unchanged.</li>
   44062 
   44063      <li>An array giving the data for zero or more cells in the row,
   44064      as described below.</li>
   44065 
   44066      <li>A boolean declaring whether the row is open or not. This
   44067      entry, if omitted, is assumed to be false (closed), unless the
   44068      row has already been declared as open.</li>
   44069 
   44070      <li>An integer giving the number of rows that are descendants of
   44071      this row, excluding those that are descendants of descendants of
   44072      this row that are closed. This entry can be omitted if the row is
   44073      closed or if it has already been declared.</li>
   44074 
   44075     </ol>
   44076 
   44077     <p>The array giving the data for the cells in the row consists of
   44078     a further set of arrays, one per cell. The first item of each of
   44079     these arrays is the column's identifier; the subsequent values
   44080     vary based on the type of the column, as follows:</p>
   44081 
   44082     <dl>
   44083 
   44084      <dt><code title="datagrid-type-text">text</code></dt>
   44085      <dd>
   44086       <ol class="brief">
   44087        <li>A string giving the cell's value.
   44088        <li>Optionally, an <code>img</code> element giving an icon for the cell.
   44089       </ol>
   44090      </dd>
   44091 
   44092      <dt><code title="datagrid-type-editable">editable</code></dt>
   44093      <dd>
   44094       <ol class="brief">
   44095        <li>A string giving the cell's value.
   44096        <li>Optionally, a <code>datalist</code> element giving a set of predefined options.
   44097        <li>Optionally, an <code>img</code> element giving an icon for the cell.
   44098       </ol>
   44099      </dd>
   44100 
   44101      <dt><code title="datagrid-type-checkable">checkable</code></dt>
   44102      <dd>
   44103       <ol class="brief">
   44104        <li>A string giving the cell's value.
   44105        <li>A boolean, indicating whether the cell is checked (true) or not (false).
   44106        <li>Optionally, a boolean indicating whether the value of the cell is obscured as indeterminate (true), or not (false).
   44107        <li>Optionally, an <code>img</code> element giving an icon for the cell.
   44108       </ol>
   44109      </dd>
   44110 
   44111      <dt><code title="datagrid-type-list">list</code></dt>
   44112      <dd>
   44113       <ol class="brief">
   44114        <li>A string giving the cell's current value.
   44115        <li>A <code>select</code> element giving the <span title="concept-select-option-list">list of options</span>.
   44116        <li>Optionally, an <code>img</code> element giving an icon for the cell.
   44117       </ol>
   44118      </dd>
   44119 
   44120      <dt><code title="datagrid-type-progress">progress</code></dt>
   44121      <dd>
   44122       <ol class="brief">
   44123        <li>A value in the range 0.0 (no progress) to 1.0 (task complete).
   44124       </ol>
   44125      </dd>
   44126 
   44127      <dt><code title="datagrid-type-meter">meter</code></dt>
   44128      <dd>
   44129       <ol class="brief">
   44130        <li>A number giving the cell's value.
   44131        <li>Optionally, a number giving the maximum value, if it's not 1.
   44132        <li>Optionally, a number giving the minimum value, if it's not 0.
   44133        <li>Optionally, a number giving the highest value that is considered "low".
   44134        <li>Optionally, a number giving the lowest value that is considered "high".
   44135        <li>Optionally, a number giving the value that is considered optimal.
   44136       </ol>
   44137      </dd>
   44138 
   44139      <dt><code title="datagrid-type-custom">custom</code></dt>
   44140      <dd>
   44141       <ol class="brief">
   44142        <li>A number giving the minimum width of the cell, in CSS pixels, that is desired.
   44143        <li>A number giving the minimum height of the cell, in CSS pixels, that is desired.
   44144        <li>A function that is passed a <code>CanvasRenderingContext2D</code> object, along with the width and height (in CSS pixels) of the cell that the context will draw on.
   44145       </ol>
   44146      </dd>
   44147 
   44148     </dl>
   44149 
   44150     <p>While the rows in a single call to the <code
   44151     title="dom-datagrid-setRows">setRows()</code> method can be in any
   44152     order, for each row, it is important that all its ancestor rows
   44153     and all its open previous siblings are also declared, either in
   44154     the same call or in an earlier one.</p>
   44155 
   44156     <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
   44157     arguments contradict each other or previously declared information
   44158     (e.g. saying that a row's position is 5 when the parent row only
   44159     has 3 children, or naming a column that doesn't exist, or
   44160     declaring a row without declaring its parent, or changing the
   44161     number of children that a row has while that row and its ancestors
   44162     are all open).</p>
   44163 
   44164    </dd>
   44165 
   44166 
   44167    <dt><var title="">datagrid</var> . <code title="dom-datagrid-insertRows">insertRows</code>(<var title="">rows</var>)</dt>
   44168    <dd>
   44169 
   44170     <p>Inserts the given rows into the <code>datagrid</code>,
   44171     increasing the numbers of rows that the <code>datagrid</code>
   44172     assumes are present.</p>
   44173 
   44174     <p>The <var title="">rows</var> argument is an array of rows in
   44175     the same structure as the argument to the <code
   44176     title="dom-datagrid-setRows">setRows()</code> method described
   44177     above, with the same expectations of consistency (a given row's
   44178     ancestors and earlier open siblings being listed either earlier or
   44179     in the same call as a given row). However, unlike with the <code
   44180     title="dom-datagrid-setRows">setRows()</code> method, if a row is
   44181     inserted along with its child, the child is not included in the
   44182     child and row counts of the parent row; every row in the <var
   44183     title="">rows</var> argument will increase its parent's counts
   44184     automatically.</p>
   44185 
   44186     <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the
   44187     arguments contradict each other or previously declared
   44188     information.</p>
   44189 
   44190    </dd>
   44191 
   44192 
   44193    <dt><var title="">datagrid</var> . <code title="dom-datagrid-deleteRows">deleteRows</code>(<var title="">rows</var>)</dt>
   44194    <dd>
   44195 
   44196     <p>Removes the given rows from the <code>datagrid</code>, and
   44197     updates the number of rows known to be in the
   44198     <code>datagrid</code> accordingly. The argument is an array of
   44199     <code>RowID</code> objects identifying the rows to remove.</p>
   44200 
   44201     <p>Throws a <code>DATAGRID_MODEL_ERR</code> exception if the argument
   44202     includes a row the <code>datagrid</code> doesn't know about.</p>
   44203     <!- - since otherwise behaviour might depend on where the user
   44204     scrolled! - ->
   44205 
   44206    </dd>
   44207 
   44208 
   44209    <dt><var title="">datagrid</var> . <code title="dom-datagrid-repaint">repaint</code>(<var title="">row</var>, <var title="">column</var>)</dt>
   44210    <dd>
   44211 
   44212     <p>If the given column's type is <code
   44213     title="datagrid-type-custom">custom</code>, then causes the
   44214     <code>datagrid</code> to reinvoke the function that obtains the
   44215     desired rendering.</p>
   44216 
   44217    </dd>
   44218 
   44219 
   44220    <dt><var title="">datagrid</var> . <code title="dom-datagrid-clearRows">clearRows</code>()</dt>
   44221    <dd>
   44222 
   44223     <p>Clears the <code>datagrid</code> of all row data, resetting it
   44224     to empty<!- - v2DGS:, and clears the selection- ->.</p>
   44225 
   44226    </dd>
   44227 
   44228   </dl>
   44229 
   44230 
   44231   <div class="impl">
   44232 
   44233   <h6>The listener</h6>
   44234 
   44235   <p>The <dfn
   44236   title="dom-datagrid-listener"><code>listener</code></dfn> IDL
   44237   attribute allows authors to specify an object that will receive all
   44238   the notifications from the <code>datagrid</code>. Initially, its
   44239   value must be null. On getting, it must return its value. On
   44240   setting, its value must be set to the new value, and then the user
   44241   agent must <span>queue a task</span> to call the <code
   44242   title="dom-listener-initialize">initialize()</code> method with the
   44243   <code>datagrid</code> element as its only argument.</p>
   44244 
   44245 
   44246   <h6>The columns</h6>
   44247 
   44248   <p>The columns are represented by the <dfn>column list</dfn>, an
   44249   ordered list of entries for columns, each of which consists of:</p>
   44250 
   44251   <dl>
   44252 
   44253    <dt>An identifier</dt>
   44254 
   44255    <dd>A string used to identify the column in the API.</dd>
   44256 
   44257    <dt>A label</dt>
   44258 
   44259    <dd>A string used in the user interface.</dd>
   44260 
   44261    <dt>A type</dt>
   44262 
   44263    <dd>One of the types described below.</dd>
   44264 
   44265    <dt>An icon</dt>
   44266 
   44267    <dd>An image, copied from an <code>img</code> element when the
   44268    column was declared.</dd>
   44269 
   44270    <dt>Whether the column is sortable</dt>
   44271 
   44272    <dd>A boolean indicating whether the user can request that the data
   44273    be sorted by this column (true), or not (false).</dd>
   44274 
   44275    <dt>Whether the column is visible</dt>
   44276 
   44277    <dd>A boolean indicating whether the column is part of the
   44278    <code>datagrid</code>'s rendering.</dd>
   44279 
   44280   </dl>
   44281 
   44282   <p>Initially, the <span>column list</span> must have a single
   44283   column, the <dfn>default column</dfn>, whose identifier is the empty
   44284   string, whose label is the empty string, whose type is <code
   44285   title="datagrid-type-text">text</code>, with no icon, which is not
   44286   sortable, and which <em>is</em> visible.</p>
   44287 
   44288   <hr>
   44289 
   44290   <p>The <dfn title="dom-datagrid-addColumn"><code>addColumn(<var
   44291   title="">id</var>, <var title="">label</var>, <var
   44292   title="">type</var>, <var title="">icon</var>, <var
   44293   title="">sortable</var>, <var title="">hidden</var>)</code></dfn>
   44294   method must run the following steps:</p>
   44295 
   44296   <ol>
   44297 
   44298    <li><p>If there is already an entry in <span>column list</span>,
   44299    other than the <span>default column</span>, whose identifier is
   44300    <var title="">id</var>, throw a <code>DATAGRID_MODEL_ERR</code>
   44301    exception and abort these steps.</p></li>
   44302 
   44303    <li>
   44304 
   44305     <p>If <var title="">type</var> is not a string equal to one of the
   44306     <span>allowed <code>datagrid</code> column types</span>, then
   44307     throw a <code>DATAGRID_MODEL_ERR</code> exception and abort these
   44308     steps.</p>
   44309 
   44310    </li>
   44311 
   44312    <li><p>If the <var title="">icon</var> argument is present and not
   44313    null, but the given <code>img</code> element's <code
   44314    title="dom-img-complete">complete</code> attribute is false, then
   44315    let <var title="">icon</var> be null.</p></li>
   44316 
   44317    <li><p>If the <var title="">icon</var> argument is present and not
   44318    null, then copy the image data from that <code>img</code> element,
   44319    and let <var title="">image</var> be the copy of that image
   44320    data. Otherwise, let <var title="">image</var> be nothing.</p></li>
   44321 
   44322    <li><p>Append a new entry to the <span>column list</span>, with
   44323    <var title="">id</var> as its identifier, <var title="">label</var>
   44324    as its label, <var title="">type</var> as its type, and <var
   44325    title="">image</var> as its icon. Let the column be sortable if the
   44326    <var title="">sortable</var> argument is present and true, and make
   44327    it visible unless the <var title="">hidden</var> argument is
   44328    present and true.</p></li>
   44329 
   44330    <li><p>If the <span>column list</span> contains the <span>default
   44331    column</span>, then remove the <span>default column</span> from the
   44332    <span>column list</span>, discard any data for cells in that column
   44333    in any rows in the <code>datagrid</code>, set <code
   44334    title="dom-datagrid-sortColumn">sortColumn</code> to <var
   44335    title="">id</var>, set <code
   44336    title="dom-datagrid-sortAscending">sortAscending</code> to true,
   44337    and run the <span><code>datagrid</code> resort
   44338    steps</span>.</p></li>
   44339 
   44340   </ol>
   44341 
   44342   <hr>
   44343 
   44344   <p>The <dfn
   44345   title="dom-datagrid-sortColumn"><code>sortColumn</code></dfn> IDL
   44346   attribute gives the current column used for sorting. Initially, its
   44347   value must be the empty string. On getting, it must return its
   44348   current value. On setting, if the new value doesn't match the
   44349   identifier of one of the columns in the <span>column list</span>,
   44350   then the user agent must throw a <code>DATAGRID_MODEL_ERR</code>
   44351   exception. Otherwise, if the new value is not the same as its
   44352   current value, then the user agent must set the attribute to the new
   44353   value, and then run the <span><code>datagrid</code> resort
   44354   steps</span>.</p>
   44355 
   44356   <p>The <dfn
   44357   title="dom-datagrid-sortAscending"><code>sortAscending</code></dfn>
   44358   IDL attribute specifies the direction that the tree is sorted in,
   44359   ascending (true) or descending (false). Initially, its value must be
   44360   true (ascending). On getting, it must return its current value. On
   44361   setting, if the new value is not the same as its current value, then
   44362   the user agent must set the attribute to the new value, and then run
   44363   the <span><code>datagrid</code> resort steps</span>.</p>
   44364 
   44365   <p>When a column is marked as being sortable, the user agent should
   44366   allow the user to select that column to be the column used for
   44367   sorting, and should allow the user to chose whether the sort order
   44368   is ascending or descending.</p>
   44369 
   44370   <p>When the user changes the sort order in this manner, the user
   44371   agent must update the <code
   44372   title="dom-datagrid-sortColumn">sortColumn</code> and <code
   44373   title="dom-datagrid-sortAscending">sortAscending</code> attributes
   44374   appropriately, and then run the <span><code>datagrid</code> resort
   44375   steps</span>.</p>
   44376 
   44377   <p class="note">The <span><code>datagrid</code> resort steps</span>
   44378   are described in the next section.</p>
   44379 
   44380   <hr>
   44381 
   44382   <p>The <dfn
   44383   title="dom-datagrid-clearColumns"><code>clearColumns()</code></dfn>
   44384   method, if the <span>column list</span> doesn't contain the
   44385   <span>default column</span>, must empty the <span>column
   44386   list</span>, append the <span>default column</span> to the now empty
   44387   <span>column list</span>, discard any data for cells in all rows in
   44388   the <code>datagrid</code>, set <code
   44389   title="dom-datagrid-sortColumn">sortColumn</code> to the empty
   44390   string, set <code
   44391   title="dom-datagrid-sortAscending">sortAscending</code> to true, and
   44392   run the <span><code>datagrid</code> resort steps</span>. (If the
   44393   <span>column list</span> is already just the <span>default
   44394   column</span>, then the method does nothing.)</p>
   44395 
   44396 
   44397   <h6>The rows</h6>
   44398 
   44399   <p>A <code>datagrid</code> element is intended to show a
   44400   representation of a tree, where typically the user only sees a
   44401   small part of the tree at a time.</p>
   44402 
   44403   <p>To make this efficient, the <code>datagrid</code> element
   44404   <em>actually</em> shows a small part of a <em>sparse</em> tree, so
   44405   that only relevant parts of the data structure need be loaded at any
   44406   time. Specifically, the model requires only that all the ancestor
   44407   rows of the displayed rows be loaded, as well as any open earlier
   44408   siblings (in the displayed sort order) of the displayed rows.</p>
   44409 
   44410   <p>Conceptually, therefore, a <code>datagrid</code> has a number of
   44411   related sparse data structures backing it.</p>
   44412 
   44413   <p>The first is the <dfn>natural order sparse data tree</dfn>. This
   44414   is the structure in which rows are entered as they are declared, in
   44415   their natural order. This can differ from the order actually
   44416   displayed to the user. It consists of nested sparse lists of
   44417   rows. In the <span>natural order sparse data tree</span>, a row will
   44418   always have all its parents already declared. Once a row is added to
   44419   this structure, it can only be removed by the <code
   44420   title="dom-datagrid-deleteRows">deleteRows()</code> and <code
   44421   title="dom-datagrid-clearRows">clearRows()</code> methods. The order of
   44422   nodes in this tree never changes; to move a node in this tree, it
   44423   has to be removed and then another row (with the same data)
   44424   reinserted elsewhere.</p>
   44425 
   44426   <p>The second structure is the <dfn>display order sparse data
   44427   tree</dfn>. This is a similar structure that contains a subset of
   44428   the rows in the <span>natural order sparse data tree</span>, ordered
   44429   in the order given by the <code
   44430   title="dom-datagrid-sortAscending">sortAscending</code> and <code
   44431   title="dom-datagrid-sortColumn">sortColumn</code> attributes, and
   44432   excluding rows with one or more ancestors that are closed. This tree
   44433   is cleared whenever the <code
   44434   title="dom-datagrid-sortAscending">sortAscending</code> and <code
   44435   title="dom-datagrid-sortColumn">sortColumn</code> attributes
   44436   change.</p>
   44437 
   44438   <p>The third structure is the <dfn>display order sparse data
   44439   list</dfn>. This structure is a flattened representation of the
   44440   <span>display order sparse data tree</span>.</p>
   44441 
   44442   <p>At any time, a number of consecutive rows in the <span>display
   44443   order sparse data list</span> are physically visible to the
   44444   user. The <code>datagrid</code> fires notifications to a <span
   44445   title="dom-datagrid-listener">listener</span> (provided by script),
   44446   and the listener, or other some script, is expected to feed the
   44447   <code>datagrid</code> with the information needed to render the
   44448   control.</p>
   44449 
   44450   <p>A <code>datagrid</code> has a <dfn>pending <code>datagrid</code>
   44451   rows list</dfn>, which is a list of rows in the <span>display order
   44452   sparse data list</span> for which the <code>datagrid</code> has sent
   44453   notifications requesting information but not yet received
   44454   information about.</p>
   44455 
   44456   <p>A <code>datagrid</code> also has a <dfn>pending
   44457   <code>datagrid</code> <em>cells</em> list</dfn>, which is a list of
   44458   row/column pairs (cells) for which the <code>datagrid</code> has
   44459   sent notifications requesting information but not yet received
   44460   information about.</p>
   44461 
   44462   <p>User agents may discard information about rows that are not
   44463   displayed and that are not ancestors or open earlier siblings of
   44464   rows or ancestors of rows that are displayed.</p>
   44465 
   44466   <hr>
   44467 
   44468   <p>These structures are different views of the collection of rows
   44469   that form the <code>datagrid</code>. Each row has the following
   44470   information associated with it:</p>
   44471 
   44472   <dl>
   44473 
   44474    <dt>A parent</dt>
   44475 
   44476    <dd><p>Either another row, or the <code>datagrid</code> itself. This
   44477    is the parent of the row in the <span>natural order sparse data
   44478    tree</span> and the <span>display order sparse data tree</span>
   44479    for the <code>datagrid</code>.</p></dd>
   44480 
   44481    <dt>A natural order position relative to the other rows with the
   44482    same parent</dt>
   44483 
   44484    <dd>
   44485 
   44486     <p>This is the number of rows that precede this row under the same
   44487     parent in the <span>natural order sparse data tree</span>. This
   44488     number can't be changed relative to other rows in the same parent;
   44489     to change the relative natural order of data in the
   44490     <code>datagrid</code>, the original rows have to be removed and
   44491     new rows (with the same data but different natural positions)
   44492     inserted in their place. (The exact number of a row can change, as
   44493     new rows can be inserted above it.)</p>
   44494 
   44495     <p>A row can be identified by a <code>RowID</code> object. This is
   44496     an array of numbers, consisting of the natural order positions of
   44497     each ancestor row and the row itself, starting from the furthest
   44498     ancestor. Thus, for instance, the fourth child row of the first
   44499     child row of the second row in a <code>datagrid</code> would be
   44500     identified by a <code>RowID</code> object whose value is <code
   44501     title="">[1, 0, 3]</code>. A row's identifier changes if rows are
   44502     <span title="dom-datagrid-insertRows">inserted before it</span> in
   44503     the <code>datagrid</code>.</p>
   44504 
   44505    </dd>
   44506 
   44507    <dt>A display order position relative to the other rows with
   44508    the same parent</dt>
   44509 
   44510    <dd><p>This is the number of rows that precede this row under the
   44511    same parent in the <span>display order sparse data
   44512    tree</span>. This number can be unknown. If the sort order
   44513    changes, then this information is lost (as the <span>display order
   44514    sparse data tree</span> is cleared).</p></dd>
   44515 
   44516    <dt>A child count</dt>
   44517 
   44518    <dd><p>The number of rows that have this row as a parent. If this is
   44519    zero, the row cannot be opened. If this is &#x2212;1, then the
   44520    child count is unknown but the row can be opened. This value can be
   44521    changed by the <code title="dom-datagrid-setRows">setRows()</code>
   44522    method only if the current value is &#x2212;1 or if the row or one
   44523    of its ancestors is closed. Otherwise, it can only be changed
   44524    indirectly using the <code
   44525    title="dom-datagrid-insertRows">insertRows()</code> and <code
   44526    title="dom-datagrid-deleteRows">deleteRows()</code> methods.</p></dd>
   44527 
   44528    <dt>An open flag</dt>
   44529 
   44530    <dd><p>A boolean indicating whether the row is open (true) or
   44531    closed (false). Once set, the flag can only be changed by the user
   44532    or while one of the row's ancestors is itself closed. A row can
   44533    also be in a third state, "opening", which is treated as closed for
   44534    all purposes except that the user agent may indicate that the row
   44535    is in this special state, and except that when the row is updated
   44536    to have a row count, the row will switch to being open.</p></dd>
   44537 
   44538    <dt>A row count</dt>
   44539 
   44540    <dd><p>The number of rows that have this row as a parent or
   44541    ancestor, and that do not have an ancestor that is a descendant of
   44542    this row that is itself closed. If this is &#x2212;1, then the row
   44543    count is unknown. This value can be changed by the <code
   44544    title="dom-datagrid-setRows">setRows()</code> method only if the
   44545    row or one of its ancestors is closed (or opening, but not
   44546    open). Otherwise, it can only be changed indirectly using the <code
   44547    title="dom-datagrid-insertRows">insertRows()</code> and <code
   44548    title="dom-datagrid-deleteRows">deleteRows()</code>
   44549    methods.</p></dd>
   44550 
   44551    <dt>Cells</dt>
   44552 
   44553    <dd><p>The data that applies to this row. Cell data is discussed in
   44554    more detail below.</p></dd>
   44555 
   44556   </dl>
   44557 
   44558   <p>The <code>datagrid</code> itself also has a <dfn title="datagrid
   44559   child count">child count</dfn> and a <dfn title="datagrid row
   44560   count">row count</dfn>, which are analogous to the child counts and
   44561   row counts for rows. Initially, these must be zero.</p>
   44562 
   44563   <hr>
   44564 
   44565   <p>The <dfn><code>datagrid</code> resort steps</dfn>, which are
   44566   invoked when the sort order changes as described in the previous
   44567   section, are as follows:</p>
   44568 
   44569   <ol>
   44570 
   44571    <li>
   44572 
   44573     <p>Clear the <span>display order sparse data tree</span>
   44574     (i.e. mark the display order position of all the rows in the
   44575     <code>datagrid</code> as unknown).</p>
   44576 
   44577     <p>User agents may cache the position information of rows for
   44578     various values of <code
   44579     title="dom-datagrid-sortColumn">sortColumn</code> and <code
   44580     title="dom-datagrid-sortAscending">sortAscending</code>, instead
   44581     of discarding the information altogether. If the user agent caches
   44582     this information, and has information that applies to the current
   44583     values of <code title="dom-datagrid-sortColumn">sortColumn</code>
   44584     and <code title="dom-datagrid-sortAscending">sortAscending</code>,
   44585     then the user agent may repopulate the <span>display order sparse
   44586     data tree</span> from this information.</p>
   44587 
   44588    </li>
   44589 
   44590    <li>
   44591 
   44592     <p>Clear the <span>pending <code>datagrid</code> rows list</span>
   44593     and the <span>pending <code>datagrid</code> cells list</span>.</p>
   44594 
   44595    </li>
   44596 
   44597    <li>
   44598 
   44599     <p>Invoke the <span><code>datagrid</code> update display
   44600     algorithm</span>.</p>
   44601 
   44602    </li>
   44603 
   44604    <!- - v2: queue a task to fire an event, or tell the listener the
   44605    sort order changed, or something - ->
   44606 
   44607   </ol>
   44608 
   44609   <hr>
   44610 
   44611   <p>The <dfn
   44612   title="dom-datagrid-renotify"><code>renotify()</code></dfn> method
   44613   must empty the <span>pending <code>datagrid</code> rows list</span>
   44614   and the <span>pending <code>datagrid</code> cells list</span>, and
   44615   invoke the <span><code>datagrid</code> update display
   44616   algorithm</span>.</p>
   44617 
   44618   <hr>
   44619 
   44620   <p>The <dfn title="dom-datagrid-setRowCount"><code>setRowCount(<var
   44621   title="">childCount</var>, <var
   44622   title="">rowCount</var>)</code></dfn> method must run the following
   44623   steps:</p>
   44624 
   44625   <ol>
   44626 
   44627    <li>
   44628 
   44629     <p>Set the <span><code>datagrid</code> child count</span> to <var
   44630     title="">childCount</var>, the <span><code>datagrid</code> row
   44631     count</span> to <var title="">rowCount</var>.</p>
   44632 
   44633    </li>
   44634 
   44635    <li>
   44636 
   44637     <p><span>Audit the <code>datagrid</code></span>. If this fails,
   44638     then revert the changes made in the previous step, throw a
   44639     <code>DATAGRID_MODEL_ERR</code> exception, and abort these
   44640     steps.</p>
   44641 
   44642    </li>
   44643 
   44644    <li>
   44645 
   44646     <p>Invoke the <span><code>datagrid</code> update display
   44647     algorithm</span>.</p>
   44648 
   44649    </li>
   44650 
   44651   </ol>
   44652 
   44653   <hr>
   44654 
   44655   <p>The <dfn title="dom-datagrid-setRows"><code>setRows(<var
   44656   title="">rows</var>)</code></dfn> method must run the following
   44657   steps:</p>
   44658 
   44659   <ol>
   44660 
   44661    <li>
   44662 
   44663     <p><span title="type-check a RowList object">Type-check the <var
   44664     title="">rows</var> argument</span>. If this fails, throw a
   44665     <code>TypeError</code> exception, and abort these steps.</p>
   44666 
   44667    </li>
   44668 
   44669    <li>
   44670 
   44671     <p><span title="partially sort a RowList object">Partially sort
   44672     the <var title="">rows</var> argument</span>.</p>
   44673 
   44674    </li>
   44675 
   44676    <li>
   44677 
   44678     <p>For each <code>Row</code> object in the <var
   44679     title="">rows</var> argument, in order, perform the appropriate
   44680     steps from the list below.</p>
   44681 
   44682     <p class="note">The changes made to the <code>datagrid</code>'s
   44683     data structures in this step get reverted (as required below) if
   44684     any consistency errors are detected either in this step or the
   44685     next.</p>
   44686 
   44687     <dl>
   44688 
   44689      <dt>If there already exists a row in the <code>datagrid</code>'s
   44690      <span>natural order sparse data tree</span> with the same
   44691      identifier as given by the <code>Row</code> object's
   44692      <code>RowID</code> object, and that row and all its ancestors are
   44693      open</dt>
   44694 
   44695      <dd>
   44696 
   44697       <p>If one of the following conditions is true, then revert all
   44698       the changes done in this step, throw a
   44699       <code>DATAGRID_MODEL_ERR</code> exception, and abort these
   44700       steps:</p>
   44701 
   44702       <ul>
   44703 
   44704        <li>The value of the <code>Row</code> object's second entry is
   44705        neither &#x2212;1 nor equal to the child count of the
   44706        preexisting row.</li>
   44707 
   44708        <li>The <code>Row</code> object has fewer than four
   44709        entries or more than six entries.</li>
   44710 
   44711        <li>The <code>Row</code> object has five or more entries, and
   44712        its fifth entry is false.</li>
   44713 
   44714        <li>The <code>Row</code> object has six entries, and its sixth
   44715        entry is not equal to the row count of the preexisting
   44716        row.</li>
   44717 
   44718       </ul>
   44719 
   44720      </dd>
   44721 
   44722      <dt>If there already exists a row in the <code>datagrid</code>'s
   44723      <span>natural order sparse data tree</span> with the same
   44724      identifier as given by the <code>Row</code> object's
   44725      <code>RowID</code> object, but either that row or one of its
   44726      ancestors is closed</dt>
   44727 
   44728      <dd>
   44729 
   44730       <p>Set the preexisting row's child count to the value of the
   44731       <code>Row</code> object's second entry.</p>
   44732 
   44733       <p>If the <code>Row</code> object has five or more entries, and
   44734       either its fifth entry is true and the preexisting row is closed
   44735       but not opening, or its fifth entry is false and the preexisting
   44736       row is open, then: if the preexisting row has no ancestor row
   44737       that is closed, then revert all the changes done in this step,
   44738       throw a <code>DATAGRID_MODEL_ERR</code> exception, and abort
   44739       these steps; otherwise, if the fifth entry is false, then close
   44740       the row; otherwise, open the row.</p>
   44741 
   44742       <p>If the <code>Row</code> object has six entries, set the
   44743       preexisting row's row count to the value of the <code>Row</code>
   44744       object's sixth entry.</p>
   44745 
   44746       <p>If the preexisting row is opening, then: increase the
   44747       <span><code>datagrid</code> row count</span> and the row counts
   44748       of any ancestor rows by the number of rows that the preexisting
   44749       row now has in its row count, then open the row.</p> <!- - we
   44750       should also "update the <span>pending <code>datagrid</code> rows
   44751       list</span> and the <span>pending <code>datagrid</code> cells
   44752       list</span> accordingly" - ->
   44753 
   44754 
   44755      </dd>
   44756 
   44757      <dt>There does not exist a row in the <code>datagrid</code>'s
   44758      <span>natural order sparse data tree</span> with the same
   44759      identifier as given by the <code>Row</code> object's
   44760      <code>RowID</code> object</dt>
   44761 
   44762      <dd>
   44763 
   44764       <p>If the <code>RowID</code> object has a length greater than 1,
   44765       then verify that there is a row identified by the
   44766       <code>RowID</code> consisting of all but the last number in the
   44767       <code>Row</code> object's <code>RowID</code>. If there is no
   44768       such row present in the <span>natural order sparse data
   44769       tree</span>, then revert all the changes done in this step,
   44770       throw a <code>DATAGRID_MODEL_ERR</code> exception, and abort
   44771       these steps.</p>
   44772 
   44773       <p>Create a row and insert it into the <span>natural order
   44774       sparse data tree</span>, such that its parent is the row
   44775       identified by the <code>RowID</code> consisting of all but the
   44776       last number in the <code>Row</code> object's <code>RowID</code>,
   44777       or the <code>datagrid</code> if the length of the
   44778       <code>Row</code> object's <code>RowID</code> is 1; with its
   44779       natural order position being the last number of the
   44780       <code>Row</code> object's <code>RowID</code>; with the child
   44781       count being the value of the third entry of the <code>Row</code>
   44782       object; with the row being marked closed unless the
   44783       <code>Row</code> object has five or more entries and its fifth
   44784       entry is true, in which case the row is open; and with its row
   44785       count being &#x2212;1 unless the <code>Row</code> object has six
   44786       entries, in which case the row count is equal to the value of
   44787       the <code>Row</code> object's sixth entry.</p>
   44788 
   44789      </dd>
   44790 
   44791     </dl>
   44792 
   44793    </li>
   44794 
   44795    <li>
   44796 
   44797     <p><span>Audit the <code>datagrid</code></span>. If this fails,
   44798     then revert the changes made in the previous step, throw a
   44799     <code>DATAGRID_MODEL_ERR</code> exception, and abort these
   44800     steps.</p>
   44801 
   44802    </li>
   44803 
   44804    <li>
   44805 
   44806     <p>For each <code>Row</code> object in the <var
   44807     title="">rows</var> argument, in order, <span title="apply a Row
   44808     object">apply the <code>Row</code> object</span>.</p>
   44809 
   44810    </li>
   44811 
   44812    <li>
   44813 
   44814     <p>Invoke the <span><code>datagrid</code> update display
   44815     algorithm</span>.</p>
   44816 
   44817    </li>
   44818 
   44819   </ol>
   44820 
   44821   <hr>
   44822 
   44823   <p>The <dfn title="dom-datagrid-insertRows"><code>insertRows(<var
   44824   title="">rows</var>)</code></dfn> method must run the following
   44825   steps:</p>
   44826 
   44827   <ol>
   44828 
   44829    <li>
   44830 
   44831     <p><span title="type-check a RowList object">Type-check the <var
   44832     title="">rows</var> argument</span>. If this fails, throw a
   44833     <code>TypeError</code> exception, and abort these steps.</p>
   44834 
   44835    </li>
   44836 
   44837    <li>
   44838 
   44839     <p><span title="partially sort a RowList object">Partially sort
   44840     the <var title="">rows</var> argument</span>.</p>
   44841 
   44842    </li>
   44843 
   44844    <li>
   44845 
   44846     <p>For each <code>Row</code> object in the <var
   44847     title="">rows</var> argument, in order, run the following
   44848     steps:</p>
   44849 
   44850     <p class="note">The changes made to the <code>datagrid</code>'s
   44851     data structures in this step get reverted (as required below) if
   44852     any consistency errors are detected either in this step or the
   44853     next.</p>
   44854 
   44855     <ol>
   44856 
   44857      <li>
   44858 
   44859       <p>Let <var title="">parent</var> be the row identified by the
   44860       <code>RowID</code> consisting of all but the last number in the
   44861       <code>Row</code> object's <code>RowID</code>, or the
   44862       <code>datagrid</code> itself if the <code>Row</code> object's
   44863       <code>RowID</code> has length 0.</p>
   44864 
   44865       <p>If there is no such row present in the <span>natural order
   44866       sparse data tree</span>, then revert all the changes done in
   44867       this algorithm, throw a <code>DATAGRID_MODEL_ERR</code>
   44868       exception, and abort these steps.</p>
   44869 
   44870      </li>
   44871 
   44872      <li>
   44873 
   44874       <p>Increment by one the natural order position of all rows whose
   44875       parent is <var title="">parent</var> and whose natural order
   44876       position is equal to or greater than the last number of the
   44877       <code>Row</code> object's <code>RowID</code>.</p>
   44878 
   44879      </li>
   44880 
   44881      <li>
   44882 
   44883       <p>If the value of the <code>Row</code> object's second entry is
   44884       not &#x2212;1, then increment by one the display order position
   44885       of all rows whose parent is <var title="">parent</var> and whose
   44886       display order position is equal to or greater than the value of
   44887       the <code>Row</code> object's second entry.</p>
   44888 
   44889      <!- -(Not sure how to really say this.)
   44890       <p>Update the <span>pending <code>datagrid</code> rows
   44891       list</span> and the <span>pending <code>datagrid</code> cells
   44892       list</span> accordingly.</p>
   44893      - ->
   44894 
   44895      </li>
   44896 
   44897      <li>
   44898 
   44899       <p>Create a row and insert it into the <span>natural order
   44900       sparse data tree</span>, such that its parent is <var
   44901       title="">parent</var>; with its natural order position being the
   44902       last number of the <code>Row</code> object's <code>RowID</code>;
   44903       with the child count being the value of the third entry of the
   44904       <code>Row</code> object; with the row being marked closed unless
   44905       the <code>Row</code> object has five or more entries and its
   44906       fifth entry is true, in which case the row is open; and with its
   44907       row count being &#x2212;1 unless the <code>Row</code> object has
   44908       six entries, in which case the row count is equal to the value
   44909       of the <code>Row</code> object's sixth entry.</p>
   44910 
   44911      </li>
   44912 
   44913     </ol>
   44914 
   44915    </li>
   44916 
   44917    <li>
   44918 
   44919     <p>For each <code>Row</code> object in the <var
   44920     title="">rows</var> argument, in order, <span title="apply a Row
   44921     object">apply the <code>Row</code> object</span>.</p>
   44922 
   44923    </li>
   44924 
   44925    <li>
   44926 
   44927     <p>Invoke the <span><code>datagrid</code> update display
   44928     algorithm</span>.</p>
   44929 
   44930    </li>
   44931 
   44932   </ol>
   44933 
   44934   <hr>
   44935 
   44936   <p>When an algorithm requires the user agent to <dfn>type-check a
   44937   <code>RowList</code> object</dfn> (an array), each entry in the
   44938   object must be checked against the following requirements. If any
   44939   are false, then the type-check fails, otherwise it passes.</p>
   44940 
   44941   <ul>
   44942 
   44943    <li><p>The entry is a <code>Row</code> object (an
   44944    array).</p></li>
   44945 
   44946    <li><p>The first value in the <code>Row</code> is a
   44947    <code>RowID</code> object (also an array), whose length is at least
   44948    1, and whose values are all integers greater than or equal to
   44949    zero.</p></li>
   44950 
   44951    <li><p>The numbers in the <code>RowID</code> object do not exactly
   44952    match any of the other entries in the <code>RowList</code> object
   44953    (i.e. no two <code>Row</code> objects have the same
   44954    identifier).</p></li>
   44955 
   44956    <li><p>The second value in the <code>Row</code> is an integer that
   44957    is either &#x2212;1, zero, or a positive integer.</p></li>
   44958 
   44959    <li><p>The third value in the <code>Row</code> is an integer that
   44960    is either &#x2212;1, zero, or a positive integer.</p></li>
   44961 
   44962    <li><p>The fourth value in the <code>Row</code> is a
   44963    <code>CellList</code> object (yet another array).</p></li>
   44964 
   44965    <li><p>Each entry in the <span>CellList</span> object is a
   44966    <code>Cell</code> object (again, an array).</p></li>
   44967 
   44968    <li><p>Each <code>Cell</code> object in the <span>CellList</span>
   44969    object has as its first value a <code>Column</code> object (a
   44970    string), and its value is the identifier of one of the columns in
   44971    the <span>column list</span>.</p></li>
   44972 
   44973    <li>
   44974 
   44975     <p>Each <code>Cell</code> object in the <span>CellList</span>
   44976     object has as its second and subsequent entries values that match
   44977     the following requirements, as determined by the type of the
   44978     column identified by the first entry:</p>
   44979 
   44980     <dl>
   44981 
   44982      <dt>If the column's type is <code title="datagrid-type-text">text</code></dt>
   44983      <dd>
   44984 
   44985       <p>The second entry's value is a string, and either there are
   44986       only two entries, or there are three, and the third entry is
   44987       an <code>img</code> element.</p>
   44988 
   44989       <p>If there is an <code>img</code> element specified, its <code
   44990       title="dom-img-complete">complete</code> attribute is true.</p>
   44991 
   44992      </dd>
   44993 
   44994      <dt>If the column's type is <code title="datagrid-type-editable">editable</code></dt>
   44995      <dd>
   44996 
   44997       <p>The second entry's value is a string, and either there are
   44998       only two entries, or the third entry is a
   44999       <code>datalist</code> element, and either there are only three
   45000       entries, or there are four, and the fourth entry is an
   45001       <code>img</code> element.</p>
   45002 
   45003       <p>If there is an <code>img</code> element specified, its <code
   45004       title="dom-img-complete">complete</code> attribute is true.</p>
   45005 
   45006      </dd>
   45007 
   45008      <dt>If the column's type is <code title="datagrid-type-checkable">checkable</code></dt>
   45009      <dd>
   45010 
   45011       <p>The second entry's value is a string, the third entry is a
   45012       boolean, and either there are only three entries, or the
   45013       fourth entry is also a boolean, and either there are only four
   45014       entries, or there are five, and the fifth entry is an
   45015       <code>img</code> element.</p>
   45016 
   45017       <p>If there is an <code>img</code> element specified, its <code
   45018       title="dom-img-complete">complete</code> attribute is true.</p>
   45019 
   45020      </dd>
   45021 
   45022      <dt>If the column's type is <code title="datagrid-type-list">list</code></dt>
   45023      <dd>
   45024 
   45025       <p>The second entry's value is a string, the third entry is a
   45026       <code>select</code> element, and either there are only three
   45027       entries, or there are four, and the fourth entry is an
   45028       <code>img</code> element.</p>
   45029 
   45030       <p>If there is an <code>img</code> element specified, its <code
   45031       title="dom-img-complete">complete</code> attribute is true.</p>
   45032 
   45033      </dd>
   45034 
   45035      <dt>If the column's type is <code title="datagrid-type-progress">progress</code></dt>
   45036      <dd>
   45037 
   45038       <p>There are only two entries, the second entry's value is a
   45039       number, and the number's value is between 0.0 and 1.0
   45040       inclusive.</p>
   45041 
   45042      </dd>
   45043 
   45044      <dt>If the column's type is <code title="datagrid-type-meter">meter</code></dt>
   45045      <dd>
   45046 
   45047       <p>There are at least two, but possibly up to seven, entries,
   45048       all entries but the first one are numbers, and the following
   45049       relationships hold:</p>
   45050 
   45051       <ul class="brief">
   45052 
   45053        <li>The second entry is less than the third, or less than 1.0
   45054        if the third is absent.</li>
   45055 
   45056        <li>The second entry is greater than the fourth, or greater
   45057        than 0.0 if the fourth is absent.</li>
   45058 
   45059        <li>If there are at least three entries, the third entry is
   45060        greater than the fourth, or greater than zero if the fourth
   45061        is absent.</li>
   45062 
   45063        <li>If there are at least five entries, the fifth is not
   45064        greater than the third and not less than the fourth.</li>
   45065 
   45066        <li>If there are at least six entries, the sixth is not
   45067        greater than the third and not less than the fifth.</li>
   45068 
   45069        <li>If there are at least seven entries, the fifth is not
   45070        greater than the third and not less than the fourth.</li>
   45071 
   45072       </ul>
   45073 
   45074      </dd>
   45075 
   45076      <dt>If the column's type is <code title="datagrid-type-custom">custom</code></dt>
   45077      <dd>
   45078 
   45079       <p>There are four entries, the second and third are numbers
   45080       that are integers greater than zero, and the fourth is a
   45081       <code>Rendering2DContextCallback</code> object (a
   45082       function).</p>
   45083 
   45084      </dd>
   45085 
   45086     </dl>
   45087 
   45088    </li>
   45089 
   45090    <li><p>Either there are only four values in the <code>Row</code>,
   45091    or the fifth value in the <code>Row</code> is a boolean.</p></li>
   45092 
   45093    <li><p>Either there are only four or five values in the
   45094    <code>Row</code>, or there are six, and the sixth value in the
   45095    <code>Row</code> an integer that is greater than or equal to
   45096    zero.</p></li>
   45097 
   45098   </ul>
   45099 
   45100   <p>Where the above requirements say that a value is to be a string,
   45101   the user agent must apply the ToString() abstract operation to the
   45102   value, assume that the value was indeed a string, and use the result
   45103   in the rest of the algorithm as if it had that had been the value
   45104   passed to the method. <a href="#refsECMA262">[ECMA262]</a></p>
   45105 
   45106   <p>Where the above requirements say that a value is to be a number,
   45107   the user agent must first apply the ToNumber() abstract operation
   45108   to the value, and then verify that the result is neither an Infinity
   45109   value nor a Not-a-Number (NaN) value. If this result is indeed
   45110   acceptable (i.e. finite), the user agent must use the result in the
   45111   rest of the algorithm as if it had that had been the value passed to
   45112   the method. <a href="#refsECMA262">[ECMA262]</a></p>
   45113 
   45114   <p>Where the above requirements say that a value is to be an
   45115   integer, the user agent must first apply the ToNumber() abstract
   45116   operation to the value, and then verify that the result is a finite
   45117   integer. If so, the user agent must use the result in the rest of
   45118   the algorithm as if it had that had been the value passed to the
   45119   method. <a href="#refsECMA262">[ECMA262]</a></p>
   45120 
   45121   <p>Where the above requirements say that a value is to be a boolean,
   45122   the user agent must apply the ToBoolean() abstract operation to the
   45123   value, assume that the value was indeed a boolean, and use the
   45124   result in the rest of the algorithm as if it had that had been the
   45125   value passed to the method. <a href="#refsECMA262">[ECMA262]</a></p>
   45126 
   45127   <hr>
   45128 
   45129   <p>When an algorithm requires the user agent to <dfn>audit the
   45130   <code>datagrid</code></dfn>, the <code>datagrid</code> must be
   45131   checked against the following requirements. If any are false, then
   45132   the audit fails, otherwise it passes.</p>
   45133 
   45134   <ul>
   45135 
   45136    <li>There is no row whose natural order position is greater than or
   45137    equal to the child count of its parent row in the <span>natural
   45138    order sparse data tree</span>.</li>
   45139 
   45140    <li>There is no row whose display order position is greater than or
   45141    equal to the child count of its parent row in the <span>display
   45142    order sparse data tree</span>.</li>
   45143 
   45144    <li>There is no row such that the sum of that row's child count and
   45145    the row counts all the open rows that are direct children of that
   45146    row in the <span>natural order sparse data tree</span> is less than
   45147    that row's row count.</li>
   45148 
   45149    <li>Of the rows whose child count is equal to the number of rows
   45150    that are direct children of that row in the <span>natural order
   45151    sparse data tree</span>, there is none such that the sum of that
   45152    row's child count and the row counts of all the open rows that are
   45153    direct children of that row in the <span>natural order sparse data
   45154    tree</span> is greater than that row's row count.</li>
   45155 
   45156   </ul>
   45157 
   45158   <p>For the purposes of this audit, the <code>datagrid</code> must be
   45159   treated as the parent row of all the rows that are direct children
   45160   of the <code>datagrid</code> in the <span>natural order sparse data
   45161   tree</span> and the <span>display order sparse data tree</span>. The
   45162   child count of this implied row is the <span><code>datagrid</code>
   45163   child count</span>, and the row count of this implied row is the
   45164   <span><code>datagrid</code> row count</span>.</p>
   45165 
   45166   <hr>
   45167 
   45168   <p>When an algorithm requires the user agent to <dfn>partially sort
   45169   a <code>RowList</code> object</dfn> (an array), the entries in the
   45170   object must be resorted such that <code>Row</code> objects are
   45171   listed after any of their ancestors and after any of their earlier
   45172   siblings. In other words, for any two <code>Row</code> objects <var
   45173   title="">a</var> and <var title="">b</var> in the
   45174   <code>RowList</code>, where <var title="">a</var> is before <var
   45175   title="">b</var> after the sort, the following conditions must
   45176   hold:</p>
   45177 
   45178   <ul>
   45179 
   45180    <li><p>If their <code>RowID</code> objects are the same length and
   45181    have values that are equal except for the last value, then the last
   45182    value of <var title="">a</var>'s <code>RowID</code>'s last value
   45183    must be less than <var title="">b</var>'s <code>RowID</code>'s last
   45184    value (i.e. earlier siblings must come before their later
   45185    siblings).</p></li>
   45186 
   45187    <li><p>If their <code>RowID</code> objects are not the same length,
   45188    but the values in the shorter of the two are the same as the first
   45189    few values in the longer one, then <var title="">a</var>'s
   45190    <code>RowID</code> must be the shorter one (i.e. ancestors must
   45191    come before their descendants).</p></li>
   45192 
   45193   </ul>
   45194 
   45195   <hr>
   45196 
   45197   <p>The <dfn title="dom-datagrid-deleteRows"><code>deleteRows(<var
   45198   title="">rows</var>)</code></dfn> method must run the following
   45199   steps:</p>
   45200 
   45201   <ol>
   45202 
   45203    <li>
   45204 
   45205     <p>If any of the entries in <var title="">rows</var> are not
   45206     <code>RowID</code> objects consisting of one or more entries whose
   45207     values are all integers that are greater than or equal to zero,
   45208     then throw a <code>TypeError</code> exception and abort these
   45209     steps.</p>
   45210 
   45211     <p>To check if a value is an integer, the user agent must first
   45212     apply the ToNumber() abstract operation to the value, and then
   45213     verify that the result is a finite integer. If so, the user agent
   45214     must use the result in the rest of the algorithm as if it had that
   45215     had been the value passed to the method. <a
   45216     href="#refsECMA262">[ECMA262]</a></p>
   45217 
   45218    </li>
   45219 
   45220    <li>
   45221 
   45222     <p>If any of the <code>RowID</code> objects in the <var
   45223     title="">rows</var> argument identify a row that isn't present in
   45224     the <span>natural order sparse data tree</span>, then throw a
   45225     <code>DATAGRID_MODEL_ERR</code> exception and abort these
   45226     steps.</p>
   45227 
   45228    </li>
   45229 
   45230    <li>
   45231 
   45232     <p>If any row is listed twice in the <var title="">rows</var>
   45233     argument, then throw a <code>DATAGRID_MODEL_ERR</code> exception
   45234     and abort these steps.</p>
   45235 
   45236    </li>
   45237 
   45238    <li>
   45239 
   45240     <p>Sort the <var title="">rows</var> argument such that the
   45241     entries are given in the same order as the rows they identify
   45242     would be visited in a pre-order, depth first traversal of the
   45243     <span>natural order sparse data tree</span>.</p>
   45244 
   45245    </li>
   45246 
   45247    <li>
   45248 
   45249     <p>For each row identified by entries in <var title="">rows</var>,
   45250     <em>in reverse order</em>, run the following steps:</p>
   45251 
   45252     <ol>
   45253 
   45254      <li>
   45255 
   45256       <p>Decrement the child count of the row's parent row, if that
   45257       child count is greater than zero. If the row has no parent,
   45258       decrement the <span><code>datagrid</code> child
   45259       count</span>.</p>
   45260 
   45261       <p>If the row has a parent row, and its child count is now zero,
   45262       then close that row.</p>
   45263 
   45264      </li>
   45265 
   45266      <li>
   45267 
   45268       <p>Let <var title="">delta</var> be one more than the row's row
   45269       count if the row is open and its row count is greater than zero;
   45270       otherwise, let <var title="">delta</var> be one.</p>
   45271 
   45272      </li>
   45273 
   45274      <li>
   45275 
   45276       <p>Let <var title="">ancestor</var> be the row.</p>
   45277 
   45278      </li>
   45279 
   45280      <li>
   45281 
   45282       <p><i>Row count loop</i>: Let <var title="">ancestor</var> be
   45283       <var title="">ancestor</var>'s parent row, if any, or null if it
   45284       has none.</p>
   45285 
   45286      </li>
   45287 
   45288      <li>
   45289 
   45290       <p>If <var title="">ancestor</var> is null, then decrement the
   45291       <span><code>datagrid</code> row count</span> by <var
   45292       title="">delta</var>. Otherwise, if <var title="">ancestor</var>
   45293       is open, then decrement its row count by <var
   45294       title="">delta</var>.</p>
   45295 
   45296      </li>
   45297 
   45298      <li>
   45299 
   45300       <p>If <var title="">ancestor</var> is not null, then jump back
   45301       to the step labeled <i>row count loop</i> above.</p>
   45302 
   45303      </li>
   45304 
   45305      <li>
   45306 
   45307       <p>Let <var title="">parent</var> be the row's parent, or the
   45308       <code>datagrid</code> if the row has no parent.</p>
   45309 
   45310      </li>
   45311 
   45312      <li>
   45313 
   45314       <p>Decrement by one the natural order position of all rows whose
   45315       parent is <var title="">parent</var> and whose natural order
   45316       position is equal to or greater than the row's own natural order
   45317       position.</p>
   45318 
   45319      </li>
   45320 
   45321      <li>
   45322 
   45323       <p>If the row is in the <span>display order sparse data
   45324       tree</span>, then decrement by one the display order position of
   45325       all rows whose parent is <var title="">parent</var> and whose
   45326       display order position is equal to or greater than the row's own
   45327       display order position.</p>
   45328 
   45329      </li>
   45330 
   45331      <li>
   45332 
   45333       <p>Clear the row and its descendants from the
   45334       <code>Datagrid</code>.</p>
   45335 
   45336      </li>
   45337 
   45338     </ol>
   45339 
   45340    </li>
   45341 
   45342    <li>
   45343 
   45344     <p>Invoke the <span><code>datagrid</code> update display
   45345     algorithm</span>.</p>
   45346 
   45347    </li>
   45348 
   45349   </ol>
   45350 
   45351   <hr>
   45352 
   45353   <p>The <dfn
   45354   title="dom-datagrid-clearRows"><code>clearRows()</code></dfn> method
   45355   must empty the <span>natural order sparse data tree</span>, reset
   45356   both the <span><code>datagrid</code> child count</span> and the
   45357   <span><code>datagrid</code> row count</span> to zero, and invoke the
   45358   <span><code>datagrid</code> update display algorithm</span>.</p>
   45359 
   45360   <hr>
   45361 
   45362   <p>The <dfn title="dom-datagrid-repaint"><code>repaint(<var
   45363   title="">row</var>, <var title="">column</var>)</code></dfn> method
   45364   must cause the user agent to clear its cache for the cell specified
   45365   by the identifier <var title="">row</var> and the column <var
   45366   title="">column</var>, if that column's type is <code
   45367   title="datagrid-type-custom">custom</code>. If the given column has
   45368   not been declared, or its type is not <code
   45369   title="datagrid-type-custom">custom</code>, then the user agent must
   45370   throw a <code>DATAGRID_MODEL_ERR</code> exception. If the given row
   45371   is not known, then the method must do nothing. If the cell is indeed
   45372   cleared, the user agent must reinvoke the previously registered
   45373   <code>RenderingContext2DCallback</code> callback when it needs to
   45374   repaint that row.</p>
   45375 
   45376   <hr>
   45377 
   45378   <p>If a row has a child count that isn't zero, then the user agent
   45379   should offer to the user the option of opening and closing the
   45380   row.</p>
   45381 
   45382   <p>When a row is opened, if the row's row count is greater than
   45383   zero, then the user agent must increase the
   45384   <span><code>datagrid</code> row count</span> and the row counts of
   45385   any ancestor rows by the number of rows that the newly opened row
   45386   has in its row count<!- - we should also "update the <span>pending
   45387   <code>datagrid</code> rows list</span> and the <span>pending
   45388   <code>datagrid</code> cells list</span> accordingly" - ->, then must
   45389   mark the row as open, then may fill in the <span>display order
   45390   sparse data tree</span> with any information that the user agent has
   45391   cached about the display order positions of descendants of the newly
   45392   opened row, and then must invoke the <code
   45393   title="dom-listener-rowOpened">rowOpened()</code> method on the
   45394   current <code title="dom-datagrid-listener">listener</code> with as
   45395   its first argument a <code>RowID</code> object identifying the row
   45396   that was opened and as its second argument the boolean false, and
   45397   then must invoke the <span><code>datagrid</code> update display
   45398   algorithm</span>.</p>
   45399 
   45400   <p>On the other hand, when a row is opened and the row's row count
   45401   is &#x2212;1, then the user agent must mark the row as opening, and
   45402   then must invoke the <code
   45403   title="dom-listener-rowOpened">rowOpened()</code> method on the
   45404   current <code title="dom-datagrid-listener">listener</code> with as
   45405   its first argument a <code>RowID</code> object identifying the row
   45406   that was opened and as its second argument the boolean true.</p>
   45407 
   45408   <p>When a row is closed, the user agent must decrease the
   45409   <span><code>datagrid</code> row count</span> and the row counts of
   45410   any ancestor rows by the number of rows that the newly closed row
   45411   has in its row count, and then must invoke the <code
   45412   title="dom-listener-rowOpened">rowOpened()</code> method on the
   45413   current <code title="dom-datagrid-listener">listener</code> with as
   45414   its first and only argument a <code>RowID</code> object identifying
   45415   the row that was opened.</p>
   45416 
   45417 
   45418 
   45419   <h6>The cells</h6>
   45420 
   45421   <p>Each row has one cell per column. Each cell has the same type as
   45422   its column. The <dfn>allowed <code>datagrid</code> column
   45423   types</dfn>, what they represent, and the requirements for when the
   45424   user interacts with them, are as follows:</p>
   45425 
   45426   <dl>
   45427 
   45428    <dt><dfn title="datagrid-type-text"><code>text</code></dfn></dt>
   45429    <dd>
   45430 
   45431     <p>The cell represents some text and an optional image.</p>
   45432 
   45433    </dd>
   45434 
   45435    <dt><dfn title="datagrid-type-editable"><code>editable</code></dfn></dt>
   45436    <dd>
   45437 
   45438     <p>The cells represents some editable text, an optional
   45439     <code>datalist</code> giving autocompletion hints, and an
   45440     optional image.</p>
   45441 
   45442     <p>If there is a <code>datalist</code> element, the user agent
   45443     should offer the suggestions represented by that element to the
   45444     user. The user agent may use the suggestion's <span
   45445     title="concept-option-label">label</span> to identify the
   45446     suggestion. If the user selects a suggestion, then the editable
   45447     text must be set to the selected suggestion's <span
   45448     title="concept-option-value">value</span>, as if the user had
   45449     written that value himself.</p>
   45450 
   45451     <p>When the user edits the value, either directly or using the
   45452     <code>datalist</code>, the user agent must invoke the <code
   45453     title="dom-listener-cellChanged">cellChanged()</code> method on
   45454     the current <code title="dom-datagrid-listener">listener</code>
   45455     with as its first argument a <code>RowID</code> identifying the
   45456     cell's row, as its second argument the identifier of the cell's
   45457     column, as its third argument the new value, and as its fourth
   45458     argument the previous value.</p>
   45459 
   45460    </dd>
   45461 
   45462    <dt><dfn title="datagrid-type-checkable"><code>checkable</code></dfn></dt>
   45463    <dd>
   45464 
   45465     <p>The cell represents some text, a check box that optionally has
   45466     its value obscured as indeterminate, and an optional image.</p>
   45467 
   45468     <p>When the user checks or unchecks the check box, the user agent
   45469     must change the check box's state appropriately and stop obscuring
   45470     the check box as indeterminate (if it is obscuring it), and then
   45471     must invoke the <code
   45472     title="dom-listener-cellChanged">cellChanged()</code> method on
   45473     the current <code title="dom-datagrid-listener">listener</code>
   45474     with as its first argument a <code>RowID</code> identifying the
   45475     cell's row, as its second argument the identifier of the cell's
   45476     column, as its third argument true if the check box is now checked
   45477     and false otherwise, and as its fourth argument true if the check
   45478     box was previously checked and false otherwise.</p>
   45479 
   45480    </dd>
   45481 
   45482    <dt><dfn title="datagrid-type-list"><code>list</code></dfn></dt>
   45483    <dd>
   45484 
   45485     <p>The cell represents some text giving the current value selected
   45486     from a dropdown list of options, a <code>select</code> element
   45487     giving the list of options, and an optional image.</p>
   45488 
   45489     <p>The user agent should allow the user to change the value of the
   45490     cell from its current value to one of the <span
   45491     title="concept-option-value">values</span> given by
   45492     <code>option</code> elements in the <span
   45493     title="concept-select-option-list">list of options</span> (if
   45494     any). The user agent may use the <code>option</code> elements'
   45495     <span title="concept-option-label">labels</span> to annotate each
   45496     option.</p>
   45497 
   45498     <p>When the user selects a new value from the <code>select</code>
   45499     element's <span title="concept-select-option-list">list of
   45500     options</span>, the user agent must invoke the <code
   45501     title="dom-listener-cellChanged">cellChanged()</code> method on
   45502     the current <code title="dom-datagrid-listener">listener</code>
   45503     with as its first argument a <code>RowID</code> identifying the
   45504     cell's row, as its second argument the identifier of the cell's
   45505     column, as its third argument the new value, and as its fourth
   45506     argument the previous value.</p>
   45507 
   45508    </dd>
   45509 
   45510    <dt><dfn title="datagrid-type-progress"><code>progress</code></dfn></dt>
   45511    <dd>
   45512 
   45513     <p>The cell represents a (determinate) progress bar whose value is
   45514     between 0.0, indicating no progress, and 1.0, indicating the task
   45515     is complete.</p>
   45516 
   45517    </dd>
   45518 
   45519    <dt><dfn title="datagrid-type-meter"><code>meter</code></dfn></dt>
   45520    <dd>
   45521 
   45522     <p>The cell represents a gauge, described by one to six
   45523     numbers.</p>
   45524 
   45525     <p>The gauge's actual value is given by the first number.</p>
   45526 
   45527     <p>If there is a second number, then that number is the maximum
   45528     value. Otherwise, the maximum value is 1.0.</p>
   45529 
   45530     <p>If there is a third number, then that number is the minimum
   45531     value. Otherwise, the minimum value is 1.0.</p>
   45532 
   45533     <p>If there is a fourth number, then that number is the low
   45534     boundary. Otherwise, the low boundary is the minimum value.</p>
   45535 
   45536     <p>If there is a fifth number, then that number is the high
   45537     boundary. Otherwise, the high boundary is the maximum value.</p>
   45538 
   45539     <p>If there is a sixth number, then the optimal point is the sixth
   45540     number. Otherwise, the optimum point is the midpoint between the
   45541     minimum value and the maximum value.</p>
   45542 
   45543     <!- - next two paragraphs copied from <meter>: - ->
   45544 
   45545     <p>If the optimum point is equal to the low boundary or the high
   45546     boundary, or anywhere in between them, then the region between the
   45547     low and high boundaries of the gauge must be treated as the
   45548     optimum region, and the low and high parts, if any, must be
   45549     treated as suboptimal. Otherwise, if the optimum point is less
   45550     than the low boundary, then the region between the minimum value
   45551     and the low boundary must be treated as the optimum region, the
   45552     region between the low boundary and the high boundary must be
   45553     treated as a suboptimal region, and the region between the high
   45554     boundary and the maximum value must be treated as an even less
   45555     good region. Finally, if the optimum point is higher than the high
   45556     boundary, then the situation is reversed; the region between the
   45557     high boundary and the maximum value must be treated as the optimum
   45558     region, the region between the high boundary and the low boundary
   45559     must be treated as a suboptimal region, and the remaining region
   45560     between the low boundary and the minimum value must be treated as
   45561     an even less good region.</p>
   45562 
   45563     <p>User agents should indicate the relative position of the actual
   45564     value to the minimum and maximum values, and the relationship
   45565     between the actual value and the three regions of the gauge.</p>
   45566 
   45567    </dd>
   45568 
   45569    <dt><dfn title="datagrid-type-custom"><code>custom</code></dfn></dt>
   45570    <dd>
   45571 
   45572     <p>The cell represents a dynamically generated graphical image.</p>
   45573 
   45574     <p>The cell will have minimum dimensions (specified in CSS
   45575     pixels), and a callback (in the form of a
   45576     <code>RenderingContext2DCallback</code> object) to get a rendering
   45577     for the cell.</p>
   45578 
   45579     <p>The user agent should not allow the cell to be rendered with
   45580     dimensions less than the given minimum width and height.</p>
   45581 
   45582     <p>When the user agent needs to render the cell, the user agent
   45583     must <span>queue a task</span> to invoke the
   45584     <span>RenderingContext2DCallback</span> callback, passing it a
   45585     newly created <code>CanvasRenderingContext2D</code> object whose
   45586     <code title="dom-context-2d-canvas">canvas</code> IDL attribute is
   45587     null as the first argument, the actual cell width in CSS pixels as
   45588     the second argument, and the actual cell height in CSS pixels as
   45589     the third argument.</p>
   45590 
   45591     <p>If the user agent is able to render graphics, then it must
   45592     render the graphics commands that the callback executed on the
   45593     provided <code>CanvasRenderingContext2D</code> object onto the
   45594     cell once the callback returns. The image must be clipped to the
   45595     dimensions of the cell. The coordinate space of the cell must be
   45596     aligned with that used by the 2D context such that the top left
   45597     corner of the cell is the 0,0 origin, with the coordinate space
   45598     increasing its <var title="">x</var> dimension towards the right
   45599     of the cell and its <var title="">y</var> axis towards the bottom
   45600     of the cell, and with the image not scaled (so that one CSS pixel
   45601     on the final rendering matches one CSS pixel in the coordinate
   45602     space used by the 2D context).</p>
   45603 
   45604     <p>The user agent must then decouple the
   45605     <code>CanvasRenderingContext2D</code> object and any objects that
   45606     it created (such as <code>CanvasPattern</code> objects or
   45607     <code>ImageData</code> objects) from any real drawing surface.</p>
   45608 
   45609     <p>If the user agent is unable to render graphics, then it must
   45610     render the text string returned by the callback instead.</p>
   45611 
   45612    </dd>
   45613 
   45614   </dl>
   45615 
   45616   <hr>
   45617 
   45618   <p>When an algorithm requires the user agent to <dfn>apply a
   45619   <code>Row</code> object</dfn>, the user agent must run the following
   45620   steps:</p>
   45621 
   45622   <ol>
   45623 
   45624    <li>
   45625 
   45626     <p>If the value of the <code>Row</code> object's second entry is
   45627     not &#x2212;1, then run these substeps:</p>
   45628 
   45629     <ol>
   45630 
   45631      <li><p>If there is a row with the same parent as the row
   45632      specified by the <code>Row</code> object's <code>RowID</code>
   45633      object, whose display order position is currently the same as the
   45634      value of the <code>Row</code> object's second entry, then remove
   45635      that row from the <span>display order sparse data
   45636      tree</span>.</p></li>
   45637 
   45638      <li><p>Set the display order position of the row specified by the
   45639      <code>Row</code> object's <code>RowID</code> to the value of the
   45640      <code>Row</code> object's second entry, updating its position in
   45641      the <span>display order sparse data tree</span>
   45642      accordingly.</p></li>
   45643 
   45644      <li><p>If the row is in the <span>pending
   45645      <code>datagrid</code> rows list</span>, remove it.</p></li>
   45646 
   45647     </ol>
   45648 
   45649    </li>
   45650 
   45651    <li>
   45652 
   45653     <p>If the fourth entry in the <code>Row</code> object (a
   45654     <code>CellList</code> object, an array) is not empty, then for
   45655     each <code>Cell</code> object in that array update the cell that
   45656     corresponds to the column identified by the value of the first
   45657     entry of the <code>Cell</code> object, by using the appropriate
   45658     set of steps given below as determined by the type of the
   45659     column. Then, if the cell is in the <span>pending
   45660     <code>datagrid</code> cells list</span>, remove it.</p>
   45661 
   45662     <dl>
   45663 
   45664      <dt>If the column's type is <code title="datagrid-type-text">text</code></dt>
   45665      <dd>
   45666 
   45667       <p>Update the cell's text to the value given in the
   45668       <code>Cell</code> object's second entry.</p>
   45669 
   45670       <p>If the <code>Cell</code> object has three entries, then copy
   45671       the image data from the <code>img</code> element given in the
   45672       third entry, and let the cell's image be given by that image
   45673       data. Otherwise, update the cell to have no image.</p>
   45674 
   45675      </dd>
   45676 
   45677      <dt>If the column's type is <code title="datagrid-type-editable">editable</code></dt>
   45678      <dd>
   45679 
   45680       <p>Update the cell's text to the value given in the
   45681       <code>Cell</code> object's second entry.</p>
   45682 
   45683       <p>If the <code>Cell</code> object has three entries, then let
   45684       the <code>datalist</code> element given in the third entry be
   45685       the <code>datalist</code> element giving autocompletion
   45686       hints. Otherwise, update the cell to have no
   45687       <code>datalist</code> element.</p>
   45688 
   45689       <p>If the <code>Cell</code> object has four entries, then copy
   45690       the image data from the <code>img</code> element given in the
   45691       fourth entry, and let the cell's image be given by that image
   45692       data. Otherwise, update the cell to have no image.</p>
   45693 
   45694      </dd>
   45695 
   45696      <dt>If the column's type is <code title="datagrid-type-checkable">checkable</code></dt>
   45697      <dd>
   45698 
   45699       <p>Update the cell's text to the value given in the
   45700       <code>Cell</code> object's second entry.</p>
   45701 
   45702       <p>Update the cell's checked state to match the value of the
   45703       third entry: checked if true, unchecked otherwise.</p>
   45704 
   45705       <p>If the <code>Cell</code> object has four entries and the
   45706       fourth entry is true, then update the cell to be obscured as
   45707       indeterminate. Otherwise, the cell's state is not obscured.</p>
   45708 
   45709       <p>If the <code>Cell</code> object has five entries, then copy
   45710       the image data from the <code>img</code> element given in the
   45711       fifth entry, and let the cell's image be given by that image
   45712       data. Otherwise, update the cell to have no image.</p>
   45713 
   45714      </dd>
   45715 
   45716      <dt>If the column's type is <code title="datagrid-type-list">list</code></dt>
   45717      <dd>
   45718 
   45719       <p>Update the cell's text to the value given in the
   45720       <code>Cell</code> object's second entry, and the
   45721       <code>select</code> element to be the one given in the
   45722       <code>Cell</code> object's third entry</p>
   45723 
   45724       <p>If the <code>Cell</code> object has four entries, then copy
   45725       the image data from the <code>img</code> element given in the
   45726       fourth entry, and let the cell's image be given by that image
   45727       data. Otherwise, update the cell to have no image.</p>
   45728 
   45729      </dd>
   45730 
   45731      <dt>If the column's type is <code title="datagrid-type-progress">progress</code></dt>
   45732      <dd>
   45733 
   45734       <p>Update the cell to be a progress bar whose progress, on the
   45735       scale of 0.0 (no progress) to 1.0 (task complete) is given by
   45736       the value in the <code>Cell</code> object's second entry.</p>
   45737 
   45738      </dd>
   45739 
   45740      <dt>If the column's type is <code title="datagrid-type-meter">meter</code></dt>
   45741      <dd>
   45742 
   45743       <p>Update the cell to be a gauge configured with the numbers
   45744       given by the second and subsequent entries of the
   45745       <code>Cell</code> object.</p>
   45746 
   45747      </dd>
   45748 
   45749      <dt>If the column's type is <code title="datagrid-type-custom">custom</code></dt>
   45750      <dd>
   45751 
   45752       <p>Update the cell's minimum width to be the length in CSS
   45753       pixels given by the <code>Cell</code> object's second entry.</p>
   45754 
   45755       <p>Update the cell's minimum height to be the length in CSS
   45756       pixels given by the <code>Cell</code> object's third entry.</p>
   45757 
   45758       <p>Update the cell's callback to be the
   45759       <code>RenderingContext2DCallback</code> object given by the
   45760       <code>Cell</code> object's fourth entry.</p>
   45761 
   45762      </dd>
   45763 
   45764     </dl>
   45765 
   45766    </li>
   45767 
   45768   </ol>
   45769 
   45770   <hr>
   45771 
   45772   <p>When the user agent is to run the <dfn><code>datagrid</code>
   45773   update display algorithm</dfn>, the user agent must invoke the <code
   45774   title="dom-listener-getRows">getRows()</code> and <code
   45775   title="dom-listener-getCells">getCells()</code> methods on the
   45776   current <code title="dom-datagrid-listener">listener</code> such
   45777   that all the current visible rows in the <span>display order sparse
   45778   data list</span>, and all the cells in the currently visible columns
   45779   on all the currently visible rows, have been covered.</p>
   45780 
   45781   <p>A row is considered covered if it is present in the <span>pending
   45782   <code>datagrid</code> rows list</span>, or if the <code
   45783   title="dom-listener-getRows">getRows()</code> method is invoked with
   45784   a range that includes the row in question.</p>
   45785 
   45786   <p>A cell is considered covered if it is present in the
   45787   <span>pending <code>datagrid</code> cells list</span>, or if the
   45788   <code title="dom-listener-getRows">getRows()</code> method is
   45789   invoked with a range that includes the row in question and a list of
   45790   columns that includes the cell's column, or if the <code
   45791   title="dom-listener-getCells">getCells()</code> method is invoked
   45792   with a list of rows and columns that intersects the cell in
   45793   question. However, the <code
   45794   title="dom-listener-getCells">getCells()</code> method can only be
   45795   used if the row is already present in the <span>display order sparse
   45796   data list</span>.</p>
   45797 
   45798   <p>The <code title="dom-listener-getRows">getRows()</code> method,
   45799   if used, must be invoked with five arguments. The first argument
   45800   must be the index in the <span>display order sparse data list</span>
   45801   to the first row that the user agent is requesting, known as the
   45802   <i>anchor row</i>. The second argument must be the number of
   45803   consecutive cells for which the user agent is requesting
   45804   information. The third argument must be the <code>RowID</code> of
   45805   the row that is the nearest ancestor in the <span>display order
   45806   sparse data <em>tree</em></span> of the anchor row. If this is the
   45807   <code>datagrid</code>, then the <code>RowID</code> object must be an
   45808   empty array. The fourth argument must be the display order position
   45809   of the anchor row in the <span>display order sparse data
   45810   tree</span>, assuming that the row identified in the third argument
   45811   is indeed the anchor row's parent row. The fifth and final argument
   45812   must be an array of the identifiers of the columns for which the
   45813   user agent is requesting information, in the order they were added
   45814   to the <code>datagrid</code>.</p>
   45815 
   45816   <p>As the <code title="dom-listener-getRows">getRows()</code> method
   45817   is invoked, the <span>pending <code>datagrid</code> rows list</span>
   45818   must be updated to include the rows for which information has been
   45819   requested, excluding rows for which information is already
   45820   available; and the <span>pending <code>datagrid</code> cells
   45821   list</span> must be updated to include the cells for which
   45822   information has been requested on those rows.</p>
   45823 
   45824   <p>The <code title="dom-listener-getCells">getCells()</code> method,
   45825   if used, must be invoked with two arguments. The first argument must
   45826   be an array of <code>RowID</code> objects identifying the rows for
   45827   which information is being requested. The second argument must be an
   45828   array of the identifiers of the columns for which the user agent is
   45829   requesting information, in the order they were added to the
   45830   <code>datagrid</code>.</p>
   45831 
   45832   <p>As the <code title="dom-listener-getCells">getCells()</code>
   45833   method is invoked, the <span>pending <code>datagrid</code> cells
   45834   list</span> must be updated to include the cells for which
   45835   information has been requested.</p>
   45836 
   45837   <p>Calls to these methods should be batched so that the rows and
   45838   cells to be covered are handled by the fewest number of calls to
   45839   these methods as possible. To this end, user agents may invoke the
   45840   <code title="dom-listener-getRows">getRows()</code> method for a set
   45841   of rows that includes some rows that are already in the
   45842   <span>display order sparse data list</span>, and similarly may
   45843   invoke the <code title="dom-listener-getCells">getCells()</code>
   45844   method with row/column combinations that cover some cells for which
   45845   data is already known. Generally, however, user agents should avoid
   45846   invoking these methods with arguments that cause information to be
   45847   requested when it has already been requested or is already
   45848   known.</p>
   45849 
   45850   <div class="example">
   45851 
   45852    <p>For example, consider a case represented by the following table,
   45853    where the cells marked "Yes" indicate that the data has already
   45854    been obtained, the cells marked "Pending" indicate that the data
   45855    has been previously requested but not yet obtained, and the cells
   45856    with just a dash indicate that no information has ever been
   45857    obtained, or any information that had been obtained has now been
   45858    discarded.</p>
   45859 
   45860    <table>
   45861     <tr> <td>        <th> Row   <th> Column A  <th> Column B
   45862     <tr> <th> Row 1  <td> -     <td> -         <td> -
   45863     <tr> <th> Row 2  <td> Yes   <td> Yes       <td> Yes
   45864     <tr> <th> Row 3  <td> Yes   <td> Yes       <td> Yes
   45865     <tr> <th> Row 4  <td> Yes   <td> Yes       <td> Yes
   45866     <tr> <th> Row 5  <td> -     <td> -         <td> -
   45867     <tr> <th> Row 6  <td> -     <td> -         <td> -
   45868     <tr> <th> Row 7  <td> Yes   <td> Pending   <td> -
   45869     <tr> <th> Row 8  <td> Yes   <td> Pending   <td> Pending
   45870    </table>
   45871 
   45872    <p>Thus, rows 2, 3, 4, 7, and 8 are already covered, as are the
   45873    cells from those rows except for the cell in column B of row 7.</p>
   45874 
   45875    <p>Now consider what happens if all of these rows become visible at
   45876    once. The user agent has several choices, including (but not
   45877    limited to) the following:</p>
   45878 
   45879    <ul>
   45880 
   45881     <li>Fire the <code title="dom-listener-getRows">getRows()</code>
   45882     method for rows 1 through 8 and columns A and B all at once.</li>
   45883 
   45884     <li>Fire the <code title="dom-listener-getRows">getRows()</code>
   45885     method for row 1, then fire it again for rows 5 through 7.</li>
   45886 
   45887     <li>Fire the <code title="dom-listener-getRows">getRows()</code>
   45888     method for row 1, then fire it again for rows 5 and 6, and then
   45889     fire the <code title="dom-listener-getCells">getCells()</code>
   45890     method for row 7 column B.</li>
   45891 
   45892    </ul>
   45893 
   45894    <p>All three options are allowed, but the latter two are preferable
   45895    to the former, as they minimise the amount of redundant information
   45896    requested.</p>
   45897 
   45898    <p>In any case, the data model now looks like this:</p>
   45899 
   45900    <table>
   45901     <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
   45902     <tr> <th> Row 1  <td> Pending <td> Pending   <td> Pending   <td> -
   45903     <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> -
   45904     <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> -
   45905     <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> -
   45906     <tr> <th> Row 5  <td> Pending <td> Pending   <td> Pending   <td> -
   45907     <tr> <th> Row 6  <td> Pending <td> Pending   <td> Pending   <td> -
   45908     <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> -
   45909     <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> -
   45910    </table>
   45911 
   45912    <p>Now consider the case where a third column, column C, is added
   45913    to the data model. The user agent once again has several choices,
   45914    including (but not limited to) the following:</p>
   45915 
   45916    <ul>
   45917 
   45918     <li>Fire the <code title="dom-listener-getRows">getRows()</code>
   45919     method for rows 1 through 8 again, this time listing just column
   45920     C.</li>
   45921 
   45922     <li>Fire the <code title="dom-listener-getRows">getRows()</code>
   45923     method for row 1, then fire it again for rows 5 and 6, and then
   45924     fire the <code title="dom-listener-getCells">getCells()</code>
   45925     method for the other rows (in all three cases, listing just column
   45926     C).</li>
   45927 
   45928    </ul>
   45929 
   45930    <p>The two options here are as bad as each other; the former
   45931    involves a lot of overlap, but the latter involves a lot of method
   45932    calls. Unfortunately the user agent can't do the obvious thing,
   45933    namely just to invoke the <code
   45934    title="dom-listener-getCells">getCells()</code> method for all the
   45935    rows listing just column C, because it doesn't have the row
   45936    information for all the rows yet (rows 1, 5 and 6 are still
   45937    pending).</p>
   45938 
   45939    <p>In any case, the data model now looks like this:</p>
   45940 
   45941    <table>
   45942     <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
   45943     <tr> <th> Row 1  <td> Pending <td> Pending   <td> Pending   <td> Pending
   45944     <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45945     <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45946     <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45947     <tr> <th> Row 5  <td> Pending <td> Pending   <td> Pending   <td> Pending
   45948     <tr> <th> Row 6  <td> Pending <td> Pending   <td> Pending   <td> Pending
   45949     <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45950     <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45951    </table>
   45952 
   45953    <p>If at this point the user scrolls around anywhere within this
   45954    <code>datagrid</code>, the user agent won't fire the <code
   45955    title="dom-listener-getRows">getRows()</code> and <code
   45956    title="dom-listener-getCells">getCells()</code> methods, because
   45957    all of the rows and cells are covered.</p>
   45958 
   45959    <p>Now consider the case where the user agent receives row
   45960    information, but no cell information, for rows 1, 5, and 6:</p>
   45961 
   45962    <table>
   45963     <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
   45964     <tr> <th> Row 1  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45965     <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45966     <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45967     <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> Pending
   45968     <tr> <th> Row 5  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45969     <tr> <th> Row 6  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45970     <tr> <th> Row 7  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45971     <tr> <th> Row 8  <td> Yes     <td> Pending   <td> Pending   <td> Pending
   45972    </table>
   45973 
   45974    <p>The user agent still won't fire any methods when the user
   45975    scrolls, because the data is still covered. But if the script then
   45976    calls the <code title="dom-datagrid-renotify">renotify()</code>
   45977    method, the "Pending" flags would get reset, and the model would
   45978    now look like this:</p>
   45979 
   45980    <table>
   45981     <tr> <td>        <th> Row     <th> Column A  <th> Column B  <th> Column C
   45982     <tr> <th> Row 1  <td> Yes     <td> -         <td> -         <td> -
   45983     <tr> <th> Row 2  <td> Yes     <td> Yes       <td> Yes       <td> -
   45984     <tr> <th> Row 3  <td> Yes     <td> Yes       <td> Yes       <td> -
   45985     <tr> <th> Row 4  <td> Yes     <td> Yes       <td> Yes       <td> -
   45986     <tr> <th> Row 5  <td> Yes     <td> -         <td> -         <td> -
   45987     <tr> <th> Row 6  <td> Yes     <td> -         <td> -         <td> -
   45988     <tr> <th> Row 7  <td> Yes     <td> -         <td> -         <td> -
   45989     <tr> <th> Row 8  <td> Yes     <td> -         <td> -         <td> -
   45990    </table>
   45991 
   45992    <p>Now, assuming that all eight rows and all three columns are
   45993    still visible, the user agent has the following choices (amongst
   45994    others):</p>
   45995 
   45996    <ul>
   45997 
   45998     <li>Fire the <code title="dom-listener-getRows">getCells()</code>
   45999     method for rows 1 through 8, listing all three columns.</li>
   46000 
   46001     <li>Fire the <code title="dom-listener-getRows">getCells()</code>
   46002     method for rows 1 and 5 through 8, listing all three columns, and
   46003     then fire the method for rows 2 through 4, listing just column
   46004     C.</li>
   46005 
   46006     <li>Fire the <code title="dom-listener-getRows">getCells()</code>
   46007     method for rows 1 and 5 through 8, listing just columns A abd B,
   46008     and then fire the method for rows 1 through 8, listing just column
   46009     C.</li>
   46010 
   46011    </ul>
   46012 
   46013    <p>Here the latter two are preferable because they result in less
   46014    overlap than the first.</p>
   46015 
   46016   </div>
   46017 
   46018   <hr>
   46019 
   46020   <p>The <span>task source</span> for tasks queued on behalf of a
   46021   <code>datagrid</code> is the <span>DOM manipulation task
   46022   source</span>.</p>
   46023 
   46024   </div>
   46025 
   46026 
   46027   <h5>Listening to notifications from the <code>datagrid</code></h5>
   46028 
   46029   <p><i>The conformance criteria in this section apply to any
   46030   implementation of the <code>DataGridListener</code> interface,
   46031   including (and most commonly) the content author's
   46032   implementation(s).</i></p>
   46033 
   46034   <pre class="idl">// To be implemented by Web authors as a JS object
   46035 [NoInterfaceObject]
   46036 interface <dfn>DataGridListener</dfn> {
   46037   void <span title="dom-listener-initialize">initialize</span>(in <span>HTMLDataGridElement</span> datagrid);
   46038 
   46039   void <span title="dom-listener-getRows">getRows</span>(in unsigned long rowIndex, in unsigned long rowCount, in <span>RowID</span> parentRow, in unsigned long position, in <span>ColumnList</span> columns);
   46040   void <span title="dom-listener-getCells">getCells</span>(in <span>RowIDList</span> rows, in <span>ColumnList</span> columns);
   46041   void <span title="dom-listener-rowOpened">rowOpened</span>(in <span>RowID</span> row, in boolean rowCountNeeded);
   46042   void <span title="dom-listener-rowClosed">rowClosed</span>(in <span>RowID</span> row);
   46043 
   46044   void <span title="dom-listener-cellChanged">cellChanged</span>(in <span>RowID</span> row, in <span>Column</span> column, in any newValue, in any prevValue);
   46045   <span>HTMLMenuElement</span> <span title="dom-listener-getRowMenu">getRowMenu</span>(in <span>RowID</span> row);
   46046 <!- -vsDGDND
   46047   boolean <span title="dom-listener-canDrop">canDrop</span>(in <span>RowID</span> row, in <span>RowID</span> position, data);
   46048   boolean <span title="dom-listener-dropped">dropped</span>(in <span>RowID</span> row, in <span>RowID</span> position, data);
   46049 - -><!- -v2DGPA
   46050   void <span title="dom-listener-performAction">performAction</span>(in <span>RowID</span> row, in DOMString action);
   46051 - ->};</pre>
   46052 
   46053   <p>The <code>DataGridListener</code> interface, once implemented by
   46054   an object in a script and hooked up to a <code>datagrid</code> using
   46055   the <code title="dom-datagrid-listener">listener</code> IDL
   46056   attribute, receives notifications when the <code>datagrid</code>
   46057   needs information (such as which rows exist) for display.</p>
   46058 
   46059   <p>The following methods may be usefully implemented:</p>
   46060 
   46061   <dl>
   46062 
   46063    <dt><dfn title="dom-listener-initialize"><code>initialize(<var title="">datagrid</var>)</code></dfn></dt>
   46064 
   46065    <dd>
   46066 
   46067     <p>Called by the <code>datagrid</code> element (the one given by
   46068     the <var title="">datagrid</var> argument) when the <code
   46069     title="dom-datagrid-listener">listener</code> attribute is
   46070     set.</p>
   46071 
   46072    </dd>
   46073 
   46074    <dt><dfn title="dom-listener-getRows"><code>getRows(<var title="">rowIndex</var>, <var title="">rowCount</var>, <var title="">parentRow</var>, <var title="">position</var>, <var title="">columns</var>)</code></dfn></dt>
   46075 
   46076    <dd>
   46077 
   46078     <p>Called by the <code>datagrid</code> element when the user agent
   46079     finds itself needing to render rows for which it is lacking
   46080     information.</p>
   46081 
   46082     <p>The <var title="">rowIndex</var> argument gives the flattened
   46083     index of the first row for which it needs information, ignoring
   46084     the tree structure of the <code>datagrid</code> model, where zero
   46085     is the first row of the entire tree.</p>
   46086 
   46087     <p>The <var title="">rowCount</var> argument gives the number of
   46088     rows for which the user agent would like information.</p>
   46089 
   46090     <p>The <var title="">parentRow</var> argument gives the
   46091     <code>RowID</code> object identifying the nearest ancestor of the
   46092     first row that the user agent is aware of. After the sort order
   46093     has changed, this will typically be the root of the tree
   46094     (identified by a <code>RowID</code> object consisting of an empty
   46095     array).
   46096 
   46097     <p>The <var title="">columns</var> argument gives the columns for
   46098     which the user agent is lacking information, as an array of column
   46099     identifiers (as passed to <code
   46100     title="dom-datagrid-addColumn">addColumn()</code>).</p>
   46101 
   46102    </dd>
   46103 
   46104    <dt><dfn title="dom-listener-getCells"><code>getCells(<var title="">rows</var>, <var title="">columns</var>)</code></dfn></dt>
   46105 
   46106    <dd>
   46107 
   46108     <p>Called by the <code>datagrid</code> element when the user agent
   46109     finds itself needing to render cells for which it is lacking
   46110     information in rows that it does know about.</p>
   46111 
   46112     <p>The <var title="">rows</var> argument gives an array of
   46113     <code>RowID</code> objects identifying the various rows for which
   46114     the user agent is lacking information.</p>
   46115 
   46116     <p>The <var title="">columns</var> argument gives the columns for
   46117     which the user agent is lacking information, as an array of column
   46118     identifiers (as passed to <code
   46119     title="dom-datagrid-addColumn">addColumn()</code>).</p>
   46120 
   46121    </dd>
   46122 
   46123    <dt><dfn title="dom-listener-rowOpened"><code>rowOpened(<var title="">row</var>, <var title="">rowCountNeeded</var>)</code></dfn></dt>
   46124 
   46125    <dd>
   46126 
   46127     <p>Called by the <code>datagrid</code> element when the user has
   46128     opened a row.</p>
   46129 
   46130     <p>The <var title="">row</var> argument gives an
   46131     <code>RowID</code> object identifying the row that was opened.</p>
   46132 
   46133     <p>If the user agent also knows how many children that row has,
   46134     then the <var title="">rowCountNeeded</var> argument will be
   46135     false. Otherwise, the argument will be true, and the row will
   46136     remain closed until the <code
   46137     title="dom-datagrid-setRows">setRows()</code> method is called
   46138     with an accurate row count.</p>
   46139 
   46140    </dd>
   46141 
   46142    <dt><dfn title="dom-listener-rowClosed"><code>rowClosed(<var title="">row</var>)</code></dfn></dt>
   46143 
   46144    <dd>
   46145 
   46146     <p>Called by the <code>datagrid</code> element when the user has
   46147     opened a row.</p>
   46148 
   46149     <p>The <var title="">row</var> argument gives an
   46150     <code>RowID</code> object identifying the row that was closed.</p>
   46151 
   46152    </dd>
   46153 
   46154    <dt><dfn title="dom-listener-cellChanged"><code>cellChanged(<var title="">row</var>, <var title="">column</var>, <var title="">newValue</var>, <var title="">prevValue</var>)</code></dfn></dt>
   46155 
   46156    <dd>
   46157 
   46158     <p>Called by the <code>datagrid</code> element when the user has
   46159     edited a cell or checked a check box in a cell.</p>
   46160 
   46161     <p>The <var title="">row</var> argument gives an
   46162     <code>RowID</code> object identifying the row of the cell, and the
   46163     <var title="">column</var> argument gives the identifier of the
   46164     cell's column.</p>
   46165 
   46166     <p>The <var title="">newValue</var> argument gives the new value,
   46167     and the <var title="">prevValue</var> argument gives the previous
   46168     value.</p>
   46169 
   46170    </dd>
   46171 
   46172    <dt><dfn title="dom-listener-getRowMenu"><code>getRowMenu(<var title="">row</var>)</code></dfn></dt>
   46173 
   46174    <dd>Must return an <code>HTMLMenuElement</code> object that is to
   46175    be used as a context menu for row <var title="">row</var>, or null
   46176    if there is no particular context menu. May be omitted if none of
   46177    the rows have a special context menu. As this method is called
   46178    immediately before showing the menu in question, no precautions
   46179    need to be taken if the return value of this method changes.</dd>
   46180 
   46181    <!- -v2DGDND, v2DFPA- ->
   46182 
   46183   </dl>
   46184 
   46185   <div class="impl">
   46186 
   46187   <p>Objects that implement the <code>DataGridListener</code>
   46188   interface may omit any or all of the methods. When a method is
   46189   omitted, a user agent intending to call that method must instead
   46190   skip the method call, and must assume that the method's return value
   46191   is null.</p>
   46192 
   46193   </div>
   46194 
   46195 
   46196 
   46197 <!- - v2DGS: <datagrid> selection (search for the bits marked "..." to see what needs filling in, at a minimum)
   46198 
   46199   <h5>The selection</h5>
   46200 
   46201   <pre class="idl">interface <dfn>DataGridSelection</dfn> {
   46202   readonly attribute unsigned long <span title="dom-DataGridSelection-length">length</span>;
   46203   getter <span>RowID</span> <span title="dom-DataGridSelection-item">item</span>(in unsigned long index);
   46204   boolean <span title="dom-DataGridSelection-isSelected">isSelected</span>(in <span>RowID</span> row);
   46205   void <span title="dom-DataGridSelection-setSelected">setSelected</span>(in <span>RowID</span> row, in boolean selected);
   46206   void <span title="dom-DataGridSelection-selectAll">selectAll</span>();
   46207   void <span title="dom-DataGridSelection-clear">clear</span>();
   46208 };</pre>
   46209 
   46210   <dl class="domintro">
   46211 
   46212    ...
   46213 
   46214   </dl>
   46215 
   46216   <div class="impl">
   46217 
   46218   <p>Each <code>datagrid</code> element must keep track of which rows
   46219   are currently selected. Initially, no rows are selected. This can be
   46220   changed using the methods described in this section.</p>
   46221 
   46222   <p>The selection of a <code>datagrid</code> is represented by its
   46223   <dfn title="dom-datagrid-selection"><code>selection</code></dfn> IDL
   46224   attribute, which must be a <code>DataGridSelection</code> object.</p>
   46225 
   46226   <p><code>DataGridSelection</code> objects represent the rows in the
   46227   selection. In the selection the rows must be ordered in their
   46228   natural order (and not, e.g., the display order). A row with an
   46229   ancestor that is closed cannot be selected.</p>
   46230 
   46231   <p>The <dfn
   46232   title="dom-DataGridSelection-length"><code>length</code></dfn>
   46233   attribute must return the number of rows currently present in the
   46234   selection. This is the <var
   46235   title="dom-DataGridSelection-length">length</var>.</p>
   46236 
   46237   <p>The object's <span>indices of the supported indexed
   46238   properties</span> are the numbers in the range zero to <span title=""><var
   46239   title="dom-DataGridSelection-length">length</var>-1</span>, unless
   46240   the <var title="dom-DataGridSelection-length">length</var> is zero,
   46241   in which case there are no <span>supported indexed
   46242   properties</span>.</p>
   46243 
   46244   <p>The <dfn title="dom-DataGridSelection-item"><code>item(<var
   46245   title="">index</var>)</code></dfn> method must return a
   46246   <code>RowID</code> object identifying the <var
   46247   title="">index</var>th row in the selection. If the argument is out
   46248   of range (less than zero or greater than the number of selected rows
   46249   minus one), then it must raise an <code>INDEX_SIZE_ERR</code>
   46250   exception. <a href="#refsDOMCORE">[DOMCORE]</a></p>
   46251 
   46252   <p>The <dfn
   46253   title="dom-DataGridSelection-isSelected"><code>isSelected()</code></dfn>
   46254   method must return the selected state of the row specified by its
   46255   argument. If the specified row is in the <span>natural order sparse
   46256   data tree</span> and is selected, the method must return true,
   46257   otherwise it must return false.</p>
   46258 
   46259   <p>The <dfn
   46260   title="dom-DataGridSelection-setSelected"><code>setSelected()</code></dfn>
   46261   method takes two arguments, <var title="">row</var> and <var
   46262   title="">selected</var>. When invoked, it must set the selection
   46263   state of row <var title="">row</var> to selected if <var
   46264   title="">selected</var> is true, and unselected if it is false. If
   46265   <var title="">row</var> does not specify a row in the <span>natural
   46266   order sparse data tree</span> ...
   46267 
   46268   <p>The <dfn
   46269   title="dom-DataGridSelection-selectAll"><code>selectAll()</code></dfn>
   46270   method must ...
   46271 
   46272   <p>The <dfn
   46273   title="dom-DataGridSelection-clear"><code>clear()</code></dfn>
   46274   method must mark all the rows in the <code>datagrid</code> as not
   46275   selected. After a call to <code
   46276   title="dom-DataGridSelection-clear">clear()</code>, the <code
   46277   title="dom-DataGridSelection-length">length</code> attribute will
   46278   return zero.</p>
   46279 
   46280   <p>If the <code>datagrid</code> element has a <code
   46281   title="attr-datagrid-multiple">multiple</code> attribute, then the
   46282   user agent should allow the user to select any number of rows (zero
   46283   or more). If the attribute is not present, then the user agent
   46284   should allow the user to select a row, and must not allow the user
   46285   to select more than a single row at a time; selecting another one
   46286   must unselect all the other rows.</p>
   46287 
   46288   <p class="note">This only applies to the user. Scripts can select
   46289   multiple rows even when the <code
   46290   title="attr-datagrid-multiple">multiple</code> attribute is
   46291   absent.</p>
   46292 
   46293   ...event on selection change?...
   46294 
   46295   </div>
   46296 
   46297   <p class="note">The <code>DataGridSelection</code> interface has no
   46298   relation to the <code>Selection</code> interface.</p>
   46299 
   46300 - ->
   46301 
   46302 
   46303 <!- -vsDGDND
   46304   <h5>Drag and drop in <code>datagrid</code>s</h5>
   46305 
   46306   <p><i>This section only applies to interactive user agents.</i></p>
   46307 
   46308   ...define drag and drop in datagrids; selectiondraggable...
   46309 - ->
   46310 
   46311 -->
   46312 
   46313   <h4 id=the-command><span class=secno>4.11.3 </span>The <dfn><code>command</code></dfn> element</h4>
   46314 
   46315   <dl class=element><dt>Categories</dt>
   46316    <dd><a href=#metadata-content>Metadata content</a>.</dd>
   46317    <dd><a href=#flow-content>Flow content</a>.</dd>
   46318    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   46319    <dt>Contexts in which this element may be used:</dt>
   46320    <dd>Where <a href=#metadata-content>metadata content</a> is expected.</dd>
   46321    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   46322    <dt>Content model:</dt>
   46323    <dd>Empty.</dd>
   46324    <dt>Content attributes:</dt>
   46325    <dd><a href=#global-attributes>Global attributes</a></dd>
   46326    <dd><code title=attr-command-type><a href=#attr-command-type>type</a></code></dd>
   46327    <dd><code title=attr-command-label><a href=#attr-command-label>label</a></code></dd>
   46328    <dd><code title=attr-command-icon><a href=#attr-command-icon>icon</a></code></dd>
   46329    <dd><code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code></dd>
   46330    <dd><code title=attr-command-checked><a href=#attr-command-checked>checked</a></code></dd>
   46331    <dd><code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></dd>
   46332    <!--<dd><code title="attr-command-default">default</code></dd>-->
   46333    <dd>Also, the <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute has special semantics on this element.</dd>
   46334    <dt>DOM interface:</dt>
   46335    <dd>
   46336 <pre class=idl>interface <dfn id=htmlcommandelement>HTMLCommandElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   46337            attribute DOMString <a href=#dom-command-type title=dom-command-type>type</a>;
   46338            attribute DOMString <a href=#dom-command-label title=dom-command-label>label</a>;
   46339            attribute DOMString <a href=#dom-command-icon title=dom-command-icon>icon</a>;
   46340            attribute boolean <a href=#dom-command-disabled title=dom-command-disabled>disabled</a>;
   46341            attribute boolean <a href=#dom-command-checked title=dom-command-checked>checked</a>;
   46342            attribute DOMString <a href=#dom-command-radiogroup title=dom-command-radiogroup>radiogroup</a>;<!--
   46343            attribute boolean <span title="dom-command-default">default</span>;-->
   46344 };</pre>
   46345    </dd>
   46346   </dl><p>The <code><a href=#the-command>command</a></code> element represents a command that the user
   46347   can invoke.</p>
   46348 
   46349   <p>The <dfn id=attr-command-type title=attr-command-type><code>type</code></dfn>
   46350   attribute indicates the kind of command: either a normal command
   46351   with an associated action, or a state or option that can be toggled,
   46352   or a selection of one item from a list of items.</p>
   46353 
   46354   <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
   46355   keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
   46356   keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
   46357   "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
   46358   keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
   46359   the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
   46360   keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
   46361   <i>missing value default</i> is the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state.</p>
   46362 
   46363   <dl><dt>The <dfn id=attr-command-type-state-command title=attr-command-type-state-command>Command</dfn> state</dt>
   46364 
   46365    <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>
   46366 
   46367    <dt>The <dfn id=attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</dfn> state</dt>
   46368 
   46369    <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>
   46370 
   46371    <dt>The <dfn id=attr-command-type-state-radio title=attr-command-type-state-radio>Radio</dfn> state</dt>
   46372 
   46373    <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>
   46374 
   46375   </dl><p>The <dfn id=attr-command-label title=attr-command-label><code>label</code></dfn>
   46376   attribute gives the name of the command, as shown to the user. The
   46377   <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute must be
   46378   specified and must have a value that is not the empty string.</p>
   46379 
   46380   <p>The <dfn id=attr-command-title title=attr-command-title><code>title</code></dfn>
   46381   attribute gives a hint describing the command, which might be shown
   46382   to the user to help him.</p>
   46383 
   46384   <p>The <dfn id=attr-command-icon title=attr-command-icon><code>icon</code></dfn>
   46385   attribute gives a picture that represents the command. If the
   46386   attribute is specified, the attribute's value must contain a
   46387   <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
   46388   spaces</a>. <span class=impl>To obtain the <a href=#absolute-url>absolute
   46389   URL</a> of the icon when the attribute's value is not the empty
   46390   string, the attribute's value must be <a href=#resolve-a-url title="resolve a
   46391   url">resolved</a> relative to the element. When the attribute is
   46392   absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
   46393   url">resolving</a> its value fails, there is no icon.</span></p>
   46394   <!-- this is affected by the base URL being changed, so users of
   46395   this should cache the image once they've fetched it once, at least
   46396   until the relative url changes again -->
   46397 
   46398   <p>The <dfn id=attr-command-disabled title=attr-command-disabled><code>disabled</code></dfn> attribute
   46399   is a <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that
   46400   the command is not available in the current state.</p>
   46401 
   46402   <p class=note>The distinction between <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> and <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be
   46403   disabled if, in the same context, it could be enabled if only
   46404   certain aspects of the situation were changed. A command would be
   46405   marked as hidden if, in that situation, the command will never be
   46406   enabled. For example, in the context menu for a water faucet, the
   46407   command "open" might be disabled if the faucet is already open, but
   46408   the command "eat" would be marked hidden since the faucet could
   46409   never be eaten.</p>
   46410 
   46411   <p>The <dfn id=attr-command-checked title=attr-command-checked><code>checked</code></dfn>
   46412   attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if present,
   46413   indicates that the command is selected. The attribute must be
   46414   omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code>
   46415   attribute is in either the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state or
   46416   the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a>
   46417   state.</p>
   46418 
   46419   <p>The <dfn id=attr-command-radiogroup title=attr-command-radiogroup><code>radiogroup</code></dfn>
   46420   attribute gives the name of the group of commands that will be
   46421   toggled when the command itself is toggled, for commands whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of
   46422   the parent element. The attribute must be omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state.</p>
   46423 
   46424 <!--
   46425   <p>If the <code>command</code> element is used when <span
   46426   title="menu generation">generating</span> a <span>context
   46427   menu</span>, then the <dfn
   46428   title="attr-command-default"><code>default</code></dfn> attribute
   46429   indicates, if present, that the command is the one that would have
   46430   been invoked if the user had directly activated the menu's subject
   46431   instead of using its context menu. The <code
   46432   title="attr-command-default">default</code> attribute is a
   46433   <span>boolean attribute</span>. The attribute must be omitted unless
   46434   the <code title="attr-command-type">type</code> attribute is in the
   46435   <span title="attr-command-type-state-command">Command</span>
   46436   state.</p>
   46437 
   46438   <div class="example">
   46439 
   46440    ...an example that shows an element that, if double-clicked,
   46441    invokes an action, but that also has a context menu, showing the
   46442    various <code>command</code> attributes off, and that has a default
   46443    command...
   46444 
   46445   </div>
   46446 -->
   46447 
   46448   <div class=impl>
   46449 
   46450   <p>The <dfn id=dom-command-type title=dom-command-type><code>type</code></dfn>, <dfn id=dom-command-label title=dom-command-label><code>label</code></dfn>, <dfn id=dom-command-icon title=dom-command-icon><code>icon</code></dfn>, <dfn id=dom-command-disabled title=dom-command-disabled><code>disabled</code></dfn>, <dfn id=dom-command-checked title=dom-command-checked><code>checked</code></dfn>, and <dfn id=dom-command-radiogroup title=dom-command-radiogroup><code>radiogroup</code></dfn><!--,
   46451   and <dfn title="dom-command-default"><code>default</code></dfn>-->
   46452   IDL attributes must <a href=#reflect>reflect</a> the respective content
   46453   attributes of the same name.</p>
   46454 
   46455   <p>The element's <a href=#activation-behavior>activation behavior</a> depends on the
   46456   value of the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute
   46457   of the element, as follows:</p>
   46458 
   46459   <dl class=switch><dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
   46460    in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state</dt>
   46461 
   46462    <dd><p>If the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, the UA must
   46463    remove that attribute. Otherwise, the UA must add a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, with the
   46464    literal value <code title="">checked</code>. The UA must then
   46465    <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the
   46466    element.</dd>
   46467 
   46468 
   46469    <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
   46470    in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state</dt>
   46471 
   46472    <dd><p>If the element has a parent, then the UA must walk the list
   46473    of child nodes of that parent element, and for each node that is a
   46474    <code><a href=#the-command>command</a></code> element, if that element has a <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attribute whose
   46475    value exactly matches the current element's (treating missing <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attributes as if
   46476    they were the empty string), and has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, must remove
   46477    that attribute.</p>
   46478 
   46479    <p>Then, the element's <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute attribute
   46480    must be set to the literal value <code title="">checked</code> and
   46481    the user agent must <a href=#fire-a-click-event>fire a <code title=event-click>click</code>
   46482    event</a> at the element.</dd>
   46483 
   46484 
   46485    <dt>Otherwise</dt>
   46486 
   46487    <dd><p>The element has no <a href=#activation-behavior>activation behavior</a>.</dd>
   46488 
   46489   </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
   46490   any of the actions described above to happen.</p>
   46491 
   46492   <!-- v2COMMAND: the command="" attribute to make a <command> element
   46493   reflect the state of another command, so that the script can update
   46494   one place in the page and have context menus, toolbars, shortcuts,
   46495   etc, automatically update. Once we add this, expose the Triggers
   46496   facet again. -->
   46497 
   46498   </div>
   46499 
   46500   <p class=note><code><a href=#the-command>command</a></code> elements are not rendered
   46501   unless they <a href=#menus title=menu>form part of a menu</a>.</p>
   46502 
   46503   <div class=example>
   46504 
   46505    <p>Here is an example of a toolbar with three buttons that let the
   46506    user toggle between left, center, and right alignment. One could
   46507    imagine such a toolbar as part of a text editor. The toolbar also
   46508    has a separator followed by another button labeled "Publish",
   46509    though that button is disabled.</p>
   46510 
   46511    <pre>&lt;menu type="toolbar"&gt;
   46512  &lt;command type="radio" radiogroup="alignment" checked="checked"
   46513           label="Left" icon="icons/alL.png" onclick="setAlign('left')"&gt;
   46514  &lt;command type="radio" radiogroup="alignment"
   46515           label="Center" icon="icons/alC.png" onclick="setAlign('center')"&gt;
   46516  &lt;command type="radio" radiogroup="alignment"
   46517           label="Right" icon="icons/alR.png" onclick="setAlign('right')"&gt;
   46518  &lt;hr&gt;
   46519  &lt;command type="command" disabled
   46520           label="Publish" icon="icons/pub.png" onclick="publish()"&gt;
   46521 &lt;/menu&gt;</pre>
   46522 
   46523   </div>
   46524 
   46525 
   46526 
   46527   <h4 id=menus><span class=secno>4.11.4 </span>The <dfn><code>menu</code></dfn> element</h4>
   46528 
   46529   <dl class=element><dt>Categories</dt>
   46530    <dd><a href=#flow-content>Flow content</a>.</dd>
   46531    <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
   46532    <dt>Contexts in which this element may be used:</dt>
   46533    <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
   46534    <dt>Content model:</dt>
   46535    <dd>Either: Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
   46536    <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
   46537    <dt>Content attributes:</dt>
   46538    <dd><a href=#global-attributes>Global attributes</a></dd>
   46539    <dd><code title=attr-menu-type><a href=#attr-menu-type>type</a></code></dd>
   46540    <dd><code title=attr-menu-label><a href=#attr-menu-label>label</a></code></dd>
   46541    <dt>DOM interface:</dt>
   46542    <dd>
   46543 <pre class=idl>interface <dfn id=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   46544            attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
   46545            attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
   46546 };</pre>
   46547   </dl><p>The <code><a href=#menus>menu</a></code> element represents a list of commands.</p>
   46548 
   46549   <!-- v2 idea: <menu> should get an icon, like <command> -->
   46550 
   46551   <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute
   46552   is an <a href=#enumerated-attribute>enumerated attribute</a> indicating the kind of menu
   46553   being declared. The attribute has three states. The <code title=attr-menu-type-context>context</code> keyword maps to the
   46554   <dfn id=context-menu-state title="context menu state">context menu</dfn> state, in which
   46555   the element is declaring a context menu. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the
   46556   <dfn id=toolbar-state title="toolbar state">toolbar</dfn> state, in which the
   46557   element is declaring a toolbar. The attribute may also be
   46558   omitted. The <i>missing value default</i> is the <dfn id=list-state title="list
   46559   state">list</dfn> state, which indicates that the element is merely
   46560   a list of commands that is neither declaring a context menu nor
   46561   defining a toolbar.</p>
   46562 
   46563   <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#context-menu-state title="context menu state">context menu</a> state, then the
   46564   element <a href=#represents>represents</a> the commands of a context menu, and
   46565   the user can only interact with the commands if that context menu is
   46566   activated.</p>
   46567 
   46568   <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element
   46569   <a href=#represents>represents</a> a list of active commands that the user can
   46570   immediately interact with.</p>
   46571 
   46572   <p>If a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#list-state title="list state">list</a> state, then the element either
   46573   <a href=#represents>represents</a> an unordered list of items (each represented
   46574   by an <code><a href=#the-li-element>li</a></code> element), each of which represents a command
   46575   that the user can perform or activate, or, if the element has no
   46576   <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
   46577   describing available commands.</p>
   46578 
   46579   <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn>
   46580   attribute gives the label of the menu. It is used by user agents to
   46581   display nested menus in the UI. For example, a context menu
   46582   containing another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for the submenu's
   46583   menu label.</p>
   46584 
   46585   <div class=impl>
   46586 
   46587   <p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must
   46588   <a href=#reflect>reflect</a> the respective content attributes of the same
   46589   name.</p>
   46590 
   46591   </div>
   46592 
   46593 
   46594 
   46595   <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>
   46596 
   46597   <p><i>This section is non-normative.</i></p>
   46598 
   46599   <p>The <code><a href=#menus>menu</a></code> element is used to define context menus and
   46600   toolbars.</p>
   46601 
   46602   <p>For example, the following represents a toolbar with three menu
   46603   buttons on it, each of which has a dropdown menu with a series of
   46604   options:</p>
   46605 
   46606   <pre>&lt;menu type="toolbar"&gt;
   46607  &lt;li&gt;
   46608   &lt;menu label="File"&gt;
   46609    &lt;button type="button" onclick="fnew()"&gt;New...&lt;/button&gt;
   46610    &lt;button type="button" onclick="fopen()"&gt;Open...&lt;/button&gt;
   46611    &lt;button type="button" onclick="fsave()"&gt;Save&lt;/button&gt;
   46612    &lt;button type="button" onclick="fsaveas()"&gt;Save as...&lt;/button&gt;
   46613   &lt;/menu&gt;
   46614  &lt;/li&gt;
   46615  &lt;li&gt;
   46616   &lt;menu label="Edit"&gt;
   46617    &lt;button type="button" onclick="ecopy()"&gt;Copy&lt;/button&gt;
   46618    &lt;button type="button" onclick="ecut()"&gt;Cut&lt;/button&gt;
   46619    &lt;button type="button" onclick="epaste()"&gt;Paste&lt;/button&gt;
   46620   &lt;/menu&gt;
   46621  &lt;/li&gt;
   46622  &lt;li&gt;
   46623   &lt;menu label="Help"&gt;
   46624    &lt;li&gt;&lt;a href="help.html"&gt;Help&lt;/a&gt;&lt;/li&gt;
   46625    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
   46626   &lt;/menu&gt;
   46627  &lt;/li&gt;
   46628 &lt;/menu&gt;</pre>
   46629 
   46630   <p>In a supporting user agent, this might look like this:</p>
   46631 
   46632   <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." src=images/sample-toolbar-1.png></p>
   46633 
   46634   <p>In a legacy user agent, the above would look like a bulleted list
   46635   with three items, the first of which has four buttons, the second of
   46636   which has three, and the third of which has two nested bullet points
   46637   with two items consisting of links.</p>
   46638 
   46639   <hr><p>The following implements a similar toolbar, with a single button
   46640   whose values, when selected, redirect the user to Web sites.</p>
   46641 
   46642   <pre>&lt;form action="redirect.cgi"&gt;
   46643  &lt;menu type="toolbar"&gt;
   46644   &lt;label for="goto"&gt;Go to...&lt;/label&gt;
   46645   &lt;menu label="Go"&gt;
   46646    &lt;select id="goto"<!--
   46647            onchange="if (this.options[this.selectedIndex].value)
   46648                      window.location = this.options[this.selectedIndex].value"-->&gt;
   46649     &lt;option value="" selected="selected"&gt; Select site: &lt;/option&gt;
   46650     &lt;option value="http://www.apple.com/"&gt; Apple &lt;/option&gt;
   46651     &lt;option value="http://www.mozilla.org/"&gt; Mozilla &lt;/option&gt;
   46652     &lt;option value="http://www.opera.com/"&gt; Opera &lt;/option&gt;
   46653    &lt;/select&gt;
   46654    &lt;span&gt;&lt;input type="submit" value="Go"&gt;&lt;/span&gt;
   46655   &lt;/menu&gt;
   46656  &lt;/menu&gt;
   46657 &lt;/form&gt;</pre>
   46658 
   46659   <p>The behavior in supporting user agents is similar to the example
   46660   above, but here the legacy behavior consists of a single
   46661   <code><a href=#the-select-element>select</a></code> element with a submit button. The submit button
   46662   doesn't appear in the toolbar, because it is not a direct child of
   46663   the <code><a href=#menus>menu</a></code> element or of its <code><a href=#the-li-element>li</a></code>
   46664   children.</p>
   46665 
   46666 
   46667 
   46668   <div class=impl>
   46669 
   46670   <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>
   46671 
   46672   <p>A menu (or toolbar) consists of a list of zero or more of the
   46673   following components:</p>
   46674 
   46675   <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands</li>
   46676    <li>Separators</li>
   46677    <li>Other menus (which allows the list to be nested)</li>
   46678   </ul><p>The list corresponding to a particular <code><a href=#menus>menu</a></code> element
   46679   is built by iterating over its child nodes. For each child node in
   46680   <a href=#tree-order>tree order</a>, the required behavior depends on what the
   46681   node is, as follows:</p>
   46682 
   46683   <dl class=switch><dt>An element that <a href=#concept-command title=concept-command>defines a command</a></dt>
   46684 
   46685    <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!-- we might need to be
   46686    explicit about what this means for each facet, if testing shows
   46687    this isn't well-implemented. e.g.: If there's an Icon facet for the
   46688    command, it should be <span title="fetch">fetched</span> (this
   46689    would be http-origin privacy-sensitive), and then that image should
   46690    be associated with the command, such that each command only has its
   46691    image fetched once, to prevent changes to the base URL from having
   46692    effects after the image has been fetched once. (no need to resolve
   46693    the Icon facet, it's an absolute URL) -->. <!--If the element is a
   46694    <code>command</code> element with a <code
   46695    title="attr-command-default">default</code> attribute, mark the
   46696    command as being a default command.--></dd>
   46697 
   46698 
   46699    <dt>An <code><a href=#the-hr-element>hr</a></code> element</dt>
   46700    <dt>An <code><a href=#the-option-element>option</a></code> element that has a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set to the empty
   46701    string, and has a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute, and whose
   46702    <code><a href=#textcontent>textContent</a></code> consists of a string of one or more
   46703    hyphens (U+002D HYPHEN-MINUS)</dt>
   46704 
   46705    <dd>Append a separator to the menu.</dd>
   46706 
   46707 
   46708    <dt>An <code><a href=#the-li-element>li</a></code> element</dt>
   46709    <dt>A <code><a href=#the-label-element>label</a></code> element</dt>
   46710 
   46711    <dd>Iterate over the children of the element.</dd>
   46712 
   46713 
   46714    <dt>A <code><a href=#menus>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
   46715    <dt>A <code><a href=#the-select-element>select</a></code> element</dt>
   46716 
   46717    <dd>Append a separator to the menu, then iterate over the children
   46718    of the <code><a href=#menus>menu</a></code> or <code><a href=#the-select-element>select</a></code> element, then
   46719    append another separator.</dd>
   46720 
   46721    <!-- v2: we might want to support <select> in <label> as giving a named submenu -->
   46722 
   46723 
   46724    <dt>A <code><a href=#menus>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
   46725    <dt>An <code><a href=#the-optgroup-element>optgroup</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
   46726 
   46727    <dd>Append a submenu to the menu, using the value of the element's
   46728    <code title="">label</code> attribute as the label of the menu. The
   46729    submenu must be constructed by taking the element and creating a
   46730    new menu for it using the complete process described in this
   46731    section.</dd>
   46732 
   46733 
   46734    <dt>Any other node</dt>
   46735 
   46736    <dd><a href=#ignore>Ignore</a> the node.</dd>
   46737 
   46738   </dl><p>Once all the nodes have been processed as described above, the
   46739   user agent must the post-process the menu as follows:</p>
   46740 
   46741   <ol><li>Except for separators, any menu item with no label, or whose
   46742    label is the empty string, must be removed.</li>
   46743 
   46744    <li>Any sequence of two or more separators in a row must be
   46745    collapsed to a single separator.</li>
   46746 
   46747    <li>Any separator at the start or end of the menu must be
   46748    removed.</li>
   46749 
   46750   </ol></div>
   46751 
   46752 
   46753 
   46754 
   46755   <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>
   46756 
   46757   <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
   46758   attribute gives the element's <a href=#context-menus title="context menus">context
   46759   menu</a>. The value must be the ID of a <code><a href=#menus>menu</a></code> element
   46760   in the DOM. <span class=impl>If the node that would be obtained by
   46761   the invoking the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code> method
   46762   using the attribute's value as the only argument is null or not a
   46763   <code><a href=#menus>menu</a></code> element, then the element has no assigned context
   46764   menu. Otherwise, the element's assigned context menu is the element
   46765   so identified.</span></p>
   46766 
   46767   <div class=impl>
   46768 
   46769   <p>When an element's context menu is requested (e.g. by the user
   46770   right-clicking the element, or pressing a context menu key), the UA
   46771   must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-contextmenu>contextmenu</code> that bubbles and is
   46772   cancelable at the element for which the menu was requested.</p>
   46773 
   46774   <p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the
   46775   default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence of events
   46776   is UA-dependent, as it will vary based on platform conventions.</p>
   46777 
   46778   <p>The default action of the <code title=event-contextmenu>contextmenu</code> event depends on
   46779   whether the element or one of its ancestors has a context menu
   46780   assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) or not. If
   46781   there is no context menu assigned, the default action must be for
   46782   the user agent to show its default context menu, if it has one.</p>
   46783 
   46784   <p>If the element or one of its ancestors <em>does</em> have a
   46785   context menu assigned, then the user agent must <a href=#fire-a-simple-event>fire a simple
   46786   event</a> named <code title=event-show>show</code> at the
   46787   <code><a href=#menus>menu</a></code> element of the context menu of the nearest
   46788   ancestor (including the element itself) with one assigned.</p>
   46789   <!-- v2: include modifier key information -->
   46790 
   46791   <p>The default action of <em>this</em> event is that the user agent
   46792   must show a context menu <a href=#building-menus-and-toolbars title="building menus and
   46793   toolbars">built</a> from the <code><a href=#menus>menu</a></code> element.</p>
   46794 
   46795   <p>The user agent may also provide access to its default context
   46796   menu, if any, with the context menu shown. For example, it could
   46797   merge the menu items from the two menus together, or provide the
   46798   page's context menu as a submenu of the default menu.</p>
   46799 
   46800   <p>If the user dismisses the menu without making a selection,
   46801   nothing in particular happens.</p>
   46802 
   46803   <p>If the user selects a menu item that represents a <a href=#concept-command title=concept-command>command</a>, then the UA must invoke
   46804   that command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>
   46805 
   46806   <p>Context menus must not, while being shown, reflect changes in the
   46807   DOM; they are constructed as the default action of the <code title=event-show>show</code> event and must remain as constructed
   46808   until dismissed.</p>
   46809 
   46810   <p>User agents may provide means for bypassing the context menu
   46811   processing model, ensuring that the user can always access the UA's
   46812   default context menus. For example, the user agent could handle
   46813   right-clicks that have the Shift key depressed in such a way that it
   46814   does not fire the <code title=event-contextmenu>contextmenu</code>
   46815   event and instead always shows the default context menu.</p>
   46816 
   46817   <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn>
   46818   attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
   46819 
   46820   </div>
   46821 
   46822   <div class=example>
   46823 
   46824    <p>Here is an example of a context menu for an input control:</p>
   46825 
   46826    <pre>&lt;form name="npc"&gt;
   46827  &lt;label&gt;Character name: &lt;input name=char type=text contextmenu=namemenu required&gt;&lt;/label&gt;
   46828  &lt;menu type=context id=namemenu&gt;
   46829   &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"&gt;
   46830   &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"&gt;
   46831  &lt;/menu&gt;
   46832 &lt;/form&gt;</pre>
   46833 
   46834    <p>This adds to items to the control's context menu, one called
   46835    "Pick random name", and one called "Prefill other fields based on
   46836    name". They invoke scripts that are not shown in the example
   46837    above.</p>
   46838 
   46839   </div>
   46840 
   46841 
   46842 
   46843   <div class=impl>
   46844 
   46845   <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
   46846 
   46847   <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
   46848   must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
   46849   menu for that <code><a href=#menus>menu</a></code> element, and use the result in the
   46850   rendering.</p>
   46851 
   46852   <p>The user agent must reflect changes made to the
   46853   <code><a href=#menus>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-toolbars title="building menus
   46854   and toolbars">rebuilding</a> the menu.</p>
   46855 
   46856   </div>
   46857 
   46858 
   46859 
   46860   <h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>
   46861 
   46862   <p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
   46863   behind menu items, buttons, and links.<!--v2COMMAND: Once a command
   46864   is defined, other parts of the interface can refer to the same
   46865   command, allowing many access points to a single feature to share
   46866   aspects such as the disabled state.--></p>
   46867 
   46868   <p id=facets>Commands are defined to have the following
   46869   <dfn id=concept-facet title=concept-facet>facets</dfn>:</p>
   46870 
   46871   <dl><dt><dfn id=command-facet-type title=command-facet-Type>Type</dfn></dt>
   46872 
   46873    <dd>The kind of command: "command", meaning it is a normal command;
   46874    "radio", meaning that triggering the command will, amongst other
   46875    things, set the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked
   46876    State</a> to true (and probably uncheck some other commands); or
   46877    "checkbox", meaning that triggering the command will, amongst other
   46878    things, toggle the value of the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>.</dd>
   46879 
   46880    <dt><dfn id=command-facet-id title=command-facet-ID>ID</dfn></dt>
   46881 
   46882    <dd>The name of the command, for referring to the command from the
   46883    markup or from script. If a command has no ID, it is an
   46884    <dfn id=anonymous-command>anonymous command</dfn>.</dd>
   46885 
   46886    <dt><dfn id=command-facet-label title=command-facet-Label>Label</dfn></dt>
   46887 
   46888    <dd>The name of the command as seen by the user.</dd>
   46889 
   46890    <dt><dfn id=command-facet-hint title=command-facet-Hint>Hint</dfn></dt>
   46891 
   46892    <dd>A helpful or descriptive string that can be shown to the
   46893    user.</dd>
   46894 
   46895    <dt><dfn id=command-facet-icon title=command-facet-Icon>Icon</dfn></dt>
   46896 
   46897    <dd>An <a href=#absolute-url>absolute URL</a> identifying a graphical image that
   46898    represents the action. A command might not have an Icon.</dd> <!--
   46899    changing base URLs might change the icon -->
   46900 
   46901    <dt><dfn id=command-facet-accesskey title=command-facet-AccessKey>Access Key</dfn></dt>
   46902 
   46903    <dd>A key combination selected by the user agent that triggers the
   46904    command. A command might not have an Access Key.</dd>
   46905 
   46906    <dt><dfn id=command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</dfn></dt>
   46907 
   46908    <dd>Whether the command is hidden or not (basically, whether it
   46909    should be shown in menus).</dd>
   46910 
   46911    <dt><dfn id=command-facet-disabledstate title=command-facet-DisabledState>Disabled State</dfn></dt>
   46912 
   46913    <dd>Whether the command is relevant and can be triggered or not.</dd>
   46914 
   46915    <dt><dfn id=command-facet-checkedstate title=command-facet-CheckedState>Checked State</dfn></dt>
   46916 
   46917    <dd>Whether the command is checked or not.</dd>
   46918 
   46919    <dt><dfn id=command-facet-action title=command-facet-Action>Action</dfn></dt>
   46920 
   46921    <dd>The actual effect that triggering the command will have. This
   46922    could be a scripted event handler, a <a href=#url>URL</a> to which to
   46923    <a href=#navigate>navigate</a>, or a form submission.</dd>
   46924 
   46925 <!-- v2COMMAND
   46926    <dt><dfn title="command-facet-Triggers">Triggers</dfn></dt>
   46927 
   46928    <dd>The list of elements that can trigger the command. The element
   46929    defining a command is always in the list of elements that can
   46930    trigger the command. For anonymous commands, only the element
   46931    defining the command is on the list, since other elements have no
   46932    way to refer to it.</dd>
   46933 -->
   46934 
   46935   </dl><p>These facets are exposed on elements using the <dfn id=command-api>command
   46936   API</dfn>:</p>
   46937 
   46938   <dl class=domintro><dt><var title="">element</var> . <code title=dom-command-ro-commandType><a href=#dom-command-ro-commandtype>commandType</a></code></dt>
   46939 
   46940    <dd>
   46941 
   46942     <p>Exposes the <a href=#command-facet-type title=command-facet-Type>Type</a> facet of the command.</p>
   46943 
   46944    </dd>
   46945 
   46946    <dt><var title="">element</var> . <code title=dom-id><a href=#dom-id>id</a></code></dt>
   46947 
   46948    <dd>
   46949 
   46950     <p>Exposes the <a href=#command-facet-id title=command-facet-ID>ID</a> facet of the command.</p>
   46951 
   46952    </dd>
   46953 
   46954    <dt><var title="">element</var> . <code title=dom-command-ro-label><a href=#dom-command-ro-label>label</a></code></dt>
   46955 
   46956    <dd>
   46957 
   46958     <p>Exposes the <a href=#command-facet-label title=command-facet-Label>Label</a> facet of the command.</p>
   46959 
   46960    </dd>
   46961 
   46962    <dt><var title="">element</var> . <code title=dom-title><a href=#dom-title>title</a></code></dt>
   46963 
   46964    <dd>
   46965 
   46966     <p>Exposes the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> facet of the command.</p>
   46967 
   46968    </dd>
   46969 
   46970    <dt><var title="">element</var> . <code title=dom-command-ro-icon><a href=#dom-command-ro-icon>icon</a></code></dt>
   46971 
   46972    <dd>
   46973 
   46974     <p>Exposes the <a href=#command-facet-icon title=command-facet-Icon>Icon</a> facet of the command.</p>
   46975 
   46976    </dd>
   46977 
   46978    <dt><var title="">element</var> . <code title=dom-accessKeyLabel><a href=#dom-accesskeylabel>accessKeyLabel</a></code></dt>
   46979 
   46980    <dd>
   46981 
   46982     <p>Exposes the <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Key</a> facet of the command.</p>
   46983 
   46984    </dd>
   46985 
   46986    <dt><var title="">element</var> . <code title=dom-hidden><a href=#dom-hidden>hidden</a></code></dt>
   46987 
   46988    <dd>
   46989 
   46990     <p>Exposes the <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet of the command.</p>
   46991 
   46992    </dd>
   46993 
   46994    <dt><var title="">element</var> . <code title=dom-command-ro-disabled><a href=#dom-command-ro-disabled>disabled</a></code></dt>
   46995 
   46996    <dd>
   46997 
   46998     <p>Exposes the <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet of the command.</p>
   46999 
   47000    </dd>
   47001 
   47002    <dt><var title="">element</var> . <code title=dom-command-ro-checked><a href=#dom-command-ro-checked>checked</a></code></dt>
   47003 
   47004    <dd>
   47005 
   47006     <p>Exposes the <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a> facet of the command.</p>
   47007 
   47008    </dd>
   47009 
   47010    <dt><var title="">element</var> . <code title=dom-click><a href=#dom-click>click</a></code>()</dt>
   47011 
   47012    <dd>
   47013 
   47014     <p>Triggers the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
   47015 
   47016    </dd>
   47017 
   47018 <!--v2COMMAND
   47019    <dt><var title="">element</var> . <code title="dom-command-ro-triggers">triggers</code></dt>
   47020 
   47021    <dd>
   47022 
   47023     <p>Exposes the <span title="command-facet-Triggers">Triggers</span> facet of the command.</p>
   47024 
   47025    </dd>
   47026 -->
   47027 
   47028   </dl><div class=impl>
   47029 
   47030   <p>The <dfn id=dom-command-ro-commandtype title=dom-command-ro-commandType><code>commandType</code></dfn>
   47031   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
   47032   element is "command", "radio", or "checkbox" respectively. If the
   47033   element does not define a command, it must return null.</p>
   47034 
   47035   <p>The <dfn id=dom-command-ro-label title=dom-command-ro-label><code>label</code></dfn>
   47036   attribute must return the command's <a href=#command-facet-label title=command-facet-Label>Label</a>, or null if the element
   47037   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
   47038   shadowed by the <code title="">label</code> IDL attribute on
   47039   various elements.</p>
   47040 
   47041   <p>The <dfn id=dom-command-ro-icon title=dom-command-ro-icon><code>icon</code></dfn>
   47042   attribute must return the <a href=#absolute-url>absolute URL</a> of the command's
   47043   <a href=#command-facet-icon title=command-facet-Icon>Icon</a>. If the element does
   47044   not specify an icon, or if the element does not define a command,
   47045   then the attribute must return null. This attribute will be shadowed
   47046   by the <code title=dom-command-icon><a href=#dom-command-icon>icon</a></code> IDL attribute on
   47047   <code><a href=#the-command>command</a></code> elements.</p>
   47048 
   47049   <p>The <dfn id=dom-command-ro-disabled title=dom-command-ro-disabled><code>disabled</code></dfn>
   47050   attribute must return true if the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is that
   47051   the command is disabled, and false if the command is not
   47052   disabled. This attribute is not affected by the command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>. If the
   47053   element does not define a command, the attribute must return
   47054   false. This attribute will be shadowed by the <code title="">disabled</code> IDL attribute on various elements.</p>
   47055 
   47056   <p>The <dfn id=dom-command-ro-checked title=dom-command-ro-checked><code>checked</code></dfn> attribute
   47057   must return true if the command's <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a> is that the
   47058   command is checked, and false if it is that the command is not
   47059   checked. If the element does not define a command, the attribute
   47060   must return false. This attribute will be shadowed by the <code title="">checked</code> IDL attribute on <code><a href=#the-input-element>input</a></code> and
   47061   <code><a href=#the-command>command</a></code> elements.</p>
   47062 
   47063 <!--v2COMMAND
   47064   <p>The <dfn
   47065   title="dom-command-ro-triggers"><code>triggers</code></dfn>
   47066   attribute must return a list containing the elements that can
   47067   trigger the command (the command's <span
   47068   title="command-facet-Triggers">Triggers</span>). The list must be
   47069   <span>live</span>. The same object must be returned each time. While
   47070   the element does not define a command, the list must be empty.</p>
   47071 -->
   47072 
   47073   <p class=note>The <a href=#command-facet-id title=command-facet-ID>ID</a> facet
   47074   is exposed by the <code title=dom-id><a href=#dom-id>id</a></code> IDL attribute,
   47075   the <a href=#command-facet-hint title=command-facet-Hint>Hint</a> facet is exposed by
   47076   the <code title=dom-title><a href=#dom-title>title</a></code> IDL attribute, the <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> facet is exposed by
   47077   the <code title=dom-accessKeyLabel><a href=#dom-accesskeylabel>accessKeyLabel</a></code> IDL
   47078   attribute, and the <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
   47079   State</a> facet is exposed by the <code title=dom-hidden><a href=#dom-hidden>hidden</a></code> IDL attribute.</p>
   47080 
   47081   </div>
   47082 
   47083   <hr><dl class=domintro><dt><var title="">document</var> . <code title=dom-document-commands><a href=#dom-document-commands>commands</a></code></dt>
   47084    <dd>
   47085     <p>Returns an <code><a href=#htmlcollection>HTMLCollection</a></code> of the elements in the
   47086     <code><a href=#document>Document</a></code> that define commands and have IDs.</p>
   47087    </dd>
   47088 
   47089   </dl><div class=impl>
   47090 
   47091   <p>The <dfn id=dom-document-commands title=dom-document-commands><code>commands</code></dfn> attribute
   47092   of the document's <code><a href=#htmldocument>HTMLDocument</a></code> interface must return an
   47093   <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the <code><a href=#document>Document</a></code>
   47094   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>
   47095 
   47096   </div>
   47097 
   47098   <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
   47099   (visible), e.g. in the user agent's menu bar. User agents are
   47100   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
   47101   advertise those keys to the user.</p>
   47102 
   47103 
   47104   <div class=impl>
   47105 
   47106   <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>
   47107 
   47108   <p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
   47109 
   47110   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47111   is "command".</p>
   47112 
   47113   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47114   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47115   element, if the attribute is present and not empty. Otherwise the
   47116   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47117 
   47118   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47119   is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
   47120   attribute.</p>
   47121 
   47122   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47123   is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   47124   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>
   47125 
   47126   <p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> of the command
   47127   is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
   47128   a url">resolving</a> the value of the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of the first
   47129   <code><a href=#the-img-element>img</a></code> element descendant of the element, relative to that
   47130   element, if there is such an element and resolving its attribute is
   47131   successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>
   47132 
   47133   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47134   command is the element's <a href=#assigned-access-key>assigned access key</a>, if
   47135   any.</p>
   47136 
   47137   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
   47138   of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
   47139   otherwise.</p>
   47140 
   47141   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47142   State</a> facet of the command is always false. (The command is
   47143   always enabled.)</p>
   47144 
   47145   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47146   of the command is always false. (The command is never checked.)</p>
   47147 
   47148   <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
   47149   command is to <a href=#fire-a-click-event title="fire a click event">fire a <code title=event-click>click</code> event</a> at the element.</p>
   47150 
   47151 
   47152   <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>
   47153 
   47154   <p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>
   47155 
   47156   <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
   47157   determined <a href=#using-the-a-element-to-define-a-command title=a-command>as for <code>a</code>
   47158   elements</a> (see the previous section).</p>
   47159 
   47160   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47161   State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>
   47162 
   47163 
   47164   <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>
   47165 
   47166   <p>An <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>
   47167 
   47168   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47169   is "radio" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code>
   47170   attribute is in the <code title=attr-input-type-radio><a href=#radio-button-state>Radio
   47171   Button</a></code> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <code title=attr-input-type-checkbox><a href=#checkbox-state>Checkbox</a></code> state, and
   47172   "command" otherwise.</p>
   47173 
   47174   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47175   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47176   element, if the attribute is present and not empty. Otherwise the
   47177   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47178 
   47179   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47180   depends on the Type of the command:</p>
   47181 
   47182   <p>If the <a href=#command-facet-type title=command-facet-Type>Type</a> is "command",
   47183   then it is the string given by the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if any, and a
   47184   UA-dependent, locale-dependent value that the UA uses to label the
   47185   button itself if the attribute is absent.</p>
   47186 
   47187   <p>Otherwise, the <a href=#command-facet-type title=command-facet-Type>Type</a> is
   47188   "radio" or "checkbox". If the element is a <a href=#labeled-control>labeled
   47189   control</a>, the <code><a href=#textcontent>textContent</a></code> of the first
   47190   <code><a href=#the-label-element>label</a></code> element in <a href=#tree-order>tree order</a> whose
   47191   <a href=#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
   47192   string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise,
   47193   the value of the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
   47194   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>
   47195 
   47196   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47197   is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   47198   of the <code><a href=#the-input-element>input</a></code> element. If the attribute is not present, the
   47199   <a href=#command-facet-hint title=command-facet-Hint>Hint</a> is the empty
   47200   string.</p>
   47201 
   47202   <p>If the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code>
   47203   attribute is in the <a href=#image-button-state title=attr-input-type-image>Image
   47204   Button</a> state, and the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and that attribute's
   47205   value can be successfully <a href=#resolve-a-url title="resolve a
   47206   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
   47207   <a href=#absolute-url>absolute URL</a> obtained from resolving that attribute
   47208   that way. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>
   47209 
   47210   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47211   command is the element's <a href=#assigned-access-key>assigned access key</a>, if
   47212   any.</p>
   47213 
   47214   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
   47215   of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
   47216   otherwise.</p>
   47217 
   47218   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47219   State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the
   47220   control.</p>
   47221 
   47222   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47223   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
   47224   element is <a href=#concept-fe-checked title=concept-fe-checked>checked</a>
   47225   attribute, and false otherwise.</p>
   47226 
   47227   <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
   47228   command, if the element has a defined <a href=#activation-behavior>activation
   47229   behavior</a>, is to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
   47230   steps</a> on the element. Otherwise, it is just to <a href=#fire-a-click-event>fire a
   47231   <code title=event-click>click</code> event</a> at the
   47232   element.</p>
   47233 
   47234 
   47235   <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>
   47236 
   47237   <p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
   47238   <code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
   47239   empty string <a href=#concept-command title=concept-command>defines a
   47240   command</a>.</p>
   47241 
   47242   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47243   is "radio" if the <code><a href=#the-option-element>option</a></code>'s nearest ancestor
   47244   <code><a href=#the-select-element>select</a></code> element has no <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute, and
   47245   "checkbox" if it does.</p>
   47246 
   47247   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47248   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47249   element, if the attribute is present and not empty. Otherwise the
   47250   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47251 
   47252   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47253   is the value of the <code><a href=#the-option-element>option</a></code> element's <code title=attr-option-label><a href=#attr-option-label>label</a></code> attribute, if there is one,
   47254   or the value of the <code><a href=#the-option-element>option</a></code> element's
   47255   <code><a href=#textcontent>textContent</a></code> IDL attribute if there isn't.</p>
   47256 
   47257   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47258   is the string given by the element's <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, if any, and the empty
   47259   string if the attribute is absent.</p>
   47260 
   47261   <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
   47262   command.</p>
   47263 
   47264   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47265   command is the element's <a href=#assigned-access-key>assigned access key</a>, if
   47266   any.</p>
   47267 
   47268   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
   47269   of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
   47270   otherwise.</p>
   47271 
   47272   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47273   State</a> of the command is true (disabled) if the element is
   47274   <a href=#concept-option-disabled title=concept-option-disabled>disabled</a> or if its
   47275   nearest ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and false
   47276   otherwise.</p>
   47277 
   47278   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47279   of the command is true (checked) if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
   47280   false otherwise.</p>
   47281 
   47282   <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
   47283   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=#concept-select-pick title=concept-select-pick>pick</a> the <code><a href=#the-option-element>option</a></code>
   47284   element. Otherwise, it must <a href=#concept-select-toggle title=concept-select-toggle>toggle</a> the <code><a href=#the-option-element>option</a></code>
   47285   element.</p>
   47286 
   47287 
   47288   <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
   47289   a command</h5>
   47290 
   47291   <p>A <code><a href=#the-command>command</a></code> element <a href=#concept-command title=concept-command>defines a command</a>.</p>
   47292 
   47293   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47294   is "radio" if the <code><a href=#the-command>command</a></code>'s <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
   47295   "<code>radio</code>", "checkbox" if the attribute's value is
   47296   "<code>checkbox</code>", and "command" otherwise.</p>
   47297 
   47298   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47299   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47300   element, if the attribute is present and not empty. Otherwise the
   47301   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47302 
   47303   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47304   is the value of the element's <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute, if there is one,
   47305   or the empty string if it doesn't.</p>
   47306 
   47307   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47308   is the string given by the element's <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute, if any, and the
   47309   empty string if the attribute is absent.</p>
   47310 
   47311   <p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command
   47312   is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
   47313   a url">resolving</a> the value of the element's <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code> attribute, relative to the
   47314   element, if it has such an attribute and resolving it is
   47315   successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>
   47316 
   47317   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47318   command is the element's <a href=#assigned-access-key>assigned access key</a>, if
   47319   any.</p>
   47320 
   47321   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
   47322   of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
   47323   otherwise.</p>
   47324 
   47325   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47326   State</a> of the command is true (disabled) if the element has a
   47327   <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and
   47328   false otherwise.</p>
   47329 
   47330   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47331   of the command is true (checked) if the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, and false
   47332   otherwise.</p>
   47333 
   47334   <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
   47335   command, if the element has a defined <a href=#activation-behavior>activation
   47336   behavior</a>, is to <a href=#run-synthetic-click-activation-steps>run synthetic click activation
   47337   steps</a> on the element. Otherwise, it is just to <a href=#fire-a-click-event>fire a
   47338   <code title=event-click>click</code> event</a> at the
   47339   element.</p>
   47340 
   47341 
   47342 
   47343 
   47344 
   47345   <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>
   47346 
   47347   <p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
   47348   key</a> and a <a href=#labeled-control>labeled control</a> and whose
   47349   <a href=#labeled-control>labeled control</a> <a href=#concept-command title=concept-command>defines a
   47350   command</a>, itself <a href=#concept-command title=concept-command>defines a
   47351   command</a>.</p>
   47352 
   47353   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47354   is "command".</p>
   47355 
   47356   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47357   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47358   element, if the attribute is present and not empty. Otherwise the
   47359   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47360 
   47361   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47362   is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
   47363   attribute.</p>
   47364 
   47365   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47366   is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   47367   of the element.</p>
   47368 
   47369   <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
   47370   command.</p>
   47371 
   47372   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47373   command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>
   47374 
   47375   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>,
   47376   <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>, and
   47377   <a href=#command-facet-action title=command-facet-Action>Action</a> facets of the
   47378   command are the same as the respective facets of the element's
   47379   <a href=#labeled-control>labeled control</a>.</p>
   47380 
   47381   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47382   of the command is always false. (The command is never checked.)</p>
   47383 
   47384 
   47385 
   47386   <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>
   47387 
   47388   <p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
   47389   key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
   47390   has a descendant that is not a descendant of the <code><a href=#the-legend-element>legend</a></code>
   47391   element and is neither a <code><a href=#the-label-element>label</a></code> element nor a
   47392   <code><a href=#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>
   47393 
   47394   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47395   is "command".</p>
   47396 
   47397   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47398   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47399   element, if the attribute is present and not empty. Otherwise the
   47400   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47401 
   47402   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47403   is the string given by the element's <code><a href=#textcontent>textContent</a></code> IDL
   47404   attribute.</p>
   47405 
   47406   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47407   is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   47408   of the element.</p>
   47409 
   47410   <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
   47411   command.</p>
   47412 
   47413   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47414   command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>
   47415 
   47416   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>,
   47417   <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>, and
   47418   <a href=#command-facet-action title=command-facet-Action>Action</a> facets of the
   47419   command are the same as the respective facets of the first element
   47420   in <a href=#tree-order>tree order</a> that is a descendant of the parent of the
   47421   <code><a href=#the-legend-element>legend</a></code> element that <a href=#concept-command title=concept-command>defines a command</a> but is not a
   47422   descendant of the <code><a href=#the-legend-element>legend</a></code> element and is neither a
   47423   <code><a href=#the-label-element>label</a></code> nor a <code><a href=#the-legend-element>legend</a></code> element.</p>
   47424 
   47425   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47426   of the command is always false. (The command is never checked.)</p>
   47427 
   47428 
   47429 
   47430   <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>
   47431 
   47432   <p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>
   47433 
   47434   <p>If one of the other sections that define elements that <a href=#concept-command title=concept-command>define commands</a> define that this
   47435   element <a href=#concept-command title=concept-command>defines a command</a>, then
   47436   that section applies to this element, and this section does
   47437   not. Otherwise, this section applies to that element.</p>
   47438 
   47439   <p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
   47440   is "command".</p>
   47441 
   47442   <p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
   47443   the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute of the
   47444   element, if the attribute is present and not empty. Otherwise the
   47445   command is an <a href=#anonymous-command>anonymous command</a>.</p>
   47446 
   47447   <p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
   47448   depends on the element. If the element is a <a href=#labeled-control>labeled
   47449   control</a>, the <code><a href=#textcontent>textContent</a></code> of the first
   47450   <code><a href=#the-label-element>label</a></code> element in <a href=#tree-order>tree order</a> whose
   47451   <a href=#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
   47452   string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise, the
   47453   <a href=#command-facet-label title=command-facet-Label>Label</a> is the
   47454   <code><a href=#textcontent>textContent</a></code> of the element itself.</p>
   47455 
   47456   <p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
   47457   is the value of the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute
   47458   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>
   47459 
   47460   <p>There is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the
   47461   command.</p>
   47462 
   47463   <p>The <a href=#command-facet-accesskey title=command-facet-AccessKey>AccessKey</a> of the
   47464   command is the element's <a href=#assigned-access-key>assigned access key</a>.</p>
   47465 
   47466   <p>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a>
   47467   of the command is true (hidden) if the element has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and false
   47468   otherwise.</p>
   47469 
   47470   <p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
   47471   State</a> facet of the command is always false. (The command is
   47472   always enabled.)</p>
   47473 
   47474   <p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
   47475   of the command is always false. (The command is never checked.)</p>
   47476 
   47477   <p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
   47478   command is to run the following steps:</p>
   47479 
   47480   <ol><li>If the element is <a href=#focusable>focusable</a>, run the
   47481    <a href=#focusing-steps>focusing steps</a> for the element.</li>
   47482 
   47483    <li>If the element has a defined <a href=#activation-behavior>activation behavior</a>,
   47484    <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on the
   47485    element.</li>
   47486 
   47487    <li>Otherwise, if the element does not have a defined
   47488    <a href=#activation-behavior>activation behavior</a>, <a href=#fire-a-click-event>fire a <code title=event-click>click</code> event</a> at the element.</li>
   47489 
   47490   </ol></div>
   47491 
   47492 
   47493 
   47494 
   47495   <h4 id=devices><span class=secno>4.11.6 </span>The <dfn><code>device</code></dfn> element</h4>
   47496 
   47497   <dl class=element><dt>Categories</dt>
   47498    <dd><a href=#flow-content>Flow content</a>.</dd>
   47499    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
   47500    <dd><a href=#interactive-content>Interactive content</a>.</dd>
   47501    <dt>Contexts in which this element may be used:</dt>
   47502    <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
   47503    <dt>Content model:</dt>
   47504    <dd>Empty.</dd>
   47505    <dt>Content attributes:</dt>
   47506    <dd><a href=#global-attributes>Global attributes</a></dd>
   47507    <dd><code title=attr-device-type><a href=#attr-device-type>type</a></code></dd>
   47508    <dt>DOM interface:</dt>
   47509    <dd>
   47510 <pre class=idl>interface <dfn id=htmldeviceelement>HTMLDeviceElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   47511            attribute DOMString <span title=dom-device-type>type</span>;
   47512   readonly attribute any <span title=dom-device-data>data</span>;
   47513 };</pre>
   47514   </dl><p>The <code><a href=#devices>device</a></code> element represents a device selector, to
   47515   allow the user to give the page access to a device, for example a
   47516   video camera.</p>
   47517 
   47518   <p>The <dfn id=attr-device-type title=attr-device-type><code>type</code></dfn>
   47519   attribute allows the author to specify which kind of device the page
   47520   would like access to. The attribute is an <a href=#enumerated-attribute>enumerated
   47521   attribute</a> with the keywords given in the first column of the
   47522   following table, and their corresponding states given in the cell in
   47523   second column of the same row.</p>
   47524 
   47525   <p class=XXX>RS232 is only included below to give an idea of where
   47526   we could go with this. <strong>Should we instead just make this only
   47527   useful for audiovisual streams?</strong> Unless there are compelling
   47528   reasons, we probably should not be this generic. So far, the reasons
   47529   aren't that compelling.</p>
   47530 
   47531   <table><thead><tr><th>Keyword
   47532      <th>State
   47533      <th>Device description
   47534      <th>Examples
   47535    <tbody><tr><td><dfn id=attr-device-type-keyword-media title=attr-device-type-keyword-media><code>media</code></dfn>
   47536      <td><span title=attr-device-type-media>Media</span>
   47537      <td>Stream of audio and/or video data.
   47538      <td>A webcam.
   47539     <tr><td><dfn id=attr-device-type-keyword-fs title=attr-device-type-keyword-fs><code>fs</code></dfn>
   47540      <td><span title=attr-device-type-fs>File system</span>
   47541      <td>File system.
   47542      <td>A USB-connected media player.
   47543     <tr><td><dfn id=attr-device-type-keyword-rs232 title=attr-device-type-keyword-rs232><code>rs232</code></dfn>
   47544      <td><span title=attr-device-type-rs232>RS232</span>
   47545      <td>RS232 device.
   47546      <td>A serial port.
   47547   </table><p class=XXX>processing model: 'change' event fires once user
   47548   selects a new device; .data is set to new Stream, LocalFS, or RS232
   47549   object as appropriate.</p>
   47550 
   47551   <div class=example>
   47552 
   47553    <pre>&lt;p&gt;To start chatting, select a video camera: &lt;device type=media onchange="update(this.data)"&gt;&lt;/p&gt;
   47554 &lt;video autoplay&gt;&lt;/video&gt;
   47555 &lt;script&gt;
   47556  function update(stream) {
   47557    document.getElementsByTagName('video')[0].src = stream.url;
   47558  }
   47559 &lt;/script&gt;</pre>
   47560 
   47561   </div>
   47562 
   47563 
   47564   <h5 id=stream-api><span class=secno>4.11.6.1 </span>Stream API</h5>
   47565 
   47566   <p>The <code><a href=#stream>Stream</a></code> interface is used to represent
   47567   streams.</p>
   47568 
   47569   <pre class=idl>interface <dfn id=stream>Stream</dfn> {
   47570   readonly attribute DOMString <a href=#dom-stream-url title=dom-stream-url>url</a>;
   47571   <a href=#streamrecorder>StreamRecorder</a> <a href=#dom-stream-record title=dom-stream-record>record</a>();
   47572 };</pre>
   47573 
   47574   <p>The <dfn id=dom-stream-url title=dom-stream-url><code>url</code></dfn> attribute
   47575   must return a <span title=fileURN>File URN</span> representing the
   47576   stream. <a href=#refsFILEAPI>[FILEAPI]</a></p>
   47577 
   47578   <p>For audio and video streams, the stream must be in a format
   47579   supported by the user agent for use in <code><a href=#audio>audio</a></code> and
   47580   <code><a href=#video>video</a></code> elements.</p>
   47581 
   47582   <p class=XXX>This will be pinned down to a specific codec.</p>
   47583 
   47584   <p>When the <dfn id=dom-stream-record title=dom-stream-record><code>record()</code></dfn> method is
   47585   invoked, the user agent must return a new
   47586   <code><a href=#streamrecorder>StreamRecorder</a></code> object associated with the stream.</p>
   47587 
   47588   <pre class=idl>interface <dfn id=streamrecorder>StreamRecorder</dfn> {
   47589   <span>File</span> <a href=#dom-streamrecorder-stop title=dom-StreamRecorder-stop>stop</a>();
   47590 };</pre>
   47591 
   47592   <p>The <dfn id=dom-streamrecorder-stop title=dom-StreamRecorder-stop><code>stop()</code></dfn> method
   47593   must return a new <code>File</code> object representing the data
   47594   that was streamed between the creation of the
   47595   <code><a href=#streamrecorder>StreamRecorder</a></code> object and the invocation of the <code title=dom-StreamRecorder-stop><a href=#dom-streamrecorder-stop>stop()</a></code> method. <a href=#refsFILEAPI>[FILEAPI]</a></p>
   47596 
   47597   <p>For audio and video streams, the file must be in a format
   47598   supported by the user agent for use in <code><a href=#audio>audio</a></code> and
   47599   <code><a href=#video>video</a></code> elements.</p>
   47600 
   47601   <p class=XXX>This again will be pinned down to a specific codec.</p>
   47602 
   47603 
   47604   <h5 id=peer-to-peer-connections><span class=secno>4.11.6.2 </span>Peer-to-peer connections</h5>
   47605 
   47606   <p class=XXX>This section will be moved to a more appropriate
   47607   location in due course; it is here currently to keep it near the
   47608   <code><a href=#devices>device</a></code> element to allow reviewers to look at it.</p>
   47609 
   47610   <pre class=idl>[Constructor(in DOMString serverConfiguration)]
   47611 interface <dfn id=connectionpeer>ConnectionPeer</dfn> {
   47612   void sendText(in DOMString text);
   47613   attribute <a href=#function>Function</a> ontext; // receiving
   47614 
   47615   void sendBitmap(in HTMLImageElement image);
   47616   attribute <a href=#function>Function</a> onbitmap; // receiving
   47617 
   47618   void sendFile(in File file);
   47619   attribute <a href=#function>Function</a> onfile; // receiving
   47620 
   47621   void addStream(in Stream stream);
   47622   void removeStream(in Stream stream);
   47623   readonly attribute Stream[] localStreams;
   47624   readonly attribute Stream[] remoteStreams;
   47625   attribute <a href=#function>Function</a> onstream; // receiving
   47626 
   47627   void <span title=dom-ConnectionPeer-getLocalConfiguration>getLocalConfiguration</span>(in <a href=#connectionpeerconfigurationcallback>ConnectionPeerConfigurationCallback</a> callback); // maybe this should be in the constructor
   47628   void <span title=dom-ConnectionPeer-addRemoteConfiguration>addRemoteConfiguration</span>(in DOMString configuration);
   47629   void close(); // disconnects and stops listening
   47630 
   47631   attribute <a href=#function>Function</a> onconnect;
   47632   attribute <a href=#function>Function</a> onerror;
   47633   attribute <a href=#function>Function</a> ondisconnect;
   47634 };
   47635 
   47636 [Callback=FunctionOnly, NoInterfaceObject]
   47637 interface <dfn id=connectionpeerconfigurationcallback>ConnectionPeerConfigurationCallback</dfn> {
   47638   void <span title=dom-ConnectionPeerConfigurationCallback-handleEvent>handleEvent</span>(in <a href=#connectionpeer>ConnectionPeer</a> server, in DOMString configuration);
   47639 };</pre>
   47640 
   47641   <p class=XXX>...</p>
   47642 
   47643   <div class=XXX>
   47644 
   47645    <p>This relies on some currently hypothetical other standard to
   47646    define:</p>
   47647 
   47648    <ul><li>The format of server configuration strings.
   47649     <li>The format of client configuration strings.
   47650     <li>The protocols that clients use to talk to third-party servers mentioned in the server configuration strings.
   47651     <li>The protocols that clients use to talk to each other.
   47652    </ul></div>
   47653 
   47654   <div class=example>
   47655 
   47656    <p>When two peers decide they are going to set up a connection to
   47657    each other, they both go through these steps. The serverConfig
   47658    comes from a third-party server they can use to get things like
   47659    their public IP address or to set up NAT traversal. They also have
   47660    to send their respective configuration to each other using the same
   47661    out-of-band mechanism they used to establish that they were going
   47662    to communicate in the first place.</p>
   47663 
   47664    <pre>var serverConfig = ...; // configuration string obtained from server
   47665 // contains details such as the IP address of a server that can speak some
   47666 // protocol to help the client determine its public IP address, route packets
   47667 // if necessary, etc.
   47668 
   47669 var local = new ConnectionPeer(serverConfig);
   47670 local.getLocalConfiguration(function (configuration) {
   47671   if (configuration != '') {
   47672     ...; // send configuration to other peer using out-of-band mechanism
   47673   } else {
   47674     // we've exhausted our options; wait for connection
   47675   }
   47676 });
   47677 
   47678 function ... (configuration) {
   47679   // called whenever we get configuration information out-of-band
   47680   local.addRemoteConfiguration(configuration);
   47681 }
   47682 
   47683 local.onconnect = function (event) {
   47684   // we are connected!
   47685   local.sendText('Hello');
   47686   local.addStream(...); // send video
   47687   local.onstream = function (event) {
   47688     // receive video
   47689     // (videoElement is some &lt;video&gt; element)
   47690     if (local.remoteStreams.length &gt; 0)
   47691       videoElement.src = local.remoteStreams[0].url;
   47692   };
   47693 };</pre>
   47694 
   47695   </div>
   47696 
   47697   <p class=warning>To prevent network sniffing from allowing a
   47698   fourth party to establish a connection to a peer using the
   47699   information sent out-of-band to the other peer and thus spoofing the
   47700   client, the configuration information should always be transmitted
   47701   using an encrypted connection.</p>
   47702 
   47703 
   47704 
   47705 
   47706 
   47707 
   47708   <h3 id=links><span class=secno>4.12 </span>Links</h3>
   47709 
   47710 
   47711   <h4 id=hyperlink-elements><span class=secno>4.12.1 </span>Hyperlink elements</h4>
   47712 
   47713   <p>The <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code>
   47714   elements can, in certain situations described in the definitions of
   47715   those elements, represent <dfn id=hyperlink title=hyperlink>hyperlinks</dfn>.</p>
   47716 
   47717   <p>The <dfn id=attr-hyperlink-href title=attr-hyperlink-href><code>href</code></dfn>
   47718   attribute on <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements must have
   47719   a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
   47720   spaces</a>. This <a href=#url>URL</a> is the <i>destination
   47721   resource</i> of the hyperlink.</p>
   47722 
   47723   <p class=note>The <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   47724   attribute on <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements is not
   47725   required; when those elements do not have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes they do not
   47726   represent hyperlinks.</p>
   47727 
   47728   <p class=note>The <code title=attr-link-href><a href=#attr-link-href>href</a></code>
   47729   attribute on the <code><a href=#the-link-element>link</a></code> element <em>is</em> required (and
   47730   has to be a <a href=#valid-non-empty-url>valid <em>non-empty</em> URL</a>), but whether
   47731   a <code><a href=#the-link-element>link</a></code> element represents a hyperlink or not depends on
   47732   the value of the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute of
   47733   that element.</p>
   47734 
   47735   <p>The <dfn id=attr-hyperlink-target title=attr-hyperlink-target><code>target</code></dfn>
   47736   attribute, if present, must be a <a href=#valid-browsing-context-name-or-keyword>valid browsing context name
   47737   or keyword</a>. It gives the name of the <a href=#browsing-context>browsing
   47738   context</a> that will be used. <span class=impl>User agents use
   47739   this name when <a href=#following-hyperlinks>following hyperlinks</a>.</span></p>
   47740 
   47741 <!--PING-->
   47742   <p>The <dfn id=ping title=attr-hyperlink-ping><code>ping</code></dfn> attribute, if
   47743   present, gives the URLs of the resources that are interested in
   47744   being notified if the user follows the hyperlink. The value must be
   47745   a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>, each of which must be
   47746   a <a href=#valid-non-empty-url>valid non-empty URL</a>. <span class=impl>The value is
   47747   used by the user agent for <a href=#hyperlink-auditing>hyperlink
   47748   auditing</a>.</span></p>
   47749 <!--PING-->
   47750 
   47751   <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements that represent
   47752   hyperlinks, the relationship between the document containing the
   47753   hyperlink and the destination resource indicated by the hyperlink is
   47754   given by the value of the element's <dfn id=attr-hyperlink-rel title=attr-hyperlink-rel><code>rel</code></dfn> attribute, which
   47755   must be a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>. The <a href=#linkTypes>allowed values and their meanings</a> are defined
   47756   below. The <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute has
   47757   no default value. If the attribute is omitted or if none of the
   47758   values in the attribute are recognized by the user agent, then the
   47759   document has no particular relationship with the destination
   47760   resource other than there being a hyperlink between the two.</p>
   47761 
   47762   <p>The <dfn id=attr-hyperlink-media title=attr-hyperlink-media><code>media</code></dfn>
   47763   attribute describes for which media the target document was
   47764   designed. It is purely advisory. The value must be a <a href=#valid-media-query>valid
   47765   media query</a>. The default, if the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code> attribute is omitted, is
   47766   "<code title="">all</code>".</p>
   47767 
   47768   <p>The <dfn id=attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code></dfn>
   47769   attribute on hyperlink elements, if present, gives the language of
   47770   the linked resource. It is purely advisory. The value must be a
   47771   valid BCP 47 language tag. <a href=#refsBCP47>[BCP47]</a>
   47772   <span class=impl>User agents must not consider this attribute
   47773   authoritative &mdash; upon fetching the resource, user agents must
   47774   use only language information associated with the resource to
   47775   determine its language, not metadata included in the link to the
   47776   resource.</span></p>
   47777 
   47778   <p>The <dfn id=attr-hyperlink-type title=attr-hyperlink-type><code>type</code></dfn>
   47779   attribute, if present, gives the <a href=#mime-type>MIME type</a> of the
   47780   linked resource. It is purely advisory. The value must be a
   47781   <a href=#valid-mime-type>valid MIME type</a>. <span class=impl>User agents must
   47782   not consider the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
   47783   attribute authoritative &mdash; upon fetching the resource, user
   47784   agents must not use metadata included in the link to the resource to
   47785   determine its type.</span></p>
   47786 
   47787 
   47788   <div class=impl>
   47789 
   47790   <h4 id=following-hyperlinks><span class=secno>4.12.2 </span><dfn>Following hyperlinks</dfn></h4>
   47791 
   47792   <p>When a user <em>follows a hyperlink</em>, the user agent must
   47793   <a href=#resolve-a-url title="resolve a url">resolve</a> the <a href=#url>URL</a>
   47794   given by the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute
   47795   of that hyperlink, relative to the hyperlink element, and if that is
   47796   successful, must <a href=#navigate>navigate</a> a <a href=#browsing-context>browsing
   47797   context</a> to the resulting <a href=#absolute-url>absolute URL</a>. In the
   47798   case of server-side image maps, the URL of the hyperlink must
   47799   further have its <var><a href=#hyperlink-suffix>hyperlink suffix</a></var> appended to it.</p>
   47800 
   47801   <p>If <a href=#resolve-a-url title="resolve a url">resolving</a> the
   47802   <a href=#url>URL</a> fails, the user agent may report the error to the
   47803   user in a user-agent-specific manner, may navigate to an error page
   47804   to report the error, or may ignore the error and do nothing.</p>
   47805 
   47806   <p>If the user indicated a specific <a href=#browsing-context>browsing context</a>
   47807   when following the hyperlink, or if the user agent is configured to
   47808   follow hyperlinks by navigating a particular browsing context, then
   47809   that must be the <a href=#browsing-context>browsing context</a> that is
   47810   navigated.</p>
   47811 
   47812   <p>Otherwise, if the hyperlink element is an <code><a href=#the-a-element>a</a></code> or
   47813   <code><a href=#the-area-element>area</a></code> element that has a <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute, then the
   47814   <a href=#browsing-context>browsing context</a> that is navigated must be chosen by
   47815   applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a
   47816   browsing context name</a>, using the value of the <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute as the
   47817   browsing context name. If these rules result in the creation of a
   47818   new <a href=#browsing-context>browsing context</a>, it must be navigated with
   47819   <a href=#replacement-enabled>replacement enabled</a>.</p>
   47820 
   47821   <p>Otherwise, if the hyperlink element is a <a href=#rel-sidebar-hyperlink title=rel-sidebar-hyperlink>sidebar hyperlink</a> and the user
   47822   agent implements a feature that can be considered a secondary
   47823   browsing context, such a secondary browsing context may be selected
   47824   as the browsing context to be navigated.</p>
   47825 
   47826   <p>Otherwise, if the hyperlink element is an <code><a href=#the-a-element>a</a></code> or
   47827   <code><a href=#the-area-element>area</a></code> element with no <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code> attribute, but one of
   47828   the child nodes of <a href=#the-head-element>the <code>head</code> element</a> is a
   47829   <code><a href=#the-base-element>base</a></code> element with a <code title=attr-base-target><a href=#attr-base-target>target</a></code> attribute, then the browsing
   47830   context that is navigated must be chosen by applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules
   47831   for choosing a browsing context given a browsing context name</a>,
   47832   using the value of the <code title=attr-base-target><a href=#attr-base-target>target</a></code>
   47833   attribute of the first such <code><a href=#the-base-element>base</a></code> element as the
   47834   browsing context name. If these rules result in the creation of a
   47835   new <a href=#browsing-context>browsing context</a>, it must be navigated with
   47836   <a href=#replacement-enabled>replacement enabled</a>.</p>
   47837 
   47838   <p>Otherwise, the browsing context that must be navigated is the
   47839   same browsing context as the one which the hyperlink element itself
   47840   is in.</p>
   47841 
   47842   <p>The navigation must be done with the <a href=#browsing-context>browsing
   47843   context</a> that contains the <code><a href=#document>Document</a></code> object with
   47844   which the hyperlink's element in question is associated as the
   47845   <a href=#source-browsing-context>source browsing context</a>.</p>
   47846 
   47847   </div>
   47848 
   47849 
   47850 <!--PING-->
   47851   <div class=impl>
   47852 
   47853   <h5 id=hyperlink-auditing><span class=secno>4.12.2.1 </span><dfn>Hyperlink auditing</dfn></h5>
   47854 
   47855   <p>If an <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> hyperlink element has a
   47856   <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute, and the
   47857   user follows the hyperlink, and the hyperlink's <a href=#url>URL</a> can
   47858   be <a href=#resolve-a-url title="resolve a url">resolved</a>, relative to the
   47859   hyperlink element, without failure, then the user agent must take
   47860   the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute's value,
   47861   <a href=#split-a-string-on-spaces title="split a string on spaces">split that string on
   47862   spaces</a>, <a href=#resolve-a-url title="resolve a url">resolve</a> each
   47863   resulting token relative to the hyperlink element, and then should
   47864   send a request (as described below) to each of the resulting <a href=#absolute-url title="absolute URL">absolute URLs</a>. (Tokens that fail to
   47865   resolve are ignored.) This may be done in parallel with the primary
   47866   request, and is independent of the result of that request.</p>
   47867 
   47868   <p>User agents should allow the user to adjust this behavior, for
   47869   example in conjunction with a setting that disables the sending of
   47870   HTTP <code title=http-referer>Referer</code> (sic) headers. Based
   47871   on the user's preferences, UAs may either <a href=#ignore>ignore</a> the
   47872   <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute altogether,
   47873   or selectively ignore URLs in the list (e.g. ignoring any
   47874   third-party URLs).</p>
   47875 
   47876   <p>For URLs that are HTTP URLs, the requests must be performed by
   47877   <a href=#fetch title=fetch>fetching</a> the specified URLs using the
   47878   POST method, with an entity body with the <a href=#mime-type>MIME type</a>
   47879   <code><a href=#text/ping>text/ping</a></code> consisting of the four-character string
   47880   "<code title="">PING</code>", from the <a href=#origin>origin</a> of the
   47881   <code><a href=#document>Document</a></code> containing the <a href=#hyperlink>hyperlink</a>. <!--
   47882   not http-origin privacy sensitive --> All relevant cookie and HTTP
   47883   authentication headers must be included in the request. Which other
   47884   headers are required depends on the URLs involved.</p>
   47885 
   47886   <dl class=switch><dt>If both the <a href="#the-document's-address" title="the document's address">address</a>
   47887    of the <code><a href=#document>Document</a></code> object containing the hyperlink being
   47888    audited and the ping URL have the <a href=#same-origin>same origin</a></dt>
   47889 
   47890    <dd>The request must include a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header with, as its
   47891    value, the <a href="#the-document's-address" title="the document's address">address</a> of
   47892    the document containing the hyperlink, and a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header with, as its value,
   47893    the address of the <a href=#absolute-url>absolute URL</a> of the target of the
   47894    hyperlink. The request must not include a <code title=http-referer>Referer</code> (sic) HTTP header. <!-- because
   47895    otherwise it would look like a trustable same-origin POST --></dd>
   47896 
   47897    <dt>Otherwise, if the origins are different, but the document
   47898    containing the hyperlink being audited was not retrieved over an
   47899    encrypted connection</dt>
   47900 
   47901    <dd>The request must include a <code title=http-referer>Referer</code> (sic) HTTP header with, as its
   47902    value, the <a href="#the-document's-current-address" title="the document's current address">current
   47903    address</a> of the document containing the hyperlink, a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header with the same
   47904    value, and a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header
   47905    with, as its value, the address of the target of the
   47906    hyperlink.</dd>
   47907 
   47908    <dt>Otherwise, the origins are different and the document
   47909    containing the hyperlink being audited was retrieved over an
   47910    encrypted connection</dt>
   47911 
   47912    <dd>The request must include a <code title=http-ping-to><a href=#ping-to>Ping-To</a></code> HTTP header with, as its value,
   47913    the address of the target of the hyperlink. The request must
   47914    neither include a <code title=http-referer>Referer</code> (sic)
   47915    HTTP header nor include a <code title=http-ping-from><a href=#ping-from>Ping-From</a></code> HTTP header.</dd>
   47916 
   47917   </dl><p class=note>To save bandwidth, implementors might also wish to
   47918   consider omitting optional headers such as <code>Accept</code> from
   47919   these requests.</p>
   47920 
   47921   <p>User agents must, unless otherwise specified by the user, honor
   47922   the HTTP headers (including, in particular, redirects and HTTP
   47923   cookie headers), but must ignore any entity bodies returned in the
   47924   responses. User agents may close the connection prematurely once
   47925   they start receiving an entity body. <a href=#refsCOOKIES>[COOKIES]</a></p>
   47926 
   47927   <p>For URLs that are not HTTP URLs, the requests must be performed
   47928   by <a href=#fetch title=fetch>fetching</a> the specified URL normally,
   47929   and discarding the results.</p>
   47930 
   47931   <p>When the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute is
   47932   present, user agents should clearly indicate to the user that
   47933   following the hyperlink will also cause secondary requests to be
   47934   sent in the background, possibly including listing the actual target
   47935   URLs.</p>
   47936 
   47937   <p class=example>For example, a visual user agent could include
   47938   the hostnames of the target ping URLs along with the hyperlink's
   47939   actual URL in a status bar or tooltip.</p>
   47940 
   47941   </div>
   47942 
   47943   <div class=note>
   47944 
   47945    <p>The <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute is redundant
   47946    with pre-existing technologies like HTTP redirects and JavaScript
   47947    in allowing Web pages to track which off-site links are most
   47948    popular or allowing advertisers to track click-through rates.</p>
   47949 
   47950    <p>However, the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute
   47951    provides these advantages to the user over those alternatives:</p>
   47952 
   47953    <ul><li>It allows the user to see the final target URL
   47954     unobscured.</li>
   47955 
   47956     <li>It allows the UA to inform the user about the out-of-band
   47957     notifications.</li>
   47958 
   47959     <li>It allows the user to disable the notifications without losing
   47960     the underlying link functionality.</li>
   47961 
   47962     <li>It allows the UA to optimize the use of available network
   47963     bandwidth so that the target page loads faster.</li>
   47964 
   47965    </ul><p>Thus, while it is possible to track users without this feature,
   47966    authors are encouraged to use the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute so that the user
   47967    agent can make the user experience more transparent.</p>
   47968 
   47969   </div>
   47970 
   47971   <!-- resolving ping urls happens at audit time, so base URL changes
   47972   affect the values of ping attributes -->
   47973 <!--PING-->
   47974 
   47975 
   47976 
   47977   <h4 id=linkTypes><span class=secno>4.12.3 </span>Link types</h4>
   47978 
   47979   <p>The following table summarizes the link types that are defined by
   47980   this specification. This table is non-normative; the actual
   47981   definitions for the link types are given in the next few
   47982   sections.</p>
   47983 
   47984   <p>In this section, the term <i>referenced document</i> refers to
   47985   the resource identified by the element representing the link, and
   47986   the term <i>current document</i> refers to the resource within
   47987   which the element representing the link finds itself.</p>
   47988 
   47989   <div class=impl>
   47990 
   47991   <p>To determine which link types apply to a <code><a href=#the-link-element>link</a></code>,
   47992   <code><a href=#the-a-element>a</a></code>, or <code><a href=#the-area-element>area</a></code> element, the element's <code title="">rel</code> attribute must be <a href=#split-a-string-on-spaces title="split a string on
   47993   spaces">split on spaces</a>. The resulting tokens are the link
   47994   types that apply to that element.</p>
   47995 
   47996   </div>
   47997 
   47998   <p>Except where otherwise specified, a keyword must not be specified
   47999   more than once per <code title=attr-rel-hyperlink>rel</code>
   48000   attribute.</p>
   48001 
   48002   <p>The link types that contain no U+003A COLON characters (:),
   48003   including all those defined in this specification, are <a href=#ascii-case-insensitive>ASCII
   48004   case-insensitive</a> values<span class=impl>, and must be
   48005   compared as such</span>.</p>
   48006 
   48007   <p class=example>Thus, <code title="">rel="next"</code> is the
   48008   same as <code title="">rel="NEXT"</code>.</p>
   48009 
   48010   <table><thead><tr><th rowspan=2>Link type</th>
   48011      <th colspan=2>Effect on...</th>
   48012      <th rowspan=2>Brief description</th>
   48013     <tr><th><code><a href=#the-link-element>link</a></code></th>
   48014      <th><code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code></th>
   48015     <tbody><tr><td><code title=rel-alternate><a href=#link-type-alternate>alternate</a></code></td> <!-- second most used <link rel> value -->
   48016      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48017      <td><a href=#hyperlink>Hyperlink</a></td>
   48018      <td>Gives alternate representations of the current document.</td>
   48019     <tr><td><code title=rel-archives><a href=#link-type-archives>archives</a></code></td>
   48020      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48021      <td><a href=#hyperlink>Hyperlink</a></td>
   48022      <td>Provides a link to a collection of records, documents, or other materials of historical interest.</td>
   48023     <tr><td><code title=rel-author><a href=#link-type-author>author</a></code></td>
   48024      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48025      <td><a href=#hyperlink>Hyperlink</a></td>
   48026      <td>Gives a link to the current document's author.</td>
   48027     <tr><td><code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code></td> <!-- fourth most used <a rel> value -->
   48028      <td><em>not allowed</em></td>
   48029      <td><a href=#hyperlink>Hyperlink</a></td>
   48030      <td>Gives the permalink for the nearest ancestor section.</td>
   48031     </tr><!-- (commented out on the assumption that rel=contact is really XFN)
   48032     <tr>
   48033      <td><code title="rel-contact">contact</code></td> <!- 8th most used <a rel> value ->
   48034      <td><span title="hyperlink link">Hyperlink</span></td>
   48035      <td><span>Hyperlink</span></td>
   48036      <td>Gives a link to contact information for the current document.</td>
   48037     </tr>
   48038 --><tr><td><code title=rel-external><a href=#link-type-external>external</a></code></td> <!-- fifth and sixth most used <a rel> value (sixth is "external nofollow") -->
   48039      <td><em>not allowed</em></td>
   48040      <td><a href=#hyperlink>Hyperlink</a></td>
   48041      <td>Indicates that the referenced document is not part of the same site as the current document.</td>
   48042     <tr><td><code title=rel-first><a href=#link-type-first>first</a></code></td>
   48043      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48044      <td><a href=#hyperlink>Hyperlink</a></td>
   48045      <td>Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.</td>
   48046     <tr><td><code title=rel-help><a href=#link-type-help>help</a></code></td>
   48047      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48048      <td><a href=#hyperlink>Hyperlink</a></td>
   48049      <td>Provides a link to context-sensitive help.</td>
   48050     <tr><td><code title=rel-icon><a href=#rel-icon>icon</a></code></td> <!-- link rel="shortcut icon" and its ilk are the fourth, sixth, and ninth most used values -->
   48051      <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
   48052      <td><em>not allowed</em></td>
   48053      <td>Imports an icon to represent the current document.</td>
   48054     <tr><td><code title=rel-index><a href=#link-type-index>index</a></code></td> <!-- used more than "top" and "contents" on <link> (though on <a>, "contents" wins) -->
   48055      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48056      <td><a href=#hyperlink>Hyperlink</a></td>
   48057      <td>Gives a link to the document that provides a table of contents or index listing the current document.</td>
   48058     <tr><td><code title=rel-last><a href=#link-type-last>last</a></code></td>
   48059      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48060      <td><a href=#hyperlink>Hyperlink</a></td>
   48061      <td>Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.</td>
   48062     <tr><td><code title=rel-license><a href=#link-type-license>license</a></code></td> <!-- seventh most used <a rel> value -->
   48063      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48064      <td><a href=#hyperlink>Hyperlink</a></td>
   48065      <td>Indicates that the main content of the current document is covered by the copyright license described by the referenced document.</td>
   48066     <tr><td><code title=rel-next><a href=#link-type-next>next</a></code></td>
   48067      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48068      <td><a href=#hyperlink>Hyperlink</a></td>
   48069      <td>Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.</td>
   48070     <tr><td><code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code></td> <!-- most used <a rel> value (and sixth most used is "external nofollow") -->
   48071      <td><em>not allowed</em></td>
   48072      <td><a href=#hyperlink>Hyperlink</a></td>
   48073      <td>Indicates that the current document's original author or publisher does not endorse the referenced document.</td>
   48074     <tr><td><code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code></td>
   48075      <td><em>not allowed</em></td>
   48076      <td><a href=#hyperlink>Hyperlink</a></td>
   48077      <td>Requires that the user agent not send an HTTP <code title=http-referer>Referer</code> (sic) header if the user follows the hyperlink.</td>
   48078     <tr><td><code title=rel-pingback><a href=#link-type-pingback>pingback</a></code></td>
   48079      <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
   48080      <td><em>not allowed</em></td>
   48081      <td>Gives the address of the pingback server that handles pingbacks to the current document.</td>
   48082     <tr><td><code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code></td>
   48083      <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
   48084      <td><em>not allowed</em></td>
   48085      <td>Specifies that the target resource should be preemptively cached.</td>
   48086     <tr><td><code title=rel-prev><a href=#link-type-prev>prev</a></code></td> <!-- prev is used more than previous -->
   48087      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48088      <td><a href=#hyperlink>Hyperlink</a></td>
   48089      <td>Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.</td>
   48090     <tr><td><code title=rel-search><a href=#link-type-search>search</a></code></td> <!-- used quite a bit -->
   48091      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48092      <td><a href=#hyperlink>Hyperlink</a></td>
   48093      <td>Gives a link to a resource that can be used to search through the current document and its related pages.</td>
   48094     <tr><td><code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code></td> <!-- most commonly used <link rel> value, variants came in 7th, 8th, 12th, 17th... -->
   48095      <td><a href=#external-resource-link title="external resource link">External Resource</a></td>
   48096      <td><em>not allowed</em></td>
   48097      <td>Imports a stylesheet.</td>
   48098     <tr><td><code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code></td> <!-- used quite a bit -->
   48099      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48100      <td><a href=#hyperlink>Hyperlink</a></td>
   48101      <td>Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).</td>
   48102     <tr><td><code title=rel-tag><a href=#link-type-tag>tag</a></code></td> <!-- second and third most used <a rel> value (third is technically "category tag"). -->
   48103      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48104      <td><a href=#hyperlink>Hyperlink</a></td>
   48105      <td>Gives a tag (identified by the given address) that applies to the current document.</td>
   48106     <tr><td><code title=rel-up><a href=#link-type-up>up</a></code></td>
   48107      <td><a href=#hyperlink-link title="hyperlink link">Hyperlink</a></td>
   48108      <td><a href=#hyperlink>Hyperlink</a></td>
   48109      <td>Provides a link to a document giving the context for the current document.</td>
   48110     </table><div class=impl>
   48111 
   48112   <p>Some of the types described below list synonyms for these
   48113   values. These <!--<span class="impl">-->are to be handled as
   48114   specified by user agents, but<!--</span>--> must not be used in
   48115   documents.</p>
   48116 
   48117   </div>
   48118 
   48119   <!-- v2 ideas:
   48120    * rel="script"
   48121    * rel="related" // see also
   48122    * http://microformats.org/wiki/rel-enclosure
   48123   -->
   48124 
   48125 
   48126   <h5 id=link-type-alternate><span class=secno>4.12.3.1 </span>Link type "<dfn title=rel-alternate><code>alternate</code></dfn>"</h5>
   48127 
   48128   <p>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword may be
   48129   used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48130   elements.</p>
   48131 
   48132   <p>The meaning of this keyword depends on the values of the other
   48133   attributes.</p>
   48134 
   48135   <dl class=switch><dt>If the element is a <code><a href=#the-link-element>link</a></code> element and the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute also contains the
   48136    keyword <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code></dt>
   48137 
   48138    <dd>
   48139 
   48140     <p>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword
   48141     modifies the meaning of the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword in the way
   48142     described for that keyword. The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword does not create a
   48143     link of its own.</p>
   48144 
   48145    </dd>
   48146 
   48147 
   48148    <dt>The <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   48149    used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
   48150    attribute set to the value <code title="">application/rss+xml</code> or the value <code title="">application/atom+xml</code></dt>
   48151 
   48152    <dd>
   48153 
   48154     <p>The link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
   48155     referencing a syndication feed (though not necessarily syndicating
   48156     exactly the same content as the current page).</p>
   48157 
   48158     <div class=impl>
   48159 
   48160     <p>The first <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, or <code><a href=#the-area-element>area</a></code>
   48161     element in the document (in tree order) with the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attribute set to the value
   48162     <code title="">application/rss+xml</code> or the value <code title="">application/atom+xml</code> must be treated as the default
   48163     syndication feed for the purposes of feed autodiscovery.</p>
   48164 
   48165     <div class=example>
   48166      <p>The following <code><a href=#the-link-element>link</a></code> element gives the syndication
   48167      feed for the current page:</p>
   48168      <pre>&lt;link rel="alternate" type="application/atom+xml" href="data.xml"&gt;</pre>
   48169      <p>The following extract offers various different syndication
   48170      feeds:</p>
   48171      <pre>&lt;p&gt;You can access the planets database using Atom feeds:&lt;/p&gt;
   48172 &lt;ul&gt;
   48173  &lt;li&gt;&lt;a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml"&gt;Recently Visited Planets&lt;/a&gt;&lt;/li&gt;
   48174  &lt;li&gt;&lt;a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml"&gt;Known Bad Planets&lt;/a&gt;&lt;/li&gt;
   48175  &lt;li&gt;&lt;a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml"&gt;Unexplored Planets&lt;/a&gt;&lt;/li&gt;
   48176 &lt;/ul&gt;</pre>
   48177     </div>
   48178 
   48179     </div>
   48180 
   48181    </dd>
   48182 
   48183 
   48184    <dt>Otherwise</dt>
   48185 
   48186    <dd>
   48187 
   48188     <p>The link is a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>
   48189     referencing an alternate representation of the current
   48190     document.</p>
   48191 
   48192     <p>The nature of the referenced document is given by the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes.</p>
   48193 
   48194     <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   48195     used with the <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>
   48196     attribute, it indicates that the referenced document is intended for
   48197     use with the media specified.</p>
   48198 
   48199     <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   48200     used with the <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>
   48201     attribute, and that attribute's value differs from the <a href=#root-element>root
   48202     element</a>'s <a href=#language>language</a>, it indicates that the
   48203     referenced document is a translation.</p>
   48204 
   48205     <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   48206     used with the <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code>
   48207     attribute, it indicates that the referenced document is a
   48208     reformulation of the current document in the specified format.</p>
   48209 
   48210     <p>The <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes can be combined
   48211     when specified with the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code>
   48212     keyword.</p>
   48213 
   48214     <div class=example>
   48215 
   48216      <p>For example, the following link is a French translation that
   48217      uses the PDF format:</p>
   48218 
   48219      <pre>&lt;link rel=alternate type=application/pdf hreflang=fr href=manual-fr&gt;</pre>
   48220 
   48221     </div>
   48222 
   48223     <p>This relationship is transitive &mdash; that is, if a document
   48224     links to two other documents with the link type "<code title=rel-alternate><a href=#link-type-alternate>alternate</a></code>", then, in addition to
   48225     implying that those documents are alternative representations of
   48226     the first document, it is also implying that those two documents
   48227     are alternative representations of each other.</p>
   48228 
   48229    </dd>
   48230 
   48231   </dl><h5 id=link-type-archives><span class=secno>4.12.3.2 </span>Link type "<dfn title=rel-archives><code>archives</code></dfn>"</h5>
   48232 
   48233   <p>The <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword may be
   48234   used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48235   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48236 
   48237   <p>The <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword indicates
   48238   that the referenced document describes a collection of records,
   48239   documents, or other materials of historical interest.</p>
   48240 
   48241   <p class=example>A blog's index page could link to an index of the
   48242   blog's past posts with <code title="">rel="archives"</code>.</p>
   48243 
   48244   <div class=impl>
   48245 
   48246   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48247   must also treat the keyword "<code title="">archive</code>" like the
   48248   <code title=rel-archives><a href=#link-type-archives>archives</a></code> keyword.</p>
   48249 
   48250   </div>
   48251 
   48252 
   48253   <h5 id=link-type-author><span class=secno>4.12.3.3 </span>Link type "<dfn title=rel-author><code>author</code></dfn>"</h5>
   48254 
   48255   <p>The <code title=rel-author><a href=#link-type-author>author</a></code> keyword may be
   48256   used with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48257   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48258 
   48259   <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements, the <code title=rel-author><a href=#link-type-author>author</a></code> keyword indicates that the
   48260   referenced document provides further information about the author of
   48261   the nearest <code><a href=#the-article-element>article</a></code> element ancestor of the element
   48262   defining the hyperlink, if there is one, or of the page as a whole,
   48263   otherwise.</p>
   48264 
   48265   <p>For <code><a href=#the-link-element>link</a></code> elements, the <code title=rel-author><a href=#link-type-author>author</a></code> keyword indicates that the
   48266   referenced document provides further information about the author
   48267   for the page as a whole.</p>
   48268 
   48269   <p class=note>The "referenced document" can be, and often is, a
   48270   <code title="">mailto:</code> URL giving the e-mail address of the
   48271   author. <a href=#refsMAILTO>[MAILTO]</a></p>
   48272 
   48273   <div class=impl>
   48274 
   48275   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48276   must also treat <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and
   48277   <code><a href=#the-area-element>area</a></code> elements that have a <code title="">rev</code>
   48278   attribute with the value "<code>made</code>" as having the <code title=rel-author><a href=#link-type-author>author</a></code> keyword specified as a link
   48279   relationship.</p>
   48280 
   48281   </div>
   48282 
   48283 
   48284   <h5 id=link-type-bookmark><span class=secno>4.12.3.4 </span>Link type "<dfn title=rel-bookmark><code>bookmark</code></dfn>"</h5>
   48285 
   48286   <p>The <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code> keyword may be
   48287   used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>
   48288 
   48289   <p>The <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code> keyword gives a
   48290   permalink for the nearest ancestor <code><a href=#the-article-element>article</a></code> element of
   48291   the linking element in question, or of <a href=#associatedSection>the section the linking element is most
   48292   closely associated with</a>, if there are no ancestor
   48293   <code><a href=#the-article-element>article</a></code> elements.</p>
   48294 
   48295   <div class=example>
   48296    <p>The following snippet has three permalinks. A user agent could
   48297    determine which permalink applies to which part of the spec by
   48298    looking at where the permalinks are given.</p>
   48299    <pre> ...
   48300  &lt;body&gt;
   48301   &lt;h1&gt;Example of permalinks&lt;/h1&gt;
   48302   &lt;div id="a"&gt;
   48303    &lt;h2&gt;First example&lt;/h2&gt;
   48304    &lt;p&gt;&lt;a href="a.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   48305    only the content from the first H2 to the second H2. The DIV isn't
   48306    exactly that section, but it roughly corresponds to it.&lt;/p&gt;
   48307   &lt;/div&gt;
   48308   &lt;h2&gt;Second example&lt;/h2&gt;
   48309   &lt;article id="b"&gt;
   48310    &lt;p&gt;&lt;a href="b.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   48311    the outer ARTICLE element (which could be, e.g., a blog post).&lt;/p&gt;
   48312    &lt;article id="c"&gt;
   48313     &lt;p&gt;&lt;a href="c.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   48314     the inner ARTICLE element (which could be, e.g., a blog comment).&lt;/p&gt;
   48315    &lt;/article&gt;
   48316   &lt;/article&gt;
   48317  &lt;/body&gt;
   48318  ...</pre>
   48319   </div>
   48320 
   48321 <!-- (commented out on the assumption that rel=contact is really XFN)
   48322   <h5>Link type "<dfn title="rel-contact"><code>contact</code></dfn>"</h5>
   48323 
   48324   <p>The <code title="rel-contact">contact</code> keyword may be used
   48325   with <code>link</code>, <code>a</code>, and <code>area</code>
   48326   elements. For <code>link</code> elements, it creates a <span
   48327   title="hyperlink link">hyperlink</span>.</p>
   48328 
   48329   <p>For <code>a</code> and <code>area</code> elements, the <code
   48330   title="rel-contact">contact</code> keyword indicates that the
   48331   referenced document provides further contact information for the
   48332   author of the nearest <code>article</code> element ancestor of the
   48333   element defining the hyperlink, if there is one, or of the page as a
   48334   whole, otherwise.</p>
   48335 
   48336   <div class="impl">
   48337 
   48338   <p>User agents must treat any hyperlink in an <code>address</code>
   48339   element as having the <code title="rel-contact">contact</code> link
   48340   type specified.</p>
   48341 
   48342   </div>
   48343 
   48344   <p>For <code>link</code> elements, the <code
   48345   title="rel-contact">contact</code> keyword indicates that the
   48346   referenced document provides further contact information for the
   48347   page as a whole.</p>
   48348 -->
   48349 
   48350 
   48351   <h5 id=link-type-external><span class=secno>4.12.3.5 </span>Link type "<dfn title=rel-external><code>external</code></dfn>"</h5>
   48352 
   48353   <p>The <code title=rel-external><a href=#link-type-external>external</a></code> keyword may be
   48354   used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>
   48355 
   48356   <p>The <code title=rel-external><a href=#link-type-external>external</a></code> keyword indicates
   48357   that the link is leading to a document that is not part of the site
   48358   that the current document forms a part of.</p>
   48359 
   48360 
   48361   <h5 id=link-type-help><span class=secno>4.12.3.6 </span>Link type "<dfn title=rel-help><code>help</code></dfn>"</h5>
   48362 
   48363   <p>The <code title=rel-help><a href=#link-type-help>help</a></code> keyword may be used with
   48364   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48365   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48366 
   48367   <p>For <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements, the <code title=rel-help><a href=#link-type-help>help</a></code> keyword indicates that the referenced
   48368   document provides further help information for the parent of the
   48369   element defining the hyperlink, and its children.</p>
   48370 
   48371   <div class=example>
   48372 
   48373    <p>In the following example, the form control has associated
   48374    context-sensitive help. The user agent could use this information,
   48375    for example, displaying the referenced document if the user presses
   48376    the "Help" or "F1" key.</p>
   48377 
   48378    <pre> &lt;p&gt;&lt;label&gt; Topic: &lt;input name=topic&gt; &lt;a href="help/topic.html" rel="help"&gt;(Help)&lt;/a&gt;&lt;/label&gt;&lt;/p&gt;</pre>
   48379 
   48380   </div>
   48381 
   48382   <p>For <code><a href=#the-link-element>link</a></code> elements, the <code title=rel-help><a href=#link-type-help>help</a></code> keyword indicates that the referenced
   48383   document provides help for the page as a whole.</p>
   48384 
   48385 
   48386   <h5 id=rel-icon><span class=secno>4.12.3.7 </span>Link type "<dfn title=rel-icon><code>icon</code></dfn>"</h5>
   48387 
   48388   <p>The <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword may be used with
   48389   <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>
   48390 
   48391   <div class=impl>
   48392 
   48393   <p>The specified resource is an icon representing the page or site,
   48394   and should be used by the user agent when representing the page in
   48395   the user interface.</p>
   48396 
   48397   </div>
   48398 
   48399   <p>Icons could be auditory icons, visual icons, or other kinds of
   48400   icons. <span class=impl>If multiple icons are provided, the user
   48401   agent must select the most appropriate icon according to the <code title=attr-link-type><a href=#attr-link-type>type</a></code>, <code title=attr-link-media><a href=#attr-link-media>media</a></code>, and <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attributes. If there are
   48402   multiple equally appropriate icons, user agents must use the last
   48403   one declared in <a href=#tree-order>tree order</a>. If the user agent tries to
   48404   use an icon but that icon is determined, upon closer examination, to
   48405   in fact be inappropriate (e.g. because it uses an unsupported
   48406   format), then the user agent must try the next-most-appropriate icon
   48407   as determined by the attributes.</span></p>
   48408 
   48409   <div class=impl>
   48410 
   48411   <p>There is no default type for resources given by the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword. However, for the purposes of
   48412   <a href=#concept-link-type-sniffing>determining the type of the
   48413   resource</a>, user agents must expect the resource to be an image.</p>
   48414 
   48415   </div>
   48416 
   48417   <p>The <dfn id=attr-link-sizes title=attr-link-sizes><code>sizes</code></dfn>
   48418   attribute gives the sizes of icons for visual media.</p>
   48419 
   48420   <p>If specified, the attribute must have a value that is an
   48421   <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The
   48422   values must all be either <code title=attr-link-sizes-any><a href=#attr-link-sizes-any>any</a></code> or a value that consists of
   48423   two <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative
   48424   integers</a> that do not have a leading U+0030 DIGIT ZERO (0)
   48425   character and that are separated by a single U+0078 LATIN SMALL
   48426   LETTER X character (x).</p>
   48427 
   48428   <p>The keywords represent icon sizes.</p>
   48429 
   48430   <div class=impl>
   48431 
   48432   <p>To parse and process the attribute's value, the user agent must
   48433   first <a href=#split-a-string-on-spaces title="split a string on spaces">split the attribute's
   48434   value on spaces</a>, and must then parse each resulting keyword
   48435   to determine what it represents.</p>
   48436 
   48437   </div>
   48438 
   48439   <p>The <dfn id=attr-link-sizes-any title=attr-link-sizes-any><code>any</code></dfn> keyword
   48440   represents that the resource contains a scalable icon, e.g. as
   48441   provided by an SVG image.</p>
   48442 
   48443   <div class=impl>
   48444 
   48445   <p>Other keywords must be further parsed as follows to determine
   48446   what they represent:</p>
   48447 
   48448   <ul><li><p>If the keyword doesn't contain exactly one U+0078 LATIN
   48449    SMALL LETTER X character (x), then this keyword doesn't represent
   48450    anything. Abort these steps for that keyword.</li>
   48451 
   48452    <li><p>Let <var title="">width string</var> be the string before
   48453    the "<code title="">x</code>".</li>
   48454 
   48455    <li><p>Let <var title="">height string</var> be the string after the
   48456    "<code title="">x</code>".</li>
   48457 
   48458    <li><p>If either <var title="">width string</var> or <var title="">height string</var> start with a U+0030 DIGIT ZERO (0)
   48459    character or contain any characters other than characters in the
   48460    range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then this
   48461    keyword doesn't represent anything. Abort these steps for that
   48462    keyword.</li>
   48463 
   48464    <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   48465    integers</a> to <var title="">width string</var> to obtain <var title="">width</var>.</li>
   48466 
   48467    <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   48468    integers</a> to <var title="">height string</var> to obtain <var title="">height</var>.</li>
   48469 
   48470    <li><p>The keyword represents that the resource contains a bitmap
   48471    icon with a width of <var title="">width</var> device pixels and a
   48472    height of <var title="">height</var> device pixels.</li>
   48473 
   48474   </ul></div>
   48475 
   48476   <p>The keywords specified on the <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute must not represent
   48477   icon sizes that are not actually available in the linked
   48478   resource.</p>
   48479 
   48480   <div class=impl>
   48481 
   48482   <p>If the attribute is not specified, then the user agent must
   48483   assume that the given icon is appropriate, but less appropriate than
   48484   an icon of a known and appropriate size.</p>
   48485 
   48486   </div>
   48487 
   48488   <div class=example>
   48489 
   48490    <p>The following snippet shows the top part of an application with
   48491    several icons.</p>
   48492 
   48493    <pre>&lt;!DOCTYPE HTML&gt;
   48494 &lt;html&gt;
   48495  &lt;head&gt;
   48496   &lt;title&gt;lsForums &mdash; Inbox&lt;/title&gt;
   48497   &lt;link rel=icon href=favicon.png sizes="16x16" type="image/png"&gt;
   48498   &lt;link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"&gt;
   48499   &lt;link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"&gt;
   48500   &lt;link rel=icon href=iphone.png sizes="59x60" type="image/png"&gt;
   48501   &lt;link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"&gt;
   48502   &lt;link rel=stylesheet href=lsforums.css&gt;
   48503   &lt;script src=lsforums.js&gt;&lt;/script&gt;
   48504   &lt;meta name=application-name content="lsForums"&gt;
   48505  &lt;/head&gt;
   48506  &lt;body&gt;
   48507   ...</pre>
   48508 
   48509   </div>
   48510 
   48511 
   48512   <h5 id=link-type-license><span class=secno>4.12.3.8 </span>Link type "<dfn title=rel-license><code>license</code></dfn>"</h5>
   48513 
   48514   <p>The <code title=rel-license><a href=#link-type-license>license</a></code> keyword may be used
   48515   with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48516   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48517 
   48518   <p>The <code title=rel-license><a href=#link-type-license>license</a></code> keyword indicates
   48519   that the referenced document provides the copyright license terms
   48520   under which the main content of the current document is
   48521   provided.</p>
   48522 
   48523   <p>This specification does not specify how to distinguish between
   48524   the main content of a document and content that is not deemed to be
   48525   part of that main content. The distinction should be made clear to
   48526   the user.</p>
   48527 
   48528   <div class=example>
   48529 
   48530    <p>Consider a photo sharing site. A page on that site might
   48531    describe and show a photograph, and the page might be marked up as
   48532    follows:</p>
   48533 
   48534    <pre>&lt;!DOCTYPE HTML&gt;
   48535 &lt;html&gt;
   48536  &lt;head&gt;
   48537   &lt;title&gt;Exampl Pictures: Kissat&lt;/title&gt;
   48538   &lt;link rel="stylesheet" href="/style/default"&gt;
   48539  &lt;/head&gt;
   48540  &lt;body&gt;
   48541   &lt;h1&gt;Kissat&lt;/h1&gt;
   48542   &lt;nav&gt;
   48543    &lt;a href="../"&gt;Return to photo index&lt;/a&gt;
   48544   &lt;/nav&gt;
   48545   &lt;figure&gt;
   48546    &lt;img src="/pix/39627052_fd8dcd98b5.jpg"&gt;
   48547    &lt;figcaption&gt;Kissat&lt;/figcaption&gt;
   48548   &lt;/figure&gt;
   48549   &lt;p&gt;One of them has six toes!&lt;/p&gt;
   48550   &lt;p&gt;&lt;small&gt;&lt;a rel="license" href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT Licensed&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
   48551   &lt;footer&gt;
   48552    &lt;a href="/"&gt;Home&lt;/a&gt; | &lt;a href="../"&gt;Photo index&lt;/a&gt;
   48553    &lt;p&gt;&lt;small&gt;&copy; copyright 2009 Exampl Pictures. All Rights Reserved.&lt;/small&gt;&lt;/p&gt;
   48554   &lt;/footer&gt;
   48555  &lt;/body&gt;
   48556 &lt;/html&gt;</pre>
   48557 
   48558    <p>In this case the <code title=rel-license><a href=#link-type-license>license</a></code>
   48559    applies to just the photo (the main content of the document), not
   48560    the whole document. In particular not the design of the page
   48561    itself, which is covered by the copyright given at the bottom of
   48562    the document. This could be made clearer in the styling
   48563    (e.g. making the license link prominently positioned near the
   48564    photograph, while having the page copyright in light small text at
   48565    the foot of the page.</p>
   48566 
   48567   </div>
   48568 
   48569   <div class=impl>
   48570 
   48571   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48572   must also treat the keyword "<code title="">copyright</code>" like
   48573   the <code title=rel-license><a href=#link-type-license>license</a></code> keyword.</p>
   48574 
   48575   </div>
   48576 
   48577 
   48578   <h5 id=link-type-nofollow><span class=secno>4.12.3.9 </span>Link type "<dfn title=rel-nofollow><code>nofollow</code></dfn>"</h5>
   48579 
   48580   <p>The <code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code> keyword may be
   48581   used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>
   48582 
   48583   <p>The <code title=rel-nofollow><a href=#link-type-nofollow>nofollow</a></code> keyword indicates
   48584   that the link is not endorsed by the original author or publisher of
   48585   the page, or that the link to the referenced document was included
   48586   primarily because of a commercial relationship between people
   48587   affiliated with the two pages.</p>
   48588 
   48589 
   48590   <h5 id=link-type-noreferrer><span class=secno>4.12.3.10 </span>Link type "<dfn title=rel-noreferrer><code>noreferrer</code></dfn>"</h5>
   48591 
   48592   <p>The <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword may be
   48593   used with <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements.</p>
   48594 
   48595   <p>It indicates that no referrer information is to be leaked when
   48596   following the link.</p>
   48597 
   48598   <div class=impl>
   48599 
   48600   <p>If a user agent follows a link defined by an <code><a href=#the-a-element>a</a></code> or
   48601   <code><a href=#the-area-element>area</a></code> element that has the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword, the user agent
   48602   must not include a <code title=http-referer>Referer</code> (sic)
   48603   HTTP header (<a href=#concept-http-equivalent-headers title=concept-http-equivalent-headers>or
   48604   equivalent</a> for other protocols) in the request.</p>
   48605 
   48606   <p>This keyword also <a href=#noopener>causes the <code title=dom-opener>opener</code> attribute to remain null</a> if the
   48607   hyperlink creates a new <a href=#browsing-context>browsing context</a>.</p>
   48608 
   48609   </div>
   48610 
   48611   <!-- v2: Would be nice to apply this to other elements too,
   48612   e.g. letting <img> or CSS or <video> hide the referrer -->
   48613 
   48614 
   48615   <h5 id=link-type-pingback><span class=secno>4.12.3.11 </span>Link type "<dfn title=rel-pingback><code>pingback</code></dfn>"</h5>
   48616 
   48617   <p>The <code title=rel-pingback><a href=#link-type-pingback>pingback</a></code> keyword may be
   48618   used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>
   48619 
   48620   <p>For the semantics of the <code title=rel-pingback><a href=#link-type-pingback>pingback</a></code> keyword, see the Pingback 1.0
   48621   specification. <a href=#refsPINGBACK>[PINGBACK]</a></p>
   48622 
   48623 
   48624   <h5 id=link-type-prefetch><span class=secno>4.12.3.12 </span>Link type "<dfn title=rel-prefetch><code>prefetch</code></dfn>"</h5>
   48625 
   48626   <p>The <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword may be
   48627   used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a>.</p>
   48628 
   48629   <p>The <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword indicates
   48630   that preemptively fetching and caching the specified resource is
   48631   likely to be beneficial, as it is highly likely that the user will
   48632   require this resource.</p>
   48633 
   48634   <p>There is no default type for resources given by the <code title=rel-prefetch><a href=#link-type-prefetch>prefetch</a></code> keyword.</p>
   48635 
   48636 
   48637   <h5 id=link-type-search><span class=secno>4.12.3.13 </span>Link type "<dfn title=rel-search><code>search</code></dfn>"</h5>
   48638 
   48639   <p>The <code title=rel-search><a href=#link-type-search>search</a></code> keyword may be used
   48640   with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48641   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48642 
   48643   <p>The <code title=rel-search><a href=#link-type-search>search</a></code> keyword indicates that
   48644   the referenced document provides an interface specifically for
   48645   searching the document and its related resources.</p>
   48646 
   48647   <p class=note>OpenSearch description documents can be used with
   48648   <code><a href=#the-link-element>link</a></code> elements and the <code title=rel-search><a href=#link-type-search>search</a></code> link type to enable user agents to
   48649   autodiscover search interfaces. <a href=#refsOPENSEARCH>[OPENSEARCH]</a></p>
   48650 
   48651 
   48652   <h5 id=link-type-stylesheet><span class=secno>4.12.3.14 </span>Link type "<dfn title=rel-stylesheet><code>stylesheet</code></dfn>"</h5>
   48653 
   48654   <p>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword may be
   48655   used with <code><a href=#the-link-element>link</a></code> elements, for which it creates an <a href=#external-resource-link title="external resource link">external resource link</a> that
   48656   contributes to the <a href=#styling>styling processing model</a>.</p>
   48657 
   48658   <p>The specified resource is a resource that describes how to
   48659   present the document. Exactly how the resource is to be processed
   48660   depends on the actual type of the resource.</p>
   48661 
   48662   <p>If the <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> keyword is
   48663   also specified on the <code><a href=#the-link-element>link</a></code> element, then <dfn id=the-link-is-an-alternative-stylesheet>the link
   48664   is an alternative stylesheet</dfn>; in this case, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute must be specified on the
   48665   <code><a href=#the-link-element>link</a></code> element, with a non-empty value.</p>
   48666 
   48667   <p>The default type for resources given by the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword is <code title="">text/css</code>.</p>
   48668 
   48669   <div class=impl>
   48670 
   48671   <p><strong>Quirk</strong>: If the document has been set to
   48672   <a href=#quirks-mode>quirks mode</a> and the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the external
   48673   resource is not a supported style sheet type, the user agent must
   48674   instead assume it to be <code title="">text/css</code>.</p>
   48675 
   48676   </div>
   48677 
   48678 
   48679   <h5 id=link-type-sidebar><span class=secno>4.12.3.15 </span>Link type "<dfn title=rel-sidebar><code>sidebar</code></dfn>"</h5>
   48680 
   48681   <p>The <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword may be used
   48682   with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48683   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48684 
   48685   <p>The <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword indicates
   48686   that the referenced document, if retrieved, is intended to be shown
   48687   in a <a href=#secondary-browsing-context>secondary browsing context</a> (if possible), instead
   48688   of in the current <a href=#browsing-context>browsing context</a>.</p>
   48689 
   48690   <p>A <a href=#hyperlink title=hyperlink>hyperlink element</a> with the <code title=rel-sidebar><a href=#link-type-sidebar>sidebar</a></code> keyword specified is a <dfn id=rel-sidebar-hyperlink title=rel-sidebar-hyperlink>sidebar hyperlink</dfn>.</p>
   48691 
   48692 
   48693   <h5 id=link-type-tag><span class=secno>4.12.3.16 </span>Link type "<dfn title=rel-tag><code>tag</code></dfn>"</h5>
   48694 
   48695   <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> keyword may be used
   48696   with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48697   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48698 
   48699   <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> keyword indicates that the
   48700   <em>tag</em> that the referenced document represents applies to the
   48701   current document.</p>
   48702 
   48703   <p class=note>Since it indicates that the tag <em>applies to the
   48704   current document</em>, it would be inappropriate to use this keyword
   48705   in the markup of a <a href=#tag-cloud>tag cloud</a>, which lists
   48706   the popular tag across a set of pages.</p>
   48707 
   48708 
   48709   <h5 id=hierarchical-link-types><span class=secno>4.12.3.17 </span>Hierarchical link types</h5>
   48710 
   48711   <p>Some documents form part of a hierarchical structure of
   48712   documents.</p>
   48713 
   48714   <p>A hierarchical structure of documents is one where each document
   48715   can have various subdocuments. The document of which a document is a
   48716   subdocument is said to be the document's <em>parent</em>. A document
   48717   with no parent forms the top of the hierarchy.</p>
   48718 
   48719   <p>A document may be part of multiple hierarchies.</p>
   48720 
   48721 
   48722   <h6 id=link-type-index><span class=secno>4.12.3.17.1 </span>Link type "<dfn title=rel-index><code>index</code></dfn>"</h6>
   48723 
   48724   <p>The <code title=rel-index><a href=#link-type-index>index</a></code> keyword may be used with
   48725   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48726   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48727 
   48728   <p>The <code title=rel-index><a href=#link-type-index>index</a></code> keyword indicates that
   48729   the document is part of a hierarchical structure, and that the link
   48730   is leading to the document that is the top of the hierarchy. It
   48731   conveys more information when used with the <code title=rel-up><a href=#link-type-up>up</a></code> keyword (q.v.).</p>
   48732 
   48733   <div class=impl>
   48734 
   48735   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48736   must also treat the keywords "<code title="">top</code>", "<code title="">contents</code>", and "<code title="">toc</code>" like the
   48737   <code title=rel-index><a href=#link-type-index>index</a></code> keyword.</p>
   48738 
   48739   </div>
   48740 
   48741 
   48742   <h6 id=link-type-up><span class=secno>4.12.3.17.2 </span>Link type "<dfn title=rel-up><code>up</code></dfn>"</h6>
   48743 
   48744   <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword may be used with
   48745   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48746   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48747 
   48748   <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword indicates that the
   48749   document is part of a hierarchical structure, and that the link is
   48750   leading to a document that is an ancestor of the current
   48751   document.</p>
   48752 
   48753   <p>The <code title=rel-up><a href=#link-type-up>up</a></code> keyword may be repeated within
   48754   a <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute to indicate
   48755   the hierarchical distance from the current document to the
   48756   referenced document. If it occurs only once, then the link is
   48757   leading to the current document's parent; each additional occurrence
   48758   of the keyword represents one further level. If the <code title=rel-index><a href=#link-type-index>index</a></code> keyword is also present, then the
   48759   number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords is the depth of
   48760   the current page relative to the top of the hierarchy. Only one link
   48761   is created for the set of one or more <code title=rel-up><a href=#link-type-up>up</a></code>
   48762   keywords and, if present, the <code title=rel-index><a href=#link-type-index>index</a></code>
   48763   keyword.</p>
   48764 
   48765   <p>If the page is part of multiple hierarchies, then they should be
   48766   described in different <a href=#paragraph title=paragraph>paragraphs</a>. <span class=impl>User agents
   48767   must scope any interpretation of the <code title=rel-up><a href=#link-type-up>up</a></code>
   48768   and <code title=rel-index><a href=#link-type-index>index</a></code> keywords together
   48769   indicating the depth of the hierarchy to the <a href=#paragraph>paragraph</a>
   48770   in which the link finds itself, if any, or to the document
   48771   otherwise.</span></p>
   48772 
   48773   <div class=impl>
   48774 
   48775   <p>When two links have both the <code title=rel-up><a href=#link-type-up>up</a></code> and
   48776   <code title=rel-index><a href=#link-type-index>index</a></code> keywords specified together in
   48777   the same scope and contradict each other by having a different
   48778   number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords, the link with the
   48779   greater number of <code title=rel-up><a href=#link-type-up>up</a></code> keywords must be
   48780   taken as giving the depth of the document.</p>
   48781 
   48782   </div>
   48783 
   48784   <div class=example>
   48785 
   48786    <p>This can be used to mark up a navigation style sometimes known
   48787    as bread crumbs. In the following example, the current page can be
   48788    reached via two paths.</p>
   48789 
   48790    <pre>&lt;nav&gt;
   48791  &lt;p&gt;
   48792   &lt;a href="/" rel="index up up up"&gt;Main&lt;/a&gt; &gt;
   48793   &lt;a href="/products/" rel="up up"&gt;Products&lt;/a&gt; &gt;
   48794   &lt;a href="/products/dishwashers/" rel="up"&gt;Dishwashers&lt;/a&gt; &gt;
   48795   &lt;a&gt;Second hand&lt;/a&gt;
   48796  &lt;/p&gt;
   48797  &lt;p&gt;
   48798   &lt;a href="/" rel="index up up"&gt;Main&lt;/a&gt; &gt;
   48799   &lt;a href="/second-hand/" rel="up"&gt;Second hand&lt;/a&gt; &gt;
   48800   &lt;a&gt;Dishwashers&lt;/a&gt;
   48801  &lt;/p&gt;
   48802 &lt;/nav&gt;</pre>
   48803 
   48804   </div>
   48805 
   48806   <p class=note>The <code title=dom-a-relList><a href=#dom-a-rellist>relList</a></code> IDL
   48807   attribute (e.g. on the <code><a href=#the-a-element>a</a></code> element) does not currently
   48808   represent multiple <code title=rel-up><a href=#link-type-up>up</a></code> keywords (the
   48809   interface hides duplicates).</p>
   48810 
   48811 
   48812   <h5 id=sequential-link-types><span class=secno>4.12.3.18 </span>Sequential link types</h5>
   48813 
   48814   <p>Some documents form part of a sequence of documents.</p>
   48815 
   48816   <p>A sequence of documents is one where each document can have a
   48817   <em>previous sibling</em> and a <em>next sibling</em>. A document
   48818   with no previous sibling is the start of its sequence, a document
   48819   with no next sibling is the end of its sequence.</p>
   48820 
   48821   <p>A document may be part of multiple sequences.</p>
   48822 
   48823 
   48824   <h6 id=link-type-first><span class=secno>4.12.3.18.1 </span>Link type "<dfn title=rel-first><code>first</code></dfn>"</h6>
   48825 
   48826   <p>The <code title=rel-first><a href=#link-type-first>first</a></code> keyword may be used with
   48827   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48828   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48829 
   48830   <p>The <code title=rel-first><a href=#link-type-first>first</a></code> keyword indicates that
   48831   the document is part of a sequence, and that the link is leading to
   48832   the document that is the first logical document in the sequence.</p>
   48833 
   48834   <div class=impl>
   48835 
   48836   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48837   must also treat the keywords "<code title="">begin</code>" and
   48838   "<code title="">start</code>" like the <code title=rel-first><a href=#link-type-first>first</a></code> keyword.</p>
   48839 
   48840   </div>
   48841 
   48842 
   48843   <h6 id=link-type-last><span class=secno>4.12.3.18.2 </span>Link type "<dfn title=rel-last><code>last</code></dfn>"</h6>
   48844 
   48845   <p>The <code title=rel-last><a href=#link-type-last>last</a></code> keyword may be used with
   48846   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48847   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48848 
   48849   <p>The <code title=rel-last><a href=#link-type-last>last</a></code> keyword indicates that the
   48850   document is part of a sequence, and that the link is leading to the
   48851   document that is the last logical document in the sequence.</p>
   48852 
   48853   <div class=impl>
   48854 
   48855   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48856   must also treat the keyword "<code title="">end</code>" like the
   48857   <code title=rel-last><a href=#link-type-last>last</a></code> keyword.</p>
   48858 
   48859   </div>
   48860 
   48861 
   48862   <h6 id=link-type-next><span class=secno>4.12.3.18.3 </span>Link type "<dfn title=rel-next><code>next</code></dfn>"</h6>
   48863 
   48864   <p>The <code title=rel-next><a href=#link-type-next>next</a></code> keyword may be used with
   48865   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48866   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48867 
   48868   <p>The <code title=rel-next><a href=#link-type-next>next</a></code> keyword indicates that the
   48869   document is part of a sequence, and that the link is leading to the
   48870   document that is the next logical document in the sequence.</p>
   48871 
   48872 
   48873   <h6 id=link-type-prev><span class=secno>4.12.3.18.4 </span>Link type "<dfn title=rel-prev><code>prev</code></dfn>"</h6>
   48874 
   48875   <p>The <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword may be used with
   48876   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   48877   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.</p>
   48878 
   48879   <p>The <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword indicates that the
   48880   document is part of a sequence, and that the link is leading to the
   48881   document that is the previous logical document in the sequence.</p>
   48882 
   48883   <div class=impl>
   48884 
   48885   <p><strong>Synonyms</strong>: For historical reasons, user agents
   48886   must also treat the keyword "<code title="">previous</code>" like
   48887   the <code title=rel-prev><a href=#link-type-prev>prev</a></code> keyword.</p>
   48888 
   48889   </div>
   48890 
   48891 
   48892   <h5 id=other-link-types><span class=secno>4.12.3.19 </span>Other link types</h5>
   48893 
   48894   <p><dfn id=concept-rel-extensions title=concept-rel-extensions>Extensions to the predefined
   48895   set of link types</dfn> may be registered in the <a href=http://wiki.whatwg.org/wiki/RelExtensions>WHATWG Wiki
   48896   RelExtensions page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
   48897 
   48898   <p>Anyone is free to edit the WHATWG Wiki RelExtensions page at any
   48899   time to add a type. Extension types must be specified with the
   48900   following information:</p>
   48901 
   48902   <dl><dt>Keyword</dt>
   48903 
   48904    <dd>
   48905 
   48906     <p>The actual value being defined. The value should not be
   48907     confusingly similar to any other defined value (e.g. differing
   48908     only in case).</p>
   48909 
   48910     <p>If the value contains a U+003A COLON character (:), it must
   48911     also be an <a href=#absolute-url>absolute URL</a>.</p>
   48912 
   48913    </dd>
   48914 
   48915 
   48916    <dt>Effect on... <code><a href=#the-link-element>link</a></code></dt>
   48917 
   48918    <dd>
   48919 
   48920     <p>One of the following:</p>
   48921 
   48922     <dl><dt>not allowed</dt>
   48923 
   48924      <dd>The keyword is not allowed to be specified on
   48925      <code><a href=#the-link-element>link</a></code> elements.</dd>
   48926 
   48927      <dt>Hyperlink</dt>
   48928 
   48929      <dd>The keyword may be specified on a <code><a href=#the-link-element>link</a></code> element;
   48930      it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink
   48931      link</a>.</dd>
   48932 
   48933      <dt>External Resource</dt>
   48934 
   48935      <dd>The keyword may be specified on a <code><a href=#the-link-element>link</a></code> element;
   48936      it creates a <a href=#external-resource-link title="external resource link">external
   48937      resource link</a>.</dd>
   48938 
   48939     </dl></dd>
   48940 
   48941 
   48942    <dt>Effect on... <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code></dt>
   48943 
   48944    <dd>
   48945 
   48946     <p>One of the following:</p>
   48947 
   48948     <dl><dt>not allowed</dt>
   48949 
   48950      <dd>The keyword is not allowed to be specified on <code><a href=#the-a-element>a</a></code>
   48951      and <code><a href=#the-area-element>area</a></code> elements.</dd>
   48952 
   48953      <dt>Hyperlink</dt>
   48954 
   48955      <dd>The keyword may be specified on <code><a href=#the-a-element>a</a></code> and
   48956      <code><a href=#the-area-element>area</a></code> elements.</dd>
   48957 
   48958     </dl></dd>
   48959 
   48960 
   48961    <dt>Brief description</dt>
   48962 
   48963    <dd><p>A short non-normative description of what the keyword's
   48964    meaning is.</dd>
   48965 
   48966 
   48967    <dt>Specification</dt>
   48968 
   48969    <dd><p>A link to a more detailed description of the keyword's
   48970    semantics and requirements. It could be another page on the Wiki,
   48971    or a link to an external page.</dd>
   48972 
   48973 
   48974    <dt>Synonyms</dt>
   48975 
   48976    <dd><p>A list of other keyword values that have exactly the same
   48977    processing requirements. Authors should not use the values defined
   48978    to be synonyms, they are only intended to allow user agents to
   48979    support legacy content. Anyone may remove synonyms that are not
   48980    used in practice; only names that need to be processed as synonyms
   48981    for compatibility with legacy content are to be registered in this
   48982    way.</dd>
   48983 
   48984 
   48985    <dt>Status</dt>
   48986 
   48987    <dd>
   48988 
   48989     <p>One of the following:</p>
   48990 
   48991     <dl><dt>Proposed</dt>
   48992 
   48993      <dd>The keyword has not received wide peer review and
   48994      approval. Someone has proposed it and is, or soon will be, using
   48995      it.</dd>
   48996 
   48997      <dt>Ratified</dt>
   48998 
   48999      <dd>The keyword has received wide peer review and approval. It
   49000      has a specification that unambiguously defines how to handle
   49001      pages that use the keyword, including when they use it in
   49002      incorrect ways.</dd>
   49003 
   49004      <dt>Discontinued</dt>
   49005 
   49006      <dd>The keyword has received wide peer review and it has been
   49007      found wanting. Existing pages are using this keyword, but new
   49008      pages should avoid it. The "brief description" and
   49009      "specification" entries will give details of what authors should
   49010      use instead, if anything.</dd>
   49011 
   49012     </dl><p>If a keyword is found to be redundant with existing values, it
   49013     should be removed and listed as a synonym for the existing
   49014     value.</p>
   49015 
   49016     <p>If a keyword is registered in the "proposed" state for a
   49017     period of a month or more without being used or specified, then it
   49018     may be removed from the registry.</p>
   49019 
   49020     <p>If a keyword is added with the "proposed" status and found to
   49021     be redundant with existing values, it should be removed and listed
   49022     as a synonym for the existing value. If a keyword is added with
   49023     the "proposed" status and found to be harmful, then it should be
   49024     changed to "discontinued" status.</p>
   49025 
   49026     <p>Anyone can change the status at any time, but should only do so
   49027     in accordance with the definitions above.</p>
   49028 
   49029    </dd>
   49030 
   49031   </dl><div class=impl>
   49032 
   49033   <p>Conformance checkers must use the information given on the WHATWG
   49034   Wiki RelExtensions page to establish if a value is allowed or not:
   49035   values defined in this specification or marked as "proposed" or
   49036   "ratified" must be accepted when used on the elements for which they
   49037   apply as described in the "Effect on..." field, whereas values
   49038   marked as "discontinued" or not listed in either this specification
   49039   or on the aforementioned page must be rejected as invalid.
   49040   Conformance checkers may cache this information (e.g. for
   49041   performance reasons or to avoid the use of unreliable network
   49042   connectivity).</p>
   49043 
   49044   <p>When an author uses a new type not defined by either this
   49045   specification or the Wiki page, conformance checkers should offer to
   49046   add the value to the Wiki, with the details described above, with
   49047   the "proposed" status.</p>
   49048 
   49049   </div>
   49050 
   49051   <p>Types defined as extensions in the <a href=http://wiki.whatwg.org/wiki/RelExtensions>WHATWG Wiki
   49052   RelExtensions page</a> with the status "proposed" or "ratified" may
   49053   be used with the <code title="">rel</code> attribute on
   49054   <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code> elements in
   49055   accordance to the "Effect on..." field. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
   49056 
   49057 
   49058   <h3 id=common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</h3>
   49059 
   49060   <h4 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h4>
   49061 
   49062   <p id=tag-cloud>This specification does not define any markup
   49063   specifically for marking up lists of keywords that apply to a group
   49064   of pages (also known as <i>tag clouds</i>). In general, authors are
   49065   encouraged to either mark up such lists using <code><a href=#the-ul-element>ul</a></code>
   49066   elements with explicit inline counts that are then hidden and turned
   49067   into a presentational effect using a style sheet, or to use SVG.</p>
   49068 
   49069   <div class=example>
   49070 
   49071    <p>Here, three tags are included in a short tag cloud:</p>
   49072 
   49073    <pre>&lt;style&gt;
   49074 @media screen, print, handheld, tv {
   49075   /* should be ignored by non-visual browsers */
   49076   .tag-cloud &gt; li &gt; span { display: none; }
   49077   .tag-cloud &gt; li { display: inline; }
   49078   .tag-cloud-1 { font-size: 0.7em; }
   49079   .tag-cloud-2 { font-size: 0.9em; }
   49080   .tag-cloud-3 { font-size: 1.1em; }
   49081   .tag-cloud-4 { font-size: 1.3em; }
   49082   .tag-cloud-5 { font-size: 1.5em; }
   49083 }
   49084 &lt;/style&gt;
   49085 ...
   49086 &lt;ul class="tag-cloud"&gt;
   49087  &lt;li class="tag-cloud-4"&gt;&lt;a title="28 instances" href="/t/apple"&gt;apple&lt;/a&gt; &lt;span&gt;(popular)&lt;/span&gt;
   49088  &lt;li class="tag-cloud-2"&gt;&lt;a title="6 instances"  href="/t/kiwi"&gt;kiwi&lt;/a&gt; &lt;span&gt;(rare)&lt;/span&gt;
   49089  &lt;li class="tag-cloud-5"&gt;&lt;a title="41 instances" href="/t/pear"&gt;pear&lt;/a&gt; &lt;span&gt;(very popular)&lt;/span&gt;
   49090 &lt;/ul&gt;</pre>
   49091 
   49092    <p>The actual frequency of each tag is given using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute. A CSS style sheet is
   49093    provided to convert the markup into a cloud of differently-sized
   49094    words, but for user agents that do not support CSS or are not
   49095    visual, the markup contains annotations like "(popular)" or
   49096    "(rare)" to categorize the various tags by frequency, thus enabling
   49097    all users to benefit from the information.</p>
   49098 
   49099    <p>The <code><a href=#the-ul-element>ul</a></code> element is used (rather than
   49100    <code><a href=#the-ol-element>ol</a></code>) because the order is not particularly important:
   49101    while the list is in fact ordered alphabetically, it would convey
   49102    the same information if ordered by, say, the length of the tag.</p>
   49103 
   49104    <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>-keyword is <em>not</em> used
   49105    on these <code><a href=#the-a-element>a</a></code> elements because they do not represent tags
   49106    that apply to the page itself; they are just part of an index
   49107    listing the tags themselves.</p>
   49108 
   49109   </div>
   49110 
   49111 
   49112   <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>
   49113 
   49114   <!-- http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/022576.html -->
   49115 
   49116   <p>This specification does not define a specific element for marking
   49117   up conversations, meeting minutes, chat transcripts, dialogues in
   49118   screenplays, instant message logs, and other situations where
   49119   different players take turns in discourse.</p>
   49120 
   49121   <p>Instead, authors are encouraged to mark up conversations using
   49122   <code><a href=#the-p-element>p</a></code> elements and punctuation. Authors who need to mark
   49123   the speaker for styling purposes are encouraged to use
   49124   <code><a href=#the-span-element>span</a></code> or <code><a href=#the-b-element>b</a></code>. Paragraphs with their text
   49125   wrapped in the <code><a href=#the-i-element>i</a></code> element can be used for marking up
   49126   stage directions.</p>
   49127 
   49128   <div class=example>
   49129 
   49130    <p>This example demonstrates this using an extract from Abbot and
   49131    Costello's famous sketch, <cite>Who's on first</cite>:</p>
   49132 
   49133 <pre>&lt;p&gt; Costello: Look, you gotta first baseman?
   49134 &lt;p&gt; Abbott: Certainly.
   49135 &lt;p&gt; Costello: Who's playing first?
   49136 &lt;p&gt; Abbott: That's right.
   49137 &lt;p&gt; Costello becomes exasperated.
   49138 &lt;p&gt; Costello: When you pay off the first baseman every month, who gets the money?
   49139 &lt;p&gt; Abbott: Every dollar of it.</pre>
   49140 
   49141   </div>
   49142 
   49143   <div class=example>
   49144 
   49145    <p>The following extract shows how an IM conversation log could be
   49146    marked up.</p>
   49147 
   49148    <pre>&lt;p&gt; &lt;time&gt;14:22&lt;/time&gt; &lt;b&gt;egof&lt;/b&gt; I'm not that nerdy, I've only seen 30% of the star trek episodes
   49149 &lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;b&gt;kaj&lt;/b&gt; if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
   49150 &lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;b&gt;egof&lt;/b&gt; it's unarguably
   49151 &lt;p&gt; &lt;time&gt;14:23&lt;/time&gt; &lt;i&gt;* kaj blinks&lt;/i&gt;
   49152 &lt;p&gt; &lt;time&gt;14:24&lt;/time&gt; &lt;b&gt;kaj&lt;/b&gt; you are not helping your case</pre>
   49153    <!-- with thanks to http://bash.org/?854262 -->
   49154 
   49155   </div>
   49156 
   49157 
   49158   <h4 id=footnotes><span class=secno>4.13.3 </span>Footnotes</h4>
   49159 
   49160   <p>HTML does not have a dedicated mechanism for marking up
   49161   footnotes. Here are the recommended alternatives.</p>
   49162 
   49163   <hr><p>For short inline annotations, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute should be used.</p>
   49164 
   49165   <div class=example>
   49166 
   49167    <p>In this example, two parts of a dialogue are annotated with
   49168    footnote-like content using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute.</p>
   49169 
   49170    <pre>&lt;p&gt; &lt;b&gt;Customer&lt;/b&gt;: Hello! I wish to register a complaint. Hello. Miss?
   49171 &lt;p&gt; &lt;b&gt;Shopkeeper&lt;/b&gt;: <strong>&lt;span title="Colloquial pronunciation of 'What do you'"</strong>
   49172 &gt;Watcha&lt;/span&gt; mean, miss?
   49173 &lt;p&gt; &lt;b&gt;Customer&lt;/b&gt;: Uh, I'm sorry, I have a cold. I wish to make a complaint.
   49174 &lt;p&gt; &lt;b&gt;Shopkeeper&lt;/b&gt;: Sorry, &lt;span <strong>title="This is, of course, a lie."</strong>&gt;we're
   49175 closing for lunch&lt;/span&gt;.</pre>
   49176 
   49177   </div>
   49178 
   49179   <hr><p>For longer annotations, the <code><a href=#the-a-element>a</a></code> element should be
   49180   used, pointing to an element later in the document. The convention
   49181   is that the contents of the link be a number in square brackets.</p>
   49182 
   49183   <div class=example>
   49184 
   49185    <p>In this example, a footnote in the dialogue links to a paragraph
   49186    below the dialogue. The paragraph then reciprocally links back to the
   49187    dialogue, allowing the user to return to the location of the
   49188    footnote.</p>
   49189 
   49190    <pre>&lt;p&gt; Announcer: Number 16: The &lt;i&gt;hand&lt;/i&gt;.
   49191 &lt;p&gt; Interviewer: Good evening. I have with me in the studio tonight
   49192 Mr Norman St John Polevaulter, who for the past few years has been
   49193 contradicting people. Mr Polevaulter, why &lt;em&gt;do&lt;/em&gt; you
   49194 contradict people?
   49195 &lt;p&gt; Norman: I don't. &lt;sup&gt;&lt;a href="#fn1" id="r1"&gt;[1]&lt;/a&gt;&lt;/sup&gt;
   49196 &lt;p&gt; Interviewer: You told me you did!
   49197 <em>...</em>
   49198 &lt;section&gt;
   49199  &lt;p id="fn1"&gt;&lt;a href="#r1"&gt;[1]&lt;/a&gt; This is, naturally, a lie,
   49200  but paradoxically if it were true he could not say so without
   49201  contradicting the interviewer and thus making it false.&lt;/p&gt;
   49202 &lt;/section&gt;</pre>
   49203 
   49204   </div>
   49205 
   49206   <hr><p>For side notes, longer annotations that apply to entire sections
   49207   of the text rather than just specific words or sentences, the
   49208   <code><a href=#the-aside-element>aside</a></code> element should be used.</p>
   49209 
   49210   <div class=example>
   49211 
   49212    <p>In this example, a sidebar is given after a dialogue, giving it
   49213    some context.</p>
   49214 
   49215    <pre>&lt;p&gt; &lt;span class="speaker"&gt;Customer&lt;/span&gt;: I will not buy this record, it is scratched.
   49216 &lt;p&gt; &lt;span class="speaker"&gt;Shopkeeper&lt;/span&gt;: I'm sorry?
   49217 &lt;p&gt; &lt;span class="speaker"&gt;Customer&lt;/span&gt;: I will not buy this record, it is scratched.
   49218 &lt;p&gt; &lt;span class="speaker"&gt;Shopkeeper&lt;/span&gt;: No no no, this's'a tobacconist's.
   49219 &lt;aside&gt;
   49220  &lt;p&gt;In 1970, the British Empire lay in ruins, and foreign
   49221  nationalists frequented the streets &mdash; many of them Hungarians
   49222  (not the streets &mdash; the foreign nationals). Sadly, Alexander
   49223  Yalt has been publishing incompetently-written phrase books.
   49224 &lt;/aside&gt;</pre>
   49225 
   49226   </div>
   49227 
   49228   <hr><p>For figures or tables, footnotes can be included in the relevant
   49229   <code><a href=#the-figcaption-element>figcaption</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in
   49230   surrounding prose.</p>
   49231 
   49232   <div class=example>
   49233 
   49234    <p>In this example, a <!-- round --> table has cells with footnotes
   49235    that are given in prose. A <code><a href=#the-figure-element>figure</a></code> element is used to
   49236    give a single legend to the combination of the table and its
   49237    footnotes.</p>
   49238 
   49239    <pre>&lt;figure&gt;
   49240  &lt;figcaption&gt;Table 1. Alternative activities for knights.&lt;/figcaption&gt;
   49241  &lt;table&gt;
   49242   &lt;tr&gt;
   49243    &lt;th&gt; Activity
   49244    &lt;th&gt; Location
   49245    &lt;th&gt; Cost
   49246   &lt;tr&gt;
   49247    &lt;td&gt; Dance
   49248    &lt;td&gt; Wherever possible
   49249    &lt;td&gt; &pound;0&lt;sup&gt;&lt;a href="#fn1"&gt;1&lt;/a&gt;&lt;/sup&gt;
   49250   &lt;tr&gt;
   49251    &lt;td&gt; Routines, chorus scenes&lt;sup&gt;&lt;a href="#fn2"&gt;2&lt;/a&gt;&lt;/sup&gt;
   49252    &lt;td&gt; Undisclosed
   49253    &lt;td&gt; Undisclosed
   49254   &lt;tr&gt;
   49255    &lt;td&gt; Dining&lt;sup&gt;&lt;a href="#fn3"&gt;3&lt;/a&gt;&lt;/sup&gt;
   49256    &lt;td&gt; Camelot
   49257    &lt;td&gt; Cost of ham, jam, and spam&lt;sup&gt;&lt;a href="#fn4"&gt;4&lt;/a&gt;&lt;/sup&gt;
   49258  &lt;/table&gt;
   49259  &lt;p id="fn1"&gt;1. Assumed.&lt;/p&gt;
   49260  &lt;p id="fn2"&gt;2. Footwork impeccable.&lt;/p&gt;
   49261  &lt;p id="fn3"&gt;3. Quality described as "well".&lt;/p&gt;
   49262  &lt;p id="fn4"&gt;4. A lot.&lt;/p&gt;
   49263 &lt;/figure&gt;</pre>
   49264 
   49265   </div>
   49266 
   49267 
   49268 
   49269   <div class=impl>
   49270 
   49271   <h3 id=matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</h3>
   49272 
   49273   <h4 id=selectors><span class=secno>4.14.1 </span>Case-sensitivity</h4>
   49274 
   49275   <p>Attribute and element <em>names</em> of <a href=#html-elements>HTML
   49276   elements</a> in <a href=#html-documents>HTML documents</a> must be treated as
   49277   <a href=#ascii-case-insensitive>ASCII case-insensitive</a>.</p>
   49278 
   49279   <p>Classes from the <code title=attr-class><a href=#classes>class</a></code> attribute
   49280   of <a href=#html-elements>HTML elements</a> in documents that are in <a href=#quirks-mode>quirks
   49281   mode</a> must be treated as <a href=#ascii-case-insensitive>ASCII
   49282   case-insensitive</a>.</p>
   49283 
   49284   <p>Attribute selectors on an <a href=#html-elements title="HTML elements">HTML
   49285   element</a> in an <a href=#html-documents title="HTML documents">HTML
   49286   document</a> must treat the <em>values</em> of attributes with
   49287   the following names as <a href=#ascii-case-insensitive>ASCII case-insensitive</a>:</p>
   49288 
   49289   <!-- based on Mozilla's list, which was itself based on HTML4 -->
   49290   <!-- WebKit's was identical at the time of writing except as noted below -->
   49291   <ul class=brief><li><code title="">accept</code>
   49292    <li><code title="">accept-charset</code>
   49293    <li><code title="">align</code>
   49294    <li><code title="">alink</code>
   49295    <li><code title="">axis</code>
   49296    <li><code title="">bgcolor</code>
   49297    <li><code title="">charset</code>
   49298    <li><code title="">checked</code>
   49299    <li><code title="">clear</code>
   49300    <li><code title="">codetype</code>
   49301    <li><code title="">color</code>
   49302    <li><code title="">compact</code>
   49303    <li><code title="">declare</code>
   49304    <li><code title="">defer</code>
   49305    <li><code title="">dir</code>
   49306    <li><code title="">direction</code> <!-- not in webkit -->
   49307    <li><code title="">disabled</code>
   49308    <li><code title="">enctype</code>
   49309    <li><code title="">face</code>
   49310    <li><code title="">frame</code>
   49311    <li><code title="">hreflang</code>
   49312    <li><code title="">http-equiv</code>
   49313    <li><code title="">lang</code>
   49314    <li><code title="">language</code>
   49315    <li><code title="">link</code>
   49316    <li><code title="">media</code>
   49317    <li><code title="">method</code>
   49318    <li><code title="">multiple</code>
   49319    <li><code title="">nohref</code>
   49320    <li><code title="">noresize</code>
   49321    <li><code title="">noshade</code>
   49322    <li><code title="">nowrap</code>
   49323    <li><code title="">readonly</code>
   49324    <li><code title="">rel</code>
   49325    <li><code title="">rev</code>
   49326    <li><code title="">rules</code>
   49327    <li><code title="">scope</code>
   49328    <li><code title="">scrolling</code>
   49329    <li><code title="">selected</code>
   49330    <li><code title="">shape</code>
   49331    <li><code title="">target</code>
   49332    <li><code title="">text</code>
   49333    <li><code title="">type</code>
   49334    <li><code title="">valign</code>
   49335    <li><code title="">valuetype</code>
   49336    <li><code title="">vlink</code>
   49337   </ul><p>All other attribute values on <a href=#html-elements>HTML elements</a> must be
   49338   treated as <a href=#case-sensitive>case-sensitive</a>.</p>
   49339 
   49340 
   49341   <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>
   49342 
   49343   <p>There are a number of dynamic selectors that can be used with
   49344   HTML. This section defines when these selectors match HTML
   49345   elements.</p>
   49346 
   49347   <dl><dt><dfn id=selector-link title=selector-link><code>:link</code></dfn></dt>
   49348    <dt><dfn id=selector-visited title=selector-visited><code>:visited</code></dfn></dt>
   49349 
   49350    <dd>
   49351 
   49352     <p>All <code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, all
   49353     <code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, and all
   49354     <code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, must match one of
   49355     <code title=selector-link><a href=#selector-link>:link</a></code> and <code title=selector-visited><a href=#selector-visited>:visited</a></code>.</p>
   49356 
   49357    </dd>
   49358 
   49359 
   49360    <dt><dfn id=selector-active title=selector-active><code>:active</code></dfn></dt>
   49361 
   49362    <dd>
   49363 
   49364     <p>The <code title=selector-active><a href=#selector-active>:active</a></code> pseudo-class
   49365     must match the following elements between the time the user begins
   49366     to activate the element and the time the user stops activating
   49367     the element:</p>
   49368 
   49369     <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
   49370 
   49371      <li><code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
   49372 
   49373      <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
   49374 
   49375      <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49376 
   49377      <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state</li>
   49378 
   49379      <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
   49380 
   49381      <li>any other element, if it is <a href=#specially-focusable>specially
   49382      focusable</a></li>
   49383 
   49384     </ul><p class=example>For example, if the user is using a keyboard to
   49385     push a <code><a href=#the-button-element>button</a></code> element by pressing the space bar, the
   49386     element would match this pseudo-class in between the time that the
   49387     element received the <code title=event-keydown>keydown</code>
   49388     event and the time the element received the <code title=event-keyup>keyup</code> event.</p>
   49389 
   49390    </dd>
   49391 
   49392 
   49393    <dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>
   49394 
   49395    <dd>
   49396 
   49397     <p>The <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> pseudo-class
   49398     must match the following elements:</p>
   49399 
   49400     <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
   49401 
   49402      <li><code><a href=#the-area-element>area</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
   49403 
   49404      <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
   49405 
   49406      <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49407 
   49408      <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
   49409      <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
   49410      are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49411 
   49412      <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49413 
   49414      <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49415 
   49416      <li><code><a href=#the-option-element>option</a></code> elements that do not have a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute</li>
   49417 
   49418      <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
   49419 
   49420      <li><code><a href=#the-li-element>li</a></code> elements that are children of
   49421      <code><a href=#menus>menu</a></code> elements, and that have a child element that
   49422      defines a <a href=#concept-command title=concept-command>command</a>, if the
   49423      first such element's <a href=#command-facet-disabledstate title=command-facet-disabledstate>Disabled State</a> facet
   49424      is false (not disabled)</li>
   49425 
   49426     </ul></dd>
   49427 
   49428 
   49429    <dt><dfn id=selector-disabled title=selector-disabled><code>:disabled</code></dfn></dt>
   49430 
   49431    <dd>
   49432 
   49433     <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code>
   49434     pseudo-class must match the following elements:</p>
   49435 
   49436     <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49437 
   49438      <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
   49439      <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
   49440      are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49441 
   49442      <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49443 
   49444      <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49445 
   49446      <li><code><a href=#the-option-element>option</a></code> elements that have a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute</li>
   49447 
   49448      <li><code><a href=#the-command>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
   49449 
   49450      <li><code><a href=#the-li-element>li</a></code> elements that are children of
   49451      <code><a href=#menus>menu</a></code> elements, and that have a child element that
   49452      defines a <a href=#concept-command title=concept-command>command</a>, if the
   49453      first such element's <a href=#command-facet-disabledstate title=command-facet-disabledstate>Disabled State</a> facet
   49454      is true (disabled)</li>
   49455 
   49456     </ul></dd>
   49457 
   49458 
   49459    <dt><dfn id=selector-checked title=selector-checked><code>:checked</code></dfn></dt>
   49460 
   49461    <dd>
   49462 
   49463     <p>The <code title=selector-checked><a href=#selector-checked>:checked</a></code> pseudo-class
   49464     must match the following elements:</p>
   49465 
   49466     <ul><li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and whose
   49467      <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is
   49468      true</li>
   49469 
   49470      <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state and whose
   49471      <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> state is
   49472      true</li>
   49473 
   49474      <li><code><a href=#the-command>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state
   49475      and that have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
   49476      attribute</li>
   49477 
   49478      <li><code><a href=#the-command>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state and that
   49479      have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
   49480      attribute</li>
   49481 
   49482     </ul></dd>
   49483 
   49484 
   49485    <dt><dfn id=selector-indeterminate title=selector-indeterminate><code>:indeterminate</code></dfn></dt>
   49486 
   49487    <dd>
   49488 
   49489     <p>The <code title=selector-indeterminate><a href=#selector-indeterminate>:indeterminate</a></code>
   49490     pseudo-class must match <code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state and whose
   49491     <code title=dom-input-indeterminate><a href=#dom-input-indeterminate>indeterminate</a></code> IDL
   49492     attribute is set to true.</p>
   49493 
   49494    </dd>
   49495 
   49496 
   49497    <dt><dfn id=selector-default title=selector-default><code>:default</code></dfn></dt>
   49498 
   49499    <dd>
   49500 
   49501     <p>The <code title=selector-default><a href=#selector-default>:default</a></code> pseudo-class
   49502     must match the following elements:</p>
   49503 
   49504     <ul><li><code><a href=#the-button-element>button</a></code> elements that are their form's
   49505      <a href=#default-button>default button</a></li>
   49506 
   49507      <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> or <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and that
   49508      are their form's <a href=#default-button>default button</a></li>
   49509 <!--
   49510      <li><code>command</code> elements that have a <code
   49511      title="attr-command-default">default</code> attribute</li>
   49512 -->
   49513     </ul></dd>
   49514 
   49515 
   49516    <dt><dfn id=selector-valid title=selector-valid><code>:valid</code></dfn></dt>
   49517 
   49518    <dd>
   49519 
   49520     <p>The <code title=selector-valid><a href=#selector-valid>:valid</a></code> pseudo-class
   49521     must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for
   49522     constraint validation">candidates for constraint validation</a>
   49523     and that <a href=#concept-fv-valid title=concept-fv-valid>satisfy their
   49524     constraints</a>.</p>
   49525 
   49526    </dd>
   49527 
   49528 
   49529    <dt><dfn id=selector-invalid title=selector-invalid><code>:invalid</code></dfn></dt>
   49530 
   49531    <dd>
   49532 
   49533     <p>The <code title=selector-invalid><a href=#selector-invalid>:invalid</a></code> pseudo-class
   49534     must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for
   49535     constraint validation">candidates for constraint validation</a>
   49536     but that do not <a href=#concept-fv-valid title=concept-fv-valid>satisfy their
   49537     constraints</a>.</p>
   49538 
   49539    </dd>
   49540 
   49541 
   49542    <dt><dfn id=selector-in-range title=selector-in-range><code>:in-range</code></dfn></dt>
   49543 
   49544    <dd>
   49545 
   49546     <p>The <code title=selector-in-range><a href=#selector-in-range>:in-range</a></code>
   49547     pseudo-class must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for constraint validation">candidates for
   49548     constraint validation</a> and that are neither <a href=#suffering-from-an-underflow>suffering
   49549     from an underflow</a> nor <a href=#suffering-from-an-overflow>suffering from an
   49550     overflow</a>.</p>
   49551 
   49552    </dd>
   49553 
   49554 
   49555    <dt><dfn id=selector-out-of-range title=selector-out-of-range><code>:out-of-range</code></dfn></dt>
   49556 
   49557    <dd>
   49558 
   49559     <p>The <code title=selector-out-of-range><a href=#selector-out-of-range>:out-of-range</a></code>
   49560     pseudo-class must match all elements that are <a href=#candidate-for-constraint-validation title="candidate for constraint validation">candidates for
   49561     constraint validation</a> and that are <a href=#suffering-from-an-underflow>suffering from an
   49562     underflow</a> or <a href=#suffering-from-an-overflow>suffering from an overflow</a>.</p>
   49563 
   49564    </dd>
   49565 
   49566 
   49567    <dt><dfn id=selector-required title=selector-required><code>:required</code></dfn></dt>
   49568 
   49569    <dd>
   49570 
   49571     <p>The <code title=selector-required><a href=#selector-required>:required</a></code>
   49572     pseudo-class must match the following elements:</p>
   49573 
   49574     <ul><li><code><a href=#the-input-element>input</a></code> elements that are <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
   49575 
   49576      <li><code><a href=#the-textarea-element>textarea</a></code> elements that have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
   49577      attribute</li>
   49578 
   49579     </ul></dd>
   49580 
   49581 
   49582    <dt><dfn id=selector-optional title=selector-optional><code>:optional</code></dfn></dt>
   49583 
   49584    <dd>
   49585 
   49586     <p>The <code title=selector-optional><a href=#selector-optional>:optional</a></code>
   49587     pseudo-class must match the following elements:</p>
   49588 
   49589     <ul><li><code><a href=#the-button-element>button</a></code> elements</li>
   49590 
   49591      <li><code><a href=#the-input-element>input</a></code> elements that are not <i title=concept-input-required><a href=#concept-input-required>required</a></i></li>
   49592 
   49593      <li><code><a href=#the-select-element>select</a></code> elements</li>
   49594 
   49595      <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>
   49596      attribute</li>
   49597 
   49598     </ul></dd>
   49599 
   49600 
   49601    <dt><dfn id=selector-read-only title=selector-read-only><code>:read-only</code></dfn></dt>
   49602    <dt><dfn id=selector-read-write title=selector-read-write><code>:read-write</code></dfn></dt>
   49603 
   49604    <dd>
   49605 
   49606     <p>The <code title=selector-read-write><a href=#selector-read-write>:read-write</a></code>
   49607     pseudo-class must match the following elements:</p>
   49608 
   49609     <ul><li><code><a href=#the-input-element>input</a></code> elements to which the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute applies,
   49610      but that are not <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i>
   49611      (i.e. that do not have the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute specified
   49612      and that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>)</li>
   49613 
   49614      <li><code><a href=#the-textarea-element>textarea</a></code> elements that do not have a <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute, and
   49615      that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   49616 
   49617      <li>any element that is <a href=#editable>editable</a></li>
   49618 
   49619     </ul><p>The <code title=selector-read-only><a href=#selector-read-only>:read-only</a></code>
   49620     pseudo-class must match all other <a href=#html-elements>HTML elements</a>.</p>
   49621 
   49622    </dd>
   49623 
   49624   </dl><p class=note>Another section of this specification defines the
   49625   <i><a href=#target-element>target element</a></i> used with the <code title=selector-target>:target</code> pseudo-class.</p>
   49626 
   49627   <p class=note>This specification does not define when an element
   49628   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
   49629   those are all defined in sufficient detail in a language-agnostic
   49630   fashion in the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>
   49631 
   49632   </div>
   49633 
   49634 
   49635 
   49636 
   49637   <div data-component="HTML Microdata (editor: Ian Hickson)">
   49638 
   49639   <h2 id=microdata><span class=secno>5 </span><dfn>Microdata</dfn></h2>
   49640 
   49641 <!-- v2
   49642 
   49643   * <itemref itemprop="foo" src="url#id"> to import the item with
   49644     id="id" from url into the current microdata block as the value of
   49645     property foo?
   49646 
   49647   * splitting the 'content' part of a property into multiple sub-bits,
   49648     as in:
   49649 
   49650      <span itemprop="tel" item-content-in-bits>
   49651        Telephone:
   49652        <span content-bit>+44</span> (0) <span content-bit>1223 123 123</span>
   49653      </span>
   49654 
   49655     maybe vocabs that need this can use a sub vocabulary specifically
   49656     for this:
   49657 
   49658      <span itemprop="tel" itemscope itemtype="http://bits.example/">
   49659        Telephone:
   49660        <span itemprop=bit>+44</span> (0) <span itemprop=bit>1223 123 123</span>
   49661      </span>
   49662 
   49663 -->
   49664 
   49665 
   49666   <h3 id=introduction-2><span class=secno>5.1 </span>Introduction</h3>
   49667 
   49668   <h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
   49669 
   49670   <p><i>This section is non-normative.</i></p>
   49671 
   49672   <p>Sometimes, it is desirable to annotate content with specific
   49673   machine-readable labels, e.g. to allow generic scripts to provide
   49674   services that are customised to the page, or to enable content from
   49675   a variety of cooperating authors to be processed by a single script
   49676   in a consistent manner.</p>
   49677 
   49678   <p>For this purpose, authors can use the microdata features
   49679   described in this section. Microdata allows nested groups of
   49680   name-value pairs to be added to documents, in parallel with the
   49681   existing content.</p>
   49682 
   49683 
   49684 
   49685   <h4 id=the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</h4>
   49686 
   49687   <p><i>This section is non-normative.</i></p>
   49688 
   49689   <p>At a high level, microdata consists of a group of name-value
   49690   pairs. The groups are called <a href=#concept-item title=concept-item>items</a>, and each name-value pair is a
   49691   property. Items and properties are represented by regular
   49692   elements.</p>
   49693 
   49694   <p>To create an item, the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute is used.</p>
   49695 
   49696   <p>To add a property to an item, the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is used on one of
   49697   the <a href=#concept-item title=concept-item>item's</a> descendants.</p>
   49698 
   49699   <div class=example>
   49700 
   49701    <p>Here there are two items, each of which has the property "name":</p>
   49702 
   49703    <pre>&lt;div itemscope&gt;
   49704  &lt;p&gt;My name is &lt;span itemprop="name"&gt;Elizabeth&lt;/span&gt;.&lt;/p&gt;
   49705 &lt;/div&gt;
   49706 
   49707 &lt;div itemscope&gt;
   49708  &lt;p&gt;My name is &lt;span itemprop="name"&gt;Daniel&lt;/span&gt;.&lt;/p&gt;
   49709 &lt;/div&gt;</pre>
   49710 
   49711   </div>
   49712 
   49713   <p>Properties generally have values that are strings.</p>
   49714 
   49715   <div class=example>
   49716 
   49717    <p>Here the item has three properties:</p>
   49718 
   49719    <pre>&lt;div itemscope&gt;
   49720  &lt;p&gt;My name is &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.&lt;/p&gt;
   49721  &lt;p&gt;My band is called &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.&lt;/p&gt;
   49722  &lt;p&gt;I am &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.&lt;/p&gt;
   49723 &lt;/div&gt;</pre>
   49724 
   49725   </div>
   49726 
   49727   <p>Properties can also have values that are <a href=#url title=URL>URLs</a>. This is achieved using the <code><a href=#the-a-element>a</a></code>
   49728   element and its <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   49729   attribute, the <code><a href=#the-img-element>img</a></code> element and its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or other elements that
   49730   link to or embed external resources.</p>
   49731 
   49732   <div class=example>
   49733 
   49734    <p>In this example, the item has one property, "image", whose value
   49735    is a URL:</p>
   49736 
   49737    <pre>&lt;div itemscope&gt;
   49738  &lt;img itemprop="image" src="google-logo.png" alt="Google"&gt;
   49739 &lt;/div&gt;</pre>
   49740 
   49741   </div>
   49742 
   49743   <p>Properties can also have values that are dates, times, or dates
   49744   and times. This is achieved using the <code><a href=#the-time-element>time</a></code> element and
   49745   its <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute.</p>
   49746 
   49747   <div class=example>
   49748 
   49749    <p>In this example, the item has one property,
   49750    "birthday", whose value is a date:</p>
   49751 
   49752    <pre>&lt;div itemscope&gt;
   49753  I was born on &lt;time itemprop="birthday" datetime="2009-05-10"&gt;May 10th 2009&lt;/time&gt;.
   49754 &lt;/div&gt;</pre>
   49755 
   49756   </div>
   49757 
   49758   <p>Properties can also themselves be groups of name-value pairs, by
   49759   putting the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute
   49760   on the element that declares the property.</p>
   49761 
   49762   <p>Items that are not part of others are called <a href=#top-level-microdata-items>top-level
   49763   microdata items</a>.</p>
   49764 
   49765   <div class=example>
   49766 
   49767    <p>In this example, the outer item represents a person, and the
   49768    inner one represents a band:</p>
   49769 
   49770    <pre>&lt;div itemscope&gt;
   49771  &lt;p&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
   49772  &lt;p&gt;Band: &lt;span itemprop="band" itemscope&gt; &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; (&lt;span itemprop="size"&gt;12&lt;/span&gt; players)&lt;/span&gt;&lt;/p&gt;
   49773 &lt;/div&gt;</pre>
   49774 
   49775    <p>The outer item here has two properties, "name" and
   49776    "band". The "name" is "Amanda", and the
   49777    "band" is an item in its own right, with two
   49778    properties, "name" and "size". The
   49779    "name" of the band is "Jazz Band", and the
   49780    "size" is "12".</p>
   49781 
   49782    <p>The outer item in this example is a top-level microdata
   49783    item.</p>
   49784 
   49785   </div>
   49786 
   49787   <p>Properties that are not descendants of the element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute can be associated
   49788   with the <a href=#concept-item title=concept-item>item</a> using the <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute. This attribute takes
   49789   a list of IDs of elements to crawl in addition to crawling the
   49790   children of the element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute.</p>
   49791 
   49792   <div class=example>
   49793 
   49794    <p>This example is the same as the previous one, but all the
   49795    properties are separated from their <a href=#concept-item title=concept-item>items</a>:</p>
   49796 
   49797    <pre>&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
   49798 &lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
   49799 &lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
   49800 &lt;div id="c"&gt;
   49801  &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
   49802  &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
   49803 &lt;/div&gt;</pre>
   49804 
   49805    <p>This gives the same result as the previous example. The first
   49806    item has two properties, "name", set to "Amanda", and "band", set
   49807    to another item. That second item has two further properties,
   49808    "name", set to "Jazz Band", and "size", set to "12".</p>
   49809 
   49810   </div>
   49811 
   49812   <p>An <a href=#concept-item title=concept-item>item</a> can have multiple
   49813   properties with the same name and different values.</p>
   49814 
   49815   <div class=example>
   49816 
   49817    <p>This example describes an ice cream, with two flavors:</p>
   49818 
   49819    <pre>&lt;div itemscope&gt;
   49820  &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
   49821  &lt;ul&gt;
   49822   &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
   49823   &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
   49824  &lt;/ul&gt;
   49825 &lt;/div&gt;</pre>
   49826 
   49827    <p>This thus results in an item with two properties, both
   49828    "flavor", having the values "Lemon sorbet" and "Apricot
   49829    sorbet".</p>
   49830 
   49831   </div>
   49832 
   49833   <p>An element introducing a property can also introduce multiple
   49834   properties at once, to avoid duplication when some of the properties
   49835   have the same value.</p>
   49836 
   49837   <div class=example>
   49838 
   49839    <p>Here we see an item with two properties,
   49840    "favorite-color" and "favorite-fruit", both
   49841    set to the value "orange":</p>
   49842 
   49843    <pre>&lt;div itemscope&gt;
   49844  &lt;span itemprop="favorite-color favorite-fruit"&gt;orange&lt;/span&gt;
   49845 &lt;/div&gt;</pre>
   49846 
   49847   </div>
   49848 
   49849   <p>It's important to note that there is no relationship between the
   49850   microdata and the content of the document where the microdata is
   49851   marked up.</p>
   49852 
   49853   <div class=example>
   49854 
   49855    <p>There is no semantic difference, for instance, between the
   49856    following two examples:</p>
   49857 
   49858    <pre>&lt;figure&gt;
   49859  &lt;img src="castle.jpeg"&gt;
   49860  &lt;figcaption&gt;&lt;span itemscope&gt;&lt;span itemprop="name"&gt;The Castle&lt;/span&gt;&lt;/span&gt; (1986)&lt;/figcaption&gt;
   49861 &lt;/figure&gt;</pre>
   49862 
   49863    <pre>&lt;span itemscope&gt;&lt;meta itemprop="name" content="The Castle"&gt;&lt;/span&gt;
   49864 &lt;figure&gt;
   49865  &lt;img src="castle.jpeg"&gt;
   49866  &lt;figcaption&gt;The Castle (1986)&lt;/figcaption&gt;
   49867 &lt;/figure&gt;</pre>
   49868 
   49869    <p>Both have a figure with a caption, and both, completely
   49870    unrelated to the figure, have an item with a name-value pair with
   49871    the name "name" and the value "The Castle". The only
   49872    difference is that if the user drags the caption out of the
   49873    document, in the former case, the item will be included in the
   49874    drag-and-drop data. In neither case is the image in any way
   49875    associated with the item.</p>
   49876 
   49877   </div>
   49878 
   49879 
   49880   <h4 id=typed-items><span class=secno>5.1.3 </span>Typed items</h4>
   49881 
   49882   <p><i>This section is non-normative.</i></p>
   49883 
   49884   <p>The examples in the previous section show how information could
   49885   be marked up on a page that doesn't expect its microdata to be
   49886   re-used. Microdata is most useful, though, when it is used in
   49887   contexts where other authors and readers are able to cooperate to
   49888   make new uses of the markup.</p>
   49889 
   49890   <p>For this purpose, it is necessary to give each <a href=#concept-item title=concept-item>item</a> a type, such as
   49891   "http://example.com/person", or "http://example.org/cat", or
   49892   "http://band.example.net/". Types are identified as <a href=#url title=URL>URLs</a>.</p>
   49893 
   49894   <p>The type for an <a href=#concept-item title=concept-item>item</a> is given
   49895   as the value of an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code>
   49896   attribute on the same element as the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute.</p>
   49897 
   49898   <div class=example>
   49899 
   49900    <p>Here, the item is "http://example.org/animals#cat":</p>
   49901 
   49902 <pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
   49903  &lt;h1 itemprop="name"&gt;Hedral&lt;/h1&gt;
   49904  &lt;p itemprop="desc"&gt;Hedral is a male american domestic
   49905  shorthair, with a fluffy black fur with white paws and belly.&lt;/p&gt;
   49906  &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
   49907 &lt;/section&gt;</pre>
   49908 
   49909    <p>In this example the "http://example.org/animals#cat" item has three
   49910    properties, a "name" ("Hedral"), a "desc" ("Hedral is..."), and an
   49911    "img" ("hedral.jpeg").</p>
   49912 
   49913   </div>
   49914 
   49915   <p>An item can only have one type. The type gives the context for
   49916   the properties, thus defining a vocabulary: a property named "class"
   49917   given for an item with the type "http://census.example/person" might
   49918   refer to the economic class of an individual, while a property named
   49919   "class" given for an item with the type "http://example.com/school/teacher"
   49920   might refer to the classroom a teacher has been assigned.</p>
   49921 
   49922 
   49923   <h4 id=global-identifiers-for-items><span class=secno>5.1.4 </span>Global identifiers for items</h4>
   49924 
   49925   <p><i>This section is non-normative.</i></p>
   49926 
   49927   <p>Sometimes, an <a href=#concept-item title=concept-item>item</a> gives
   49928   information about a topic that has a global identifier. For example,
   49929   books can be identified by their ISBN number.</p>
   49930 
   49931   <p>Vocabularies (as identified by the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute) can be designed
   49932   such that <a href=#concept-item title=concept-item>items</a> get associated
   49933   with their global identifier in an unambiguous way by expressing the
   49934   global identifiers as <a href=#url title=URL>URLs</a> given in an
   49935   <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute.</p>
   49936 
   49937   <p>The exact meaning of the <a href=#url title=URL>URLs</a> given in
   49938   <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attributes depends on the
   49939   vocabulary used.</p>
   49940 
   49941   <div class=example>
   49942 
   49943    <p>Here, an item is talking about a particular book:</p>
   49944 
   49945 <pre>&lt;dl itemscope
   49946     itemtype="http://vocab.example.net/book"
   49947     <strong>itemid="urn:isbn:0-330-34032-8"</strong>&gt;
   49948  &lt;dt&gt;Title
   49949  &lt;dd itemprop="title"&gt;The Reality Dysfunction
   49950  &lt;dt&gt;Author
   49951  &lt;dd itemprop="author"&gt;Peter F. Hamilton
   49952  &lt;dt&gt;Publication date
   49953  &lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt;
   49954 &lt;/dl&gt;</pre>
   49955 
   49956    <p>The "<code title="">http://vocab.example.net/book</code>"
   49957    vocabulary in this example would define that the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute takes a <code title="">urn:</code> <a href=#url>URL</a> pointing to the ISBN of the
   49958    book.</p>
   49959 
   49960   </div>
   49961 
   49962   <!-- (commented out since itemtype="" defines the meaning of the
   49963         identifier for now)
   49964   <p>Although it is common practice, authors are encouraged not to use
   49965   the same URL to identify multiple topics; in particular, an HTTP URL
   49966   usually identifies a specific resource (such as an image or
   49967   document), and authors are encouraged to not use them to identify
   49968   people, non-Web resources like companies, movies, and products, or
   49969   other abstract concepts. Using an HTTP URL as a global identifier
   49970   for something other than the resource actually designated by the URL
   49971   leads to a situation where it is ambiguous whether the identifier,
   49972   and thus the set of properties specified in the microdata,
   49973   references the page or something else.</p>
   49974   -->
   49975 
   49976 
   49977 
   49978   <h4 id=selecting-names-when-defining-vocabularies><span class=secno>5.1.5 </span>Selecting names when defining vocabularies</h4>
   49979 
   49980   <p><i>This section is non-normative.</i></p>
   49981 
   49982   <p>Using microdata means using a vocabulary. For some purposes, an
   49983   ad-hoc vocabulary is adequate. For others, a vocabulary will need to
   49984   be designed. Where possible, authors are encouraged to re-use
   49985   existing vocabularies, as this makes content re-use easier.</p>
   49986 
   49987   <p>When designing new vocabularies, identifiers can be created
   49988   either using <a href=#url title=URL>URLs</a>, or, for properties, as
   49989   plain words (with no dots or colons). For URLs, conflicts with other
   49990   vocabularies can be avoided by only using identifiers that
   49991   correspond to pages that the author has control over.</p>
   49992 
   49993   <div class=example>
   49994 
   49995    <p>For instance, if Jon and Adam both write content at <code title="">example.com</code>, at <code title="">http://example.com/~jon/...</code> and <code title="">http://example.com/~adam/...</code> respectively, then
   49996    they could select identifiers of the form
   49997    "http://example.com/~jon/name" and "http://example.com/~adam/name"
   49998    respectively.</p>
   49999 
   50000   </div>
   50001 
   50002   <p>Properties whose names are just plain words can only be used
   50003   within the context of the types for which they are intended;
   50004   properties named using URLs can be reused in items of any type. If
   50005   an item has no type, and is not part of another item, then if its
   50006   properties have names that are just plain words, they are not
   50007   intended to be globally unique, and are instead only intended for
   50008   limited use. Generally speaking, authors are encouraged to use
   50009   either properties with globally unique names (URLs) or ensure that
   50010   their items are typed.</p>
   50011 
   50012   <div class=example>
   50013 
   50014    <p>Here, an item is an "http://example.org/animals#cat", and most of the
   50015    properties have names that are words defined in the context of that
   50016    type. There are also a few additional properties whose names come
   50017    from other vocabularies.</p>
   50018 
   50019 <pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
   50020  &lt;h1 itemprop="name http://example.com/fn"&gt;Hedral&lt;/h1&gt;
   50021  &lt;p itemprop="desc"&gt;Hedral is a male american domestic
   50022  shorthair, with a fluffy &lt;span
   50023  itemprop="http://example.com/color"&gt;black&lt;/span&gt; fur with &lt;span
   50024  itemprop="http://example.com/color"&gt;white&lt;/span&gt; paws and belly.&lt;/p&gt;
   50025  &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
   50026 &lt;/section&gt;</pre>
   50027 
   50028    <p>This example has one item with the type "http://example.org/animals#cat"
   50029    and the following properties:</p>
   50030 
   50031    <table><thead><tr><td>Property
   50032       <td>Value
   50033     <tbody><tr><td>name
   50034       <td>Hedral
   50035      <tr><td>http://example.com/fn
   50036       <td>Hedral
   50037      <tr><td>desc
   50038       <td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
   50039      <tr><td>http://example.com/color
   50040       <td>black
   50041      <tr><td>http://example.com/color
   50042       <td>white
   50043      <tr><td>img
   50044       <td>.../hedral.jpeg
   50045    </table></div>
   50046 
   50047 
   50048 
   50049   <h4 id=using-the-microdata-dom-api><span class=secno>5.1.6 </span>Using the microdata DOM API</h4>
   50050 
   50051   <p><i>This section is non-normative.</i></p>
   50052 
   50053   <p>The microdata becomes even more useful when scripts can use it to
   50054   expose information to the user, for example offering it in a form
   50055   that can be used by other applications.</p>
   50056 
   50057   <p>The <code title=dom-document-getItems><a href=#dom-document-getitems>document.getItems(<var title="">typeNames</var>)</a></code> method provides access to the
   50058   <a href=#top-level-microdata-items>top-level microdata items</a>. It returns a
   50059   <code><a href=#nodelist>NodeList</a></code> containing the items with the specified types,
   50060   or all types if no argument is specified.</p>
   50061 
   50062   <p>Each <a href=#concept-item title=concept-item>item</a> is represented in the
   50063   DOM by the element on which the relevant <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute is found. These
   50064   elements have their <code title=dom-itemScope><a href=#dom-itemscope>element.itemScope</a></code> IDL attribute set to
   50065   true.</p>
   50066 
   50067   <p>The type of <a href=#concept-item title=concept-item>items</a> can be
   50068   obtained using the <code title=dom-itemType><a href=#dom-itemtype>element.itemType</a></code> IDL attribute on the
   50069   element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50070   attribute.</p>
   50071 
   50072   <div class=example>
   50073 
   50074    <p>This sample shows how the <code title=dom-document-getItems><a href=#dom-document-getitems>getItems()</a></code> method can be used
   50075    to obtain a list of all the top-level microdata items of one type
   50076    given in the document:</p>
   50077 
   50078    <pre>var cats = document.getItems("http://example.com/feline");</pre>
   50079 
   50080   </div>
   50081 
   50082   <p>Once an element representing an <a href=#concept-item title=concept-item>item</a> has been obtained, its properties
   50083   can be extracted using the <code title=dom-properties><a href=#dom-properties>properties</a></code> IDL attribute. This
   50084   attribute returns an <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>, which can
   50085   be enumerated to go through each element that adds one or more
   50086   properties to the item. It can also be indexed by name, which will
   50087   return an object with a list of the elements that add properties
   50088   with that name.</p>
   50089 
   50090   <p>Each element that adds a property also has a <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> IDL attribute that returns
   50091   its value.</p>
   50092 
   50093   <div class=example>
   50094 
   50095    <p>This sample gets the first item of type "http://example.net/user" and
   50096    then pops up an alert using the "name" property from
   50097    that item.</p>
   50098 
   50099    <pre>var user = document.getItems('http://example.net/user')[0];
   50100 alert('Hello ' + user.properties['name'][0].content + '!');</pre>
   50101 
   50102   </div>
   50103 
   50104   <p>The <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object, when indexed by
   50105   name in this way, actually returns a <code><a href=#propertynodelist>PropertyNodeList</a></code>
   50106   object with all the matching properties. The
   50107   <code><a href=#propertynodelist>PropertyNodeList</a></code> object can be used to obtain all the
   50108   values at once using <em>its</em> <code title=dom-PropertyNodeList-values><a href=#dom-propertynodelist-values>values</a></code> attribute, which
   50109   returns an array of all the values.</p>
   50110 
   50111   <div class=example>
   50112 
   50113    <p>In an earlier example, a "http://example.org/animals#cat" item had two
   50114    "http://example.com/color" values. This script looks up the first such
   50115    item and then lists all its values.</p>
   50116 
   50117    <pre>var cat = document.getItems('http://example.org/animals#cat')[0];
   50118 var colors = cat.properties['http://example.com/color'].values;
   50119 var result;
   50120 if (colors.length == 0) {
   50121   result = 'Color unknown.';
   50122 } else if (colors.length == 1) {
   50123   result = 'Color: ' + colors[0];
   50124 } else {
   50125   result = 'Colors:';
   50126   for (var i = 0; i &lt; colors.length; i += 1)
   50127     result += ' ' + colors[i];
   50128 }</pre>
   50129 
   50130   </div>
   50131 
   50132   <p>It's also possible to get a list of all the <a href=#property-names>property
   50133   names</a> using the object's <code title=dom-HTMLPropertiesCollection-names><a href=#dom-htmlpropertiescollection-names>names</a></code> IDL
   50134   attribute.</p>
   50135 
   50136   <div class=example>
   50137 
   50138    <p>This example creates a big list with a nested list for each item
   50139    on the page, each with of all the property names used in that
   50140    item.</p>
   50141 
   50142    <pre>var outer = document.createElement('ul');
   50143 var items = document.getItems();
   50144 for (var item = 0; item &lt; items.length; item += 1) {
   50145   var itemLi = document.createElement('li');
   50146   var inner = document.createElement('ul');
   50147   for (var name = 0; name &lt; items[item].properties.names.length; name += 1) {
   50148     var propLi = document.createElement('li');
   50149     propLi.appendChild(document.createTextNode(items[item].properties.names[name]));
   50150     inner.appendChild(propLi);
   50151   }
   50152   itemLi.appendChild(inner);
   50153   outer.appendChild(itemLi);
   50154 }
   50155 document.body.appendChild(outer);</pre>
   50156 
   50157    <p>If faced with the following from an earlier example:</p>
   50158 
   50159    <pre>&lt;section itemscope itemtype="http://example.org/animals#cat"&gt;
   50160  &lt;h1 itemprop="name http://example.com/fn"&gt;Hedral&lt;/h1&gt;
   50161  &lt;p itemprop="desc"&gt;Hedral is a male american domestic
   50162  shorthair, with a fluffy &lt;span
   50163  itemprop="http://example.com/color"&gt;black&lt;/span&gt; fur with &lt;span
   50164  itemprop="http://example.com/color"&gt;white&lt;/span&gt; paws and belly.&lt;/p&gt;
   50165  &lt;img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"&gt;
   50166 &lt;/section&gt;</pre>
   50167 
   50168    <p>...it would result in the following output:</p>
   50169 
   50170    <ul><li>
   50171      <ul><li>name</li>
   50172       <li>http://example.com/fn</li>
   50173       <li>desc</li>
   50174       <li>http://example.com/color</li>
   50175       <li>img</li>
   50176      </ul></li>
   50177    </ul><p>(The duplicate occurrence of "http://example.com/color" is not included
   50178    in the list.)</p>
   50179 
   50180   </div>
   50181 
   50182 
   50183   <h3 id=encoding-microdata><span class=secno>5.2 </span>Encoding microdata</h3>
   50184 
   50185 
   50186 
   50187   <h4 id=the-microdata-model><span class=secno>5.2.1 </span>The microdata model</h4>
   50188 
   50189   <p>The microdata model consists of groups of name-value pairs known
   50190   as <a href=#concept-item title=concept-item>items</a>.</p>
   50191 
   50192   <p>Each group is known as an <a href=#concept-item title=concept-item>item</a>. Each <a href=#concept-item title=concept-item>item</a> can have an <a href=#item-type>item type</a>,
   50193   a <a href=#global-identifier>global identifier</a> (if the <a href=#item-type>item type</a>
   50194   <a href=#support-global-identifiers-for-items title="support global identifiers for items">supports global
   50195   identifiers for its items</a>), and a list of name-value
   50196   pairs. Each name in the name-value pair is known as a <a href=#the-properties-of-an-item title="the properties of an item">property</a>, and each <a href=#the-properties-of-an-item title="the properties of an item">property</a> has one or more
   50197   <a href=#concept-property-value title=concept-property-value>values</a>. Each <a href=#concept-property-value title=concept-property-value>value</a> is either a string or itself a group of
   50198   name-value pairs (an <a href=#concept-item title=concept-item>item</a>).</p>
   50199 
   50200   <p>An <a href=#concept-item title=concept-item>item</a> is said to be a
   50201   <dfn id=typed-item>typed item</dfn> when either it has an <a href=#item-type>item type</a>,
   50202   or it is the <a href=#concept-property-value title=concept-property-value>value</a> of a <a href=#the-properties-of-an-item title="the properties of an
   50203   item">property</a> of a <a href=#typed-item>typed item</a>. The
   50204   <dfn id=relevant-type>relevant type</dfn> for a <a href=#typed-item>typed item</a> is the <a href=#concept-item title=concept-item>item</a>'s <a href=#item-type>item type</a>, if it has
   50205   one, or else is the <a href=#relevant-type>relevant type</a> of the <a href=#concept-item title=concept-item>item</a> for which it is a <a href=#the-properties-of-an-item title="the
   50206   properties of an item">property</a>'s <a href=#concept-property-value title=concept-property-value>value</a>.</p>
   50207 
   50208 
   50209 
   50210   <h4 id=items><span class=secno>5.2.2 </span>Items</h4>
   50211 
   50212   <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have an
   50213   <dfn id=attr-itemscope title=attr-itemscope><code>itemscope</code></dfn> attribute
   50214   specified. The <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50215   attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
   50216 
   50217   <p>An element with the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50218   attribute specified creates a new <dfn id=concept-item title=concept-item>item</dfn>, a group of name-value pairs.</p>
   50219 
   50220   <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50221   attribute may have an <dfn id=attr-itemtype title=attr-itemtype><code>itemtype</code></dfn> attribute
   50222   specified, to give the <a href=#item-type>item type</a> of the <a href=#concept-item title=concept-item>item</a>.</p>
   50223 
   50224   <p>The <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute, if
   50225   specified, must have a value that is a <a href=#valid-url>valid URL</a> that
   50226   is an <a href=#absolute-url>absolute URL</a> for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
   50227   <a href=#prefix-match>prefix match</a>.</p> <!-- we disallow that prefix so that
   50228   we have somewhere to put future extensions, e.g. if we ever support
   50229   short type names -->
   50230 
   50231   <p>The <dfn id=item-type>item type</dfn> of an <a href=#concept-item title=concept-item>item</a> is the value of its element's <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute, if it has one and
   50232   its value is not the empty string. If the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute is missing or its
   50233   value is the empty string, the <a href=#concept-item title=concept-item>item</a> is said to have no <a href=#item-type>item
   50234   type</a>.</p>
   50235 
   50236   <p>The <a href=#item-type>item type</a> must be a type defined in an <a href=#other-applicable-specifications title="other applicable specifications">applicable
   50237   specification</a>.</p>
   50238 
   50239   <div class=impl>
   50240 
   50241    <p>Except if otherwise specified by that specification, the
   50242    <a href=#url>URL</a> given as the <a href=#item-type>item type</a> should not be
   50243    automatically dereferenced.</p>
   50244 
   50245    <p class=note>A specification could define that its <a href=#item-type>item
   50246    type</a> can be derefenced to provide the user with help
   50247    information, for example. In fact, vocabulary authors are
   50248    encouraged to provide useful information at the given
   50249    <a href=#url>URL</a>.</p>
   50250 
   50251    <p><a href=#item-type title="item type">Item types</a> are opaque
   50252    identifiers, and user agents must not dereference unknown <a href=#item-type title="item type">item types</a>, or otherwise deconstruct them,
   50253    in order to determine how to process <a href=#concept-item title=concept-item>items</a> that use them.</p>
   50254 
   50255   </div>
   50256 
   50257   <p>The <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute must
   50258   not be specified on elements that do not have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified.</p>
   50259 
   50260   <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50261   attribute and an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code>
   50262   attribute that references a vocabulary that is defined to
   50263   <dfn id=support-global-identifiers-for-items>support global identifiers for items</dfn> may also have an
   50264   <dfn id=attr-itemid title=attr-itemid><code>itemid</code></dfn> attribute
   50265   specified, to give a global identifier for the <a href=#concept-item title=concept-item>item</a>, so that it can be related to other
   50266   <a href=#concept-item title=concept-item>items</a> on pages elsewhere on the
   50267   Web.</p>
   50268 
   50269   <p>The <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute, if
   50270   specified, must have a value that is a <a href=#valid-url-potentially-surrounded-by-spaces>valid URL potentially
   50271   surrounded by spaces</a>.</p>
   50272 
   50273   <p>The <dfn id=global-identifier>global identifier</dfn> of an <a href=#concept-item title=concept-item>item</a> is the value of its element's <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute, if it has one, <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element on
   50274   which the attribute is specified. If the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute is missing or if
   50275   resolving it fails, it is said to have no <a href=#global-identifier>global
   50276   identifier</a>.</p>
   50277 
   50278   <p>The <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> attribute must not be
   50279   specified on elements that do not have both an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute and an <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute specified, and must
   50280   not be specified on elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute whose <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> attribute specifies a
   50281   vocabulary that does not <a href=#support-global-identifiers-for-items>support global identifiers for
   50282   items</a>, as defined by that vocabulary's specification.</p>
   50283 
   50284   <hr><p>Elements with an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code>
   50285   attribute may have an <dfn id=attr-itemref title=attr-itemref><code>itemref</code></dfn> attribute specified,
   50286   to give a list of additional elements to crawl to find the
   50287   name-value pairs of the <a href=#concept-item title=concept-item>item</a>.</p>
   50288 
   50289   <p>The <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, if
   50290   specified, must have a value that is an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of
   50291   unique space-separated tokens</a> consisting of <a href=#concept-id title=concept-ID>IDs</a> of elements in the same <a href=#home-subtree>home
   50292   subtree</a>.</p>
   50293 
   50294   <p>The <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute must not
   50295   be specified on elements that do not have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified.</p>
   50296 
   50297 
   50298   <h4 id=names:-the-itemprop-attribute><span class=secno>5.2.3 </span>Names: the <dfn title=attr-itemprop><code>itemprop</code></dfn> attribute</h4>
   50299 
   50300   <p>Every <a href=#html-elements title="HTML elements">HTML element</a> may have an
   50301   <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute specified, if
   50302   doing so <a href=#the-properties-of-an-item title="the properties of an item">adds a
   50303   property</a> to one or more <a href=#concept-item title=concept-item>items</a> (as defined below).</p>
   50304 
   50305   <p>The <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, if
   50306   specified, must have a value that is an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of
   50307   unique space-separated tokens</a> representing the names of the
   50308   name-value pairs that it adds. The attribute's value must have at
   50309   least one token.</p>
   50310 
   50311   <p>Each token must be either:</p>
   50312 
   50313   <ul><li>A <a href=#valid-url>valid URL</a> that is an <a href=#absolute-url>absolute URL</a>
   50314    for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a
   50315    <a href=#prefix-match>prefix match</a>, or</li>
   50316 
   50317    <li>If the item is a <a href=#typed-item>typed item</a>: a <dfn id=defined-property-name>defined
   50318    property name</dfn> allowed in this situation according to the
   50319    specification that defines the <a href=#relevant-type>relevant type</a> for the
   50320    item, or</li>
   50321 
   50322    <li>If the item is not a <a href=#typed-item>typed item</a>: a string that
   50323    contains no U+002E FULL STOP characters (.) and no U+003A COLON
   50324    characters (:).</li>
   50325 
   50326   </ul><p>When an element with an <code title=concept-itemprop>itemprop</code> attribute <a href=#the-properties-of-an-item title="the
   50327   properties of an item">adds a property</a> to multiple <a href=#concept-item title=concept-item>items</a>, the requirement above regarding
   50328   the tokens applies for each <a href=#concept-item title=concept-item>item</a>
   50329   individually.</p>
   50330 
   50331   <!--
   50332 
   50333    e.g.:
   50334 
   50335      <div itemscope itemtype="http://example.com/a"> <ref refid="x"> </div>
   50336      <div itemscope itemtype="http://example.com/b"> <ref refid="x"> </div>
   50337      <meta id="x" itemprop="z" content="">
   50338 
   50339      "z" had better be valid for both http://example.com/a and http://example.com/b
   50340 
   50341   -->
   50342 
   50343   <p>The <dfn id=property-names>property names</dfn> of an element are the tokens that
   50344   the element's <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute
   50345   is found to contain when its value is <a href=#split-a-string-on-spaces title="split a string on
   50346   spaces">split on spaces</a>, with the order preserved but with
   50347   duplicates removed (leaving only the first occurrence of each
   50348   name).</p>
   50349 
   50350   <p>Within an <a href=#concept-item title=concept-item>item</a>, the properties
   50351   are unordered with respect to each other, except for properties with
   50352   the same name, which are ordered in the order they are given by the
   50353   algorithm that defines <a href=#the-properties-of-an-item>the properties of an item</a>.</p>
   50354 
   50355   <div class=example>
   50356 
   50357    <p>In the following example, the "a" property has the values "1"
   50358    and "2", <em>in that order</em>, but whether the "a" property comes
   50359    before the "b" property or not is not important:</p>
   50360 
   50361    <pre>&lt;div itemscope&gt;
   50362  &lt;p itemprop="a"&gt;1&lt;/p&gt;
   50363  &lt;p itemprop="a"&gt;2&lt;/p&gt;
   50364  &lt;p itemprop="b"&gt;test&lt;/p&gt;
   50365 &lt;/div&gt;</pre>
   50366 
   50367    <p>Thus, the following is equivalent:</p>
   50368 
   50369    <pre>&lt;div itemscope&gt;
   50370  &lt;p itemprop="b"&gt;test&lt;/p&gt;
   50371  &lt;p itemprop="a"&gt;1&lt;/p&gt;
   50372  &lt;p itemprop="a"&gt;2&lt;/p&gt;
   50373 &lt;/div&gt;</pre>
   50374 
   50375    <p>As is the following:</p>
   50376 
   50377    <pre>&lt;div itemscope&gt;
   50378  &lt;p itemprop="a"&gt;1&lt;/p&gt;
   50379  &lt;p itemprop="b"&gt;test&lt;/p&gt;
   50380  &lt;p itemprop="a"&gt;2&lt;/p&gt;
   50381 &lt;/div&gt;</pre>
   50382 
   50383    <p>And the following:</p>
   50384 
   50385    <pre>&lt;div itemscope itemref="x"&gt;
   50386  &lt;p itemprop="b"&gt;test&lt;/p&gt;
   50387  &lt;p itemprop="a"&gt;2&lt;/p&gt;
   50388 &lt;/div&gt;
   50389 &lt;div id="x"&gt;
   50390  &lt;p itemprop="a"&gt;1&lt;/p&gt;
   50391 &lt;/div&gt;
   50392 </pre>
   50393 
   50394   </div>
   50395 
   50396 
   50397 
   50398   <h4 id=values><span class=secno>5.2.4 </span>Values</h4>
   50399 
   50400   <p>The <dfn id=concept-property-value title=concept-property-value>property value</dfn> of a
   50401   name-value pair added by an element with an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute depends on the
   50402   element, as follows:</p>
   50403 
   50404   <dl><dt>If the element also has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute</dt>
   50405 
   50406    <dd><p>The value is the <a href=#concept-item title=concept-item>item</a>
   50407    created by the element.</dd>
   50408 
   50409 
   50410    <dt>If the element is a <code><a href=#meta>meta</a></code> element</dt>
   50411 
   50412    <dd><p>The value is the value of the element's <code title=attr-content>content</code> attribute, if any, or the empty
   50413    string if there is no such attribute.</dd>
   50414 
   50415 
   50416    <dt>If the element is an <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   50417    <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-source-element>source</a></code>, or
   50418    <code><a href=#video>video</a></code> element</dt>
   50419 
   50420    <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   50421    <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   50422    element's <code title="">src</code> attribute relative to the
   50423    element at the time the attribute is set, or the empty string if
   50424    there is no such attribute or if <a href=#resolve-a-url title="resolve a
   50425    url">resolving</a> it results in an error.</dd>
   50426 
   50427 
   50428    <dt>If the element is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, or
   50429    <code><a href=#the-link-element>link</a></code> element</dt>
   50430 
   50431    <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   50432    <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   50433    element's <code title="">href</code> attribute relative to the
   50434    element at the time the attribute is set, or the empty string if
   50435    there is no such attribute or if <a href=#resolve-a-url title="resolve a
   50436    url">resolving</a> it results in an error.</dd>
   50437 
   50438 
   50439    <dt>If the element is an <code><a href=#the-object-element>object</a></code> element</dt>
   50440 
   50441    <dd><p>The value is the <a href=#absolute-url>absolute URL</a> that results from
   50442    <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   50443    element's <code title="">data</code> attribute relative to the
   50444    element at the time the attribute is set, or the empty string if
   50445    there is no such attribute or if <a href=#resolve-a-url title="resolve a
   50446    url">resolving</a> it results in an error.</dd>
   50447 
   50448 
   50449    <dt>If the element is a <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute</dt>
   50450 
   50451    <dd><p>The value is the value of the element's <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute.</dd>
   50452 
   50453 
   50454    <dt>Otherwise</dt>
   50455 
   50456    <dd><p>The value is the element's
   50457    <code><a href=#textcontent>textContent</a></code>.</dd>
   50458 
   50459   </dl><p>The <dfn id=url-property-elements>URL property elements</dfn> are the <code><a href=#the-a-element>a</a></code>,
   50460   <code><a href=#the-area-element>area</a></code>, <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   50461   <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-link-element>link</a></code>,
   50462   <code><a href=#the-object-element>object</a></code>, <code><a href=#the-source-element>source</a></code>, and <code><a href=#video>video</a></code>
   50463   elements.</p>
   50464 
   50465   <p>If a property's <a href=#concept-property-value title=concept-property-value>value</a>
   50466   is an <a href=#absolute-url>absolute URL</a>, the property must be specified
   50467   using a <a href=#url-property-elements title="URL property elements">URL property
   50468   element</a>.</p>
   50469 
   50470   <p>If a property's <a href=#concept-property-value title=concept-property-value>value</a>
   50471   represents a <a href=#concept-date title=concept-date>date</a>, <a href=#concept-time title=concept-time>time</a>, or <a href=#concept-datetime title=concept-datetime>global date and time</a>, the property
   50472   must be specified using the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute of a
   50473   <code><a href=#the-time-element>time</a></code> element.</p>
   50474 
   50475 
   50476   <h4 id=associating-names-with-items><span class=secno>5.2.5 </span>Associating names with items</h4>
   50477 
   50478   <p>To find <dfn id=the-properties-of-an-item>the properties of an item</dfn> defined by the
   50479   element <var title="">root</var>, the user agent must try to
   50480   <a href=#crawl-the-properties>crawl the properties</a> of the element <var title="">root</var>, with an empty list as the value of <var title="">memory</var>: if this fails, then <a href=#the-properties-of-an-item title="the
   50481   properties of an item">the properties of the item</a> defined by
   50482   the element <var title="">root</var> is an empty list; otherwise, it
   50483   is the returned list.</p>
   50484 
   50485   <p>To <dfn id=crawl-the-properties>crawl the properties</dfn> of an element <var title="">root</var> with a list <var title="">memory</var>, the user
   50486   agent must run the following steps. These steps either fail or
   50487   return a list with a count of errors. The count of errors is used as
   50488   part of the authoring conformance criteria below.</p>
   50489 
   50490   <ol><li><p>If <var title="">root</var> is in <var title="">memory</var>, then the algorithm fails; abort these
   50491    steps.</li>
   50492 
   50493    <li><p><a href=#collect-all-the-elements-in-the-item>Collect all the elements in the item</a> <var title="">root</var>; let <var title="">results</var> be the
   50494    resulting list of elements, and <var title="">errors</var> be the
   50495    resulting count of errors.</li>
   50496 
   50497    <li><p>Remove any elements from <var title="">results</var> that do
   50498    not have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute
   50499    specified.</li>
   50500 
   50501    <li><p>Let <var title="">new memory</var> be a new list consisting
   50502    of the old list <var title="">memory</var> with the addition of
   50503    <var title="">root</var>.</li>
   50504 
   50505    <li><p>For each element in <var title="">results</var> that has an
   50506    <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute specified,
   50507    <a href=#crawl-the-properties>crawl the properties</a> of the element, with <var title="">new memory</var> as the memory. If this fails, then remove
   50508    the element from <var title="">results</var> and increment <var title="">errors</var>. (If it succeeds, the return value is
   50509    discarded.)</li>
   50510 
   50511    <li><p>Sort <var title="">results</var> in <a href=#tree-order>tree
   50512    order</a>.</li>
   50513 
   50514    <li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>
   50515 
   50516   </ol><p>To <dfn id=collect-all-the-elements-in-the-item>collect all the elements in the item</dfn> <var title="">root</var>, the user agent must run these steps. They
   50517   return a list of elements and a count of errors.</p>
   50518 
   50519   <ol><li><p>Let <var title="">results</var> and <var title="">pending</var> be empty lists of elements.</li>
   50520 
   50521    <li><p>Let <var title="">errors</var> be zero.</li>
   50522 
   50523    <li><p>Add all the children elements of <var title="">root</var> to
   50524    <var title="">pending</var>.</li>
   50525 
   50526    <li><p>If <var title="">root</var> has an <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, <a href=#split-a-string-on-spaces title="split a
   50527    string on spaces">split the value of that <code title=attr-itemref>itemref</code> attribute on spaces</a>. For
   50528    each resulting token <var title="">ID</var>, if there is an element
   50529    in the <a href=#home-subtree>home subtree</a> of <var title="">root</var> with
   50530    the <a href=#concept-id title=concept-ID>ID</a> <var title="">ID</var>, then
   50531    add the first such element to <var title="">pending</var>.</li>
   50532 
   50533    <li><p><i>Loop</i>: Remove an element from <var title="">pending</var> and let <var title="">current</var> be that
   50534    element.</li>
   50535 
   50536    <li><p>If <var title="">current</var> is already in <var title="">results</var>, increment <var title="">errors</var>.</li>
   50537 
   50538    <li><p>If <var title="">current</var> is not already in <var title="">results</var> and <var title="">current</var> does not
   50539    have an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute,
   50540    then: add all the child elements of <var title="">current</var> to
   50541    <var title="">pending</var>.</li>
   50542 
   50543    <li><p>If <var title="">current</var> is not already in <var title="">results</var>, then: add <var title="">current</var> to
   50544    <var title="">results</var>.</li>
   50545 
   50546    <li><p><i>End of loop</i>: If <var title="">pending</var> is not
   50547    empty, return to the step labeled <i>loop</i>.</li>
   50548 
   50549    <li><p>Return <var title="">results</var> and <var title="">errors</var>.</li>
   50550 
   50551   </ol><p>An <a href=#concept-item title=concept-item>item</a> is a <dfn id=top-level-microdata-items title="top-level microdata items">top-level microdata item</dfn> if
   50552   its element does not have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute.</p>
   50553 
   50554   <p>An <a href=#concept-item title=concept-item>item</a> is a <dfn id=used-microdata-items title="used
   50555   microdata items">used microdata item</dfn> if it is a <a href=#top-level-microdata-items title="top-level microdata items">top-level microdata item</a>,
   50556   or if it has an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code>
   50557   attribute and would be <a href=#the-properties-of-an-item title="the properties of an item">found
   50558   to be the property</a> of an <a href=#concept-item title=concept-item>item</a> that is itself a <a href=#used-microdata-items title="used
   50559   microdata items">used microdata item</a>.</p>
   50560 
   50561   <p>A document must not contain any <a href=#concept-item title=concept-item>items</a> that are not <a href=#used-microdata-items>used microdata
   50562   items</a>.</p>
   50563 
   50564   <p>A document must not contain any elements that have an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute that would not be
   50565   found to be a property of any of the <a href=#concept-item title=concept-item>items</a> in that document were their <a href=#the-properties-of-an-item title="the properties of an item">properties</a> all to be
   50566   determined.</p>
   50567 
   50568   <p>A document must not contain any <a href=#concept-item title=concept-item>items</a> for which <a href=#crawl-the-properties title="crawl the
   50569   properties">crawling the properties</a> of the element, with an
   50570   empty list as the value of <var title="">memory</var>, either fails
   50571   or returns an error count other than zero.</p>
   50572 
   50573   <p class=note>The algorithms in this section are especially
   50574   inefficient, in the interests of keeping them easy to
   50575   understand. Implementors are strongly encouraged to refactor and
   50576   optimize them in their user agents.</p>
   50577 
   50578   <div class=example>
   50579 
   50580    <p>In this example, a single license statement is applied to two
   50581    works, using <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> from the
   50582    items representing the works:</p>
   50583 
   50584    <pre>&lt;!DOCTYPE HTML&gt;
   50585 &lt;html&gt;
   50586  &lt;head&gt;
   50587   &lt;title&gt;Photo gallery&lt;/title&gt;
   50588  &lt;/head&gt;
   50589  &lt;body&gt;
   50590   &lt;h1&gt;My photos&lt;/h1&gt;
   50591   &lt;figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"&gt;
   50592    &lt;img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest."&gt;
   50593    &lt;figcaption itemprop="title"&gt;The house I found.&lt;/figcaption&gt;
   50594   &lt;/figure&gt;
   50595   &lt;figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"&gt;
   50596    &lt;img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside."&gt;
   50597    &lt;figcaption itemprop="title"&gt;The mailbox.&lt;/figcaption&gt;
   50598   &lt;/figure&gt;
   50599   &lt;footer&gt;
   50600    &lt;p id="licenses"&gt;All images licensed under the &lt;a itemprop="license"
   50601    href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT
   50602    license&lt;/a&gt;.&lt;/p&gt;
   50603   &lt;/footer&gt;
   50604  &lt;/body&gt;
   50605 &lt;/html&gt;</pre>
   50606 
   50607    <p>The above results in two items with the type "<code title="">http://n.whatwg.org/work</code>", one with:</p>
   50608 
   50609    <dl class=brief><dt>work
   50610     <dd><code title="">images/house.jpeg</code>
   50611     <dt>title
   50612     <dd>The house I found.
   50613     <dt>license
   50614     <dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
   50615    </dl><p>...and one with:</p>
   50616 
   50617    <dl class=brief><dt>work
   50618     <dd><code title="">images/mailbox.jpeg</code>
   50619     <dt>title
   50620     <dd>The mailbox.
   50621     <dt>license
   50622     <dd><code title="">http://www.opensource.org/licenses/mit-license.php</code>
   50623    </dl></div>
   50624 
   50625 
   50626 
   50627   <h3 id=microdata-dom-api><span class=secno>5.3 </span>Microdata DOM API</h3>
   50628 
   50629 
   50630   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-getItems><a href=#dom-document-getitems>getItems</a></code>( [ <var title="">types</var> ] )</dt>
   50631 
   50632    <dd>
   50633 
   50634     <p>Returns a <code><a href=#nodelist>NodeList</a></code> of the elements in the <code><a href=#document>Document</a></code> that create <a href=#concept-item title=concept-item>items</a>, that are not part of other <a href=#concept-item title=concept-item>items</a>, and that are of one of the types given in the argument, if any are listed.</p>
   50635 
   50636     <p>The <var title="">types</var> argument is interpreted as a space-separated list of types.</p>
   50637 
   50638    </dd>
   50639 
   50640    <dt><var title="">element</var> . <code title=dom-properties><a href=#dom-properties>properties</a></code></dt>
   50641 
   50642    <dd>
   50643 
   50644     <p>If the element has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute, returns an
   50645     <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object with all the element's
   50646     properties. Otherwise, an empty
   50647     <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> object.</p>
   50648 
   50649    </dd>
   50650 
   50651    <dt><var title="">element</var> . <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> [ = <var title="">value</var> ]</dt>
   50652 
   50653    <dd>
   50654 
   50655     <p>Returns the element's <a href=#concept-property-value title=concept-property-value>value</a>.</p>
   50656 
   50657     <p>Can be set, to change the element's <a href=#concept-property-value title=concept-property-value>value</a>. Setting the <a href=#concept-property-value title=concept-property-value>value</a> when the element has
   50658     no <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute or when
   50659     the element's value is an <a href=#concept-item title=concept-item>item</a>
   50660     throws an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>
   50661 
   50662    </dd>
   50663 
   50664   </dl><div class=impl>
   50665 
   50666   <p>The <dfn id=dom-document-getitems title=dom-document-getItems><code>document.getItems(<var title="">typeNames</var>)</code></dfn> method takes an optional
   50667   string that contains an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
   50668   space-separated tokens</a> representing types. When called, the
   50669   method must return a <a href=#live>live</a> <code><a href=#nodelist>NodeList</a></code> object
   50670   containing all the elements in the document, in <a href=#tree-order>tree
   50671   order</a>, that are each <a href=#top-level-microdata-items>top-level microdata items</a>
   50672   with a <a href=#item-type title="item type">type</a> equal to one of the types
   50673   specified in that argument, having obtained the types by <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the string on
   50674   spaces</a>. If there are no tokens specified in the argument, or
   50675   if the argument is missing, then the method must return a
   50676   <code><a href=#nodelist>NodeList</a></code> containing all the <a href=#top-level-microdata-items>top-level microdata
   50677   items</a> in the document.
   50678   When the method is invoked on a <code><a href=#document>Document</a></code> object again
   50679   with the same argument, the user agent may return the same object as
   50680   the object returned by the earlier call. In other cases, a new
   50681   <code><a href=#nodelist>NodeList</a></code> object must be returned.</p>
   50682 
   50683   <p>The <dfn id=dom-itemscope title=dom-itemScope><code>itemScope</code></dfn> IDL
   50684   attribute on <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a>
   50685   the <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> content attribute.
   50686   The <dfn id=dom-itemtype title=dom-itemType><code>itemType</code></dfn> IDL
   50687   attribute on <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a>
   50688   the <code title=attr-itemtype><a href=#attr-itemtype>itemtype</a></code> content attribute,
   50689   as if it was a regular string attribute, not a <a href=#url>URL</a>
   50690   string attribute.  The <dfn id=dom-itemid title=dom-itemId><code>itemId</code></dfn> IDL attribute on
   50691   <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemid><a href=#attr-itemid>itemid</a></code> content attribute. The <dfn id=dom-itemprop title=dom-itemProp><code>itemProp</code></dfn> IDL attribute on
   50692   <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> content attribute. The <dfn id=dom-itemref title=dom-itemRef><code>itemRef</code></dfn> IDL attribute on
   50693   <a href=#html-elements>HTML elements</a> must <a href=#reflect>reflect</a> the <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> content attribute.</p>
   50694 
   50695   <p>The <dfn id=dom-properties title=dom-properties><code>properties</code></dfn> IDL
   50696   attribute on <a href=#html-elements>HTML elements</a> must return an
   50697   <code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code> rooted at the
   50698   <code><a href=#document>Document</a></code> node, whose filter matches only elements that
   50699   have <a href=#property-names>property names</a> and are <a href=#the-properties-of-an-item title="the properties
   50700   of an item">the properties of the item</a> created by the element
   50701   on which the attribute was invoked, while that element is an <a href=#concept-item title=concept-item>item</a>, and matches nothing the rest of
   50702   the time.</p>
   50703 
   50704   <p>The <dfn id=dom-itemvalue title=dom-itemValue><code>itemValue</code></dfn> IDL
   50705   attribute's behavior depends on the element, as follows:</p>
   50706 
   50707   <dl><dt>If the element has no <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute</dt>
   50708 
   50709    <dd><p>The attribute must return null on getting and must throw an
   50710    <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception on setting.</p>
   50711 
   50712 
   50713    <dt>If the element has an <code title=attr-itemscope><a href=#attr-itemscope>itemscope</a></code> attribute</dt>
   50714 
   50715    <dd><p>The attribute must return the element itself on getting and
   50716    must throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception on
   50717    setting.</p>
   50718 
   50719 
   50720    <dt>If the element is a <code><a href=#meta>meta</a></code> element</dt>
   50721 
   50722    <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> content
   50723    attribute.</dd>
   50724 
   50725 
   50726    <dt>If the element is an <code><a href=#audio>audio</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   50727    <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-source-element>source</a></code>, or
   50728    <code><a href=#video>video</a></code> element</dt>
   50729 
   50730    <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">src</code> content attribute.</dd>
   50731 
   50732 
   50733    <dt>If the element is an <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, or
   50734    <code><a href=#the-link-element>link</a></code> element</dt>
   50735 
   50736    <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">href</code> content attribute.</dd>
   50737 
   50738 
   50739    <dt>If the element is an <code><a href=#the-object-element>object</a></code> element</dt>
   50740 
   50741    <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title="">data</code> content attribute.</dd>
   50742 
   50743 
   50744    <dt>If the element is a <code><a href=#the-time-element>time</a></code> element with a <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute</dt>
   50745 
   50746    <dd><p>The attribute must act as it would if it was <a href=#reflect title=reflect>reflecting</a> the element's <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content
   50747    attribute.</dd>
   50748 
   50749 
   50750    <dt>Otherwise</dt>
   50751 
   50752    <dd><p>The attribute must act the same as the element's
   50753    <code><a href=#textcontent>textContent</a></code> attribute.</dd>
   50754 
   50755   </dl><p>When the <code title=dom-itemValue><a href=#dom-itemvalue>itemValue</a></code> IDL
   50756   attribute is <a href=#reflect title=reflect>reflecting</a> a content
   50757   attribute or acting like the element's <code><a href=#textcontent>textContent</a></code>
   50758   attribute, the user agent must, on setting, convert the new value to
   50759   the IDL <code title="">DOMString</code> value before using it
   50760   according to the mappings described above.</p>
   50761 
   50762   </div>
   50763 
   50764   <div class=exmaple>
   50765 
   50766    <p>In this example, a script checks to see if a particular element
   50767    <var title="">element</var> is declaring a particular property, and
   50768    if it is, it increments a counter:</p>
   50769 
   50770    <pre>if (element.itemProp.contains('color'))
   50771   count += 1;</pre>
   50772 
   50773   </div>
   50774 
   50775   <div class=exmaple>
   50776 
   50777    <p>This script iterates over each of the values of an element's
   50778    <code title=attr-itemref><a href=#attr-itemref>itemref</a></code> attribute, calling a
   50779    function for each referenced element:</p>
   50780 
   50781    <pre>for (var index = 0; index &lt; element.itemRef.length; index += 1)
   50782   process(document.getElementById(element.itemRef[index]));</pre>
   50783 
   50784   </div>
   50785 
   50786 
   50787 
   50788 
   50789   <h3 id=mdvocabs><span class=secno>5.4 </span>Microdata vocabularies</h3>
   50790 
   50791 
   50792 
   50793   <h4 id=vcard><span class=secno>5.4.1 </span>vCard</h4>
   50794 
   50795 
   50796 
   50797   <p>An item with the <a href=#item-type>item type</a> <dfn id=md-vcard title=md-vcard><code>http://microformats.org/profile/hcard</code></dfn>
   50798   represents a person's or organization's contact information.</p>
   50799 
   50800   <p>This vocabulary <a href=#support-global-identifiers-for-items title="support global identifiers for
   50801   items">supports global identifiers for items</a>.</p>
   50802 
   50803   <p>The following are the type's <a href=#defined-property-name title="defined property
   50804   name">defined property names</a>. They are based on the
   50805   vocabulary defined in the vCard specification and its extensions,
   50806   where more information on how to interpret the values can be
   50807   found. <a href=#refsRFC2426>[RFC2426]</a> <a href=#refsRFC4770>[RFC4770]</a></p>
   50808 
   50809   <dl><dt><dfn id=md-vcard-fn title=md-vcard-fn><code>fn</code></dfn></dt>
   50810 
   50811    <dd>
   50812 
   50813     <p>Gives the formatted text corresponding to the name of the
   50814     person or organization.</p>
   50815 
   50816     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50817     text.</p>
   50818 
   50819     <p>Exactly one property with the name <code title=md-vcard-fn><a href=#md-vcard-fn>fn</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50820 
   50821    </dd>
   50822 
   50823 
   50824    <dt><dfn id=md-vcard-n title=md-vcard-n><code>n</code></dfn></dt>
   50825 
   50826    <dd>
   50827 
   50828     <p>Gives the structured name of the person or organization.</p>
   50829 
   50830     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50831     an <a href=#concept-item title=concept-item>item</a> with zero or more of
   50832     each of the <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code>, <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code>, <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code>, <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code>, and
   50833     <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code>
   50834     properties.</p>
   50835 
   50836     <p>Exactly one property with the name <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50837 
   50838    </dd>
   50839 
   50840    <dt><dfn id=md-vcard-n-family-name title=md-vcard-n-family-name><code>family-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>
   50841 
   50842    <dd>
   50843 
   50844     <p>Gives the family name of the person, or the full name of the
   50845     organization.</p>
   50846 
   50847     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50848     text.</p>
   50849 
   50850     <p>Any number of properties with the name <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code> may be present
   50851     within the <a href=#concept-item title=concept-item>item</a> that forms the
   50852     <a href=#concept-property-value title=concept-property-value>value</a> of the <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50853 
   50854    </dd>
   50855 
   50856    <dt><dfn id=md-vcard-n-given-name title=md-vcard-n-given-name><code>given-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>
   50857 
   50858    <dd>
   50859 
   50860     <p>Gives the given-name of the person.</p>
   50861 
   50862     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50863     text.</p>
   50864 
   50865     <p>Any number of properties with the name <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code> may be present
   50866     within the <a href=#concept-item title=concept-item>item</a> that forms the
   50867     <a href=#concept-property-value title=concept-property-value>value</a> of the <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50868 
   50869    </dd>
   50870 
   50871    <dt><dfn id=md-vcard-n-additional-name title=md-vcard-n-additional-name><code>additional-name</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>
   50872 
   50873    <dd>
   50874 
   50875     <p>Gives the any additional names of the person.</p>
   50876 
   50877     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50878     text.</p>
   50879 
   50880     <p>Any number of properties with the name <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code> may be
   50881     present within the <a href=#concept-item title=concept-item>item</a> that
   50882     forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
   50883     <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50884 
   50885    </dd>
   50886 
   50887    <dt><dfn id=md-vcard-n-honorific-prefix title=md-vcard-n-honorific-prefix><code>honorific-prefix</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>
   50888 
   50889    <dd>
   50890 
   50891     <p>Gives the honorific prefix of the person.</p>
   50892 
   50893     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50894     text.</p>
   50895 
   50896     <p>Any number of properties with the name <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code> may be
   50897     present within the <a href=#concept-item title=concept-item>item</a> that
   50898     forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
   50899     <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50900 
   50901    </dd>
   50902 
   50903    <dt><dfn id=md-vcard-n-honorific-suffix title=md-vcard-n-honorific-suffix><code>honorific-suffix</code></dfn> (inside <code title=md-vcard-n><a href=#md-vcard-n>n</a></code>)</dt>
   50904 
   50905    <dd>
   50906 
   50907     <p>Gives the honorific suffix of the person.</p>
   50908 
   50909     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50910     text.</p>
   50911 
   50912     <p>Any number of properties with the name <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code> may be
   50913     present within the <a href=#concept-item title=concept-item>item</a> that
   50914     forms the <a href=#concept-property-value title=concept-property-value>value</a> of the
   50915     <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50916 
   50917    </dd>
   50918 
   50919 
   50920    <dt><dfn id=md-vcard-nickname title=md-vcard-nickname><code>nickname</code></dfn></dt>
   50921 
   50922    <dd>
   50923 
   50924     <p>Gives the nickname of the person or organization.</p>
   50925 
   50926     <!-- copied from vCard -->
   50927     <p class=note>The nickname is the descriptive name given instead
   50928     of or in addition to the one belonging to a person, place, or
   50929     thing. It can also be used to specify a familiar form of a proper
   50930     name specified by the <code title=md-vcard-fn><a href=#md-vcard-fn>fn</a></code> or <code title=md-vcard-n><a href=#md-vcard-n>n</a></code> properties.</p>
   50931 
   50932     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50933     text.</p>
   50934 
   50935     <p>Any number of properties with the name <code title=md-vcard-nickname><a href=#md-vcard-nickname>nickname</a></code> may be present within
   50936     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50937 
   50938    </dd>
   50939 
   50940 
   50941    <dt><dfn id=md-vcard-photo title=md-vcard-photo><code>photo</code></dfn></dt>
   50942 
   50943    <dd>
   50944 
   50945     <p>Gives a photograph of the person or organization.</p>
   50946 
   50947     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50948     an <a href=#absolute-url>absolute URL</a>.</p>
   50949 
   50950     <p>Any number of properties with the name <code title=md-vcard-photo><a href=#md-vcard-photo>photo</a></code> may be present within each
   50951     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50952 
   50953    </dd>
   50954 
   50955 
   50956    <dt><dfn id=md-vcard-bday title=md-vcard-bday><code>bday</code></dfn></dt>
   50957 
   50958    <dd>
   50959 
   50960     <p>Gives the birth date of the person or organization.</p>
   50961 
   50962     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be a
   50963     <a href=#valid-date-string>valid date string</a>.</p>
   50964 
   50965     <p>A single property with the name <code title=md-vcard-bday><a href=#md-vcard-bday>bday</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50966 
   50967    </dd>
   50968 
   50969 
   50970    <dt><dfn id=md-vcard-adr title=md-vcard-adr><code>adr</code></dfn></dt>
   50971 
   50972    <dd>
   50973 
   50974     <p>Gives the delivery address of the person or organization.</p>
   50975 
   50976     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   50977     an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code>, <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code>, <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code>, and
   50978     <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code>
   50979     properties, and optionally a <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> property, optionally
   50980     a <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> property,
   50981     optionally a <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> property, and
   50982     optionally a <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code>
   50983     property.</p>
   50984 
   50985     <p>If no <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> properties
   50986     are present within an <a href=#concept-item title=concept-item>item</a> that
   50987     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   50988     <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, then the <a href=#address-type-strings>address type
   50989     strings</a> <code title=mv-vcard-type-adr-intl>intl</code>,
   50990     <code title=mv-vcard-type-adr-postal>postal</code>, <code title=mv-vcard-type-adr-parcel>parcel</code>, and <code title=mv-vcard-type-adr-work>work</code> are implied.</p>
   50991 
   50992     <p>Any number of properties with the name <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   50993 
   50994    </dd>
   50995 
   50996    <dt><dfn id=md-vcard-adr-type title=md-vcard-adr-type><code>type</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   50997 
   50998    <dd>
   50999 
   51000     <p>Gives the type of delivery address.</p>
   51001 
   51002     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51003     text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
   51004     is equal to one of the <a href=#address-type-strings>address type strings</a>.</p>
   51005 
   51006     <p>Within each <a href=#concept-item title=concept-item>item</a> with the
   51007     type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
   51008     than one <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> property whose value is
   51009     <code title=md-vcard-type-adr-pref><a href=#md-vcard-type-adr-pref>pref</a></code>.</p>
   51010 
   51011     <p>Any number of properties with the name <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> may be present within the
   51012     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> property per distinct
   51013     value.</p>
   51014 
   51015    </dd>
   51016 
   51017    <dt><dfn id=md-vcard-adr-post-office-box title=md-vcard-adr-post-office-box><code>post-office-box</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51018 
   51019    <dd>
   51020 
   51021     <p>Gives the post office box component of the delivery address of
   51022     the person or organization.</p>
   51023 
   51024     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51025     text.</p>
   51026 
   51027     <p>Any number of properties with the name <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code> may be
   51028     present within the <a href=#concept-item title=concept-item>item</a> that
   51029     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51030     <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51031 
   51032    </dd>
   51033 
   51034    <dt><dfn id=md-vcard-adr-extended-address title=md-vcard-adr-extended-address><code>extended-address</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51035 
   51036    <dd>
   51037 
   51038     <p>Gives an additional component of the delivery address of the
   51039     person or organization.</p>
   51040 
   51041     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51042     text.</p>
   51043 
   51044     <p>Any number of properties with the name <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code> may
   51045     be present within the <a href=#concept-item title=concept-item>item</a> that
   51046     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51047     <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51048 
   51049    </dd>
   51050 
   51051    <dt><dfn id=md-vcard-adr-street-address title=md-vcard-adr-street-address><code>street-address</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51052 
   51053    <dd>
   51054 
   51055     <p>Gives the street address component of the delivery address of
   51056     the person or organization.</p>
   51057 
   51058     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51059     text.</p>
   51060 
   51061     <p>Any number of properties with the name <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code> may be
   51062     present within the <a href=#concept-item title=concept-item>item</a> that
   51063     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51064     <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51065 
   51066    </dd>
   51067 
   51068    <dt><dfn id=md-vcard-adr-locality title=md-vcard-adr-locality><code>locality</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51069 
   51070    <dd>
   51071 
   51072     <p>Gives the locality component (e.g. city) of the delivery
   51073     address of the person or organization.</p>
   51074 
   51075     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51076     text.</p>
   51077 
   51078     <p>A single property with the name <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> may be present
   51079     within the <a href=#concept-item title=concept-item>item</a> that forms the
   51080     <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51081 
   51082    </dd>
   51083 
   51084    <dt><dfn id=md-vcard-adr-region title=md-vcard-adr-region><code>region</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51085 
   51086    <dd>
   51087 
   51088     <p>Gives the region component (e.g. state or province) of the
   51089     delivery address of the person or organization.</p>
   51090 
   51091     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51092     text.</p>
   51093 
   51094     <p>A single property with the name <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> may be present within
   51095     the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51096 
   51097    </dd>
   51098 
   51099    <dt><dfn id=md-vcard-adr-postal-code title=md-vcard-adr-postal-code><code>postal-code</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51100 
   51101    <dd>
   51102 
   51103     <p>Gives the postal code component of the delivery address of the
   51104     person or organization.</p>
   51105 
   51106     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51107     text.</p>
   51108 
   51109     <p>A single property with the name <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> may be present
   51110     within the <a href=#concept-item title=concept-item>item</a> that forms the
   51111     <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51112 
   51113    </dd>
   51114 
   51115    <dt><dfn id=md-vcard-adr-country-name title=md-vcard-adr-country-name><code>country-name</code></dfn> (inside <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code>)</dt>
   51116 
   51117    <dd>
   51118 
   51119     <p>Gives the country name component of the delivery address of the
   51120     person or organization.</p>
   51121 
   51122     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51123     text.</p>
   51124 
   51125     <p>A single property with the name <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code> may be
   51126     present within the <a href=#concept-item title=concept-item>item</a> that
   51127     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51128     <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51129 
   51130    </dd>
   51131 
   51132 
   51133    <dt><dfn id=md-vcard-label title=md-vcard-label><code>label</code></dfn></dt>
   51134 
   51135    <dd>
   51136 
   51137     <p>Gives the formatted text corresponding to the delivery address
   51138     of the person or organization.</p>
   51139 
   51140     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51141     either text or an <a href=#concept-item title=concept-item>item</a> with zero
   51142     or more <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> properties
   51143     and exactly one <code title=md-vcard-label-value><a href=#md-vcard-label-value>value</a></code>
   51144     property.</p>
   51145 
   51146     <p>If no <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> properties
   51147     are present within an <a href=#concept-item title=concept-item>item</a> that
   51148     forms the <a href=#concept-property-value title=concept-property-value>value</a> of a
   51149     <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property is text, then the
   51150     <a href=#address-type-strings>address type strings</a> <code title=mv-vcard-type-adr-intl>intl</code>, <code title=mv-vcard-type-adr-postal>postal</code>, <code title=mv-vcard-type-adr-parcel>parcel</code>, and <code title=mv-vcard-type-adr-work>work</code> are implied.</p>
   51151 
   51152     <p>Any number of properties with the name <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> may be present within each
   51153     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51154 
   51155    </dd>
   51156 
   51157    <dt><dfn id=md-vcard-label-type title=md-vcard-label-type><code>type</code></dfn> (inside <code title=md-vcard-label><a href=#md-vcard-label>label</a></code>)</dt>
   51158 
   51159    <dd>
   51160 
   51161     <p>Gives the type of delivery address.</p>
   51162 
   51163     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51164     text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
   51165     is equal to one of the <a href=#address-type-strings>address type strings</a>.</p>
   51166 
   51167     <p>Within each <a href=#concept-item title=concept-item>item</a> with the
   51168     type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
   51169     than one <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> property whose value is
   51170     <code title=md-vcard-type-adr-pref><a href=#md-vcard-type-adr-pref>pref</a></code>.</p>
   51171 
   51172     <p>Any number of properties with the name <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> may be present within the
   51173     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-label-type><a href=#md-vcard-label-type>type</a></code> property per distinct
   51174     value.</p>
   51175 
   51176    </dd>
   51177 
   51178    <dt><dfn id=md-vcard-label-value title=md-vcard-label-value><code>value</code></dfn> (inside <code title=md-vcard-label><a href=#md-vcard-label>label</a></code>)</dt>
   51179 
   51180    <dd>
   51181 
   51182     <p>Gives the actual formatted text corresponding to the delivery
   51183     address of the person or organization.</p>
   51184 
   51185     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51186     text.</p>
   51187 
   51188     <p>Exactly one property with the name <code title=md-vcard-label-value><a href=#md-vcard-label-value>value</a></code> must be present within
   51189     the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-label><a href=#md-vcard-label>label</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51190 
   51191    </dd>
   51192 
   51193 
   51194    <dt><dfn id=md-vcard-tel title=md-vcard-tel><code>tel</code></dfn></dt>
   51195 
   51196    <dd>
   51197 
   51198     <p>Gives the telephone number of the person or organization.</p>
   51199 
   51200     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51201     either text that can be interpreted as a telephone number as
   51202     defined in the CCITT specifications E.163 and X.121, or an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> properties and exactly one
   51203     <code title=md-vcard-tel-value><a href=#md-vcard-tel-value>value</a></code> property. <a href=#refsE163>[E163]</a> <a href=#refsX121>[X121]</a></p>
   51204 
   51205     <p>If no <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> properties
   51206     are present within an <a href=#concept-item title=concept-item>item</a> that
   51207     forms the <a href=#concept-property-value title=concept-property-value>value</a> of a
   51208     <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property is text, then the <a href=#telephone-type-strings title="telephone type strings">telephone type string</a> <code title=mv-vcard-type-tel-voice>voice</code> is implied.</p>
   51209 
   51210     <p>Any number of properties with the name <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> may be present within each
   51211     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51212 
   51213    </dd>
   51214 
   51215    <dt><dfn id=md-vcard-tel-type title=md-vcard-tel-type><code>type</code></dfn> (inside <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code>)</dt>
   51216 
   51217    <dd>
   51218 
   51219     <p>Gives the type of telephone number.</p>
   51220 
   51221     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51222     text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
   51223     is equal to one of the <a href=#telephone-type-strings>telephone type strings</a>.</p>
   51224 
   51225     <p>Within each <a href=#concept-item title=concept-item>item</a> with the
   51226     type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
   51227     than one <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> property whose value is
   51228     <code title=md-vcard-type-tel-pref><a href=#md-vcard-type-tel-pref>pref</a></code>.</p>
   51229 
   51230     <p>Any number of properties with the name <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> may be present within the
   51231     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-tel-type><a href=#md-vcard-tel-type>type</a></code> property per distinct
   51232     value.</p>
   51233 
   51234    </dd>
   51235 
   51236    <dt><dfn id=md-vcard-tel-value title=md-vcard-tel-value><code>value</code></dfn> (inside <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code>)</dt>
   51237 
   51238    <dd>
   51239 
   51240     <p>Gives the actual telephone number of the person or
   51241     organization.</p>
   51242 
   51243     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51244     text that can be interpreted as a telephone number as defined in
   51245     the CCITT specifications E.163 and X.121. <a href=#refsE163>[E163]</a> <a href=#refsX121>[X121]</a></p>
   51246 
   51247     <p>Exactly one property with the name <code title=md-vcard-tel-value><a href=#md-vcard-tel-value>value</a></code> must be present within the
   51248     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of a <code title=md-vcard-tel><a href=#md-vcard-tel>tel</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51249 
   51250    </dd>
   51251 
   51252 
   51253    <dt><dfn id=md-vcard-email title=md-vcard-email><code>email</code></dfn></dt>
   51254 
   51255    <dd>
   51256 
   51257     <p>Gives the e-mail address of the person or organization.</p>
   51258 
   51259     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51260     either text or an <a href=#concept-item title=concept-item>item</a> with zero
   51261     or more <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> properties
   51262     and exactly one <code title=md-vcard-email-value><a href=#md-vcard-email-value>value</a></code>
   51263     property.</p>
   51264 
   51265     <p>If no <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> properties
   51266     are present within an <a href=#concept-item title=concept-item>item</a> that
   51267     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51268     <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property is text, then the
   51269     <a href=#e-mail-type-strings title="e-mail type strings">e-mail type string</a> <code title=mv-vcard-type-email-internet>internet</code> is
   51270     implied.</p>
   51271 
   51272     <p>Any number of properties with the name <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> may be present within each
   51273     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51274 
   51275    </dd>
   51276 
   51277    <dt><dfn id=md-vcard-email-type title=md-vcard-email-type><code>type</code></dfn> (inside <code title=md-vcard-email><a href=#md-vcard-email>email</a></code>)</dt>
   51278 
   51279    <dd>
   51280 
   51281     <p>Gives the type of e-mail address.</p>
   51282 
   51283     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51284     text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
   51285     is equal to one of the <a href=#e-mail-type-strings>e-mail type strings</a>.</p>
   51286 
   51287     <p>Within each <a href=#concept-item title=concept-item>item</a> with the
   51288     type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
   51289     than one <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> property whose value is
   51290     <code title=md-vcard-type-email-pref><a href=#md-vcard-type-email-pref>pref</a></code>.</p>
   51291 
   51292     <p>Any number of properties with the name <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> may be present within the
   51293     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-email-type><a href=#md-vcard-email-type>type</a></code> property per distinct
   51294     value.</p>
   51295 
   51296    </dd>
   51297 
   51298    <dt><dfn id=md-vcard-email-value title=md-vcard-email-value><code>value</code></dfn> (inside <code title=md-vcard-email><a href=#md-vcard-email>email</a></code>)</dt>
   51299 
   51300    <dd>
   51301 
   51302     <p>Gives the actual e-mail address of the person or
   51303     organization.</p>
   51304 
   51305     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51306     text.</p>
   51307 
   51308     <p>Exactly one property with the name <code title=md-vcard-email-value><a href=#md-vcard-email-value>value</a></code> must be present within
   51309     the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-email><a href=#md-vcard-email>email</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51310 
   51311    </dd>
   51312 
   51313 
   51314    <dt><dfn id=md-vcard-mailer title=md-vcard-mailer><code>mailer</code></dfn></dt>
   51315 
   51316    <dd>
   51317 
   51318     <p>Gives the name of the e-mail software used by the person or
   51319     organization.</p>
   51320 
   51321     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51322     text.</p>
   51323 
   51324     <p>Any number of properties with the name <code title=md-vcard-mailer><a href=#md-vcard-mailer>mailer</a></code> may be present within each
   51325     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51326 
   51327    </dd>
   51328 
   51329 
   51330    <dt><dfn id=md-vcard-tz title=md-vcard-tz><code>tz</code></dfn></dt>
   51331 
   51332    <dd>
   51333 
   51334     <p>Gives the time zone of the person or organization.</p>
   51335 
   51336     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51337     text and must match the following syntax:</p>
   51338 
   51339     <ol><li>Either a U+002B PLUS SIGN character (+) or a U+002D
   51340      HYPHEN-MINUS character (-).</li>
   51341 
   51342      <li>A <a href=#valid-non-negative-integer>valid non-negative integer</a> that is exactly two
   51343      digits long and that represents a number in the range
   51344      00..23.</li>
   51345 
   51346      <li>A U+003A COLON character (:).</li>
   51347 
   51348      <li>A <a href=#valid-non-negative-integer>valid non-negative integer</a> that is exactly two
   51349      digits long and that represents a number in the range
   51350      00..59.</li>
   51351 
   51352     </ol><p>Any number of properties with the name <code title=md-vcard-tz><a href=#md-vcard-tz>tz</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51353 
   51354    </dd>
   51355 
   51356 
   51357    <dt><dfn id=md-vcard-geo title=md-vcard-geo><code>geo</code></dfn></dt>
   51358 
   51359    <dd>
   51360 
   51361     <p>Gives the geographical position of the person or
   51362     organization.</p>
   51363 
   51364     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51365     text and must match the following syntax:</p>
   51366 
   51367     <ol><li>Optionally, either a U+002B PLUS SIGN character (+) or a
   51368      U+002D HYPHEN-MINUS character (-).</li>
   51369 
   51370      <li>One or more digits in the range U+0030 DIGIT ZERO (0) to
   51371      U+0039 DIGIT NINE (9).</li>
   51372 
   51373      <li>Optionally*, a U+002E FULL STOP character (.) followed by one
   51374      or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   51375      NINE (9).</li>
   51376 
   51377      <li>A U+003B SEMICOLON character (;).</li>
   51378 
   51379      <li>Optionally, either a U+002B PLUS SIGN character (+) or a
   51380      U+002D HYPHEN-MINUS character (-).</li>
   51381 
   51382      <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
   51383      DIGIT NINE (9).</li>
   51384 
   51385      <li>Optionally*, a U+002E FULL STOP character (.) followed by one
   51386      or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   51387      NINE (9).</li>
   51388 
   51389     </ol><p>The optional components marked with an asterisk (*) should be
   51390     included, and should have six digits each.</p>
   51391 
   51392     <!-- copied from vCard -->
   51393     <p class=note>The value specifies latitude and longitude, in
   51394     that order (i.e., "LAT LON" ordering), in decimal degrees. The
   51395     longitude represents the location east and west of the prime
   51396     meridian as a positive or negative real number, respectively.  The
   51397     latitude represents the location north and south of the equator as
   51398     a positive or negative real number, respectively.</p>
   51399 
   51400     <p>Any number of properties with the name <code title=md-vcard-geo><a href=#md-vcard-geo>geo</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51401 
   51402    </dd>
   51403 
   51404 
   51405    <dt><dfn id=md-vcard-title title=md-vcard-title><code>title</code></dfn></dt>
   51406 
   51407    <dd>
   51408 
   51409     <p>Gives the job title, functional position or function of the
   51410     person or organization.</p>
   51411 
   51412     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51413     text.</p>
   51414 
   51415     <p>Any number of properties with the name <code title=md-vcard-title><a href=#md-vcard-title>title</a></code> may be present within each
   51416     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51417 
   51418    </dd>
   51419 
   51420 
   51421    <dt><dfn id=md-vcard-role title=md-vcard-role><code>role</code></dfn></dt>
   51422 
   51423    <dd>
   51424 
   51425     <p>Gives the role, occupation, or business category of the person
   51426     or organization.</p>
   51427 
   51428     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51429     text.</p>
   51430 
   51431     <p>Any number of properties with the name <code title=md-vcard-role><a href=#md-vcard-role>role</a></code> may be present within each
   51432     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51433 
   51434    </dd>
   51435 
   51436 
   51437    <dt><dfn id=md-vcard-logo title=md-vcard-logo><code>logo</code></dfn></dt>
   51438 
   51439    <dd>
   51440 
   51441     <p>Gives the logo of the person or organization.</p>
   51442 
   51443     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51444     an <a href=#absolute-url>absolute URL</a>.</p>
   51445 
   51446     <p>Any number of properties with the name <code title=md-vcard-logo><a href=#md-vcard-logo>logo</a></code> may be present within each
   51447     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51448 
   51449    </dd>
   51450 
   51451 
   51452    <dt><dfn id=md-vcard-agent title=md-vcard-agent><code>agent</code></dfn></dt>
   51453 
   51454    <dd>
   51455 
   51456     <p>Gives the contact information of another person who will act on
   51457     behalf of the person or organization.</p>
   51458 
   51459     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51460     either an <a href=#concept-item title=concept-item>item</a> with the type
   51461     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or an <a href=#absolute-url>absolute
   51462     URL</a>, or text.</p>
   51463 
   51464     <p>Any number of properties with the name <code title=md-vcard-agent><a href=#md-vcard-agent>agent</a></code> may be present within each
   51465     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51466 
   51467    </dd>
   51468 
   51469 
   51470    <dt><dfn id=md-vcard-org title=md-vcard-org><code>org</code></dfn></dt>
   51471 
   51472    <dd>
   51473 
   51474     <p>Gives the name and units of the organization.</p>
   51475 
   51476     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51477     either text or an <a href=#concept-item title=concept-item>item</a> with one
   51478     <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
   51479     property and zero or more <code title=md-vcard-n-organization-unit>organization-unit</code>
   51480     properties.</p>
   51481 
   51482     <p>Any number of properties with the name <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51483 
   51484    </dd>
   51485 
   51486    <dt><dfn id=md-vcard-org-organization-name title=md-vcard-org-organization-name><code>organization-name</code></dfn> (inside <code title=md-vcard-org><a href=#md-vcard-org>org</a></code>)</dt>
   51487 
   51488    <dd>
   51489 
   51490     <p>Gives the name of the organization.</p>
   51491 
   51492     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51493     text.</p>
   51494 
   51495     <p>Exactly one property with the name <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
   51496     must be present within the <a href=#concept-item title=concept-item>item</a>
   51497     that forms the <a href=#concept-property-value title=concept-property-value>value</a>
   51498     of an <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51499 
   51500    </dd>
   51501 
   51502    <dt><dfn id=md-vcard-org-organization-unit title=md-vcard-org-organization-unit><code>organization-unit</code></dfn> (inside <code title=md-vcard-org><a href=#md-vcard-org>org</a></code>)</dt>
   51503 
   51504    <dd>
   51505 
   51506     <p>Gives the name of the organization unit.</p>
   51507 
   51508     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51509     text.</p>
   51510 
   51511     <p>Any number of properties with the name <code title=md-vcard-org-organization-unit><a href=#md-vcard-org-organization-unit>organization-unit</a></code>
   51512     may be present within the <a href=#concept-item title=concept-item>item</a>
   51513     that forms the <a href=#concept-property-value title=concept-property-value>value</a>
   51514     of the <code title=md-vcard-org><a href=#md-vcard-org>org</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51515 
   51516    </dd>
   51517 
   51518 
   51519    <dt><dfn id=md-vcard-categories title=md-vcard-categories><code>categories</code></dfn></dt>
   51520 
   51521    <dd>
   51522 
   51523     <p>Gives the name of a category or tag that the person or
   51524     organization could be classified as.</p>
   51525 
   51526     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51527     text.</p>
   51528 
   51529     <p>Any number of properties with the name <code title=md-vcard-categories><a href=#md-vcard-categories>categories</a></code> may be present
   51530     within each <a href=#concept-item title=concept-item>item</a> with the type
   51531     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51532 
   51533    </dd>
   51534 
   51535 
   51536    <dt><dfn id=md-vcard-note title=md-vcard-note><code>note</code></dfn></dt>
   51537 
   51538    <dd>
   51539 
   51540     <p>Gives supplemental information or a comment about the person or
   51541     organization.</p>
   51542 
   51543     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51544     text.</p>
   51545 
   51546     <p>Any number of properties with the name <code title=md-vcard-note><a href=#md-vcard-note>note</a></code> may be present
   51547     within each <a href=#concept-item title=concept-item>item</a> with the type
   51548     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51549 
   51550    </dd>
   51551 
   51552 
   51553    <!-- PRODID not included -->
   51554 
   51555 
   51556    <dt><dfn id=md-vcard-rev title=md-vcard-rev><code>rev</code></dfn></dt>
   51557 
   51558    <dd>
   51559 
   51560     <p>Gives the revision date and time of the contact
   51561     information.</p>
   51562 
   51563     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51564     text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>
   51565 
   51566     <!-- copied from vCard -->
   51567     <p class=note>The value distinguishes the current revision of
   51568     the information for other renditions of the information.</p>
   51569 
   51570     <p>Any number of properties with the name <code title=md-vcard-rev><a href=#md-vcard-rev>rev</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51571 
   51572    </dd>
   51573 
   51574 
   51575    <dt><dfn id=md-vcard-sort-string title=md-vcard-sort-string><code>sort-string</code></dfn></dt>
   51576 
   51577    <dd>
   51578 
   51579     <p>Gives the string to be used for sorting the person or
   51580     organization.</p>
   51581 
   51582     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51583     text.</p>
   51584 
   51585     <p>Any number of properties with the name <code title=md-vcard-sort-string><a href=#md-vcard-sort-string>sort-string</a></code> may be present
   51586     within each <a href=#concept-item title=concept-item>item</a> with the type
   51587     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51588 
   51589    </dd>
   51590 
   51591 
   51592    <dt><dfn id=md-vcard-sound title=md-vcard-sound><code>sound</code></dfn></dt>
   51593 
   51594    <dd>
   51595 
   51596     <p>Gives a sound file relating to the person or organization.</p>
   51597 
   51598     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51599     an <a href=#absolute-url>absolute URL</a>.</p>
   51600 
   51601     <p>Any number of properties with the name <code title=md-vcard-sound><a href=#md-vcard-sound>sound</a></code> may be present within each
   51602     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51603 
   51604    </dd>
   51605 
   51606 
   51607    <!-- UID not included - use "itemid" -->
   51608 
   51609 
   51610    <dt><dfn id=md-vcard-url title=md-vcard-url><code>url</code></dfn></dt>
   51611 
   51612    <dd>
   51613 
   51614     <p>Gives a <a href=#url>URL</a> relating to the person or
   51615     organization.</p>
   51616 
   51617     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51618     an <a href=#absolute-url>absolute URL</a>.</p>
   51619 
   51620     <p>Any number of properties with the name <code title=md-vcard-url><a href=#md-vcard-url>url</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51621 
   51622    </dd>
   51623 
   51624 
   51625    <!-- VERSION not included - always 3.0 -->
   51626 
   51627 
   51628    <dt><dfn id=md-vcard-class title=md-vcard-class><code>class</code></dfn></dt>
   51629 
   51630    <dd>
   51631 
   51632     <p>Gives the access classification of the information regarding
   51633     the person or organization.</p>
   51634 
   51635     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51636     text with one of the following values:</p>
   51637 
   51638     <ul class=brief><li><code title="">public</code></li>
   51639      <li><code title="">private</code></li>
   51640      <li><code title="">confidential</code></li>
   51641     </ul><p class=warning>This is merely advisory and cannot be
   51642     considered a confidentiality measure.</p>
   51643 
   51644     <p>Any number of properties with the name <code title=md-vcard-class><a href=#md-vcard-class>class</a></code> may be present
   51645     within each <a href=#concept-item title=concept-item>item</a> with the type
   51646     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51647 
   51648    </dd>
   51649 
   51650 
   51651    <!-- KEY not included - no way to include binary data at this time -->
   51652 
   51653 
   51654    <!-- IMPP is from RFC4770 -->
   51655 
   51656    <dt><dfn id=md-vcard-impp title=md-vcard-impp><code>impp</code></dfn></dt>
   51657 
   51658    <dd>
   51659 
   51660     <p>Gives a <a href=#url>URL</a> for instant messaging and presence
   51661     protocol communications with the person or organization.</p>
   51662 
   51663     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51664     either an <a href=#absolute-url>absolute URL</a> or an <a href=#concept-item title=concept-item>item</a> with zero or more <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> properties and exactly one
   51665     <code title=md-vcard-impp-value><a href=#md-vcard-impp-value>value</a></code> property.</p>
   51666 
   51667     <p>If no <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> properties
   51668     are present within an <a href=#concept-item title=concept-item>item</a> that
   51669     forms the <a href=#concept-property-value title=concept-property-value>value</a> of an
   51670     <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or if the <a href=#concept-property-value title=concept-property-value>value</a> of such an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property is an <a href=#absolute-url>absolute
   51671     URL</a>, then no <a href=#impp-type-strings>IMPP type strings</a> are
   51672     implied.</p>
   51673 
   51674     <p>Any number of properties with the name <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> may be present within each
   51675     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51676 
   51677    </dd>
   51678 
   51679    <dt><dfn id=md-vcard-impp-type title=md-vcard-impp-type><code>type</code></dfn> (inside <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code>)</dt>
   51680 
   51681    <dd>
   51682 
   51683     <p>Gives the intended use of the IMPP <a href=#url>URL</a>.</p>
   51684 
   51685     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51686     text that, when compared in a <a href=#case-sensitive>case-sensitive</a> manner,
   51687     is equal to one of the <a href=#impp-type-strings>IMPP type strings</a>.</p>
   51688 
   51689     <p>Within each <a href=#concept-item title=concept-item>item</a> with the
   51690     type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, there must be no more
   51691     than one <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property <a href=#concept-item title=concept-item>item</a> with a <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> property whose value is
   51692     <code title=md-vcard-type-impp-pref><a href=#md-vcard-type-impp-pref>pref</a></code>.</p>
   51693 
   51694     <p>Any number of properties with the name <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> may be present within the
   51695     <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, but within each such <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property <a href=#concept-item title=concept-item>item</a> there must only be one <code title=md-vcard-impp-type><a href=#md-vcard-impp-type>type</a></code> property per distinct
   51696     value.</p>
   51697 
   51698    </dd>
   51699 
   51700    <dt><dfn id=md-vcard-impp-value title=md-vcard-impp-value><code>value</code></dfn> (inside <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code>)</dt>
   51701 
   51702    <dd>
   51703 
   51704     <p>Gives the actual <a href=#url>URL</a> for instant messaging and
   51705     presence protocol communications with the person or
   51706     organization.</p>
   51707 
   51708     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   51709     an <a href=#absolute-url>absolute URL</a>.</p>
   51710 
   51711     <p>Exactly one property with the name <code title=md-vcard-impp-value><a href=#md-vcard-impp-value>value</a></code> must be present within
   51712     the <a href=#concept-item title=concept-item>item</a> that forms the <a href=#concept-property-value title=concept-property-value>value</a> of an <code title=md-vcard-impp><a href=#md-vcard-impp>impp</a></code> property of an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</p>
   51713 
   51714    </dd>
   51715 
   51716 
   51717   </dl><p>The <dfn id=address-type-strings>address type strings</dfn> are:</p>
   51718 
   51719   <dl><dt><dfn id=md-vcard-type-adr-dom title=md-vcard-type-adr-dom><code>dom</code></dfn></dt>
   51720    <dd>
   51721     <p>Indicates a domestic delivery address.</p>
   51722    </dd>
   51723 
   51724    <dt><dfn id=md-vcard-type-adr-intl title=md-vcard-type-adr-intl><code>intl</code></dfn></dt>
   51725    <dd>
   51726     <p>Indicates an international delivery address.</p>
   51727    </dd>
   51728 
   51729    <dt><dfn id=md-vcard-type-adr-postal title=md-vcard-type-adr-postal><code>postal</code></dfn></dt>
   51730    <dd>
   51731     <p>Indicates a postal delivery address.</p>
   51732    </dd>
   51733 
   51734    <dt><dfn id=md-vcard-type-adr-parcel title=md-vcard-type-adr-parcel><code>parcel</code></dfn></dt>
   51735    <dd>
   51736     <p>Indicates a parcel delivery address.</p>
   51737    </dd>
   51738 
   51739    <dt><dfn id=md-vcard-type-adr-home title=md-vcard-type-adr-home><code>home</code></dfn></dt>
   51740    <dd>
   51741     <p>Indicates a residential delivery address.</p>
   51742    </dd>
   51743 
   51744    <dt><dfn id=md-vcard-type-adr-work title=md-vcard-type-adr-work><code>work</code></dfn></dt>
   51745    <dd>
   51746     <p>Indicates a delivery address for a place of work.</p>
   51747    </dd>
   51748 
   51749    <dt><dfn id=md-vcard-type-adr-pref title=md-vcard-type-adr-pref><code>pref</code></dfn></dt>
   51750    <dd>
   51751 
   51752     <p>Indicates the preferred delivery address when multiple
   51753     addresses are specified.</p>
   51754 
   51755    </dd>
   51756 
   51757   </dl><p>The <dfn id=telephone-type-strings>telephone type strings</dfn> are:</p>
   51758 
   51759   <dl><dt><dfn id=md-vcard-type-tel-home title=md-vcard-type-tel-home><code>home</code></dfn></dt>
   51760    <dd>
   51761     <p>Indicates a residential number.</p>
   51762    </dd>
   51763 
   51764    <dt><dfn id=md-vcard-type-tel-msg title=md-vcard-type-tel-msg><code>msg</code></dfn></dt>
   51765    <dd>
   51766     <p>Indicates a telephone number with voice messaging support.</p>
   51767    </dd>
   51768 
   51769    <dt><dfn id=md-vcard-type-tel-work title=md-vcard-type-tel-work><code>work</code></dfn></dt>
   51770    <dd>
   51771     <p>Indicates a telephone number for a place of work.</p>
   51772    </dd>
   51773 
   51774    <dt><dfn id=md-vcard-type-tel-voice title=md-vcard-type-tel-voice><code>voice</code></dfn></dt>
   51775    <dd>
   51776     <p>Indicates a voice telephone number.</p>
   51777    </dd>
   51778 
   51779    <dt><dfn id=md-vcard-type-tel-fax title=md-vcard-type-tel-fax><code>fax</code></dfn></dt>
   51780    <dd>
   51781     <p>Indicates a facsimile telephone number.</p>
   51782    </dd>
   51783 
   51784    <dt><dfn id=md-vcard-type-tel-cell title=md-vcard-type-tel-cell><code>cell</code></dfn></dt>
   51785    <dd>
   51786     <p>Indicates a cellular telephone number.</p>
   51787    </dd>
   51788 
   51789    <dt><dfn id=md-vcard-type-tel-video title=md-vcard-type-tel-video><code>video</code></dfn></dt>
   51790    <dd>
   51791     <p>Indicates a video conferencing telephone number.</p>
   51792    </dd>
   51793 
   51794    <dt><dfn id=md-vcard-type-tel-pager title=md-vcard-type-tel-pager><code>pager</code></dfn></dt>
   51795    <dd>
   51796     <p>Indicates a paging device telephone number.</p>
   51797    </dd>
   51798 
   51799    <dt><dfn id=md-vcard-type-tel-bbs title=md-vcard-type-tel-bbs><code>bbs</code></dfn></dt>
   51800    <dd>
   51801     <p>Indicates a bulletin board system telephone number.</p>
   51802    </dd>
   51803 
   51804    <dt><dfn id=md-vcard-type-tel-modem title=md-vcard-type-tel-modem><code>modem</code></dfn></dt>
   51805    <dd>
   51806     <p>Indicates a MODEM-connected telephone number.</p>
   51807    </dd>
   51808 
   51809    <dt><dfn id=md-vcard-type-tel-car title=md-vcard-type-tel-car><code>car</code></dfn></dt>
   51810    <dd>
   51811     <p>Indicates a car-phone telephone number.</p>
   51812    </dd>
   51813 
   51814    <dt><dfn id=md-vcard-type-tel-isdn title=md-vcard-type-tel-isdn><code>isdn</code></dfn></dt>
   51815    <dd>
   51816     <p>Indicates an ISDN service telephone number.</p>
   51817    </dd>
   51818 
   51819    <dt><dfn id=md-vcard-type-tel-pcs title=md-vcard-type-tel-pcs><code>pcs</code></dfn></dt>
   51820    <dd>
   51821     <p>Indicates a personal communication services telephone number.</p>
   51822    </dd>
   51823 
   51824    <dt><dfn id=md-vcard-type-tel-pref title=md-vcard-type-tel-pref><code>pref</code></dfn></dt>
   51825    <dd>
   51826 
   51827     <p>Indicates the preferred telephone number when multiple
   51828     telephone numbers are specified.</p>
   51829 
   51830    </dd>
   51831 
   51832   </dl><p>The <dfn id=e-mail-type-strings>e-mail type strings</dfn> are:</p>
   51833 
   51834   <dl><dt><dfn id=md-vcard-type-email-internet title=md-vcard-type-email-internet><code>internet</code></dfn></dt>
   51835    <dd>
   51836     <p>Indicates an Internet e-mail address.</p>
   51837    </dd>
   51838 
   51839    <dt><dfn id=md-vcard-type-email-x400 title=md-vcard-type-email-x400><code>x400</code></dfn></dt>
   51840    <dd>
   51841     <p>Indicates a X.400 addressing type.</p>
   51842    </dd>
   51843 
   51844    <dt><dfn id=md-vcard-type-email-pref title=md-vcard-type-email-pref><code>pref</code></dfn></dt>
   51845    <dd>
   51846 
   51847     <p>Indicates the preferred e-mail address when multiple e-mail
   51848     addresses are specified.</p>
   51849 
   51850    </dd>
   51851 
   51852   </dl><p>The <dfn id=impp-type-strings>IMPP type strings</dfn> are:</p>
   51853 
   51854   <dl><dt><dfn id=md-vcard-type-impp-personal title=md-vcard-type-impp-personal><code>personal</code></dfn></dt>
   51855    <dt><dfn id=md-vcard-type-impp-business title=md-vcard-type-impp-business><code>business</code></dfn></dt>
   51856    <dd>
   51857     <p>Indicates the type of communication for which this IMPP
   51858     <a href=#url>URL</a> is appropriate.</p>
   51859    </dd>
   51860 
   51861    <dt><dfn id=md-vcard-type-impp-home title=md-vcard-type-impp-home><code>home</code></dfn></dt>
   51862    <dt><dfn id=md-vcard-type-impp-work title=md-vcard-type-impp-work><code>work</code></dfn></dt>
   51863    <dt><dfn id=md-vcard-type-impp-mobile title=md-vcard-type-impp-mobile><code>mobile</code></dfn></dt>
   51864    <dd>
   51865     <p>Indicates the location of a device associated with this IMPP
   51866     <a href=#url>URL</a>.</p>
   51867    </dd>
   51868 
   51869    <dt><dfn id=md-vcard-type-impp-pref title=md-vcard-type-impp-pref><code>pref</code></dfn></dt>
   51870    <dd>
   51871     <p>Indicates the preferred address when multiple IMPP
   51872     <a href=#url>URL</a>s are specified.</p>
   51873    </dd>
   51874 
   51875   </dl><h5 id=conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</h5>
   51876 
   51877   <p>Given a list of nodes <var title="">nodes</var> in a
   51878   <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
   51879   to <dfn id=extracting-a-vcard title="extracting a vCard">extract any vCard data
   51880   represented by those nodes</dfn> (only the first vCard is
   51881   returned):</p>
   51882 
   51883   <ol><li><p>If none of the nodes in <var title="">nodes</var> are <a href=#concept-item title=concept-item>items</a> with the <a href=#item-type>item type</a>
   51884    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, then
   51885    there is no vCard. Abort the algorithm, returning nothing.</li>
   51886 
   51887    <li><p>Let <var title="">node</var> be the first node in <var title="">nodes</var> that is an <a href=#concept-item title=concept-item>item</a> with the <a href=#item-type>item type</a>
   51888    <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>.</li>
   51889 
   51890    <li><p>Let <var title="">output</var> be an empty string.</li>
   51891 
   51892    <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VCARD</code>"
   51893    to <var title="">output</var>.</li>
   51894 
   51895    <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">PROFILE</code>" and the value "<code title="">VCARD</code>" to <var title="">output</var>.</li>
   51896 
   51897    <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">VERSION</code>" and the value "<code title="">3.0</code>"
   51898    to <var title="">output</var>.</li>
   51899 
   51900    <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">SOURCE</code>" and the result of <a href=#escaping-the-vcard-text-string>escaping the vCard
   51901    text string</a> that is <a href="#the-document's-current-address">the document's current
   51902    address</a> as the value to <var title="">output</var>.</li>
   51903 
   51904    <li><p>If <a href=#the-title-element>the <code>title</code> element</a> is not null,
   51905    <a href=#add-a-vcard-line>add a vCard line</a> with the type "<code title="">NAME</code>" and with the result of <a href=#escaping-the-vcard-text-string>escaping the
   51906    vCard text string</a> obtained from the <code><a href=#textcontent>textContent</a></code>
   51907    of <a href=#the-title-element>the <code>title</code> element</a> as the value to <var title="">output</var>.</li>
   51908 
   51909    <li><p>If <var title="">node</var> has a <a href=#global-identifier>global
   51910    identifier</a>, <a href=#add-a-vcard-line>add a vCard line</a> with the type
   51911    "<code title="">UID</code>" and with the result of <a href=#escaping-the-vcard-text-string>escaping
   51912    the vCard text string</a> of that <a href=#global-identifier>global identifier</a>
   51913    as the value to <var title="">output</var>.</li>
   51914 
   51915    <li>
   51916 
   51917     <p>For each element <var title="">element</var> that is <a href=#the-properties-of-an-item title="the properties of an item">a property of the item</a>
   51918     <var title="">node</var>: for each name <var title="">name</var>
   51919     in <var title="">element</var>'s <a href=#property-names>property names</a>, run
   51920     the following substeps:</p>
   51921 
   51922     <ol><li><p>Let <var title="">parameters</var> be an empty set of
   51923      name-value pairs.</li>
   51924 
   51925      <li>
   51926 
   51927       <p>Run the appropriate set of substeps from the following
   51928       list. The steps will set a variable <var title="">value</var>,
   51929       which is used in the next step.</p>
   51930 
   51931       <dl><dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
   51932        and <var title="">name</var> is <code title=md-vcard-n><a href=#md-vcard-n>n</a></code></dt>
   51933 
   51934        <dd>
   51935 
   51936         <ol><li><p>Let <var title="">value</var> be the empty
   51937          string.</li>
   51938 
   51939          <li><p>Append to <var title="">value</var> the result of
   51940          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   51941          <code title=md-vcard-n-family-name><a href=#md-vcard-n-family-name>family-name</a></code> in
   51942          <var title="">subitem</var>.</p>
   51943 
   51944          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51945 
   51946          <li><p>Append to <var title="">value</var> the result of
   51947          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   51948          <code title=md-vcard-n-given-name><a href=#md-vcard-n-given-name>given-name</a></code> in <var title="">subitem</var>.</p>
   51949 
   51950          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51951 
   51952          <li><p>Append to <var title="">value</var> the result of
   51953          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   51954          <code title=md-vcard-n-additional-name><a href=#md-vcard-n-additional-name>additional-name</a></code> in
   51955          <var title="">subitem</var>.</p>
   51956 
   51957          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51958 
   51959          <li><p>Append to <var title="">value</var> the result of
   51960          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   51961          <code title=md-vcard-n-honorific-prefix><a href=#md-vcard-n-honorific-prefix>honorific-prefix</a></code>
   51962          in <var title="">subitem</var>.</p>
   51963 
   51964          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51965 
   51966          <li><p>Append to <var title="">value</var> the result of
   51967          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   51968          <code title=md-vcard-n-honorific-suffix><a href=#md-vcard-n-honorific-suffix>honorific-suffix</a></code>
   51969          in <var title="">subitem</var>.</p>
   51970 
   51971         </ol></dd>
   51972 
   51973        <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
   51974        and <var title="">name</var> is <code title=md-vcard-adr><a href=#md-vcard-adr>adr</a></code></dt>
   51975 
   51976        <dd>
   51977 
   51978         <ol><li><p>Let <var title="">value</var> be the empty
   51979          string.</li>
   51980 
   51981          <li><p>Append to <var title="">value</var> the result of
   51982          <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-post-office-box><a href=#md-vcard-adr-post-office-box>post-office-box</a></code>
   51983          in <var title="">subitem</var>.</p>
   51984 
   51985          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51986 
   51987          <li><p>Append to <var title="">value</var> the result of
   51988          <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-extended-address><a href=#md-vcard-adr-extended-address>extended-address</a></code>
   51989          in <var title="">subitem</var>.</p>
   51990 
   51991          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51992 
   51993          <li><p>Append to <var title="">value</var> the result of
   51994          <a href=#collecting-vcard-subproperties>collecting vCard subproperties</a> named <code title=md-vcard-adr-street-address><a href=#md-vcard-adr-street-address>street-address</a></code> in
   51995          <var title="">subitem</var>.</p>
   51996 
   51997          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   51998 
   51999          <li><p>Append to <var title="">value</var> the result of
   52000          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52001          <code title=md-vcard-adr-locality><a href=#md-vcard-adr-locality>locality</a></code> in <var title="">subitem</var>.</p>
   52002 
   52003          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   52004 
   52005          <li><p>Append to <var title="">value</var> the result of
   52006          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52007          <code title=md-vcard-adr-region><a href=#md-vcard-adr-region>region</a></code> in <var title="">subitem</var>.</p>
   52008 
   52009          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   52010 
   52011          <li><p>Append to <var title="">value</var> the result of
   52012          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52013          <code title=md-vcard-adr-postal-code><a href=#md-vcard-adr-postal-code>postal-code</a></code> in
   52014          <var title="">subitem</var>.</p>
   52015 
   52016          <li>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   52017 
   52018          <li><p>Append to <var title="">value</var> the result of
   52019          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52020          <code title=md-vcard-adr-country-name><a href=#md-vcard-adr-country-name>country-name</a></code>
   52021          in <var title="">subitem</var>.</p>
   52022 
   52023          <li><p>If there is a property named <code title=md-vcard-adr-type><a href=#md-vcard-adr-type>type</a></code> in <var title="">subitem</var>, and the first such property has a
   52024          <a href=#concept-property-value title=concept-property-value>value</a> that is not
   52025          an <a href=#concept-item title=concept-item>item</a> and whose value
   52026          consists only of <a href=#alphanumeric-ascii-characters>alphanumeric ASCII characters</a>,
   52027          then add a parameter named "<code title="">TYPE</code>" whose
   52028          value is the <a href=#concept-property-value title=concept-property-value>value</a> of that property
   52029          to <var title="">parameters</var>.</li>
   52030 
   52031         </ol></dd>
   52032 
   52033        <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
   52034        and <var title="">name</var> is <code title=md-vcard-org><a href=#md-vcard-org>org</a></code></dt>
   52035 
   52036        <dd>
   52037 
   52038         <ol><li><p>Let <var title="">value</var> be the empty
   52039          string.</li>
   52040 
   52041          <li><p>Append to <var title="">value</var> the result of
   52042          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52043          <code title=md-vcard-org-organization-name><a href=#md-vcard-org-organization-name>organization-name</a></code>
   52044          in <var title="">subitem</var>.</p>
   52045 
   52046          <li>
   52047 
   52048           <p>For each property named <code title=md-vcard-org-organization-unit><a href=#md-vcard-org-organization-unit>organization-unit</a></code>
   52049           in <var title="">subitem</var>, run the following steps:</p>
   52050 
   52051           <ol><li><p>If the <a href=#concept-property-value title=concept-property-value>value</a> of the property
   52052            is an <a href=#concept-item title=concept-item>item</a>, then skip
   52053            this property.</li>
   52054 
   52055            <li><p>Append a U+003B SEMICOLON character (;) to <var title="">value</var>.</li>
   52056 
   52057            <li><p>Append the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
   52058            string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the property
   52059            to <var title="">value</var>.</li>
   52060 
   52061           </ol></li>
   52062 
   52063         </ol></dd>
   52064 
   52065        <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> <var title="">subitem</var>
   52066        with the <a href=#item-type>item type</a> <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>
   52067        and <var title="">name</var> is <code title=md-vcard-agent><a href=#md-vcard-agent>agent</a></code></dt>
   52068 
   52069        <dd>
   52070 
   52071         <ol><li><p>Let <var title="">value</var> be the result of
   52072          <a href=#escaping-the-vcard-text-string>escaping the vCard text string</a> obtained from
   52073          <a href=#extracting-a-vcard>extracting a vCard</a> from the element that
   52074          represents <var title="">subitem</var>.</li>
   52075 
   52076          <li><p>Add a parameter named "<code title="">VALUE</code>"
   52077          whose value is "<code title="">VCARD</code>" to <var title="">parameters</var>.</li>
   52078 
   52079         </ol></dd>
   52080 
   52081        <dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a> and <var title="">name</var>
   52082        is none of the above</dt>
   52083 
   52084        <dd>
   52085 
   52086         <ol><li><p>Let <var title="">value</var> be the result of
   52087          <a href=#collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</a> named
   52088          <code title="">value</code> in <var title="">subitem</var>.</p>
   52089 
   52090          <li><p>If there is a property named <code title="">type</code> in <var title="">subitem</var>, and the
   52091          first such property has a <a href=#concept-property-value title=concept-property-value>value</a> that is not an
   52092          <a href=#concept-item title=concept-item>item</a> and whose value
   52093          consists only of <a href=#alphanumeric-ascii-characters>alphanumeric ASCII characters</a>,
   52094          then add a parameter named "<code title="">TYPE</code>" whose
   52095          value is the <a href=#concept-property-value title=concept-property-value>value</a> of that property
   52096          to <var title="">parameters</var>.</li>
   52097 
   52098         </ol></dd>
   52099 
   52100        <dt>Otherwise (the property's <a href=#concept-property-value title=concept-property-value>value</a> is not an <a href=#concept-item title=concept-item>item</a>)</dt>
   52101 
   52102        <dd>
   52103 
   52104         <ol><li><p>Let <var title="">value</var> be the property's <a href=#concept-property-value title=concept-property-value>value</a>.</li>
   52105 
   52106          <li><p>If <var title="">element</var> is one of the <a href=#url-property-elements>URL
   52107          property elements</a>, add a parameter with the name "<code title="">VALUE</code>" and the value "<code title="">URI</code>" to <var title="">parameters</var>.</li>
   52108 
   52109          <li><p>Otherwise, if <var title="">element</var> is a
   52110          <code><a href=#the-time-element>time</a></code> element and the <var title="">value</var> is
   52111          a <a href=#valid-date-string>valid date string</a>, add a parameter with the name
   52112          "<code title="">VALUE</code>" and the value "<code title="">DATE</code>" to <var title="">parameters</var>.</li>
   52113 
   52114          <li><p>Otherwise, if <var title="">element</var> is a
   52115          <code><a href=#the-time-element>time</a></code> element and the <var title="">value</var> is
   52116          a <a href=#valid-global-date-and-time-string>valid global date and time string</a>, add a
   52117          parameter with the name "<code title="">VALUE</code>" and the
   52118          value "<code title="">DATE-TIME</code>" to <var title="">parameters</var>.</li>
   52119 
   52120          <li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in
   52121          <var title="">value</var> with another U+005C REVERSE SOLIDUS
   52122          character (\).</li>
   52123 
   52124          <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   52125          (\).</li>
   52126 
   52127          <li><p>Unless <var title="">name</var> is <code title=md-vcard-geo><a href=#md-vcard-geo>geo</a></code>, prefix every U+003B SEMICOLON
   52128          character (;) in <var title="">value</var> with a U+005C
   52129          REVERSE SOLIDUS character (\).</li>
   52130 
   52131          <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
   52132          character pair (CRLF) in <var title="">value</var> with a
   52133          U+005C REVERSE SOLIDUS character (\) followed by a U+006E
   52134          LATIN SMALL LETTER N character (n).</li>
   52135 
   52136          <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
   52137          U+000A LINE FEED (LF) character in <var title="">value</var>
   52138          with a U+005C REVERSE SOLIDUS character (\) followed by a
   52139          U+006E LATIN SMALL LETTER N character (n).</li>
   52140 
   52141         </ol></dd>
   52142 
   52143       </dl></li>
   52144 
   52145      <li>
   52146 
   52147       <p><a href=#add-a-vcard-line>Add a vCard line</a> with the type <var title="">name</var>, the parameters <var title="">parameters</var>, and the value <var title="">value</var> to <var title="">output</var>.</p>
   52148 
   52149      </li>
   52150 
   52151     </ol></li>
   52152 
   52153    <li><p><a href=#add-a-vcard-line>Add a vCard line</a> with the type "<code title="">END</code>" and the value "<code title="">VCARD</code>"
   52154    to <var title="">output</var>.</li>
   52155 
   52156   </ol><p>When the above algorithm says that the user agent is to <dfn id=add-a-vcard-line>add
   52157   a vCard line</dfn> consisting of a type <var title="">type</var>,
   52158   optionally some parameters, and a value <var title="">value</var> to
   52159   a string <var title="">output</var>, it must run the following
   52160   steps:</p>
   52161 
   52162   <ol><li><p>Let <var title="">line</var> be an empty string.
   52163 
   52164    <li><p>Append <var title="">type</var>, <a href=#converted-to-ascii-uppercase>converted to
   52165    ASCII uppercase</a>, to <var title="">line</var>.</li>
   52166 
   52167    <li>
   52168 
   52169     <p>If there are any parameters, then for each parameter, in the
   52170     order that they were added, run these substeps:</p>
   52171 
   52172     <ol><li><p>Append a U+003B SEMICOLON character (;) to <var title="">line</var>.</li>
   52173 
   52174      <li><p>Append the parameter's name to <var title="">line</var>.</li>
   52175 
   52176      <li><p>Append a U+003D EQUALS SIGN character (=) to <var title="">line</var>.</li>
   52177 
   52178      <li><p>Append the parameter's value to <var title="">line</var>.</li>
   52179 
   52180     </ol></li>
   52181 
   52182    <li><p>Append a U+003A COLON character (:) to <var title="">line</var>.</li>
   52183 
   52184    <li><p>Append <var title="">value</var> to <var title="">line</var>.</li>
   52185 
   52186    <li><p>Let <var title="">maximum length</var> be 75.</li>
   52187 
   52188    <li>
   52189 
   52190     <p>If and while <var title="">line</var> is longer than <var title="">maximum length</var> Unicode code points long, run the
   52191     following substeps:</p>
   52192 
   52193     <ol><li><p>Append the first <var title="">maximum length</var>
   52194      Unicode code points of <var title="">line</var> to <var title="">output</var>.</li>
   52195 
   52196      <li><p>Remove the first <var title="">maximum length</var>
   52197      Unicode code points from <var title="">line</var>.</li>
   52198 
   52199      <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>
   52200 
   52201      <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>
   52202 
   52203      <li><p>Append a U+0020 SPACE character to <var title="">output</var>.</li>
   52204 
   52205      <li><p>Let <var title="">maximum length</var> be 74.</li>
   52206 
   52207     </ol></li>
   52208 
   52209    <li><p>Append (what remains of) <var title="">line</var> to <var title="">output</var>.</li>
   52210 
   52211    <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>
   52212 
   52213    <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>
   52214 
   52215   </ol><p>When the steps above require the user agent to obtain the result
   52216   of <dfn id=collecting-vcard-subproperties>collecting vCard subproperties</dfn> named <var title="">subname</var> in <var title="">subitem</var>, the user
   52217   agent must run the following steps:</p>
   52218 
   52219   <ol><li><p>Let <var title="">value</var> be the empty string.</li>
   52220 
   52221    <li>
   52222 
   52223     <p>For each property named <var title="">subname</var> in the item
   52224     <var title="">subitem</var>, run the following substeps:</p>
   52225 
   52226     <ol><li><p>If the <a href=#concept-property-value title=concept-property-value>value</a>
   52227      of the property is itself an <a href=#concept-item title=concept-item>item</a>, then skip this
   52228      property.</li>
   52229 
   52230      <li><p>If this is not the first property named <var title="">subname</var> in <var title="">subitem</var> (ignoring
   52231      any that were skipped by the previous step), then append a U+002C
   52232      COMMA character (,) to <var title="">value</var>.</li>
   52233 
   52234      <li><p>Append the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
   52235      string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the property to
   52236      <var title="">value</var>.</li>
   52237 
   52238     </ol></li>
   52239 
   52240    <li><p>Return <var title="">value</var>.</li>
   52241 
   52242   </ol><p>When the steps above require the user agent to obtain the result
   52243   of <dfn id=collecting-the-first-vcard-subproperty>collecting the first vCard subproperty</dfn> named <var title="">subname</var> in <var title="">subitem</var>, the user
   52244   agent must run the following steps:</p>
   52245 
   52246   <ol><li><p>If there are no properties named <var title="">subname</var>
   52247    in <var title="">subitem</var>, then abort these substeps,
   52248    returning the empty string.</li>
   52249 
   52250    <li><p>If the <a href=#concept-property-value title=concept-property-value>value</a> of
   52251    the first property named <var title="">subname</var> in <var title="">subitem</var> is an <a href=#concept-item title=concept-item>item</a>, then abort these substeps,
   52252    returning the empty string.</li>
   52253 
   52254    <li><p>Return the result of <a href=#escaping-the-vcard-text-string>escaping the vCard text
   52255    string</a> given by the <a href=#concept-property-value title=concept-property-value>value</a> of the first property
   52256    named <var title="">subname</var> in <var title="">subitem</var>.</li>
   52257 
   52258   </ol><p>When the above algorithms say the user agent is to <dfn id=escaping-the-vcard-text-string title="escaping the vCard text string">escape the vCard text
   52259   string</dfn> <var title="">value</var>, the user agent must use the
   52260   following steps:</p>
   52261 
   52262   <ol><li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in <var title="">value</var> with another U+005C REVERSE SOLIDUS character
   52263    (\).</li>
   52264 
   52265    <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   52266    (\).</li>
   52267 
   52268    <li><p>Prefix every U+003B SEMICOLON character (;) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   52269    (\).</li>
   52270 
   52271    <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
   52272    character pair (CRLF) in <var title="">value</var> with a U+005C
   52273    REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL
   52274    LETTER N character (n).</li>
   52275 
   52276    <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
   52277    U+000A LINE FEED (LF) character in <var title="">value</var> with a
   52278    U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN
   52279    SMALL LETTER N character (n).</li>
   52280 
   52281    <li><p>Return the mutated <var title="">value</var>.</li>
   52282 
   52283   </ol><p class=note>This algorithm can generate invalid vCard output, if
   52284   the input does not conform to the rules described for the <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>
   52285   <a href=#item-type>item type</a> and <a href=#defined-property-name title="defined property
   52286   name">defined property names</a>.</p> <!-- of course since vcard
   52287   doesn't define error handling, this is somewhat problematic. -->
   52288 
   52289 
   52290 
   52291   <h5 id=examples-1><span class=secno>5.4.1.2 </span>Examples</h5>
   52292 
   52293   <p><i>This section is non-normative.</i></p>
   52294 
   52295   <div class=example>
   52296 
   52297    <p>Here is a long example vCard for a fictional character called
   52298    "Jack Bauer":</p>
   52299 
   52300    <pre>&lt;section id="jack" itemscope itemtype="http://microformats.org/profile/hcard"&gt;
   52301  &lt;h1 itemprop="fn"&gt;Jack Bauer&lt;/h1&gt;
   52302  &lt;div itemprop="n"&gt;
   52303   &lt;meta itemprop="given-name" content="Jack"&gt;
   52304   &lt;meta itemprop="family-name" content="Bauer"&gt;
   52305  &lt;/div&gt;
   52306  &lt;img itemprop="photo" alt="" src="jack-bauer.jpg"&gt;
   52307  &lt;p itemprop="org" itemscope&gt;
   52308   &lt;span itemprop="organization-name"&gt;Counter-Terrorist Unit&lt;/span&gt;
   52309   (&lt;span itemprop="organization-unit"&gt;Los Angeles Division&lt;/span&gt;)
   52310  &lt;/p&gt;
   52311  &lt;p&gt;
   52312   &lt;span itemprop="adr" itemscope&gt;
   52313    &lt;span itemprop="street-address"&gt;10201 W. Pico Blvd.&lt;/span&gt;&lt;br&gt;
   52314    &lt;span itemprop="locality"&gt;Los Angeles&lt;/span&gt;,
   52315    &lt;span itemprop="region"&gt;CA&lt;/span&gt;
   52316    &lt;span itemprop="postal-code"&gt;90064&lt;/span&gt;&lt;br&gt;
   52317    &lt;span itemprop="country-name"&gt;United States&lt;/span&gt;&lt;br&gt;
   52318   &lt;/span&gt;
   52319   &lt;span itemprop="geo"&gt;34.052339;-118.410623&lt;/span&gt;
   52320  &lt;/p&gt;
   52321  &lt;h2&gt;Assorted Contact Methods&lt;/h2&gt;
   52322  &lt;ul&gt;
   52323   &lt;li itemprop="tel" itemscope&gt;
   52324    &lt;span itemprop="value"&gt;+1 (310) 597 3781&lt;/span&gt; &lt;span itemprop="type"&gt;work&lt;/span&gt;
   52325    &lt;meta itemprop="type" content="pref"&gt;
   52326   &lt;/li&gt;
   52327   &lt;li&gt;&lt;a itemprop="url" href="http://en.wikipedia.org/wiki/Jack_Bauer"&gt;I'm on Wikipedia&lt;/a&gt;
   52328   so you can leave a message on my user talk page.&lt;/li&gt;
   52329   &lt;li&gt;&lt;a itemprop="url" href="http://www.jackbauerfacts.com/"&gt;Jack Bauer Facts&lt;/a&gt;&lt;/li&gt;
   52330   &lt;li itemprop="email"&gt;&lt;a href="mailto:j.bauer (a] la.ctu.gov.invalid"&gt;j.bauer (a] la.ctu.gov.invalid&lt;/a&gt;&lt;/li&gt;
   52331   &lt;li itemprop="tel" itemscope&gt;
   52332    &lt;span itemprop="value"&gt;+1 (310) 555 3781&lt;/span&gt; &lt;span&gt;
   52333    &lt;meta itemprop="type" content="cell"&gt;mobile phone&lt;/span&gt;
   52334   &lt;/li&gt;
   52335  &lt;/ul&gt;
   52336  &lt;p itemprop="note"&gt;If I'm out in the field, you may be better off contacting &lt;span
   52337  itemprop="agent" itemscope itemtype="http://microformats.org/profile/hcard"&gt;&lt;a
   52338  itemprop="email" href="mailto:c.obrian (a] la.ctu.gov.invalid"&gt;&lt;span
   52339  itemprop="fn"&gt;&lt;span itemprop="n" itemscope&gt;&lt;span
   52340  itemprop="given-name"&gt;Chloe&lt;/span&gt; &lt;span
   52341  itemprop="family=name"&gt;O'Brian&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
   52342  if it's about work, or ask &lt;span itemprop="agent"&gt;Tony Almeida&lt;/span&gt;
   52343  if you're interested in the CTU five-a-side football team we're trying to get going.&lt;/p&gt;
   52344  &lt;ins datetime="2008-07-20T21:00:00+01:00"&gt;
   52345   &lt;span itemprop="rev" itemscope&gt;
   52346    &lt;meta itemprop="type" content="date-time"&gt;
   52347    &lt;meta itemprop="value" content="2008-07-20T21:00:00+01:00"&gt;
   52348   &lt;/span&gt;
   52349   &lt;p itemprop="tel" itemscope&gt;&lt;strong&gt;Update!&lt;/strong&gt;
   52350   My new &lt;span itemprop="type"&gt;home&lt;/span&gt; phone number is
   52351   &lt;span itemprop="value"&gt;01632 960 123&lt;/span&gt;.&lt;/p&gt;
   52352  &lt;/ins&gt;
   52353 &lt;/section&gt;</pre>
   52354 
   52355    <p>The odd line wrapping is needed because newlines are meaningful
   52356    in microdata: newlines would be preserved in a conversion to, for
   52357    example, the vCard format.<p>
   52358 
   52359   </div>
   52360 
   52361   <div class=example>
   52362 
   52363    <p>This example shows a site's contact details (using the
   52364    <code><a href=#the-address-element>address</a></code> element) containing an address with two street
   52365    components:</p>
   52366 
   52367    <pre>&lt;address itemscope itemtype="http://microformats.org/profile/hcard"&gt;
   52368  &lt;strong itemprop="fn"&gt;&lt;span itemprop="n"&gt;&lt;span itemprop="given-name"&gt;Alfred&lt;/span&gt;
   52369  &lt;span itemprop="family-name"&gt;Person&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt; &lt;br&gt;
   52370  &lt;span itemprop="adr" itemscope&gt;
   52371   &lt;span itemprop="street-address"&gt;1600 Amphitheatre Parkway&lt;/span&gt; &lt;br&gt;
   52372   &lt;span itemprop="street-address"&gt;Building 43, Second Floor&lt;/span&gt; &lt;br&gt;
   52373   &lt;span itemprop="locality"&gt;Mountain View&lt;/span&gt;,
   52374    &lt;span itemprop="region"&gt;CA&lt;/span&gt; &lt;span itemprop="postal-code"&gt;94043&lt;/span&gt;
   52375  &lt;/span&gt;
   52376 &lt;/address&gt;</pre>
   52377 
   52378   </div>
   52379 
   52380   <div class=example>
   52381 
   52382    <p>The vCard vocabulary can be used to just mark up people's
   52383    names:</p>
   52384 
   52385    <pre>&lt;span itemscope itemtype="http://microformats.org/profile/hcard"
   52386 &gt;&lt;span itemprop=fn&gt;&lt;span itemprop="n"&gt;&lt;span itemprop="given-name"
   52387 &gt;George&lt;/span&gt; &lt;span itemprop="family-name"&gt;Washington&lt;/span&gt;&lt;/span
   52388 &gt;&lt;/span&gt;&lt;/span&gt;</pre>
   52389 
   52390    <p>This creates a single item with a two name-value pairs, one with
   52391    the name "fn" and the value "George Washington", and the other with
   52392    the name "n" and a second item as its value, the second item having
   52393    the two name-value pairs "given-name" and "family-name" with the
   52394    values "George" and "Washington" respectively. This is defined to
   52395    map to the following vCard:</p>
   52396 
   52397    <pre>BEGIN:VCARD
   52398 PROFILE:VCARD
   52399 VERSION:3.0
   52400 SOURCE:<var title="">document's address</var>
   52401 FN:George Washington
   52402 N:Washington;George;;;
   52403 END:VCARD</pre>
   52404 
   52405   </div>
   52406 
   52407 
   52408 
   52409   <h4 id=vevent><span class=secno>5.4.2 </span>vEvent</h4>
   52410 
   52411 
   52412 
   52413   <p>An item with the <a href=#item-type>item type</a> <dfn id=md-vevent title=md-vevent><code>http://microformats.org/profile/hcalendar#vevent</code></dfn>
   52414   represents an event.</p>
   52415 
   52416   <p>This vocabulary <a href=#support-global-identifiers-for-items title="support global identifiers for
   52417   items">supports global identifiers for items</a>.</p>
   52418 
   52419   <p>The following are the type's <a href=#defined-property-name title="defined property
   52420   name">defined property names</a>. They are based on the
   52421   vocabulary defined in the iCalendar specification, where more
   52422   information on how to interpret the values can be found. <a href=#refsRFC2445>[RFC2445]</a></p>
   52423 
   52424   <p class=note>Only the parts of the iCalendar vocabulary relating
   52425   to events are used here; this vocabulary cannot express a complete
   52426   iCalendar instance.</p>
   52427 
   52428   <dl><dt><dfn id=md-vevent-attach title=md-vevent-attach><code>attach</code></dfn></dt>
   52429 
   52430    <dd>
   52431 
   52432     <p>Gives the address of an associated document for the event.</p>
   52433 
   52434     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52435     an <a href=#absolute-url>absolute URL</a>.</p>
   52436 
   52437     <p>Any number of properties with the name <code title=md-vevent-attach><a href=#md-vevent-attach>attach</a></code> may be present within each
   52438     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52439 
   52440    </dd>
   52441 
   52442 
   52443    <dt><dfn id=md-vevent-categories title=md-vevent-categories><code>categories</code></dfn></dt>
   52444 
   52445    <dd>
   52446 
   52447     <p>Gives the name of a category or tag that the event could be
   52448     classified as.</p>
   52449 
   52450     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52451     text.</p>
   52452 
   52453     <p>Any number of properties with the name <code title=md-vevent-categories><a href=#md-vevent-categories>categories</a></code> may be present
   52454     within each <a href=#concept-item title=concept-item>item</a> with the type
   52455     <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52456 
   52457    </dd>
   52458 
   52459 
   52460    <dt><dfn id=md-vevent-class title=md-vevent-class><code>class</code></dfn></dt>
   52461 
   52462    <dd>
   52463 
   52464     <p>Gives the access classification of the information regarding
   52465     the event.</p>
   52466 
   52467     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52468     text with one of the following values:</p>
   52469 
   52470     <ul class=brief><li><code title="">public</code></li>
   52471      <li><code title="">private</code></li>
   52472      <li><code title="">confidential</code></li>
   52473     </ul><p class=warning>This is merely advisory and cannot be
   52474     considered a confidentiality measure.</p>
   52475 
   52476     <p>A single property with the name <code title=md-vevent-class><a href=#md-vevent-class>class</a></code> may be present within each
   52477     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52478 
   52479    </dd>
   52480 
   52481 
   52482    <dt><dfn id=md-vevent-comment title=md-vevent-comment><code>comment</code></dfn></dt>
   52483 
   52484    <dd>
   52485 
   52486     <p>Gives a comment regarding the event.</p>
   52487 
   52488     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52489     text.</p>
   52490 
   52491     <p>Any number of properties with the name <code title=md-vevent-comment><a href=#md-vevent-comment>comment</a></code> may be present within each
   52492     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52493 
   52494    </dd>
   52495 
   52496 
   52497    <dt><dfn id=md-vevent-description title=md-vevent-description><code>description</code></dfn></dt>
   52498 
   52499    <dd>
   52500 
   52501     <p>Gives a detailed description of the event.</p>
   52502 
   52503     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52504     text.</p>
   52505 
   52506     <p>A single property with the name <code title=md-vevent-description><a href=#md-vevent-description>description</a></code> may be present
   52507     within each <a href=#concept-item title=concept-item>item</a> with the type
   52508     <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52509 
   52510    </dd>
   52511 
   52512 
   52513    <dt><dfn id=md-vevent-geo title=md-vevent-geo><code>geo</code></dfn></dt>
   52514 
   52515    <dd>
   52516 
   52517     <p>Gives the geographical position of the event.</p>
   52518 
   52519     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52520     text and must match the following syntax:</p>
   52521 
   52522     <ol><li>Optionally, either a U+002B PLUS SIGN character (+) or a
   52523      U+002D HYPHEN-MINUS character (-).</li>
   52524 
   52525      <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
   52526      DIGIT NINE (9).</li>
   52527 
   52528      <li>Optionally*, a U+002E FULL STOP character (.) followed by one
   52529      or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   52530      NINE (9).</li>
   52531 
   52532      <li>A U+003B SEMICOLON character (;).</li>
   52533 
   52534      <li>Optionally, either a U+002B PLUS SIGN character (+) or a
   52535      U+002D HYPHEN-MINUS character (-).</li>
   52536 
   52537      <li>One or more digits in the range U+0030 DIGIT ZERO (0) to U+0039
   52538      DIGIT NINE (9).</li>
   52539 
   52540      <li>Optionally*, a U+002E FULL STOP character (.) followed by one
   52541      or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   52542      NINE (9).</li>
   52543 
   52544     </ol><p>The optional components marked with an asterisk (*) should be
   52545     included, and should have six digits each.</p> <!-- iCalendar
   52546     actually limits the range to -91.0 < lat < 91.0; -181.0 < long <
   52547     181.0, which seems weird. It also gives special meanings to
   52548     +90/-90 lat, and +180 long. -->
   52549 
   52550     <!-- copied from vcard (not icalendar!) -->
   52551     <p class=note>The value specifies latitude and longitude, in
   52552     that order (i.e., "LAT LON" ordering), in decimal degrees. The
   52553     longitude represents the location east and west of the prime
   52554     meridian as a positive or negative real number, respectively.  The
   52555     latitude represents the location north and south of the equator as
   52556     a positive or negative real number, respectively.</p>
   52557 
   52558     <p>A single property with the name <code title=md-vevent-geo><a href=#md-vevent-geo>geo</a></code> may be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52559 
   52560    </dd>
   52561 
   52562 
   52563    <dt><dfn id=md-vevent-location title=md-vevent-location><code>location</code></dfn></dt>
   52564 
   52565    <dd>
   52566 
   52567     <p>Gives the location of the event.</p>
   52568 
   52569     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52570     text.</p> <!-- v2: support vcard here -->
   52571 
   52572     <p>A single property with the name <code title=md-vevent-location><a href=#md-vevent-location>location</a></code> may be present within
   52573     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52574 
   52575    </dd>
   52576 
   52577 
   52578    <!-- PRIORITY not included - always 0 - doesn't make sense for single events -->
   52579 
   52580 
   52581    <dt><dfn id=md-vevent-resources title=md-vevent-resources><code>resources</code></dfn></dt>
   52582 
   52583    <dd>
   52584 
   52585     <p>Gives a resource that will be needed for the event.</p>
   52586 
   52587     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52588     text.</p> <!-- v2: support vcard here -->
   52589 
   52590     <p>Any number of properties with the name <code title=md-vevent-resources><a href=#md-vevent-resources>resources</a></code> may be present within
   52591     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52592 
   52593    </dd>
   52594 
   52595 
   52596    <dt><dfn id=md-vevent-status title=md-vevent-status><code>status</code></dfn></dt>
   52597 
   52598    <dd>
   52599 
   52600     <p>Gives the confirmation status of the event.</p>
   52601 
   52602     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52603     text with one of the following values:</p>
   52604 
   52605     <ul class=brief><li><code title="">tentative</code></li>
   52606      <li><code title="">confirmed</code></li>
   52607      <li><code title="">cancelled</code></li> <!-- two Ls as per iCalendar spec -->
   52608     </ul><p>A single property with the name <code title=md-vevent-status><a href=#md-vevent-status>status</a></code> may be present within each
   52609     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52610 
   52611    </dd>
   52612 
   52613 
   52614    <dt><dfn id=md-vevent-summary title=md-vevent-summary><code>summary</code></dfn></dt>
   52615 
   52616    <dd>
   52617 
   52618     <p>Gives a short summary of the event.</p>
   52619 
   52620     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52621     text.</p>
   52622 
   52623     <p>User agents should replace U+000A LINE FEED (LF) characters in
   52624     the <a href=#concept-property-value title=concept-property-value>value</a> by U+0020
   52625     SPACE characters when using the value.</p>
   52626 
   52627     <p>A single property with the name <code title=md-vevent-summary><a href=#md-vevent-summary>summary</a></code> may be present within
   52628     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52629 
   52630    </dd>
   52631 
   52632 
   52633    <dt><dfn id=md-vevent-dtend title=md-vevent-dtend><code>dtend</code></dfn></dt>
   52634 
   52635    <dd>
   52636 
   52637     <p>Gives the date and time by which the event ends.</p>
   52638 
   52639     <p>If the property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> is present within an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
   52640     that has a property with the name <code title=md-vevent-dtstart><a href=#md-vevent-dtstart>dtstart</a></code> whose value is a
   52641     <a href=#valid-date-string>valid date string</a>, then the <a href=#concept-property-value title=concept-property-value>value</a> of the property with
   52642     the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> must be text
   52643     that is a <a href=#valid-date-string>valid date string</a> also. Otherwise, the
   52644     <a href=#concept-property-value title=concept-property-value>value</a> of the property
   52645     must be text that is a <a href=#valid-global-date-and-time-string>valid global date and time
   52646     string</a>.</p>
   52647 
   52648     <p>In either case, the <a href=#concept-property-value title=concept-property-value>value</a> be later in time than
   52649     the value of the <code title=md-event-dtstart>dtstart</code>
   52650     property of the same <a href=#concept-item title=concept-item>item</a>.</p>
   52651 
   52652     <p class=note>The time given by the <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> property is not
   52653     inclusive. For day-long events, therefore, the <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> property's <a href=#concept-property-value title=concept-property-value>value</a> will be the day
   52654     <em>after</em> the end of the event.</p>
   52655 
   52656     <p>A single property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code> may be present within each
   52657     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
   52658     so long as that <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
   52659     does not have a property with the name <code title=md-vevent-duration><a href=#md-vevent-duration>duration</a></code>.</p>
   52660 
   52661    </dd>
   52662 
   52663 
   52664    <dt><dfn id=md-vevent-dtstart title=md-vevent-dtstart><code>dtstart</code></dfn></dt>
   52665 
   52666    <dd>
   52667 
   52668     <p>Gives the date and time at which the event starts.</p>
   52669 
   52670     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52671     text that is either a <a href=#valid-date-string>valid date string</a> or a
   52672     <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>
   52673 
   52674     <p>Exactly one property with the name <code title=md-vevent-dtstart><a href=#md-vevent-dtstart>dtstart</a></code> must be present within
   52675     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52676 
   52677    </dd>
   52678 
   52679 
   52680    <dt><dfn id=md-vevent-duration title=md-vevent-duration><code>duration</code></dfn></dt>
   52681 
   52682    <dd>
   52683 
   52684     <p>Gives the duration of the event.</p>
   52685 
   52686     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52687     text that is a <a href=#valid-vevent-duration-string>valid vevent duration string</a>.</p>
   52688 
   52689     <p>The duration represented is the sum of all the durations
   52690     represented by integers in the value.</p>
   52691 
   52692     <p>A single property with the name <code title=md-vevent-duration><a href=#md-vevent-duration>duration</a></code> may be present within
   52693     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
   52694     so long as that <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
   52695     does not have a property with the name <code title=md-vevent-dtend><a href=#md-vevent-dtend>dtend</a></code>.</p>
   52696 
   52697    </dd>
   52698 
   52699 
   52700    <dt><dfn id=md-vevent-transp title=md-vevent-transp><code>transp</code></dfn></dt>
   52701 
   52702    <dd>
   52703 
   52704     <p>Gives whether the event is to be considered as consuming time
   52705     on a calendar, for the purpose of free-busy time searches.</p>
   52706 
   52707     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52708     text with one of the following values:</p>
   52709 
   52710     <ul class=brief><li><code title="">opaque</code></li>
   52711      <li><code title="">transparent</code></li>
   52712     </ul><p>A single property with the name <code title=md-vevent-transp><a href=#md-vevent-transp>transp</a></code> may be present within each
   52713     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52714 
   52715    </dd>
   52716 
   52717 
   52718    <!-- ATTENDEE not included; iCalendar says MUST NOT be included in
   52719    published events -->
   52720 
   52721 
   52722    <dt><dfn id=md-vevent-contact title=md-vevent-contact><code>contact</code></dfn></dt>
   52723 
   52724    <dd>
   52725 
   52726     <p>Gives the contact information for the event.</p>
   52727 
   52728     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52729     text.</p> <!-- v2: support vcard here -->
   52730 
   52731     <p>Any number of properties with the name <code title=md-vevent-contact><a href=#md-vevent-contact>contact</a></code> may be present within
   52732     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52733 
   52734    </dd>
   52735 
   52736 
   52737    <!-- ORGANIZER not included, as it is calendar-system-specific
   52738    (gives a CAL-ADDRESS value); use CONTACT instead -->
   52739 
   52740 
   52741    <!-- RECURRENCE-ID not included... unclear how to make it usefully
   52742    work here -->
   52743 
   52744 
   52745    <!-- RELATED-TO not included, as it only makes sense for complete
   52746    calendars -->
   52747 
   52748 
   52749    <dt><dfn id=md-vevent-url title=md-vevent-url><code>url</code></dfn></dt>
   52750 
   52751    <dd>
   52752 
   52753     <p>Gives a <a href=#url>URL</a> for the event.</p>
   52754 
   52755     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52756     an <a href=#absolute-url>absolute URL</a>.</p>
   52757 
   52758     <p>A single property with the name <code title=md-vevent-url><a href=#md-vevent-url>url</a></code> may be present within each
   52759     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52760 
   52761    </dd>
   52762 
   52763 
   52764    <!-- UID not included - use "itemid" -->
   52765 
   52766 
   52767    <dt><dfn id=md-vevent-exdate title=md-vevent-exdate><code>exdate</code></dfn></dt>
   52768 
   52769    <dd>
   52770 
   52771     <p>Gives a date and time at which the event does not occur despite
   52772     the recurrence rules.</p>
   52773 
   52774     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52775     text that is either a <a href=#valid-date-string>valid date string</a> or a
   52776     <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>
   52777 
   52778     <p>Any number of properties with the name <code title=md-vevent-exdate><a href=#md-vevent-exdate>exdate</a></code> may be present within
   52779     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52780 
   52781    </dd>
   52782 
   52783 
   52784    <dt><dfn id=md-vevent-exrule title=md-vevent-exrule><code>exrule</code></dfn></dt>
   52785 
   52786    <dd>
   52787 
   52788     <p>Gives a rule for finding dates and times at which the event
   52789     does not occur despite the recurrence rules.</p>
   52790 
   52791     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52792     text that matches the RECUR value type defined in the iCalendar
   52793     specification. <a href=#refsRFC2445>[RFC2445]</a></p>
   52794 
   52795     <p>Any number of properties with the name <code title=md-vevent-exrule><a href=#md-vevent-exrule>exrule</a></code> may be present within
   52796     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52797 
   52798    </dd>
   52799 
   52800 
   52801    <dt><dfn id=md-vevent-rdate title=md-vevent-rdate><code>rdate</code></dfn></dt>
   52802 
   52803    <dd>
   52804 
   52805     <p>Gives a date and time at which the event recurs.</p>
   52806 
   52807     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52808     text that is one of the following:
   52809 
   52810     <ul><li>A <a href=#valid-date-string>valid date string</a>.</li>
   52811 
   52812      <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</li>
   52813 
   52814      <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a> followed by
   52815      a U+002F SOLIDUS character (/) followed by a second <a href=#valid-global-date-and-time-string>valid
   52816      global date and time string</a> representing a later time.</li>
   52817 
   52818      <li>A <a href=#valid-global-date-and-time-string>valid global date and time string</a> followed by
   52819      a U+002F SOLIDUS character (/) followed by a <a href=#valid-vevent-duration-string>valid vevent
   52820      duration string</a>.</li>
   52821 
   52822     </ul><p>Any number of properties with the name <code title=md-vevent-rdate><a href=#md-vevent-rdate>rdate</a></code> may be present within
   52823     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52824 
   52825    </dd>
   52826 
   52827 
   52828    <dt><dfn id=md-vevent-rrule title=md-vevent-rrule><code>rrule</code></dfn></dt>
   52829 
   52830    <dd>
   52831 
   52832     <p>Gives a rule for finding dates and times at which the event
   52833     occurs.</p>
   52834 
   52835     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52836     text that matches the RECUR value type defined in the iCalendar
   52837     specification. <a href=#refsRFC2445>[RFC2445]</a></p>
   52838 
   52839     <p>Any number of properties with the name <code title=md-vevent-rrule><a href=#md-vevent-rrule>rrule</a></code> may be present within
   52840     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52841 
   52842    </dd>
   52843 
   52844 
   52845    <dt><dfn id=md-vevent-created title=md-vevent-created><code>created</code></dfn></dt>
   52846 
   52847    <dd>
   52848 
   52849     <p>Gives the date and time at which the event information was first
   52850     created in a calendaring system.</p>
   52851 
   52852     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52853     text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>
   52854 
   52855     <p>A single property with the name <code title=md-vevent-created><a href=#md-vevent-created>created</a></code> may be present within
   52856     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52857 
   52858    </dd>
   52859 
   52860 
   52861    <!-- DTSTAMP not included, it gets added when serialising -->
   52862 
   52863 
   52864    <dt><dfn id=md-vevent-last-modified title=md-vevent-last-modified><code>last-modified</code></dfn></dt>
   52865 
   52866    <dd>
   52867 
   52868     <p>Gives the date and time at which the event information was last
   52869     modified in a calendaring system.</p>
   52870 
   52871     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52872     text that is a <a href=#valid-global-date-and-time-string>valid global date and time string</a>.</p>
   52873 
   52874     <p>A single property with the name <code title=md-vevent-last-modified><a href=#md-vevent-last-modified>last-modified</a></code> may be present within
   52875     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52876 
   52877    </dd>
   52878 
   52879 
   52880    <dt><dfn id=md-vevent-sequence title=md-vevent-sequence><code>sequence</code></dfn></dt>
   52881 
   52882    <dd>
   52883 
   52884     <p>Gives a revision number for the event information.</p>
   52885 
   52886     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   52887     text that is a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</p>
   52888 
   52889     <p>A single property with the name <code title=md-vevent-sequence><a href=#md-vevent-sequence>sequence</a></code> may be present within
   52890     each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>.</p>
   52891 
   52892    </dd>
   52893 
   52894 
   52895    <!-- REQUEST-STATUS not included, calendaring system interop
   52896    feature -->
   52897 
   52898 
   52899   </dl><p>A string is a <dfn id=valid-vevent-duration-string>valid vevent duration string</dfn> if it
   52900   matches the following pattern:</p>
   52901 
   52902   <ol><li>A U+0050 LATIN CAPITAL LETTER P character (P).</li>
   52903 
   52904    <li>One of the following:
   52905 
   52906     <ul><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
   52907      U+0057 LATIN CAPITAL LETTER W character (W). The integer
   52908      represents a duration of that number of weeks. </li>
   52909 
   52910      <li> At least one, and possible both in this order, of the
   52911      following:
   52912 
   52913       <ol><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
   52914        U+0044 LATIN CAPITAL LETTER D character (D). The integer
   52915        represents a duration of that number of days. </li>
   52916 
   52917        <li> A U+0054 LATIN CAPITAL LETTER T character (T) followed by
   52918        any one of the following, or the first and second of the
   52919        following in that order, or the second and third of the
   52920        following in that order, or all three of the following in this
   52921        order:
   52922 
   52923         <ol><li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
   52924          U+0048 LATIN CAPITAL LETTER H character (H). The integer
   52925          represents a duration of that number of hours. </li>
   52926 
   52927          <li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
   52928          U+004D LATIN CAPITAL LETTER M character (M). The integer
   52929          represents a duration of that number of minutes. </li>
   52930 
   52931          <li> A <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a
   52932          U+0053 LATIN CAPITAL LETTER S character (S). The integer
   52933          represents a duration of that number of seconds. </li>
   52934 
   52935         </ol></ol></li>
   52936 
   52937     </ul></li>
   52938 
   52939   </ol><h5 id=conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</h5>
   52940 
   52941   <p>Given a list of nodes <var title="">nodes</var> in a
   52942   <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
   52943   to <dfn id=extracting-vevent-data title="extracting vEvent data">extract any vEvent data
   52944   represented by those nodes</dfn>:</p>
   52945 
   52946   <ol><li><p>If none of the nodes in <var title="">nodes</var> are <a href=#concept-item title=concept-item>items</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
   52947    then there is no vEvent data. Abort the algorithm, returning
   52948    nothing.</li>
   52949 
   52950    <li><p>Let <var title="">output</var> be an empty string.</li>
   52951 
   52952    <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VCALENDAR</code>" to <var title="">output</var>.</li>
   52953 
   52954    <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">PRODID</code>" and the value equal to a
   52955    user-agent-specific string representing the user agent to <var title="">output</var>.</li>
   52956 
   52957    <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">VERSION</code>" and the value "<code title="">2.0</code>"
   52958    to <var title="">output</var>.</li>
   52959 
   52960    <li>
   52961 
   52962     <p>For each node <var title="">node</var> in <var title="">nodes</var> that is an <a href=#concept-item title=concept-item>item</a> with the type <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>,
   52963     run the following steps:</p>
   52964 
   52965     <ol><li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">BEGIN</code>" and the value "<code title="">VEVENT</code>" to <var title="">output</var>.</li>
   52966 
   52967      <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">DTSTAMP</code>" and a value consisting of an iCalendar
   52968      DATE-TIME string representing the current date and time, with the
   52969      annotation "<code title="">VALUE=DATE-TIME</code>", to <var title="">output</var>.  <a href=#refsRFC2445>[RFC2445]</a></li>
   52970 
   52971      <li><p>If the <a href=#concept-item title=concept-item>item</a> has a
   52972      <a href=#global-identifier>global identifier</a>, <a href=#add-an-icalendar-line>add an iCalendar
   52973      line</a> with the type "<code title="">UID</code>" and that
   52974      <a href=#global-identifier>global identifier</a> as the value to <var title="">output</var>.</li>
   52975 
   52976      <li>
   52977 
   52978       <p>For each element <var title="">element</var> that is <a href=#the-properties-of-an-item title="the properties of an item">a property of the item</a>
   52979       <var title="">node</var>: for each name <var title="">name</var>
   52980       in <var title="">element</var>'s <a href=#property-names>property names</a>,
   52981       run the appropriate set of substeps from the following list:</p>
   52982 
   52983       <dl><dt>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is an <a href=#concept-item title=concept-item>item</a></dt>
   52984 
   52985        <dd>
   52986 
   52987         <p>Skip the property.</p>
   52988 
   52989        </dd>
   52990 
   52991 
   52992        <dt>If <var title="">element</var> is a <code><a href=#the-time-element>time</a></code>
   52993        element</dt>
   52994 
   52995        <dd>
   52996 
   52997         <p>Let <var title="">value</var> be the result of stripping
   52998         all U+002D HYPHEN-MINUS (-) and U+003A COLON (:) characters
   52999         from the property's <a href=#concept-property-value title=concept-property-value>value</a>.</p>
   53000 
   53001         <p>If the property's <a href=#concept-property-value title=concept-property-value>value</a> is a <a href=#valid-date-string>valid
   53002         date string</a> then <a href=#add-an-icalendar-line>add an iCalendar line</a>
   53003         with the type <var title="">name</var> and the value <var title="">value</var> to <var title="">output</var>, with the
   53004         annotation "<code title="">VALUE=DATE</code>".</p>
   53005 
   53006         <p>Otherwise, if the property's <a href=#concept-property-value title=concept-property-value>value</a> is a <a href=#valid-global-date-and-time-string>valid
   53007         global date and time string</a> then <a href=#add-an-icalendar-line>add an iCalendar
   53008         line</a> with the type <var title="">name</var> and the
   53009         value <var title="">value</var> to <var title="">output</var>,
   53010         with the annotation "<code title="">VALUE=DATE-TIME</code>".</p>
   53011 
   53012         <p>Otherwise skip the property.</p>
   53013 
   53014        </dd>
   53015 
   53016 
   53017        <dt>Otherwise</dt>
   53018 
   53019        <dd>
   53020 
   53021         <p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type <var title="">name</var> and the property's <a href=#concept-property-value title=concept-property-value>value</a> to <var title="">output</var>.</p>
   53022 
   53023        </dd>
   53024 
   53025       </dl></li>
   53026 
   53027      <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">END</code>" and the value "<code title="">VEVENT</code>"
   53028      to <var title="">output</var>.</li>
   53029 
   53030     </ol></li>
   53031 
   53032    <li><p><a href=#add-an-icalendar-line>Add an iCalendar line</a> with the type "<code title="">END</code>" and the value "<code title="">VCALENDAR</code>" to <var title="">output</var>.</li>
   53033 
   53034   </ol><p>When the above algorithm says that the user agent is to <dfn id=add-an-icalendar-line>add
   53035   an iCalendar line</dfn> consisting of a type <var title="">type</var>, a value <var title="">value</var>, and
   53036   optionally an annotation, to a string <var title="">output</var>, it
   53037   must run the following steps:</p>
   53038 
   53039   <ol><li><p>Let <var title="">line</var> be an empty string.</li>
   53040 
   53041    <li><p>Append <var title="">type</var>, <a href=#converted-to-ascii-uppercase>converted to
   53042    ASCII uppercase</a>, to <var title="">line</var>.</li>
   53043 
   53044    <li>
   53045 
   53046     <p>If there is an annotation:</p>
   53047 
   53048     <ol><li><p>Append a U+003B SEMICOLON character (;) to <var title="">line</var>.</li>
   53049 
   53050      <li><p>Append the annotation to <var title="">line</var>.</li>
   53051 
   53052     </ol></li>
   53053 
   53054    <li><p>Append a U+003A COLON character (:) to <var title="">line</var>.</li>
   53055 
   53056    <li><p>Prefix every U+005C REVERSE SOLIDUS character (\) in
   53057    <var title="">value</var> with another U+005C REVERSE SOLIDUS
   53058    character (\).</li>
   53059 
   53060    <li><p>Prefix every U+002C COMMA character (,) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   53061    (\).</li>
   53062 
   53063    <li><p>Prefix every U+003B SEMICOLON character (;) in <var title="">value</var> with a U+005C REVERSE SOLIDUS character
   53064    (\).</li>
   53065 
   53066    <li><p>Replace every U+000D CARRIAGE RETURN U+000A LINE FEED
   53067    character pair (CRLF) in <var title="">value</var> with a U+005C
   53068    REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL
   53069    LETTER N character (n).</li>
   53070 
   53071    <li><p>Replace every remaining U+000D CARRIAGE RETURN (CR) or
   53072    U+000A LINE FEED (LF) character in <var title="">value</var> with a
   53073    U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN
   53074    SMALL LETTER N character (n).</li>
   53075 
   53076    <li><p>Append <var title="">value</var> to <var title="">line</var>.</li>
   53077 
   53078    <li><p>Let <var title="">maximum length</var> be 75.</li>
   53079 
   53080    <li>
   53081 
   53082     <p>If and while <var title="">line</var> is longer than <var title="">maximum length</var> Unicode code points long, run the
   53083     following substeps:</p>
   53084 
   53085     <ol><li><p>Append the first <var title="">maximum length</var>
   53086      Unicode code points of <var title="">line</var> to <var title="">output</var>.</li>
   53087 
   53088      <li><p>Remove the first <var title="">maximum length</var>
   53089      Unicode code points from <var title="">line</var>.</li>
   53090 
   53091      <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>
   53092 
   53093      <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>
   53094 
   53095      <li><p>Append a U+0020 SPACE character to <var title="">output</var>.</li>
   53096 
   53097      <li><p>Let <var title="">maximum length</var> be 74.</li>
   53098 
   53099     </ol></li>
   53100 
   53101    <li><p>Append (what remains of) <var title="">line</var> to <var title="">output</var>.</li>
   53102 
   53103    <li><p>Append a U+000D CARRIAGE RETURN character (CR) to <var title="">output</var>.</li>
   53104 
   53105    <li><p>Append a U+000A LINE FEED character (LF) to <var title="">output</var>.</li>
   53106 
   53107   </ol><p class=note>This algorithm can generate invalid iCalendar
   53108   output, if the input does not conform to the rules described for the
   53109   <code title=md-vevent><a href=#md-vevent>http://microformats.org/profile/hcalendar#vevent</a></code>
   53110   <a href=#item-type>item type</a> and <a href=#defined-property-name title="defined property
   53111   name">defined property names</a>.</p> <!-- of course since
   53112   iCalendar doesn't define error handling, this is somewhat
   53113   problematic. -->
   53114 
   53115 
   53116 
   53117   <h5 id=examples-2><span class=secno>5.4.2.2 </span>Examples</h5>
   53118 
   53119   <p><i>This section is non-normative.</i></p>
   53120 
   53121 <!-- get more from http://www.ietf.org/rfc/rfc2445.txt -->
   53122 
   53123   <div class=example>
   53124 
   53125    <p>Here is an example of a page that uses the vEvent vocabulary to
   53126    mark up an event:</p>
   53127 
   53128    <pre>&lt;body itemscope itemtype="http://microformats.org/profile/hcalendar#vevent"&gt;
   53129  ...
   53130  &lt;h1 itemprop="summary"&gt;Bluesday Tuesday: Money Road&lt;/h1&gt;
   53131  ...
   53132  &lt;time itemprop="dtstart" datetime="2009-05-05T19:00:00Z"&gt;May 5th @ 7pm&lt;/time&gt;
   53133  (until &lt;time itemprop="dtend" datetime="2009-05-05T21:00:00Z"&gt;9pm&lt;/time&gt;)
   53134  ...
   53135  &lt;a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
   53136     rel="bookmark" itemprop="url"&gt;Link to this page&lt;/a&gt;
   53137  ...
   53138  &lt;p&gt;Location: &lt;span itemprop="location"&gt;The RoadHouse&lt;/span&gt;&lt;/p&gt;
   53139  ...
   53140  &lt;p&gt;&lt;input type=button value="Add to Calendar"
   53141            onclick="location = getCalendar(this)"&gt;&lt;/p&gt;
   53142  ...
   53143  &lt;meta itemprop="description" content="via livebrum.co.uk"&gt;
   53144 &lt;/body&gt;</pre>
   53145 
   53146    <p>The "<code title="">getCalendar()</code>" method could look like
   53147    this:</p>
   53148 
   53149    <pre>function getCalendar(node) {
   53150   // This function assumes the content is valid.
   53151   // It is not a compliant implementation of the algorithm for <a href=#extracting-vevent-data>extracting vEvent data</a>.
   53152   while (node &amp;&amp; (!node.itemScope || !node.itemType == 'http://microformats.org/profile/hcalendar#vevent'))
   53153     node = node.parentNode;
   53154   if (!node) {
   53155     alert('No event data found.');
   53156     return;
   53157   }
   53158   var stamp = new Date();
   53159   var stampString = '' + stamp.getUTCFullYear() + (stamp.getUTCMonth() + 1) + stamp.getUTCDate() + 'T' +
   53160                          stamp.getUTCHours() + stamp.getUTCMinutes() + stamp.getUTCSeconds() + 'Z';
   53161   var calendar = 'BEGIN:VCALENDAR\r\nPRODID:HTML\r\nVERSION:2.0\r\nBEGIN:VEVENT\r\nDTSTAMP:' + stampString + '\r\n';
   53162   if (node.itemId)
   53163     calendar += 'UID:' + node.itemId + '\r\n';
   53164   for (var propIndex = 0; propIndex &lt; node.properties.length; propIndex += 1) {
   53165     var prop = node.properties[propIndex];
   53166     var value = prop.itemValue;
   53167     var parameters = '';
   53168     if (prop.localName == 'time') {
   53169       value = value.replace(/[:-]/g, '');
   53170       if (value.match(/T/))
   53171         parameters = ';VALUE=DATE';
   53172       else
   53173         parameters = ';VALUE=DATE-TIME';
   53174     } else {
   53175       value = value.replace(/\\/g, '\\n');
   53176       value = value.replace(/;/g, '\\;');
   53177       value = value.replace(/,/g, '\\,');
   53178       value = value.replace(/\n/g, '\\n');
   53179     }
   53180     for (var nameIndex = 0; nameIndex &lt; prop.itemProp.length; nameIndex += 1) {
   53181       var name = prop.itemProp[nameIndex];
   53182       if (!name.match(/:/) &amp;&amp; !name.match(/\./))
   53183         calendar += name.toUpperCase() + parameters + ':' + value + '\r\n';
   53184     }
   53185   }
   53186   calendar += 'END:VEVENT\r\nEND:VCALENDAR\r\n';
   53187   return 'data:text/calendar;component=vevent,' + encodeURI(calendar);
   53188 }</pre>
   53189 
   53190    <p>The same page could offer some markup, such as the following,
   53191    for copy-and-pasting into blogs:</p>
   53192 
   53193    <pre>&lt;div itemscope itemtype="http://microformats.org/profile/hcalendar#vevent"&gt;
   53194  &lt;p&gt;I'm going to
   53195  &lt;strong itemprop="summary"&gt;Bluesday Tuesday: Money Road&lt;/strong&gt;,
   53196  &lt;time itemprop="dtstart" datetime="2009-05-05T19:00:00Z"&gt;May 5th at 7pm&lt;/time&gt;
   53197  to &lt;time itemprop="dtend" content="2009-05-05T21:00:00Z"&gt;9pm&lt;/time&gt;,
   53198  at &lt;span itemprop="location"&gt;The RoadHouse&lt;/span&gt;!&lt;/p&gt;
   53199  &lt;p&gt;&lt;a href="http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road"
   53200        itemprop="url"&gt;See this event on livebrum.co.uk&lt;/a&gt;.&lt;/p&gt;
   53201  &lt;meta itemprop="description" content="via livebrum.co.uk"&gt;
   53202 &lt;/div&gt;</pre>
   53203 
   53204   </div>
   53205 
   53206 
   53207 
   53208   <h4 id=licensing-works><span class=secno>5.4.3 </span>Licensing works</h4>
   53209 
   53210 
   53211 
   53212   <p>An item with the <a href=#item-type>item type</a> <dfn id=md-work title=md-work><code>http://n.whatwg.org/work</code></dfn>
   53213   represents a work (e.g. an article, an image, a video, a song,
   53214   etc). This type is primarily intended to allow authors to include
   53215   licensing information for works.</p>
   53216 
   53217   <p>The following are the type's <a href=#defined-property-name title="defined property
   53218   name">defined property names</a>.</p>
   53219 
   53220   <dl><dt><dfn id=md-work-work title=md-work-work><code>work</code></dfn></dt>
   53221 
   53222    <dd>
   53223 
   53224     <p>Identifies the work being described.</p>
   53225 
   53226     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   53227     an <a href=#absolute-url>absolute URL</a>.</p>
   53228 
   53229     <p>Exactly one property with the name <code title=md-work-work><a href=#md-work-work>work</a></code> must be present within each <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>
   53230 
   53231    </dd>
   53232 
   53233 
   53234    <dt><dfn id=md-work-title title=md-work-title><code>title</code></dfn></dt>
   53235 
   53236    <dd>
   53237 
   53238     <p>Gives the name of the work.</p>
   53239 
   53240     <p>A single property with the name <code title=md-work-title><a href=#md-work-title>title</a></code> may be present within each
   53241     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>
   53242 
   53243    </dd>
   53244 
   53245 
   53246    <dt><dfn id=md-work-author title=md-work-author><code>author</code></dfn></dt>
   53247 
   53248    <dd>
   53249 
   53250     <p>Gives the name or contact information of one of the authors or
   53251     creators of the work.</p>
   53252 
   53253     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   53254     either an <a href=#concept-item title=concept-item>item</a> with the type
   53255     <code title=md-vcard><a href=#md-vcard>http://microformats.org/profile/hcard</a></code>, or
   53256     text.</p>
   53257 
   53258     <p>Any number of properties with the name <code title=md-work-author><a href=#md-work-author>author</a></code> may be present within each
   53259     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>
   53260 
   53261    </dd>
   53262 
   53263 
   53264    <dt><dfn id=md-work-license title=md-work-license><code>license</code></dfn></dt>
   53265 
   53266    <dd>
   53267 
   53268     <p>Identifies one of the licenses under which the work is
   53269     available.</p>
   53270 
   53271     <p>The <a href=#concept-property-value title=concept-property-value>value</a> must be
   53272     an <a href=#absolute-url>absolute URL</a>.</p>
   53273 
   53274     <p>Any number of properties with the name <code title=md-work-license><a href=#md-work-license>license</a></code> may be present within each
   53275     <a href=#concept-item title=concept-item>item</a> with the type <code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>.</p>
   53276 
   53277    </dd>
   53278 
   53279   </dl><h5 id=conversion-to-rdf><span class=secno>5.4.3.1 </span>Conversion to RDF</h5>
   53280 
   53281   <p>For the purposes of RDF processors, the triples obtained from the
   53282   following Turtle must be applied:</p>
   53283 
   53284   <pre class=turtle>&lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Awork&gt;
   53285   &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
   53286   &lt;http://www.w3.org/2002/07/owl#sameAs&gt; .
   53287 &lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Atitle&gt;
   53288   &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
   53289   &lt;http://purl.org/dc/terms/title>; .
   53290 &lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Aauthor&gt;
   53291   &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
   53292   &lt;http://creativecommons.org/ns#attributionName&gt; .
   53293 &lt;http://www.w3.org/1999/xhtml/microdata#http%3A%2F%2Fn.whatwg.org%2Fwork%23%3Alicense&gt;
   53294   &lt;http://www.w3.org/2002/07/owl#equivalentProperty&gt;
   53295   &lt;http://www.w3.org/1999/xhtml/vocab#license&gt; .</pre>
   53296 
   53297   <p class=note>The subjects of the statements above are the
   53298   predicates that result from <a href=#extracting-rdf title="extracting rdf">converting
   53299   to RDF</a> an HTML page containing microdata with an item whose
   53300   <a href=#item-type title="item type">type</a> is "<code title=md-work><a href=#md-work>http://n.whatwg.org/work</a></code>".</p>
   53301 
   53302 
   53303 
   53304   <h5 id=examples-3><span class=secno>5.4.3.2 </span>Examples</h5>
   53305 
   53306   <p><i>This section is non-normative.</i></p>
   53307 
   53308   <div class=example>
   53309 
   53310    <p>This example shows an embedded image entitled <cite>My
   53311    Pond</cite>, licensed under the Creative Commons Attribution-Share
   53312    Alike 3.0 United States License and the MIT license
   53313    simultaneously.</p>
   53314 
   53315    <pre>&lt;figure <strong>itemscope itemtype="http://n.whatwg.org/work"</strong>&gt;
   53316  &lt;img <strong>itemprop="work"</strong> src="mypond.jpeg"&gt;
   53317  &lt;figcaption&gt;
   53318   &lt;p&gt;&lt;cite <strong>itemprop="title"</strong>&gt;My Pond&lt;/cite&gt;&lt;/p&gt;
   53319   &lt;p&gt;&lt;small&gt;Licensed under the &lt;a <strong>itemprop="license"</strong>
   53320   href="http://creativecommons.org/licenses/by-sa/3.0/us/"&gt;Creative
   53321   Commons Attribution-Share Alike 3.0 United States License&lt;/a&gt;
   53322   and the &lt;a <strong>itemprop="license"</strong>
   53323   href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT
   53324   license&lt;/a&gt;.&lt;/small&gt;
   53325  &lt;/figcaption&gt;
   53326 &lt;/figure&gt;</pre>
   53327 
   53328   </div>
   53329 
   53330 
   53331 
   53332 
   53333 
   53334 
   53335 
   53336 
   53337 
   53338   <div class=impl>
   53339 
   53340   <h3 id=converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</h3>
   53341 
   53342 
   53343 
   53344 
   53345   <h4 id=json><span class=secno>5.5.1 </span>JSON</h4>
   53346 
   53347   <p>Given a list of nodes <var title="">nodes</var> in a
   53348   <code><a href=#document>Document</a></code>, a user agent must run the following algorithm
   53349   to <dfn id=extracting-json title="extracting JSON">extract the microdata from those
   53350   nodes into a JSON form</dfn>:</p>
   53351 
   53352   <ol><li><p>Let <var title="">result</var> be an empty object.</li>
   53353 
   53354    <li><p>Let <var title="">items</var> be an empty array.</li>
   53355 
   53356    <li><p>For each <var title="">node</var> in <var title="">nodes</var>, check if the element is a <a href=#top-level-microdata-items title="top-level microdata items">top-level microdata item</a>,
   53357    and if it is then <a href=#get-the-object>get the object</a> for that element and
   53358    add it to <var title="">items</var>.</li>
   53359 
   53360    <li><p>Add an entry to <var title="">result</var> called "<code title="">items</code>" whose value is the array <var title="">items</var>.</li>
   53361 
   53362    <li><p>Return the result of serializing <var title="">result</var>
   53363    to JSON.</li>
   53364 
   53365   </ol><p>When the user agent is to <dfn id=get-the-object>get the object</dfn> for an item
   53366   <var title="">item</var>, it must run the following substeps:</p>
   53367 
   53368   <ol><li><p>Let <var title="">result</var> be an empty object.</li>
   53369 
   53370    <li><p>If the <var title="">item</var> has an <a href=#item-type>item
   53371    type</a>, add an entry to <var title="">result</var> called
   53372    "<code title="">type</code>" whose value is the <a href=#item-type>item
   53373    type</a> of <var title="">item</var>.</li>
   53374 
   53375    <li><p>If the <var title="">item</var> has an <a href=#global-identifier>global
   53376    identifier</a>, add an entry to <var title="">result</var>
   53377    called "<code title="">id</code>" whose value is the <a href=#global-identifier>global
   53378    identifier</a> of <var title="">item</var>.</li>
   53379 
   53380    <li><p>Let <var title="">properties</var> be an empty
   53381    object.</li>
   53382 
   53383    <li>
   53384 
   53385     <p>For each element <var title="">element</var> that has one or
   53386     more <a href=#property-names>property names</a> and is one of <a href=#the-properties-of-an-item title="the
   53387     properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
   53388     algorithm that returns <a href=#the-properties-of-an-item>the properties of an item</a>, run
   53389     the following substeps:</p>
   53390 
   53391     <ol><li><p>Let <var title="">value</var> be the <a href=#concept-property-value title=concept-property-value>property value</a> of <var title="">element</var>.</li>
   53392 
   53393      <li><p>If <var title="">value</var> is an <a href=#concept-item title=concept-item>item</a>, then <a href=#get-the-object>get the
   53394      object</a> for <var title="">value</var>, and then replace
   53395      <var title="">value</var> with the object returned from those
   53396      steps.</li>
   53397 
   53398      <li>
   53399 
   53400       <p>For each name <var title="">name</var> in <var title="">element</var>'s <a href=#property-names>property names</a>, run the
   53401       following substeps:</p>
   53402 
   53403       <ol><li><p>If there is no entry named <var title="">name</var> in
   53404        <var title="">properties</var>, then add an entry named <var title="">name</var> to <var title="">properties</var> whose
   53405        value is an empty array.</li>
   53406 
   53407        <li><p>Append <var title="">value</var> to the entry named <var title="">name</var> in <var title="">properties</var>.</li>
   53408 
   53409       </ol></li>
   53410 
   53411     </ol></li>
   53412 
   53413    <li><p>Add an entry to <var title="">result</var> called "<code title="">properties</code>" whose value is the object <var title="">properties</var>.</li>
   53414 
   53415    <li><p>Return <var title="">result</var>.</li>
   53416 
   53417   </ol><h4 id=rdf><span class=secno>5.5.2 </span>RDF</h4>
   53418 
   53419   <p>To <dfn id=extracting-rdf title="extracting rdf">convert a <code>Document</code> to
   53420   RDF</dfn>, a user agent must run the following algorithm:</p>
   53421 
   53422   <ol><li>
   53423 
   53424     <p>If <a href=#the-title-element>the <code>title</code> element</a> is not null,
   53425     then generate the following triple:</p>
   53426 
   53427     <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53428      <dt>predicate <dd> <code title="">http://purl.org/dc/terms/title</code>
   53429      <dt>object    <dd> the concatenation of the data of all the child <a href=#text-node title="text node">text nodes</a> of <a href=#the-title-element>the <code>title</code> element</a>, in <a href=#tree-order>tree order</a>, as a plain literal, with the language information set from the <a href=#language>language</a> of <a href=#the-title-element>the <code>title</code> element</a>, if it is not unknown.
   53430 
   53431     </dl></li>
   53432 
   53433    <li>
   53434 
   53435     <p>For each <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and
   53436     <code><a href=#the-link-element>link</a></code> element in the <code><a href=#document>Document</a></code>, run these
   53437     substeps:</p>
   53438 
   53439     <ol><li><p>If the element does not have a <code title="">rel</code>
   53440      attribute, then skip this element.</li>
   53441 
   53442      <li><p>If the element does not have an <code title="">href</code>
   53443      attribute, then skip this element.</li>
   53444 
   53445      <li><p>If <a href=#resolve-a-url title="resolve a URL">resolving</a> the
   53446      element's <code title="">href</code> attribute relative to the
   53447      element is not successful, then skip this element.</li>
   53448 
   53449      <li><p>Otherwise, <a href=#split-a-string-on-spaces title="split a string on spaces">split
   53450      the value of the element's <code title="">rel</code> attribute on
   53451      spaces</a>, obtaining <var title="">list of tokens</var>.</li>
   53452 
   53453      <li><p>Convert each token in <var title="">list of tokens</var>
   53454      that does not contain a U+003A COLON characters (:) <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">to ASCII
   53455      lowercase</a>.</li>
   53456 
   53457      <li><p>If <var title="">list of tokens</var> contains more than
   53458      one instance of the token <code title=rel-up><a href=#link-type-up>up</a></code>, then
   53459      remove all such tokens.</li>
   53460 
   53461      <li><p>Coalesce duplicate tokens in <var title="">list of
   53462      tokens</var>.</li>
   53463 
   53464      <li><p>If <var title="">list of tokens</var> contains both the
   53465      tokens <code title=rel-alternate><a href=#link-type-alternate>alternate</a></code> and <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>, then remove them both
   53466      and replace them with the single (uppercase) token <code title="">ALTERNATE-STYLESHEET</code>.</li>
   53467 
   53468      <li>
   53469 
   53470       <p>For each token <var title="">token</var> in <var title="">list of tokens</var> that contains no U+003A COLON
   53471       characters (:), generate the following triple:</p>
   53472 
   53473       <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53474        <dt>predicate <dd> the concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and <var title="">token</var>, with any characters in <var title="">token</var> that are not valid in the &lt;ifragment&gt; production of the IRI syntax being %-escaped <a href=#refsRFC3987>[RFC3987]</a>
   53475        <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
   53476       </dl><p>For each token <var title="">token</var> in <var title="">list of tokens</var> that is an <a href=#absolute-url>absolute
   53477       URL</a>, generate the following triple:</p>
   53478 
   53479       <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53480        <dt>predicate <dd> <var title="">token</var>
   53481        <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">href</code> attribute relative to the element
   53482       </dl></li>
   53483 
   53484     </ol></li>
   53485 
   53486    <li>
   53487 
   53488     <p>For each <code><a href=#meta>meta</a></code> element in the <code><a href=#document>Document</a></code>
   53489     that has a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and
   53490     a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, if the
   53491     value of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
   53492     contains no U+003A COLON characters (:), generate the following
   53493     triple:</p>
   53494 
   53495     <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53496      <dt>predicate <dd> the concatenation of the string "<code title="">http://www.w3.org/1999/xhtml/vocab#</code>" and the value of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute, <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, with any characters in the value that are not valid in the &lt;ifragment&gt; production of the IRI syntax being %-escaped <a href=#refsRFC3987>[RFC3987]</a>
   53497      <dt>object    <dd> the value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, as a plain literal, with the language information set from the <a href=#language>language</a> of the element, if it is not unknown
   53498     </dl><p>For each <code><a href=#meta>meta</a></code> element in the <code><a href=#document>Document</a></code>
   53499     that has a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and
   53500     a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, if the
   53501     value of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is
   53502     an <a href=#absolute-url>absolute URL</a>, generate the following triple:</p>
   53503 
   53504     <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53505      <dt>predicate <dd> the value of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute
   53506      <dt>object    <dd> the value of the element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, as a plain literal, with the language information set from the <a href=#language>language</a> of the element, if it is not unknown
   53507     </dl></li>
   53508 
   53509    <li>
   53510 
   53511     <p>For each <code><a href=#the-blockquote-element>blockquote</a></code> and <code><a href=#the-q-element>q</a></code> element in
   53512     the <code><a href=#document>Document</a></code> that has a <code title="">cite</code>
   53513     attribute that <a href=#resolve-a-url title="resolve a url">resolves</a>
   53514     successfully relative to the element, generate the following
   53515     triple:</p>
   53516 
   53517     <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53518      <dt>predicate <dd> <code title="">http://purl.org/dc/terms/source</code>
   53519      <dt>object    <dd> the <a href=#absolute-url>absolute URL</a> that results from <a href=#resolve-a-url title="resolve a URL">resolving</a> the value of the element's <code title="">cite</code> attribute relative to the element
   53520     </dl></li>
   53521 
   53522    <li>
   53523 
   53524     <p>Let <var title="">memory</var> be a mapping of items to
   53525     subjects, initially empty.</p>
   53526 
   53527    </li>
   53528 
   53529    <li>
   53530 
   53531     <p>For each element that is also a <a href=#top-level-microdata-items title="top-level
   53532     microdata items">top-level microdata item</a>, run the
   53533     following steps:</p>
   53534 
   53535     <ol><li>
   53536 
   53537       <p><a href=#generate-the-triples-for-an-item title="generate the triples for an item">Generate the
   53538       triples for the item</a>. Pass a reference to <var title="">memory</var> as the item/subject list. Let <var title="">result</var> be the subject returned.</p>
   53539 
   53540      </li>
   53541 
   53542      <li>
   53543 
   53544       <p>Generate the following triple:</p>
   53545 
   53546       <dl class=triple><dt>subject   <dd> <a href="#the-document's-current-address">the document's current address</a>
   53547        <dt>predicate <dd> <code title="">http://www.w3.org/1999/xhtml/microdata#item</code>
   53548        <dt>object    <dd> <var title="">result</var>
   53549       </dl></li>
   53550 
   53551     </ol></li>
   53552 
   53553   </ol><p>When the user agent is to <dfn id=generate-the-triples-for-an-item>generate the triples for an
   53554   item</dfn> <var title="">item</var>, given a reference to an
   53555   item/subject list <var title="">memory</var>, and optionally given a
   53556   fallback type <var title="">fallback type</var> and property name
   53557   <var title="">fallback name</var>, it must follow the following
   53558   steps:</p>
   53559 
   53560   <ol><li><p>If there is an entry for <var title="">item</var> in <var title="">memory</var>, then let <var title="">subject</var> be the
   53561    subject of that entry. Otherwise, if <var title="">item</var> has a
   53562    <a href=#global-identifier>global identifier</a> and that <a href=#global-identifier>global
   53563    identifier</a> is an <a href=#absolute-url>absolute URL</a>, let <var title="">subject</var> be that <a href=#global-identifier>global
   53564    identifier</a>. Otherwise, let <var title="">subject</var> be a
   53565    new blank node.</li>
   53566 
   53567    <li><p>Add a mapping from <var title="">item</var> to <var title="">subject</var> in <var title="">memory</var>, if there
   53568    isn't one already.</li>
   53569 
   53570    <li><p>If <var title="">item</var> has an <a href=#item-type>item type</a>
   53571    and that <a href=#item-type>item type</a> is an <a href=#absolute-url>absolute URL</a>,
   53572    let <var title="">type</var> be that <a href=#item-type>item
   53573    type</a>. Otherwise, let <var title="">type</var> be the empty
   53574    string.</li>
   53575 
   53576    <!-- The special characters used in URLs beyond this point are
   53577    intended to make it so that a different type/name combination
   53578    couldn't generate the same string. ":" and "%20" are used because
   53579    they can't be put in /name/ when all this is used. -->
   53580 
   53581    <li>
   53582 
   53583     <p>If <var title="">type</var> is not the empty string, run the
   53584     following steps:</p>
   53585 
   53586     <ol><li><p>Generate the following triple:</p>
   53587 
   53588       <dl class=triple><dt>subject   <dd> <var title="">subject</var>
   53589        <dt>predicate <dd> <code title="">http://www.w3.org/1999/02/22-rdf-syntax-ns#type</code>
   53590        <dt>object    <dd> <var title="">type</var>
   53591       </dl></li>
   53592 
   53593      <li><p>If <var title="">type</var> does not contain a U+0023
   53594      NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
   53595      character (#) to <var title="">type</var>.</li>
   53596 
   53597      <li><p>If <var title="">type</var> does not have a U+003A COLON
   53598      character (:) after its U+0023 NUMBER SIGN character (#), append
   53599      a U+003A COLON character (:) to <var title="">type</var>.</li>
   53600 
   53601     </ol></li>
   53602 
   53603    <li>
   53604 
   53605     <p>If <var title="">type</var> is the empty string, but <var title="">fallback type</var> is not, run the following
   53606     substeps:</p>
   53607 
   53608     <ol><li><p>Let <var title="">type</var> have the value of <var title="">fallback type</var>.</li>
   53609 
   53610      <li><p>If <var title="">type</var> does not contain a U+0023
   53611      NUMBER SIGN character (#), then append a U+0023 NUMBER SIGN
   53612      character (#) to <var title="">type</var>.</li>
   53613 
   53614      <!-- Special characters beyond this point have to be something
   53615      not in /name/ when this is used below, so either ":", %20, %0D,
   53616      or %0A. This is so that a different type/name combination
   53617      couldn't generate the same string. -->
   53618 
   53619      <li><p>If <var title="">type</var> does not have a U+003A COLON
   53620      character (:) after its U+0023 NUMBER SIGN character (#), append
   53621      a U+003A COLON character (:) to <var title="">type</var>.</li>
   53622 
   53623      <li><p>If the last character of <var title="">type</var> is not a
   53624      U+003A COLON character (:), append a U+0025 PERCENT SIGN
   53625      character (%), a U+0032 DIGIT TWO character (2), and a U+0030
   53626      DIGIT ZERO character (0) to <var title="">type</var>.</li>
   53627 
   53628      <li><p>Append the value of <var title="">fallback name</var> to
   53629      <var title="">type</var>, with any characters in <var title="">fallback name</var> that are not valid in the
   53630      &lt;ifragment&gt; production of the IRI syntax being
   53631      %-escaped. <a href=#refsRFC3987>[RFC3987]</a></li>
   53632 
   53633     </ol></li>
   53634 
   53635    <li>
   53636 
   53637     <p>For each element <var title="">element</var> that has one or
   53638     more <a href=#property-names>property names</a> and is one of <a href=#the-properties-of-an-item title="the
   53639     properties of an item">the properties of the item</a> <var title="">item</var>, in the order those elements are given by the
   53640     algorithm that returns <a href=#the-properties-of-an-item>the properties of an item</a>, run
   53641     the following substep:</p>
   53642 
   53643     <ol><li>
   53644 
   53645       <p>For each name <var title="">name</var> in <var title="">element</var>'s <a href=#property-names>property names</a>, run the
   53646       following substeps:</p>
   53647 
   53648       <ol><li><p>If <var title="">type</var> is the empty string and <var title="">name</var> is not an <a href=#absolute-url>absolute URL</a>, then
   53649        abort these substeps.</li>
   53650 
   53651        <li><p>Let <var title="">value</var> be the <a href=#concept-property-value title=concept-property-value>property value</a> of <var title="">element</var>.</li>
   53652 
   53653        <li><p>If <var title="">value</var> is an <a href=#concept-item title=concept-item>item</a>, then <a href=#generate-the-triples-for-an-item title="generate
   53654        the triples for an item">generate the triples</a> for <var title="">value</var>. Pass a reference to <var title="">memory</var> as the item/subject list, and pass <var title="">type</var> as the fallback type and <var title="">name</var> as the fallback property name. Replace <var title="">value</var> by the subject returned from those
   53655        steps.</li>
   53656 
   53657        <!-- could support <time> here somehow, though we'd have to
   53658        reserialise it, check if the <time> was valid, check if it had a
   53659        date, a time, a timezone, etc. -->
   53660 
   53661        <li><p>Otherwise, if <var title="">element</var> is not one of
   53662        the <a href=#url-property-elements>URL property elements</a>, let <var title="">value</var> be a plain literal, with the language
   53663        information set from the <a href=#language>language</a> of the element, if
   53664        it is not unknown.</li>
   53665 
   53666        <li>
   53667 
   53668         <dl><dt>If <var title="">name</var> is an <a href=#absolute-url>absolute
   53669          URL</a></dt>
   53670 
   53671          <dd>
   53672 
   53673           <p>Let <var title="">predicate</var> be <var title="">name</var>.</p>
   53674 
   53675          </dd>
   53676 
   53677          <dt>If <var title="">name</var> contains no U+003A COLON
   53678          characters (:)</dt>
   53679 
   53680          <dd>
   53681 
   53682           <ol><li><p>Let <var title="">s</var> be <var title="">type</var>.</li>
   53683 
   53684            <li><p>If the last character of <var title="">s</var> is
   53685            not a U+003A COLON character (:), append a U+0025 PERCENT
   53686            SIGN character (%), a U+0032 DIGIT TWO character (2), and a
   53687            U+0030 DIGIT ZERO character (0) to <var title="">s</var>.</li>
   53688 
   53689            <li><p>Append the value of <var title="">name</var> to <var title="">s</var>, with any characters in <var title="">name</var> that are not valid in the
   53690            &lt;ifragment&gt; production of the IRI syntax being
   53691            %-escaped. <a href=#refsRFC3987>[RFC3987]</a></li>
   53692 
   53693            <li>
   53694 
   53695             <p>Let <var title="">predicate</var> be the concatenation
   53696             of the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>"
   53697             and <var title="">s</var>, with any characters in <var title="">s</var> that are not valid in the &lt;ifragment&gt;
   53698             production of the IRI syntax being %-escaped, but without
   53699             double-escaping existing %-escapes. <a href=#refsRFC3987>[RFC3987]</a></p> <!-- this ensures
   53700             you can't use a URL to get the same effect -->
   53701 
   53702             <p class=example>For example if the string <var title="">s</var> is "<code title="">http://example.com/a#:q%20r</code>", the
   53703             resulting <var title="">predicate</var> would be "<code title="">http://www.w3.org/1999/xhtml/microdata#http://example.com/a%23:q%20r</code>".</p>
   53704 
   53705            </li>
   53706 
   53707           </ol></dd>
   53708 
   53709         </dl></li>
   53710 
   53711        <li>
   53712 
   53713         <p>Generate the following triple:</p>
   53714 
   53715         <dl class=triple><dt>subject   <dd> <var title="">subject</var>
   53716          <dt>predicate <dd> <var title="">predicate</var>
   53717          <dt>object    <dd> <var title="">value</var>
   53718         </dl></li>
   53719 
   53720       </ol></li>
   53721 
   53722     </ol></li>
   53723 
   53724    <li><p>Return <var title="">subject</var>.</li>
   53725 
   53726   </ol><h5 id=examples-4><span class=secno>5.5.2.1 </span>Examples</h5>
   53727 
   53728   <p><i>This section is non-normative.</i></p>
   53729 
   53730   <div class=example>
   53731 
   53732    <p>Here is an example of some HTML using Microdata to express RDF
   53733    statements:</p>
   53734 
   53735    <pre>&lt;dl itemscope
   53736     itemtype="http://purl.org/vocab/frbr/core#Work"
   53737     itemid="http://purl.oreilly.com/works/45U8QJGZSQKDH8N"&gt;
   53738  &lt;dt&gt;Title&lt;/dt&gt;
   53739  &lt;dd&gt;&lt;cite itemprop="http://purl.org/dc/terms/title"&gt;Just a Geek&lt;/cite&gt;&lt;/dd&gt;
   53740  &lt;dt&gt;By&lt;/dt&gt;
   53741  &lt;dd&gt;&lt;span itemprop="http://purl.org/dc/terms/creator"&gt;Wil Wheaton&lt;/span&gt;&lt;/dd&gt;
   53742  &lt;dt&gt;Format&lt;/dt&gt;
   53743  &lt;dd itemprop="http://purl.org/vocab/frbr/core#realization"
   53744      itemscope
   53745      itemtype="http://purl.org/vocab/frbr/core#Expression"
   53746      itemid="http://purl.oreilly.com/products/9780596007683.BOOK"&gt;
   53747   &lt;link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/BOOK"&gt;
   53748   Print
   53749  &lt;/dd&gt;
   53750  &lt;dd itemprop="http://purl.org/vocab/frbr/core#realization"
   53751      itemscope
   53752      itemtype="http://purl.org/vocab/frbr/core#Expression"
   53753      itemid="http://purl.oreilly.com/products/9780596802189.EBOOK"&gt;
   53754   &lt;link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/EBOOK"&gt;
   53755   Ebook
   53756  &lt;/dd&gt;
   53757 &lt;/dl&gt;</pre>
   53758 
   53759    <p>This is equivalent to the following Turtle:</p>
   53760 
   53761   <pre class=turtle>@prefix dc: &lt;http://purl.org/dc/terms/>; .
   53762  @prefix frbr: &lt;http://purl.org/vocab/frbr/core#&gt; .
   53763 
   53764 &lt;http://purl.oreilly.com/works/45U8QJGZSQKDH8N>; a frbr:Work ;
   53765      dc:creator "Wil Wheaton"@en ;
   53766      dc:title "Just a Geek"@en ;
   53767      frbr:realization &lt;http://purl.oreilly.com/products/9780596007683.BOOK>;,
   53768          &lt;http://purl.oreilly.com/products/9780596802189.EBOOK>; .
   53769 
   53770 &lt;http://purl.oreilly.com/products/9780596007683.BOOK>; a frbr:Expression ;
   53771      dc:type &lt;http://purl.oreilly.com/product-types/BOOK>; .
   53772 
   53773 &lt;http://purl.oreilly.com/products/9780596802189.EBOOK>; a frbr:Expression ;
   53774      dc:type &lt;http://purl.oreilly.com/product-types/EBOOK>; .</pre>
   53775 
   53776   </div>
   53777 
   53778   <div class=example>
   53779 
   53780    <p>The following snippet of HTML has microdata for two people with
   53781    the same address:</p>
   53782 
   53783    <pre>&lt;p&gt;
   53784  Both
   53785  &lt;span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"&gt;&lt;span itemprop="fn"
   53786  &gt;&lt;span itemprop="n" itemscope&gt;&lt;span itemprop="given-name"&gt;Princeton&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
   53787  and
   53788  &lt;span itemscope itemtype="http://microformats.org/profile/hcard" itemref="home"&gt;&lt;span itemprop="fn"
   53789  &gt;&lt;span itemprop="n" itemscope&gt;&lt;span itemprop="given-name"&gt;Trekkie&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
   53790  live at
   53791  &lt;span id="home" itemprop="adr" itemscope&gt;&lt;span itemprop="street-address"&gt;Avenue Q&lt;/span&gt;.&lt;/span&gt;
   53792 &lt;/p&gt;</pre>
   53793 
   53794    <p>It generates these triples expressed in Turtle (including a
   53795    triple that in this case is expressed twice, though that is not
   53796    meaningful in RDF):</p>
   53797 
   53798    <pre class=turtle>@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .
   53799 @prefix dct: &lt;http://purl.org/dc/terms/>; .
   53800 @prefix hcard: &lt;http://www.w3.org/1999/xhtml/microdata#http://microformats.org/profile/hcard%23:>; .
   53801 
   53802 &lt;&gt; &lt;http://www.w3.org/1999/xhtml/microdata#item&gt; _:n0 ;
   53803    &lt;http://www.w3.org/1999/xhtml/microdata#item&gt; _:n1 .
   53804 _:n0  rdf:type &lt;http://microformats.org/profile/hcard>; ;
   53805       hcard:fn "Princeton" ;
   53806       hcard:n _:n0a
   53807       hcard:adr _:n2 .
   53808 _:n0a hcard:n%20given-name "Princeton" .
   53809 _:n1  rdf:type &lt;http://microformats.org/profile/hcard>; ;
   53810       hcard:fn "Trekkie" ;
   53811       hcard:n _:n1a
   53812       hcard:adr _:n2 .
   53813 _:n1a hcard:n%20given-name "Trekkie" .
   53814 _:n2  hcard:adr%20street-address "Avenue Q" ;
   53815       hcard:adr%20street-address "Avenue Q" .</pre>
   53816 
   53817   </div>
   53818 
   53819 
   53820 
   53821   </div><!--data-component-->
   53822 
   53823 
   53824 
   53825   <h4 id=atom><span class=secno>5.5.3 </span>Atom</h4>
   53826 
   53827   <p>Given a <code><a href=#document>Document</a></code> <var title="">source</var>, a user
   53828   agent may run the following algorithm to <dfn id=extracting-atom title="extracting
   53829   Atom">extract an Atom feed</dfn>. This is not the only algorithm
   53830   that can be used for this purpose; for instance, a user agent might
   53831   instead use the hAtom algorithm. <a href=#refsHATOM>[HATOM]</a></p>
   53832 
   53833   <ol><li><p>If the <code><a href=#document>Document</a></code> <var title="">source</var> does
   53834    not contain any <code><a href=#the-article-element>article</a></code> elements, then return nothing
   53835    and abort these steps. This algorithm can only be used with
   53836    documents that contain distinct articles.</p>
   53837 
   53838    <li><p>Let <var title="">R</var> be an empty <a href=#xml-documents title="XML
   53839    documents">XML</a> <code><a href=#document>Document</a></code> object whose <a href="#the-document's-address" title="the document's address">address</a> is user-agent
   53840    defined.</li>
   53841 
   53842    <li><p>Append a <code title="">feed</code> element in the
   53843    <a href=#atom-namespace>Atom namespace</a> to <var title="">R</var>.</li>
   53844 
   53845    <li>
   53846 
   53847     <p>For each <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute and a <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute and whose <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute's value is <code title=meta-author><a href=#meta-author>author</a></code>, run the following substeps:</p>
   53848 
   53849     <ol><li><p>Append an <code title="">author</code> element in the
   53850      <a href=#atom-namespace>Atom namespace</a> to the root element of <var title="">R</var>.</li>
   53851 
   53852      <li><p>Append a <code title="">name</code> element in the
   53853      <a href=#atom-namespace>Atom namespace</a> to the element created in the
   53854      previous step.</p>
   53855 
   53856      <li><p>Append a text node whose data is the value of the
   53857      <code><a href=#meta>meta</a></code> element's <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute to the element
   53858      created in the previous step.</li>
   53859 
   53860     </ol><!-- could use vCards instead, and get <atom:email> and <atom:uri>
   53861     elements out of this instead of just <atom:name> --></li>
   53862 
   53863    <li>
   53864 
   53865     <p>If there is a <code><a href=#the-link-element>link</a></code> element whose <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute's value includes the
   53866     keyword <code title=rel-icon><a href=#rel-icon>icon</a></code>, and that element also
   53867     has an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute whose
   53868     value successfully <a href=#resolve-a-url title="resolve a url">resolves</a>
   53869     relative to the <code><a href=#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
   53870     the root element of <var title="">R</var> whose contents is a text
   53871     node with its data set to the <a href=#absolute-url>absolute URL</a> resulting
   53872     from <a href=#resolve-a-url title="resolve a url">resolving</a> the value of the
   53873     <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute.</p>
   53874 
   53875     <!-- could check ratio, could check type... -->
   53876 
   53877    </li>
   53878 
   53879    <li>
   53880 
   53881     <p>Append an <code title="">id</code> element in the <a href=#atom-namespace>Atom
   53882     namespace</a> to the root element of <var title="">R</var>
   53883     whose contents is a text node with its data set to <a href="#the-document's-current-address">the
   53884     document's current address</a>.</p>
   53885 
   53886    </li>
   53887 
   53888    <li>
   53889 
   53890     <p>Optionally: Let <var title="">x</var> be a <code title="">link</code> element in the <a href=#atom-namespace>Atom
   53891     namespace</a>. Add a <code title="">rel</code> attribute whose
   53892     value is the string "<code title="">self</code>" to <var title="">x</var>. Append a text node with its data set to the
   53893     (user-agent-defined) <a href="#the-document's-address" title="the document's
   53894     address">address</a> of <var title="">R</var> to <var title="">x</var>. Append <var title="">x</var> to the root element
   53895     of <var title="">R</var>.</p>
   53896 
   53897     <p class=note>This step would be skipped when the document <var title="">R</var> has no convenient <a href="#the-document's-address" title="the document's
   53898     address">address</a>. The presence of the <code title="">rel="self"</code> link is a "should"-level requirement in
   53899     the Atom specification.</p>
   53900 
   53901    </li>
   53902 
   53903    <li>
   53904 
   53905     <p>Let <var title="">x</var> be a <code title="">link</code>
   53906     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
   53907     document being converted is an <a href=#html-documents title="HTML documents">HTML
   53908     document</a>, add a <code title="">type</code> attribute whose
   53909     value is the string "<code><a href=#text/html>text/html</a></code>" to <var title="">x</var>. Otherwise, the document being converted is an
   53910     <a href=#xml-documents title="XML documents">XML document</a>; add a <code title="">type</code> attribute whose value is the string
   53911     "<code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>" to <var title="">x</var>. Append a text node with its data set to
   53912     <a href="#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
   53913     of <var title="">R</var>.</p>
   53914 
   53915    </li>
   53916 
   53917    <li><p>Let <var title="">subheading text</var> be the empty
   53918    string.</li>
   53919 
   53920    <li><p>Let <var title="">heading</var> be the first element of
   53921    <a href=#heading-content>heading content</a> whose nearest ancestor of
   53922    <a href=#sectioning-content>sectioning content</a> is <a href=#the-body-element>the body
   53923    element</a>, if any, or null if there is none.</li>
   53924 
   53925    <li>
   53926 
   53927     <p>Take the appropriate action from the following list, as
   53928     determined by the type of the <var title="">heading</var>
   53929     element:</p>
   53930 
   53931     <dl><dt>If <var title="">heading</var> is null</dt>
   53932 
   53933      <dd>
   53934 
   53935       <p>Let <var title="">heading text</var> be the
   53936       <code><a href=#textcontent>textContent</a></code> of <a href=#the-title-element>the <code>title</code>
   53937       element</a>, if there is one, or the empty string
   53938       otherwise.</p>
   53939 
   53940      </dd>
   53941 
   53942      <dt>If <var title="">heading</var> is a <code><a href=#the-hgroup-element>hgroup</a></code> element</dt>
   53943 
   53944      <dd>
   53945 
   53946       <p>If <var title="">heading</var> contains no child
   53947       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>
   53948 
   53949       <p>Otherwise, let <var title="">headings list</var> be a list of
   53950       all the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element children
   53951       of <var title="">heading</var>, sorted first by descending
   53952       <a href=#rank>rank</a> and then in <a href=#tree-order>tree order</a> (so
   53953       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>s first, then <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>s, etc, with each
   53954       group in the order they appear in the document). Then, let <var title="">heading text</var> be the <code><a href=#textcontent>textContent</a></code> of
   53955       the first entry in <var title="">headings list</var>, and if
   53956       there are multiple entries, let <var title="">subheading
   53957       text</var> be the <code><a href=#textcontent>textContent</a></code> of the second entry
   53958       in <var title="">headings list</var>.</p>
   53959 
   53960      </dd>
   53961 
   53962      <dt>If <var title="">heading</var> is an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element</dt>
   53963 
   53964      <dd>
   53965 
   53966       <p>Let <var title="">heading text</var> be the
   53967       <code><a href=#textcontent>textContent</a></code> of <var title="">heading</var>.</p>
   53968 
   53969      </dd>
   53970 
   53971     </dl></li>
   53972 
   53973    <li>
   53974 
   53975     <p>Append a <code title="">title</code> element in the <a href=#atom-namespace>Atom
   53976     namespace</a> to the root element of <var title="">R</var>
   53977     whose contents is a text node with its data set to <var title="">heading text</var>.</p>
   53978 
   53979    </li>
   53980 
   53981    <li>
   53982 
   53983     <p>If <var title="">subheading text</var> is not the empty string,
   53984     append a <code title="">subtitle</code> element in the <a href=#atom-namespace>Atom
   53985     namespace</a> to the root element of <var title="">R</var>
   53986     whose contents is a text node with its data set to <var title="">subheading text</var>.</p>
   53987 
   53988    </li>
   53989 
   53990    <li><p>Let <var title="">global update date</var> have no
   53991    value.</li>
   53992 
   53993    <li>
   53994 
   53995     <p>For each <code><a href=#the-article-element>article</a></code> element <var title="">article</var> that does not have an ancestor
   53996     <code><a href=#the-article-element>article</a></code> element, run the following steps:</p>
   53997 
   53998     <ol><li><p>Let <var title="">E</var> be an <code title="">entry</code> element in the <a href=#atom-namespace>Atom namespace</a>,
   53999      and append <var title="">E</var> to the root element of <var title="">R</var>.</li>
   54000 
   54001      <li><p>Let <var title="">heading</var> be the first element of
   54002      <a href=#heading-content>heading content</a> whose nearest ancestor of
   54003      <a href=#sectioning-content>sectioning content</a> is <var title="">article</var>,
   54004      if any, or null if there is none.</li>
   54005 
   54006      <li>
   54007 
   54008       <p>Take the appropriate action from the following list, as
   54009       determined by the type of the <var title="">heading</var>
   54010       element:</p>
   54011 
   54012       <dl><dt>If <var title="">heading</var> is null</dt>
   54013 
   54014        <dd>
   54015 
   54016         <p>Let <var title="">heading text</var> be the empty
   54017         string.</p>
   54018 
   54019        </dd>
   54020 
   54021        <dt>If <var title="">heading</var> is a <code><a href=#the-hgroup-element>hgroup</a></code> element</dt>
   54022 
   54023        <dd>
   54024 
   54025         <p>If <var title="">heading</var> contains no child
   54026         <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>
   54027 
   54028         <p>Otherwise, let <var title="">headings list</var> be a list
   54029         of all the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element
   54030         children of <var title="">heading</var>, sorted first by
   54031         descending <a href=#rank>rank</a> and then in <a href=#tree-order>tree
   54032         order</a> (so <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>s first, then
   54033         <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>s, etc, with each group in the order they
   54034         appear in the document). Then, let <var title="">heading
   54035         text</var> be the <code><a href=#textcontent>textContent</a></code> of the first entry
   54036         in <var title="">headings list</var>.</p>
   54037 
   54038        </dd>
   54039 
   54040        <dt>If <var title="">heading</var> is an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element</dt>
   54041 
   54042        <dd>
   54043 
   54044         <p>Let <var title="">heading text</var> be the
   54045         <code><a href=#textcontent>textContent</a></code> of <var title="">heading</var>.</p>
   54046 
   54047        </dd>
   54048 
   54049       </dl></li>
   54050 
   54051      <li>
   54052 
   54053       <p>Append a <code title="">title</code> element in the
   54054       <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
   54055       contents is a text node with its data set to <var title="">heading text</var>.</p>
   54056 
   54057      </li>
   54058 
   54059      <!-- <atom:author> is required either at the feed level (above)
   54060      or the entry level (here) but we don't provide it -->
   54061 
   54062      <li>
   54063 
   54064       <p>Clone <var title="">article</var> and its descendants into an
   54065       environment that has <a href=#concept-bc-noscript title=concept-bc-noscript>scripting
   54066       disabled</a>, has no <a href=#plugin title=plugin>plugins</a>, and
   54067       fails any attempt to <a href=#fetch title=fetch>fetch</a> any
   54068       resources. Let <var title="">cloned article</var> be the
   54069       resulting clone <code><a href=#the-article-element>article</a></code> element.</p>
   54070 
   54071      </li>
   54072 
   54073      <li>
   54074 
   54075       <p>Remove from the subtree rooted at <var title="">cloned
   54076       article</var> any <code><a href=#the-article-element>article</a></code> elements other than the
   54077       <var title="">cloned article</var> itself, any
   54078       <code><a href=#the-header-element>header</a></code>, <code><a href=#the-footer-element>footer</a></code>, or <code><a href=#the-nav-element>nav</a></code>
   54079       elements whose nearest ancestor of <a href=#sectioning-content>sectioning
   54080       content</a> is the <var title="">cloned article</var>, and
   54081       the first element of <a href=#heading-content>heading content</a> whose nearest
   54082       ancestor of <a href=#sectioning-content>sectioning content</a> is the <var title="">cloned article</var>, if any.</p>
   54083 
   54084      </li>
   54085 
   54086      <li>
   54087 
   54088       <p>If <var title="">cloned article</var> contains any
   54089       <code><a href=#the-ins-element>ins</a></code> or <code><a href=#the-del-element>del</a></code> elements with <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attributes whose
   54090       values <a href=#parse-a-global-date-and-time-string title="parse a global date and time string">parse
   54091       as global date and time strings</a> without errors, then let
   54092       <var title="">update date</var> be the value of the <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code> attribute that parses
   54093       to the newest <a href=#concept-datetime title=concept-datetime>global date and
   54094       time</a>.</p>
   54095 
   54096       <p>Otherwise, let <var title="">update date</var> have no
   54097       value.</p>
   54098 
   54099       <p class=note>This value is used below; it is calculated here
   54100       because in certain cases the next step mutates the <var title="">cloned article</var>.</p>
   54101 
   54102      </li>
   54103 
   54104      <li>
   54105 
   54106       <p>If the document being converted is an <a href=#html-documents title="HTML
   54107       documents">HTML document</a>, then: Let <var title="">x</var>
   54108       be a <code title="">content</code> element in the <a href=#atom-namespace>Atom
   54109       namespace</a>. Add a <code title="">type</code> attribute
   54110       whose value is the string "<code title="">html</code>" to <var title="">x</var>. Append a text node with its data set to the
   54111       result of running the <a href=#html-fragment-serialization-algorithm>HTML fragment serialization
   54112       algorithm</a> on <var title="">cloned article</var> to <var title="">x</var>. Append <var title="">x</var> to <var title="">E</var>.</p>
   54113 
   54114       <p>Otherwise, the document being converted is an <a href=#xml-documents title="XML documents">XML document</a>: Let <var title="">x</var> be a <code title="">content</code> element in
   54115       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
   54116       <code><a href=#the-div-element>div</a></code> element to <var title="">x</var>. Move all the
   54117       child nodes of the <var title="">cloned article</var> node to
   54118       that <code><a href=#the-div-element>div</a></code> element, preserving their relative
   54119       order. Append <var title="">x</var> to <var title="">E</var>.</p>
   54120 
   54121      </li>
   54122 
   54123      <li>
   54124 
   54125       <p>Establish the value of <var title="">id</var> and <var title="">has-alternate</var> from the first of the following to
   54126       apply:</p>
   54127 
   54128       <dl><dt>If the <var title="">article</var> node has a descendant
   54129        <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute that
   54130        successfully <a href=#resolve-a-url title="resolve a url">resolves</a>
   54131        relative to that descendant and a <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute whose value
   54132        includes the <code title=rel-bookmark><a href=#link-type-bookmark>bookmark</a></code>
   54133        keyword</dt>
   54134 
   54135        <dd>Let <var title="">id</var> be the <a href=#absolute-url>absolute URL</a>
   54136        resulting from <a href=#resolve-a-url title="resolve a url">resolving</a> the
   54137        value of the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   54138        attribute of the first such <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code>
   54139        element, relative to the element. Let <var title="">has-alternate</var> be true.</dd>
   54140 
   54141        <dt>If the <var title="">article</var> node has an <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute</dt>
   54142 
   54143        <dd>Let <var title="">id</var> be <a href="#the-document's-current-address">the document's current
   54144        address</a>, with the fragment identifier (if any) removed,
   54145        and with a new fragment identifier specified, consisting of the
   54146        value of the <var title="">article</var> element's <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute. Let <var title="">has-alternate</var> be false.</dd>
   54147 
   54148        <dt>Otherwise</dt>
   54149 
   54150        <dd>Let <var title="">id</var> be a user-agent-defined
   54151        undereferenceable yet globally unique <a href=#valid-url title="valid
   54152        URL">valid</a> <a href=#absolute-url>absolute URL</a>. The same
   54153        <a href=#absolute-url>absolute URL</a> should be generated for each run of
   54154        this algorithm when given the same input. Let <var title="">has-alternate</var> be false.</dd>
   54155 
   54156       </dl></li>
   54157 
   54158      <li>
   54159 
   54160       <p>Append an <code title="">id</code> element in the <a href=#atom-namespace>Atom
   54161       namespace</a> to <var title="">E</var> whose contents is a
   54162       text node with its data set to <var title="">id</var>.</p>
   54163 
   54164      </li>
   54165 
   54166      <li>
   54167 
   54168       <p>If <var title="">has-alternate</var> is true: Let <var title="">x</var> be a <code title="">link</code> element in the
   54169       <a href=#atom-namespace>Atom namespace</a>. Add a <code title="">rel</code>
   54170       attribute whose value is the string "<code title="">alternate</code>" to <var title="">x</var>. Append a
   54171       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>
   54172 
   54173      </li>
   54174 
   54175      <li>
   54176 
   54177       <p>If <var title="">article</var> has a <code><a href=#the-time-element>time</a></code>
   54178       element descendant that has a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute and whose
   54179       nearest ancestor <code><a href=#the-article-element>article</a></code> element is <var title="">article</var>, and the first such element's <a href=#concept-time-date title=concept-time-date>date</a> is not unknown, then run
   54180       the following substeps, with <var title="">e</var> being the
   54181       first such element:</p>
   54182 
   54183       <ol><li><p>Let <var title="">datetime</var> be a <a href=#concept-datetime title=concept-datetime>global date and time</a> whose date
   54184        component is the <a href=#concept-time-date title=concept-time-date>date</a> of
   54185        <var title="">e</var>.</li>
   54186 
   54187        <li><p>If <var title="">e</var>'s <a href=#concept-time-time title=concept-time-time>time</a> and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> are not
   54188        unknown, then let <var title="">datetime</var>'s time and
   54189        time-zone offset components be the <a href=#concept-time-time title=concept-time-time>time</a> and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> of <var title="">e</var>. Otherwise, let them be midnight and no offset
   54190        respectively ("<code title="">00:00Z</code>").</li>
   54191 
   54192        <li><p>Let <var title="">publication date</var> be the
   54193        <a href=#best-representation-of-the-global-date-and-time-string>best representation of the global date and time
   54194        string</a> <var title="">datetime</var>.</li>
   54195 
   54196       </ol><p>Otherwise, let <var title="">publication date</var> have no
   54197       value.</p>
   54198 
   54199      </li>
   54200 
   54201      <li>
   54202 
   54203       <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>
   54204 
   54205       <p>Otherwise, if <var title="">publication date</var> has no
   54206       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>
   54207 
   54208      </li>
   54209 
   54210      <li>
   54211 
   54212       <p>If <var title="">update date</var> has a value, and <var title="">global update date</var> has no value or is less recent
   54213       than <var title="">update date</var>, then let <var title="">global update date</var> have the value of <var title="">update date</var>.</p>
   54214 
   54215      </li>
   54216 
   54217      <li>
   54218 
   54219       <p>If <var title="">publication date</var> and <var title="">update date</var> both still have no value, then let
   54220       them both value a value that is a <a href=#valid-global-date-and-time-string>valid global date and
   54221       time string</a> representing the <a href=#concept-datetime title=concept-datetime>global date and time</a> of the
   54222       moment that this algorithm was invoked.</p>
   54223 
   54224      </li>
   54225 
   54226      <li>
   54227 
   54228       <p>Append an <code title="">published</code> element in the
   54229       <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
   54230       contents is a text node with its data set to <var title="">publication date</var>.</p>
   54231 
   54232      </li>
   54233 
   54234      <li>
   54235 
   54236       <p>Append an <code title="">updated</code> element in the
   54237       <a href=#atom-namespace>Atom namespace</a> to <var title="">E</var> whose
   54238       contents is a text node with its data set to <var title="">update date</var>.</p>
   54239 
   54240      </li>
   54241 
   54242     </ol></li>
   54243 
   54244    <li>
   54245 
   54246     <p>If <var title="">global update date</var> has no value, then
   54247     let it have a value that is a <a href=#valid-global-date-and-time-string>valid global date and time
   54248     string</a> representing the <a href=#concept-datetime title=concept-datetime>global date and time</a> of the date
   54249     and time of the <code><a href=#document>Document</a></code>'s source file's last
   54250     modification, if it is known, or else of the moment that this
   54251     algorithm was invoked.</p>
   54252 
   54253    </li>
   54254 
   54255    <li>
   54256 
   54257     <p>Insert an <code title="">updated</code> element in the
   54258     <a href=#atom-namespace>Atom namespace</a> into the root element of <var title="">R</var> before the first <code title="">entry</code> in
   54259     the <a href=#atom-namespace>Atom namespace</a> whose contents is a text node with
   54260     its data set to <var title="">global update date</var>.</p>
   54261 
   54262    </li>
   54263 
   54264    <li><p>Return the Atom document <var title="">R</var>.</li>
   54265 
   54266   </ol><p class=note>The above algorithm does not guarantee that the
   54267   output will be a conforming Atom feed. In particular, if
   54268   insufficient information is provided in the document (e.g. if the
   54269   document does not have any <code title="">&lt;meta name="author"
   54270   content="..."&gt;</code> elements), then the output will not be
   54271   conforming.</p>
   54272 
   54273   <p>The <dfn id=atom-namespace>Atom namespace</dfn> is: <code>http://www.w3.org/2005/Atom</code></p>
   54274 
   54275 
   54276 
   54277   </div>
   54278 
   54279 
   54280 
   54281 
   54282 
   54283   <h2 id=browsers><span class=secno>6 </span>Loading Web pages</h2>
   54284 
   54285   <div class=impl>
   54286 
   54287   <p>This section describes features that apply most directly to Web
   54288   browsers. Having said that, except where specified otherwise, the
   54289   requirements defined in this section <em>do</em> apply to all user
   54290   agents, whether they are Web browsers or not.</p>
   54291 
   54292   </div>
   54293 
   54294 
   54295 
   54296   <h3 id=windows><span class=secno>6.1 </span>Browsing contexts</h3>
   54297 
   54298   <p>A <dfn id=browsing-context>browsing context</dfn> is an environment in which
   54299   <code><a href=#document>Document</a></code> objects are presented to the user.</p>
   54300 
   54301   <p class=note>A tab or window in a Web browser typically contains
   54302   a <a href=#browsing-context>browsing context</a>, as does an <code><a href=#the-iframe-element>iframe</a></code><span class=impl> or <code><a href=#frame>frame</a></code>s in a
   54303   <code><a href=#frameset>frameset</a></code></span>.</p>
   54304 
   54305   <p>Each <a href=#browsing-context>browsing context</a> has a corresponding
   54306   <code><a href=#windowproxy>WindowProxy</a></code> object.</p>
   54307 
   54308   <p>A <a href=#browsing-context>browsing context</a> has a <a href=#session-history>session
   54309   history</a>, which lists the <code><a href=#document>Document</a></code> objects that
   54310   that <a href=#browsing-context>browsing context</a> has presented, is presenting, or
   54311   will present. At any time, one <code><a href=#document>Document</a></code> in each
   54312   <a href=#browsing-context>browsing context</a> is designated the <dfn id=active-document>active
   54313   document</dfn>.</p>
   54314 
   54315   <p>Each <code><a href=#document>Document</a></code> is associated with a
   54316   <code><a href=#window>Window</a></code> object. A <a href=#browsing-context>browsing context</a>'s
   54317   <code><a href=#windowproxy>WindowProxy</a></code> object forwards everything to the
   54318   <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active document</a>'s
   54319   <code><a href=#window>Window</a></code> object.</p>
   54320 
   54321   <p class=note>In general, there is a 1-to-1 mapping from the
   54322   <code><a href=#window>Window</a></code> object to the <code><a href=#document>Document</a></code> object. In
   54323   one particular case, a <code><a href=#window>Window</a></code> can be reused for the
   54324   presentation of a second <code><a href=#document>Document</a></code> in the same
   54325   <a href=#browsing-context>browsing context</a>, such that the mapping is then
   54326   2-to-1. This occurs when a <a href=#browsing-context>browsing context</a> is <a href=#navigate title=navigate>navigated</a> from the initial
   54327   <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> to another, with
   54328   <a href=#replacement-enabled>replacement enabled</a>.</p>
   54329 
   54330   <p class=note>A <code><a href=#document>Document</a></code> does not necessarily have a
   54331   <a href=#browsing-context>browsing context</a> associated with it. In particular,
   54332   data mining tools are likely to never instantiate browsing
   54333   contexts.</p>
   54334 
   54335   <hr><p>A <a href=#browsing-context>browsing context</a> can have a <dfn id=creator-browsing-context>creator browsing
   54336   context</dfn>, the <a href=#browsing-context>browsing context</a> that was
   54337   responsible for its creation. If a <a href=#browsing-context>browsing context</a> has
   54338   a <a href=#parent-browsing-context>parent browsing context</a>, then that is its
   54339   <a href=#creator-browsing-context>creator browsing context</a>. Otherwise, if the
   54340   <a href=#browsing-context>browsing context</a> has an <a href=#opener-browsing-context>opener browsing
   54341   context</a>, then <em>that</em> is its <a href=#creator-browsing-context>creator browsing
   54342   context</a>. Otherwise, the <a href=#browsing-context>browsing context</a> has no
   54343   <a href=#creator-browsing-context>creator browsing context</a>.</p>
   54344 
   54345   <p>If a <a href=#browsing-context>browsing context</a> <var title="">A</var> has a
   54346   <a href=#creator-browsing-context>creator browsing context</a>, then the
   54347   <code><a href=#document>Document</a></code> that was the <a href=#active-document>active document</a> of
   54348   that <a href=#creator-browsing-context>creator browsing context</a> at the time <var title="">A</var> was created is the <dfn id=creator-document>creator
   54349   <code>Document</code></dfn>.</p>
   54350 
   54351   <div class=impl>
   54352 
   54353   <p>When a <a href=#browsing-context>browsing context</a> is first created, it must be
   54354   created with a single <code><a href=#document>Document</a></code> in its session history,
   54355   whose <a href="#the-document's-address" title="the document's address">address</a> is
   54356   <code><a href=#about:blank>about:blank</a></code>, which is marked as being an <a href=#html-documents title="HTML documents">HTML document</a>, and whose <a href="#document's-character-encoding" title="document's character encoding">character encoding</a> is
   54357   UTF-8. The <code><a href=#document>Document</a></code> must have a single child
   54358   <code><a href=#the-html-element-0>html</a></code> node, which itself has a single child
   54359   <code><a href=#the-body-element-0>body</a></code> node.</p>
   54360 
   54361   <p class=note>If the <a href=#browsing-context>browsing context</a> is created
   54362   specifically to be immediately navigated, then that initial
   54363   navigation will have <a href=#replacement-enabled>replacement enabled</a>.</p>
   54364 
   54365   <p id=about-blank-origin>The <a href=#origin>origin</a> of the
   54366   <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> is set when the
   54367   <code><a href=#document>Document</a></code> is created. If the new <a href=#browsing-context>browsing
   54368   context</a> has a <a href=#creator-browsing-context>creator browsing context</a>, then the
   54369   <a href=#origin>origin</a> of the <code><a href=#about:blank>about:blank</a></code>
   54370   <code><a href=#document>Document</a></code> is the <a href=#origin>origin</a> of the
   54371   <a href=#creator-document>creator <code>Document</code></a>. Otherwise, the
   54372   <a href=#origin>origin</a> of the <code><a href=#about:blank>about:blank</a></code>
   54373   <code><a href=#document>Document</a></code> is a globally unique identifier assigned when
   54374   the new <a href=#browsing-context>browsing context</a> is created.</p>
   54375 
   54376   </div>
   54377 
   54378 
   54379   <h4 id=nested-browsing-contexts><span class=secno>6.1.1 </span>Nested browsing contexts</h4>
   54380 
   54381   <p>Certain elements (for example, <code><a href=#the-iframe-element>iframe</a></code> elements) can
   54382   instantiate further <a href=#browsing-context title="browsing context">browsing
   54383   contexts</a>. These are called <dfn id=nested-browsing-context title="nested browsing
   54384   context">nested browsing contexts</dfn>. If a browsing context <var title="">P</var> has an element <var title="">E</var> in one of its
   54385   <code><a href=#document>Document</a></code>s <var title="">D</var> that nests another
   54386   browsing context <var title="">C</var> inside it, then <var title="">P</var> is said to be the <dfn id=parent-browsing-context>parent browsing
   54387   context</dfn> of <var title="">C</var>, <var title="">C</var> is
   54388   said to be a <dfn id=child-browsing-context>child browsing context</dfn> of <var title="">P</var>, <var title="">C</var> is said to be <dfn id=browsing-context-nested-through title="browsing context nested through">nested through</dfn> <var title="">D</var>, and <var title="">E</var> is said to be the
   54389   <dfn id=browsing-context-container>browsing context container</dfn> of <var title="">C</var>.</p>
   54390 
   54391   <p>A browsing context <var title="">A</var> is said to be an
   54392   ancestor of a browsing context <var title="">B</var> if there exists
   54393   a browsing context <var title="">A'</var> that is a <a href=#child-browsing-context>child
   54394   browsing context</a> of <var title="">A</var> and that is itself
   54395   an ancestor of <var title="">B</var>, or if there is a browsing
   54396   context <var title="">P</var> that is a <a href=#child-browsing-context>child browsing
   54397   context</a> of <var title="">A</var> and that is the <a href=#parent-browsing-context>parent
   54398   browsing context</a> of <var title="">B</var>.</p>
   54399 
   54400   <p>The browsing context with no <a href=#parent-browsing-context>parent browsing context</a>
   54401   is the <dfn id=top-level-browsing-context>top-level browsing context</dfn> of all the browsing
   54402   contexts <a href=#nested-browsing-context title="nested browsing context">nested</a> within
   54403   it (either directly or indirectly through other nested browsing
   54404   contexts).</p>
   54405 
   54406   <p>The transitive closure of <a href=#parent-browsing-context title="parent browsing
   54407   context">parent browsing contexts</a> for a <a href=#nested-browsing-context>nested browsing
   54408   context</a> gives the list of <dfn id=ancestor-browsing-context title="ancestor browsing
   54409   context">ancestor browsing contexts</dfn>.</p>
   54410 
   54411   <p>The <dfn id=list-of-the-descendant-browsing-contexts>list of the descendant browsing contexts</dfn> of a
   54412   <code><a href=#document>Document</a></code> <var title="">d</var> is the list returned by
   54413   the following algorithm:</p>
   54414 
   54415   <ol><li><p>Let <var title="">list</var> be an empty list.</li>
   54416 
   54417    <li><p>For each <a href=#child-browsing-context>child browsing context</a> of <var title="">d</var> that is <a href=#browsing-context-nested-through title="browsing context nested
   54418    through">nested through</a> an element that is <a href=#in-a-document title="in a
   54419    document">in the <code>Document</code></a> <var title="">d</var>, in the <a href=#tree-order>tree order</a> of the elements of
   54420    the elements nesting those <a href=#browsing-context title="browsing context">browsing
   54421    contexts</a>, append to the list <var title="">list</var> the
   54422    <a href=#list-of-the-descendant-browsing-contexts>list of the descendant browsing contexts</a> of the
   54423    <a href=#active-document>active document</a> of that <a href=#child-browsing-context>child browsing
   54424    context</a>.</li>
   54425 
   54426    <li><p>Return the constructed <var title="">list</var>.</li>
   54427 
   54428   </ol><hr><p>A <code><a href=#document>Document</a></code> is said to be <dfn id=fully-active>fully active</dfn>
   54429   when it is the <a href=#active-document>active document</a> of its <a href=#browsing-context>browsing
   54430   context</a>, and either its browsing context is a <a href=#top-level-browsing-context>top-level
   54431   browsing context</a>, or the <code><a href=#document>Document</a></code> <a href=#browsing-context-nested-through title="browsing context nested through">through which</a> that
   54432   browsing context is <a href=#nested-browsing-context title="nested browsing
   54433   context">nested</a> is itself <a href=#fully-active>fully active</a>.</p>
   54434 
   54435   <p>Because they are nested through an element, <a href=#child-browsing-context title="child
   54436   browsing context">child browsing contexts</a> are always tied to
   54437   a specific <code><a href=#document>Document</a></code> in their <a href=#parent-browsing-context>parent browsing
   54438   context</a>. User agents must not allow the user to interact with
   54439   <a href=#child-browsing-context title="child browsing context">child browsing contexts</a>
   54440   of elements that are in <code><a href=#document>Document</a></code>s that are not
   54441   themselves <a href=#fully-active>fully active</a>.</p>
   54442 
   54443   <p>A <a href=#nested-browsing-context>nested browsing context</a> can have a <a href=#seamless-browsing-context-flag>seamless
   54444   browsing context flag</a> set, if it is embedded through an
   54445   <code><a href=#the-iframe-element>iframe</a></code> element with a <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code> attribute.</p>
   54446 
   54447 
   54448   <h5 id=navigating-nested-browsing-contexts-in-the-dom><span class=secno>6.1.1.1 </span>Navigating nested browsing contexts in the DOM</h5>
   54449 
   54450   <dl class=domintro><dt><var title="">window</var> . <code title=dom-top><a href=#dom-top>top</a></code></dt>
   54451 
   54452    <dd>
   54453 
   54454     <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> for the <a href=#top-level-browsing-context>top-level browsing context</a>.</p>
   54455 
   54456    </dd>
   54457 
   54458    <dt><var title="">window</var> . <code title=dom-parent><a href=#dom-parent>parent</a></code></dt>
   54459 
   54460    <dd>
   54461 
   54462     <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> for the <a href=#parent-browsing-context>parent browsing context</a>.</p>
   54463 
   54464    </dd>
   54465 
   54466    <dt><var title="">window</var> . <code title=dom-frameElement><a href=#dom-frameelement>frameElement</a></code></dt>
   54467 
   54468    <dd>
   54469 
   54470     <p>Returns the <code><a href=#element>Element</a></code> for the <a href=#browsing-context-container>browsing context container</a>.</p>
   54471 
   54472     <p>Returns null if there isn't one.</p>
   54473 
   54474     <p>Throws a <code><a href=#security_err>SECURITY_ERR</a></code> exception in cross-origin situations.</p>
   54475 
   54476    </dd>
   54477 
   54478   </dl><div class=impl>
   54479 
   54480   <p>The <dfn id=dom-top title=dom-top><code>top</code></dfn> IDL attribute on
   54481   the <code><a href=#window>Window</a></code> object of a <code><a href=#document>Document</a></code> in a
   54482   <a href=#browsing-context>browsing context</a> <var title="">b</var> must return the
   54483   <code><a href=#windowproxy>WindowProxy</a></code> object of its <a href=#top-level-browsing-context>top-level browsing
   54484   context</a> (which would be its own <code><a href=#windowproxy>WindowProxy</a></code>
   54485   object if it was a <a href=#top-level-browsing-context>top-level browsing context</a>
   54486   itself).</p>
   54487 
   54488   <p>The <dfn id=dom-parent title=dom-parent><code>parent</code></dfn> IDL
   54489   attribute on the <code><a href=#window>Window</a></code> object of a
   54490   <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a> <var title="">b</var> must return the <code><a href=#windowproxy>WindowProxy</a></code> object of
   54491   the <a href=#parent-browsing-context>parent browsing context</a>, if there is one (i.e. if
   54492   <var title="">b</var> is a <a href=#child-browsing-context>child browsing context</a>), or
   54493   the <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#browsing-context>browsing
   54494   context</a> <var title="">b</var> itself, otherwise (i.e. if it
   54495   is a <a href=#top-level-browsing-context>top-level browsing context</a>).</p>
   54496 
   54497   <p>The <dfn id=dom-frameelement title=dom-frameElement><code>frameElement</code></dfn>
   54498   IDL attribute on the <code><a href=#window>Window</a></code> object of a
   54499   <code><a href=#document>Document</a></code> <var title="">d</var>, on getting, must run
   54500   the following algorithm:</p>
   54501 
   54502   <ol><li><p>If <var title="">d</var> is not a <code><a href=#document>Document</a></code> in a
   54503    <a href=#child-browsing-context>child browsing context</a>, return null and abort these
   54504    steps.</li>
   54505 
   54506    <li><p>If the <a href=#parent-browsing-context>parent browsing context</a>'s <a href=#active-document>active
   54507    document</a> does not have the <a href=#same-origin title="same
   54508    origin">same</a> <a href=#effective-script-origin>effective script origin</a> as the
   54509    <a href=#entry-script>entry script</a>, then throw a <code><a href=#security_err>SECURITY_ERR</a></code>
   54510    exception.</li>
   54511 
   54512    <li><p>Otherwise, return the <a href=#browsing-context-container>browsing context
   54513    container</a> for <var title="">b</var>.</li>
   54514 
   54515   </ol></div>
   54516 
   54517 
   54518 
   54519   <h4 id=auxiliary-browsing-contexts><span class=secno>6.1.2 </span>Auxiliary browsing contexts</h4>
   54520 
   54521   <p>It is possible to create new browsing contexts that are related
   54522   to a <a href=#top-level-browsing-context>top-level browsing context</a> without being nested
   54523   through an element. Such browsing contexts are called <dfn id=auxiliary-browsing-context title="auxiliary browsing context">auxiliary browsing
   54524   contexts</dfn>. Auxiliary browsing contexts are always <a href=#top-level-browsing-context title="top-level browsing context">top-level browsing
   54525   contexts</a>.</p>
   54526 
   54527   <p>An <a href=#auxiliary-browsing-context>auxiliary browsing context</a> has an <dfn id=opener-browsing-context>opener
   54528   browsing context</dfn>, which is the <a href=#browsing-context>browsing context</a>
   54529   from which the <a href=#auxiliary-browsing-context>auxiliary browsing context</a> was created,
   54530   and it has a <dfn id=furthest-ancestor-browsing-context>furthest ancestor browsing context</dfn>, which is
   54531   the <a href=#top-level-browsing-context>top-level browsing context</a> of the <a href=#opener-browsing-context>opener
   54532   browsing context</a> when the <a href=#auxiliary-browsing-context>auxiliary browsing
   54533   context</a> was created.</p>
   54534 
   54535 
   54536   <h5 id=navigating-auxiliary-browsing-contexts-in-the-dom><span class=secno>6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</h5>
   54537 
   54538   <p>The <dfn id=dom-opener title=dom-opener><code>opener</code></dfn> IDL
   54539   attribute on the <code><a href=#window>Window</a></code> object must return the
   54540   <code><a href=#windowproxy>WindowProxy</a></code> object of the <a href=#browsing-context>browsing context</a>
   54541   from which the current <a href=#browsing-context>browsing context</a> was created
   54542   (its <a href=#opener-browsing-context>opener browsing context</a>), if there is one and it
   54543   is still available.</p>
   54544 
   54545 
   54546 
   54547 
   54548   <h4 id=secondary-browsing-contexts><span class=secno>6.1.3 </span>Secondary browsing contexts</h4>
   54549 
   54550   <p>User agents may support <dfn id=secondary-browsing-context title="secondary browsing
   54551   context">secondary browsing contexts</dfn>, which are <a href=#browsing-context title="browsing context">browsing contexts</a> that form part of
   54552   the user agent's interface, apart from the main content area.</p>
   54553 
   54554 
   54555   <div class=impl>
   54556 
   54557   <h4 id=security-nav><span class=secno>6.1.4 </span>Security</h4>
   54558 
   54559   <p id=security-1>A <a href=#browsing-context>browsing context</a> <var title="">A</var> is <dfn id=allowed-to-navigate>allowed to navigate</dfn> a second
   54560   <a href=#browsing-context>browsing context</a> <var title="">B</var> if one of the
   54561   following conditions is true:</p>
   54562 
   54563   <ul><li>Either the <a href=#origin>origin</a> of the <a href=#active-document>active
   54564    document</a> of <var title="">A</var> is the <a href=#same-origin title="same
   54565    origin">same</a> as the <a href=#origin>origin</a> of the <a href=#active-document>active
   54566    document</a> of <var title="">B</var>, or</li>
   54567 
   54568    <li>The browsing context <var title="">A</var> is a <a href=#nested-browsing-context>nested
   54569    browsing context</a> and its <a href=#top-level-browsing-context>top-level browsing
   54570    context</a> is <var title="">B</var>, or</li>
   54571 
   54572    <li>The browsing context <var title="">B</var> is an
   54573    <a href=#auxiliary-browsing-context>auxiliary browsing context</a> and <var title="">A</var>
   54574    is <a href=#allowed-to-navigate>allowed to navigate</a> <var title="">B</var>'s
   54575    <a href=#opener-browsing-context>opener browsing context</a>, or</li>
   54576 
   54577    <li>The browsing context <var title="">B</var> is not a
   54578    <a href=#top-level-browsing-context>top-level browsing context</a>, but there exists an
   54579    <a href=#ancestor-browsing-context>ancestor browsing context</a> of <var title="">B</var>
   54580    whose <a href=#active-document>active document</a> has the <a href=#same-origin title="same
   54581    origin">same</a> <a href=#origin>origin</a> as the <a href=#active-document>active
   54582    document</a> of <var title="">A</var> (possibly in fact being
   54583    <var title="">A</var> itself).</li>
   54584 
   54585   </ul><hr><p>An element has a <dfn id=browsing-context-scope-origin>browsing context scope origin</dfn> if its
   54586   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> is a
   54587   <a href=#top-level-browsing-context>top-level browsing context</a> or if all of its
   54588   <code><a href=#document>Document</a></code>'s <a href=#ancestor-browsing-context title="ancestor browsing
   54589   context">ancestor browsing contexts</a> all have <a href=#active-document title="active document">active documents</a> whose
   54590   <a href=#origin>origin</a> are the <a href=#same-origin>same origin</a> as the
   54591   element's <code><a href=#document>Document</a></code>'s <a href=#origin>origin</a>. If an element
   54592   has a <a href=#browsing-context-scope-origin>browsing context scope origin</a>, then its value is
   54593   the <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>.</p>
   54594 
   54595   </div>
   54596 
   54597 
   54598   <div class=impl>
   54599 
   54600   <h4 id=groupings-of-browsing-contexts><span class=secno>6.1.5 </span>Groupings of browsing contexts</h4>
   54601 
   54602   <p>Each <a href=#browsing-context>browsing context</a> is defined as having a list of
   54603   zero or more <dfn id=directly-reachable-browsing-contexts>directly reachable browsing contexts</dfn>. These
   54604   are:</p>
   54605 
   54606   <ul><li>All the <a href=#browsing-context>browsing context</a>'s <a href=#child-browsing-context title="child
   54607    browsing context">child browsing contexts</a>.</li>
   54608 
   54609    <li>The <a href=#browsing-context>browsing context</a>'s <a href=#parent-browsing-context>parent browsing
   54610    context</a>.</li>
   54611 
   54612    <li>All the <a href=#browsing-context title="browsing context">browsing contexts</a>
   54613    that have the <a href=#browsing-context>browsing context</a> as their <a href=#opener-browsing-context>opener
   54614    browsing context</a>.</li>
   54615 
   54616    <li>The <a href=#browsing-context>browsing context</a>'s <a href=#opener-browsing-context>opener browsing
   54617    context</a>.</li>
   54618 
   54619   </ul><p>The transitive closure of all the <a href=#browsing-context title="browsing
   54620   context">browsing contexts</a> that are <a href=#directly-reachable-browsing-contexts>directly reachable
   54621   browsing contexts</a> forms a <dfn id=unit-of-related-browsing-contexts>unit of related browsing
   54622   contexts</dfn>.</p>
   54623 
   54624   <p>Each <a href=#unit-of-related-browsing-contexts>unit of related browsing contexts</a> is then
   54625   further divided into the smallest number of groups such that every
   54626   member of each group has an <a href=#effective-script-origin>effective script origin</a>
   54627   that, through appropriate manipulation of the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute, could
   54628   be made to be the same as other members of the group, but could not
   54629   be made the same as members of any other group. Each such group is a
   54630   <dfn id=unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing contexts</dfn>.</p>
   54631 
   54632   <p>Each <a href=#unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing
   54633   contexts</a> can have a <dfn id=entry-script>entry script</dfn> which is used to
   54634   obtain, amongst other things, the <a href="#script's-base-url">script's base URL</a> to
   54635   <a href=#resolve-a-url title="resolve a url">resolve</a> relative <a href=#url title=URL>URLs</a> used in scripts running in that <a href=#unit-of-related-similar-origin-browsing-contexts>unit
   54636   of related similar-origin browsing contexts</a>. Initially, there
   54637   is no <a href=#entry-script>entry script</a>.</p>
   54638 
   54639   <p class=note>There is at most one <a href=#event-loop>event loop</a> per
   54640   <a href=#unit-of-related-similar-origin-browsing-contexts>unit of related similar-origin browsing contexts</a>.</p>
   54641 
   54642   </div>
   54643 
   54644 
   54645 
   54646   <h4 id=browsing-context-names><span class=secno>6.1.6 </span>Browsing context names</h4>
   54647 
   54648   <p>Browsing contexts can have a <dfn id=browsing-context-name>browsing context name</dfn>. By
   54649   default, a browsing context has no name (its name is not set).</p>
   54650 
   54651   <p>A <dfn id=valid-browsing-context-name>valid browsing context name</dfn> is any string with at
   54652   least one character that does not start with a U+005F LOW LINE
   54653   character. (Names starting with an underscore are reserved for
   54654   special keywords.)</p>
   54655 
   54656   <p>A <dfn id=valid-browsing-context-name-or-keyword>valid browsing context name or keyword</dfn> is any string
   54657   that is either a <a href=#valid-browsing-context-name>valid browsing context name</a> or that is
   54658   an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of: <code title="">_blank</code>, <code title="">_self</code>, <code title="">_parent</code>, or <code title="">_top</code>.</p>
   54659 
   54660   <div class=impl>
   54661 
   54662   <p><dfn id=the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>The rules for choosing a browsing context given a browsing
   54663   context name</dfn> are as follows. The rules assume that they are
   54664   being applied in the context of a <a href=#browsing-context>browsing context</a>.</p>
   54665 
   54666   <ol><li><p>If the given browsing context name is the empty string or
   54667    <code title="">_self</code>, then the chosen browsing context must
   54668    be the current one.</li>
   54669 
   54670    <li><p>If the given browsing context name is <code title="">_parent</code>, then the chosen browsing context must be
   54671    the <a href=#parent-browsing-context><em>parent</em> browsing context</a> of the current
   54672    one, unless there isn't one, in which case the chosen browsing
   54673    context must be the current browsing context.</li>
   54674 
   54675    <li><p>If the given browsing context name is <code title="">_top</code>, then the chosen browsing context must be the
   54676    most <a href=#top-level-browsing-context>top-level browsing context</a> of the current
   54677    one.</li>
   54678 
   54679    <li>
   54680 
   54681     <p>If the given browsing context name is not <code title="">_blank</code> and there exists a browsing context whose
   54682     <a href=#browsing-context-name title="browsing context name">name</a> is the same as the
   54683     given browsing context name, and the current browsing context is
   54684     <a href=#allowed-to-navigate>allowed to navigate</a> that browsing context, and the
   54685     user agent determines that the two browsing contexts are related
   54686     enough that it is ok if they reach each other, then that browsing
   54687     context must be the chosen one. If there are multiple matching
   54688     browsing contexts, the user agent should select one in some
   54689     arbitrary consistent manner, such as the most recently opened,
   54690     most recently focused, or more closely related.</p>
   54691 
   54692    </li>
   54693 
   54694    <li>
   54695 
   54696     <p>Otherwise, a new browsing context is being requested, and what
   54697     happens depends on the user agent's configuration and/or
   54698     abilities:</p>
   54699 
   54700     <dl><dt id=sandboxWindowOpen>If the current browsing context had
   54701      the <a href=#sandboxed-navigation-browsing-context-flag>sandboxed navigation browsing context flag</a> set
   54702      when its <a href=#active-document>active document</a> was created.</dt>
   54703 
   54704      <dd><p>The user agent may offer to create a new <a href=#top-level-browsing-context>top-level
   54705      browsing context</a> or reuse an existing <a href=#top-level-browsing-context>top-level
   54706      browsing context</a>. If the user picks one of those options,
   54707      then the designated browsing context must be the chosen one (the
   54708      browsing context's name isn't set to the given browsing context
   54709      name). Otherwise (if the user agent doesn't offer the option to
   54710      the user, or if the user declines to allow a browsing context to
   54711      be used) there must not be a chosen browsing context.</dd>
   54712 
   54713 
   54714      <dt id=noopener>If the user agent has been configured such that
   54715      in this instance it will create a new browsing context, and the
   54716      browsing context is being requested as part of <a href=#following-hyperlinks title="following hyperlinks">following a hyperlink</a> whose
   54717      <a href=#linkTypes>link types</a> include the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword</dt>
   54718 
   54719      <dd><p>A new <a href=#top-level-browsing-context>top-level browsing context</a> must be
   54720      created. If the given browsing context name is not <code title="">_blank</code>, then the new top-level browsing context's
   54721      name must be the given browsing context name (otherwise, it has
   54722      no name). The chosen browsing context must be this new browsing
   54723      context.</p>
   54724 
   54725      <p class=note>If it is immediately <a href=#navigate title=navigate>navigated</a>, then the navigation will be
   54726      done with <a href=#replacement-enabled>replacement enabled</a>.</dd>
   54727 
   54728 
   54729      <dt>If the user agent has been configured such that in this
   54730      instance it will create a new browsing context, and the <code title=rel-noreferrer><a href=#link-type-noreferrer>noreferrer</a></code> keyword doesn't
   54731      apply</dt>
   54732 
   54733      <dd><p>A new <a href=#auxiliary-browsing-context>auxiliary browsing context</a> must be
   54734      created, with the <a href=#opener-browsing-context>opener browsing context</a> being the
   54735      current one. If the given browsing context name is not <code title="">_blank</code>, then the new auxiliary browsing context's
   54736      name must be the given browsing context name (otherwise, it has
   54737      no name). The chosen browsing context must be this new browsing
   54738      context.</p>
   54739 
   54740      <p>If it is immediately <a href=#navigate title=navigate>navigated</a>,
   54741      then the navigation will be done with <a href=#replacement-enabled>replacement
   54742      enabled</a>.</dd>
   54743 
   54744 
   54745      <dt>If the user agent has been configured such that in this
   54746      instance it will reuse the current browsing context</dt>
   54747 
   54748      <dd><p>The chosen browsing context is the current browsing
   54749      context.</dd>
   54750 
   54751 
   54752      <dt>If the user agent has been configured such that in this
   54753      instance it will not find a browsing context</dt>
   54754 
   54755      <dd><p>There must not be a chosen browsing context.</dd>
   54756 
   54757     </dl><p>User agent implementors are encouraged to provide a way for
   54758     users to configure the user agent to always reuse the current
   54759     browsing context.</p>
   54760 
   54761    </li>
   54762 
   54763   </ol></div>
   54764 
   54765 
   54766 
   54767 
   54768   <h3 id=the-window-object><span class=secno>6.2 </span>The <code><a href=#window>Window</a></code> object</h3>
   54769 
   54770   <pre class=idl>[OverrideBuiltins, ReplaceableNamedProperties] <!-- XXX http://www.w3.org/Bugs/Public/show_bug.cgi?id=8241 -->
   54771 interface <dfn id=window>Window</dfn> {
   54772   // the current browsing context
   54773   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-window title=dom-window>window</a>;
   54774   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-self title=dom-self>self</a>;
   54775   readonly attribute <a href=#document>Document</a> <a href=#dom-document title=dom-document>document</a>;
   54776            attribute DOMString <a href=#dom-name title=dom-name>name</a>;
   54777   [PutForwards=<a href=#dom-location-href title=dom-location-href>href</a>] readonly attribute <a href=#location>Location</a> <a href=#dom-location title=dom-location>location</a>;
   54778   readonly attribute <a href=#history-0>History</a> <a href=#dom-history title=dom-history>history</a>;
   54779   readonly attribute <a href=#undomanager>UndoManager</a> <a href=#dom-undomanager title=dom-undoManager>undoManager</a>;
   54780   <a href=#selection-0>Selection</a> <a href=#dom-getselection title=dom-getSelection>getSelection</a>();
   54781   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-locationbar title=dom-window-locationbar>locationbar</a>;
   54782   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-menubar title=dom-window-menubar>menubar</a>;
   54783   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-personalbar title=dom-window-personalbar>personalbar</a>;
   54784   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-scrollbars title=dom-window-scrollbars>scrollbars</a>;
   54785   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-statusbar title=dom-window-statusbar>statusbar</a>;
   54786   [Replaceable] readonly attribute <a href=#barprop>BarProp</a> <a href=#dom-window-toolbar title=dom-window-toolbar>toolbar</a>;<!--
   54787   [Replaceable] readonly attribute <span>BarProp</span> <span title="dom-window-directories">directories</span>; // legacy (Gecko-only) -->
   54788   void <a href=#dom-window-close title=dom-window-close>close</a>();
   54789   void <a href=#dom-window-stop title=dom-window-stop>stop</a>();
   54790   void <a href=#dom-window-focus title=dom-window-focus>focus</a>();
   54791   void <a href=#dom-window-blur title=dom-window-blur>blur</a>();
   54792 
   54793   // other browsing contexts
   54794   [Replaceable] readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-frames title=dom-frames>frames</a>;
   54795   [Replaceable] readonly attribute unsigned long <a href=#dom-length title=dom-length>length</a>;
   54796   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-top title=dom-top>top</a>;
   54797   [Replaceable] readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-opener title=dom-opener>opener</a>;
   54798   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-parent title=dom-parent>parent</a>;
   54799   readonly attribute <a href=#element>Element</a> <a href=#dom-frameelement title=dom-frameElement>frameElement</a>;
   54800   <a href=#windowproxy>WindowProxy</a> <a href=#dom-open title=dom-open>open</a>(in optional DOMString url, in optional DOMString target, in optional DOMString features, in optional DOMString replace);
   54801   <a href=#dom-window-item title=dom-window-item>getter</a> <a href=#windowproxy>WindowProxy</a> (in unsigned long index);
   54802   <a href=#dom-window-nameditem title=dom-window-namedItem>getter</a> any (in DOMString name);
   54803 
   54804   // the user agent
   54805   readonly attribute <a href=#navigator>Navigator</a> <a href=#dom-navigator title=dom-navigator>navigator</a>; <!-- IE also has window.clientInformation === window.navigator -->
   54806   readonly attribute <a href=#applicationcache>ApplicationCache</a> <a href=#dom-applicationcache title=dom-applicationCache>applicationCache</a>;
   54807 
   54808   // user prompts
   54809   void <a href=#dom-alert title=dom-alert>alert</a>(in DOMString message);
   54810   boolean <a href=#dom-confirm title=dom-confirm>confirm</a>(in DOMString message);
   54811   DOMString <a href=#dom-prompt title=dom-prompt>prompt</a>(in DOMString message, in optional DOMString default);
   54812   void <a href=#dom-print title=dom-print>print</a>();
   54813   any <a href=#dom-showmodaldialog title=dom-showModalDialog>showModalDialog</a>(in DOMString url, in optional any argument<!--, in optional DOMString features-->);
   54814 
   54815   // <a href=#web-messaging>cross-document messaging</a>
   54816   void <a href=#dom-window-postmessage title=dom-window-postMessage>postMessage</a>(in any message, in DOMString targetOrigin, in optional <a href=#messageportarray>MessagePortArray</a> ports);
   54817 
   54818   // <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
   54819            attribute <a href=#function>Function</a> <a href=#handler-onabort title=handler-onabort>onabort</a>;
   54820            attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
   54821            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
   54822            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
   54823            attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
   54824            attribute <a href=#function>Function</a> <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
   54825            attribute <a href=#function>Function</a> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
   54826            attribute <a href=#function>Function</a> <a href=#handler-onchange title=handler-onchange>onchange</a>;
   54827            attribute <a href=#function>Function</a> <a href=#handler-onclick title=handler-onclick>onclick</a>;
   54828            attribute <a href=#function>Function</a> <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
   54829            attribute <a href=#function>Function</a> <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
   54830            attribute <a href=#function>Function</a> <a href=#handler-ondrag title=handler-ondrag>ondrag</a>;
   54831            attribute <a href=#function>Function</a> <a href=#handler-ondragend title=handler-ondragend>ondragend</a>;
   54832            attribute <a href=#function>Function</a> <a href=#handler-ondragenter title=handler-ondragenter>ondragenter</a>;
   54833            attribute <a href=#function>Function</a> <a href=#handler-ondragleave title=handler-ondragleave>ondragleave</a>;
   54834            attribute <a href=#function>Function</a> <a href=#handler-ondragover title=handler-ondragover>ondragover</a>;
   54835            attribute <a href=#function>Function</a> <a href=#handler-ondragstart title=handler-ondragstart>ondragstart</a>;
   54836            attribute <a href=#function>Function</a> <a href=#handler-ondrop title=handler-ondrop>ondrop</a>;
   54837            attribute <a href=#function>Function</a> <a href=#handler-ondurationchange title=handler-ondurationchange>ondurationchange</a>;
   54838            attribute <a href=#function>Function</a> <a href=#handler-onemptied title=handler-onemptied>onemptied</a>;
   54839            attribute <a href=#function>Function</a> <a href=#handler-onended title=handler-onended>onended</a>;
   54840            attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
   54841            attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
   54842            attribute <a href=#function>Function</a> <a href=#handler-onformchange title=handler-onformchange>onformchange</a>;
   54843            attribute <a href=#function>Function</a> <a href=#handler-onforminput title=handler-onforminput>onforminput</a>;
   54844            attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
   54845            attribute <a href=#function>Function</a> <a href=#handler-oninput title=handler-oninput>oninput</a>;
   54846            attribute <a href=#function>Function</a> <a href=#handler-oninvalid title=handler-oninvalid>oninvalid</a>;
   54847            attribute <a href=#function>Function</a> <a href=#handler-onkeydown title=handler-onkeydown>onkeydown</a>;
   54848            attribute <a href=#function>Function</a> <a href=#handler-onkeypress title=handler-onkeypress>onkeypress</a>;
   54849            attribute <a href=#function>Function</a> <a href=#handler-onkeyup title=handler-onkeyup>onkeyup</a>;
   54850            attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
   54851            attribute <a href=#function>Function</a> <a href=#handler-onloadeddata title=handler-onloadeddata>onloadeddata</a>;
   54852            attribute <a href=#function>Function</a> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>onloadedmetadata</a>;
   54853            attribute <a href=#function>Function</a> <a href=#handler-onloadstart title=handler-onloadstart>onloadstart</a>;
   54854            attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
   54855            attribute <a href=#function>Function</a> <a href=#handler-onmousedown title=handler-onmousedown>onmousedown</a>;
   54856            attribute <a href=#function>Function</a> <a href=#handler-onmousemove title=handler-onmousemove>onmousemove</a>;
   54857            attribute <a href=#function>Function</a> <a href=#handler-onmouseout title=handler-onmouseout>onmouseout</a>;
   54858            attribute <a href=#function>Function</a> <a href=#handler-onmouseover title=handler-onmouseover>onmouseover</a>;
   54859            attribute <a href=#function>Function</a> <a href=#handler-onmouseup title=handler-onmouseup>onmouseup</a>;
   54860            attribute <a href=#function>Function</a> <a href=#handler-onmousewheel title=handler-onmousewheel>onmousewheel</a>;
   54861            attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
   54862            attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
   54863            attribute <a href=#function>Function</a> <a href=#handler-onpause title=handler-onpause>onpause</a>;
   54864            attribute <a href=#function>Function</a> <a href=#handler-onplay title=handler-onplay>onplay</a>;
   54865            attribute <a href=#function>Function</a> <a href=#handler-onplaying title=handler-onplaying>onplaying</a>;
   54866            attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
   54867            attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
   54868            attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
   54869            attribute <a href=#function>Function</a> <a href=#handler-onprogress title=handler-onprogress>onprogress</a>;
   54870            attribute <a href=#function>Function</a> <a href=#handler-onratechange title=handler-onratechange>onratechange</a>;
   54871            attribute <a href=#function>Function</a> <a href=#handler-onreadystatechange title=handler-onreadystatechange>onreadystatechange</a>;
   54872            attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
   54873            attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
   54874            attribute <a href=#function>Function</a> <a href=#handler-onscroll title=handler-onscroll>onscroll</a>;
   54875            attribute <a href=#function>Function</a> <a href=#handler-onseeked title=handler-onseeked>onseeked</a>;
   54876            attribute <a href=#function>Function</a> <a href=#handler-onseeking title=handler-onseeking>onseeking</a>;
   54877            attribute <a href=#function>Function</a> <a href=#handler-onselect title=handler-onselect>onselect</a>;
   54878            attribute <a href=#function>Function</a> <a href=#handler-onshow title=handler-onshow>onshow</a>;
   54879            attribute <a href=#function>Function</a> <a href=#handler-onstalled title=handler-onstalled>onstalled</a>;
   54880            attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
   54881            attribute <a href=#function>Function</a> <a href=#handler-onsubmit title=handler-onsubmit>onsubmit</a>;
   54882            attribute <a href=#function>Function</a> <a href=#handler-onsuspend title=handler-onsuspend>onsuspend</a>;
   54883            attribute <a href=#function>Function</a> <a href=#handler-ontimeupdate title=handler-ontimeupdate>ontimeupdate</a>;
   54884            attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
   54885            attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
   54886            attribute <a href=#function>Function</a> <a href=#handler-onvolumechange title=handler-onvolumechange>onvolumechange</a>;
   54887            attribute <a href=#function>Function</a> <a href=#handler-onwaiting title=handler-onwaiting>onwaiting</a>;
   54888 };
   54889 <a href=#window>Window</a> implements <a href=#eventtarget>EventTarget</a>;</pre>
   54890 
   54891 <!-- for more features to add here, look here:
   54892  http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp
   54893  http://www.mozilla.org/docs/dom/domref/dom_window_ref.html
   54894  http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindow.idl - scrollBy, etc
   54895  http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindowInternal.idl - DOM level 0
   54896 -->
   54897 
   54898   <dl class=domintro><dt><var title="">window</var> . <code title=dom-window><a href=#dom-window>window</a></code></dt>
   54899    <dt><var title="">window</var> . <code title=dom-frames><a href=#dom-frames>frames</a></code></dt>
   54900    <dt><var title="">window</var> . <code title=dom-self><a href=#dom-self>self</a></code></dt>
   54901 
   54902    <dd>
   54903 
   54904     <p>These attributes all return <var title="">window</var>.</p>
   54905 
   54906    </dd>
   54907 
   54908 
   54909    <dt><var title="">window</var> . <code title=dom-document><a href=#dom-document>document</a></code></dt>
   54910 
   54911    <dd>
   54912 
   54913     <p>Returns the <a href=#active-document>active document</a>.</p>
   54914 
   54915    </dd>
   54916 
   54917 
   54918    <dt><var title="">document</var> . <code title=dom-document-defaultView><a href=#dom-document-defaultview>defaultView</a></code></dt>
   54919 
   54920    <dd>
   54921 
   54922     <p>Returns the <code><a href=#window>Window</a></code> object of the <a href=#active-document>active document</a>.</p>
   54923 
   54924    </dd>
   54925 
   54926   </dl><div class=impl>
   54927 
   54928   <p>The <dfn id=dom-window title=dom-window><code>window</code></dfn>, <dfn id=dom-frames title=dom-frames><code>frames</code></dfn>, and <dfn id=dom-self title=dom-self><code>self</code></dfn> IDL attributes must all
   54929   return the <code><a href=#window>Window</a></code> object's <a href=#browsing-context>browsing
   54930   context</a>'s <code><a href=#windowproxy>WindowProxy</a></code> object.</p>
   54931 
   54932   <p>The <dfn id=dom-document title=dom-document><code>document</code></dfn> IDL
   54933   attribute must return the <code><a href=#document>Document</a></code> object of the
   54934   <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
   54935   context</a>'s <a href=#active-document>active document</a>.</p>
   54936 
   54937   <p>The <dfn id=dom-document-defaultview title=dom-document-defaultView><code>defaultView</code></dfn> IDL
   54938   attribute of the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
   54939   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a>'s
   54940   <code><a href=#windowproxy>WindowProxy</a></code> object.</p>
   54941 
   54942   </div>
   54943 
   54944 
   54945   <div class=impl>
   54946 
   54947   <h4 id=security-window><span class=secno>6.2.1 </span>Security</h4>
   54948 
   54949   <p id=security-2>User agents must raise a
   54950   <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of a
   54951   <code><a href=#window>Window</a></code> object are accessed by scripts whose
   54952   <a href=#effective-script-origin>effective script origin</a> is not the same as the
   54953   <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective
   54954   script origin</a>, with the following exceptions:</p>
   54955 
   54956   <ul><li>The <code title=dom-location><a href=#dom-location>location</a></code> object
   54957 
   54958    <li>The <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method
   54959 
   54960    <li>The <code title=dom-frames><a href=#dom-frames>frames</a></code> attribute
   54961 
   54962    <li>The <a href=#dynamic-nested-browsing-context-properties>dynamic nested browsing context properties</a>
   54963 
   54964   </ul><p>When a script whose <a href=#effective-script-origin>effective script origin</a> is not
   54965   the same as the <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s
   54966   <a href=#effective-script-origin>effective script origin</a> attempts to access that
   54967   <code><a href=#window>Window</a></code> object's methods or attributes, the user agent
   54968   must act as if any changes to the <code><a href=#window>Window</a></code> object's
   54969   properties, getters, setters, etc, were not present.</p>
   54970 
   54971   <p>For members that return objects (including function objects),
   54972   each distinct <a href=#effective-script-origin>effective script origin</a> that is not the
   54973   same as the <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>'s
   54974   <a href=#effective-script-origin>effective script origin</a> must be provided with a
   54975   separate set of objects. These objects must have the prototype chain
   54976   appropriate for the script for which the objects are created (not
   54977   those that would be appropriate for scripts whose <a href="#script's-global-object">script's
   54978   global object</a> is the <code><a href=#window>Window</a></code> object in
   54979   question).</p>
   54980 
   54981   <div class=example>
   54982 
   54983    <p>For instance, if two frames containing <code><a href=#document>Document</a></code>s
   54984    from different <a href=#origin title=origin>origins</a> access the same
   54985    <code><a href=#window>Window</a></code> object's <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method, they
   54986    will get distinct objects that are not equal.</p>
   54987 
   54988   </div>
   54989 
   54990   </div>
   54991 
   54992 
   54993 
   54994   <h4 id=apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>6.2.2 </span>APIs for creating and navigating browsing contexts by name</h4>
   54995 
   54996   <dl class=domintro><dt><var title="">window</var> = <var title="">window</var> . <code title=dom-open><a href=#dom-open>open</a></code>( [ <var title="">url</var> [, <var title="">target</var> [, <var title="">features</var> [, <var title="">replace</var> ] ] ] ] )</dt>
   54997 
   54998    <dd>
   54999 
   55000     <p>Opens a window to show <var title="">url</var> (defaults to
   55001     <code><a href=#about:blank>about:blank</a></code>), and returns it. The <var title="">target</var> argument gives the name of the new
   55002     window. If a window exists with that name already, it is
   55003     reused. The <var title="">replace</var> attribute, if true, means
   55004     that whatever page is currently open in that window will be
   55005     removed from the window's session history. The <var title="">features</var> argument is ignored.</p>
   55006 
   55007    </dd>
   55008 
   55009    <dt><var title="">window</var> . <code title=dom-name><a href=#dom-name>name</a></code> [ = <var title="">value</var> ]</dt>
   55010 
   55011    <dd>
   55012 
   55013     <p>Returns the name of the window.</p>
   55014 
   55015     <p>Can be set, to change the name.</p>
   55016 
   55017    </dd>
   55018 
   55019    <dt><var title="">window</var> . <code title=dom-window-close><a href=#dom-window-close>close</a></code>()</dt>
   55020 
   55021    <dd>
   55022 
   55023     <p>Closes the window.</p>
   55024 
   55025    </dd>
   55026 
   55027    <dt><var title="">window</var> . <code title=dom-window-stop><a href=#dom-window-stop>stop</a></code>()</dt>
   55028 
   55029    <dd>
   55030 
   55031     <p>Cancels the document load.</p>
   55032 
   55033    </dd>
   55034 
   55035   </dl><div class=impl>
   55036 
   55037   <p>The <dfn id=dom-open title=dom-open><code>open()</code></dfn> method on
   55038   <code><a href=#window>Window</a></code> objects provides a mechanism for <a href=#navigate title=navigate>navigating</a> an existing <a href=#browsing-context>browsing
   55039   context</a> or opening and navigating an <a href=#auxiliary-browsing-context>auxiliary browsing
   55040   context</a>.</p>
   55041 
   55042   <p>The method has four arguments, though they are all optional.</p>
   55043 
   55044   <p>The first argument, <var title="">url</var>, must be a
   55045   <a href=#valid-non-empty-url>valid non-empty URL</a> for a page to load in the browsing
   55046   context. If no arguments are provided, or if the first argument is
   55047   the empty string, then the <var title="">url</var> argument defaults
   55048   to "<code><a href=#about:blank>about:blank</a></code>". The argument must be <a href=#resolve-a-url title="resolve a url">resolved</a> to an <a href=#absolute-url>absolute
   55049   URL</a> (or an error), relative to the <a href=#entry-script>entry
   55050   script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>,
   55051   when the method is invoked.</p>
   55052 
   55053   <p>The second argument, <var title="">target</var>, specifies the
   55054   <a href=#browsing-context-name title="browsing context name">name</a> of the browsing
   55055   context that is to be navigated. It must be a <a href=#valid-browsing-context-name-or-keyword>valid browsing
   55056   context name or keyword</a>. If fewer than two arguments are
   55057   provided, then the <var title="">name</var> argument defaults to the
   55058   value "<code>_blank</code>".</p>
   55059 
   55060   <p>The third argument, <var title="">features</var>, has no effect
   55061   and is supported for historical reasons only.</p>
   55062 
   55063   <p>The fourth argument, <var title="">replace</var>, specifies
   55064   whether or not the new page will <a href=#replacement-enabled title="replacement
   55065   enabled">replace</a> the page currently loaded in the browsing
   55066   context, when <var title="">target</var> identifies an existing
   55067   browsing context (as opposed to leaving the current page in the
   55068   browsing context's <a href=#session-history>session history</a>). When three or
   55069   fewer arguments are provided, <var title="">replace</var> defaults
   55070   to false.</p>
   55071 
   55072   <p>When the method is invoked, the user agent must first select a
   55073   <a href=#browsing-context>browsing context</a> to navigate by applying <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the
   55074   rules for choosing a browsing context given a browsing context
   55075   name</a> using the <var title="">target</var> argument as the
   55076   name and the <a href=#browsing-context>browsing context</a> of the script as the
   55077   context in which the algorithm is executed, unless the user has
   55078   indicated a preference, in which case the browsing context to
   55079   navigate may instead be the one indicated by the user.</p>
   55080 
   55081   <p class=example>For example, suppose there is a user agent that
   55082   supports control-clicking a link to open it in a new tab. If a user
   55083   clicks in that user agent on an element whose <code title=handler-onclick><a href=#handler-onclick>onclick</a></code> handler uses the <code title=dom-open><a href=#dom-open>window.open()</a></code> API to open a page in an
   55084   iframe, but, while doing so, holds the control key down, the user
   55085   agent could override the selection of the target browsing context to
   55086   instead target a new tab.</p>
   55087 
   55088   <p>Then, the user agent must <a href=#navigate>navigate</a> the selected
   55089   <a href=#browsing-context>browsing context</a> to the <a href=#absolute-url>absolute URL</a> (or
   55090   error) obtained from <a href=#resolve-a-url title="resolve a url">resolving</a>
   55091   <var title="">url</var> earlier. If the <var title="">replace</var>
   55092   is true, then <a href=#replacement-enabled title="replacement enabled">replacement must be
   55093   enabled</a>; otherwise, it must not be enabled unless the
   55094   <a href=#browsing-context>browsing context</a> was just created as part of
   55095   <a href=#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name>the rules for choosing a browsing context given a browsing
   55096   context name</a>. The navigation must be done with the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
   55097   <a href=#entry-script>entry script</a> as the <a href=#source-browsing-context>source browsing
   55098   context</a>.</p>
   55099 
   55100   <p>The method must return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
   55101   <a href=#browsing-context>browsing context</a> that was navigated, or null if no
   55102   browsing context was navigated.</p>
   55103 
   55104   <hr><p>The <dfn id=dom-name title=dom-name><code>name</code></dfn> attribute of
   55105   the <code><a href=#window>Window</a></code> object must, on getting, return the current
   55106   name of the <a href=#browsing-context>browsing context</a>, and, on setting, set the
   55107   name of the <a href=#browsing-context>browsing context</a> to the new value.</p>
   55108 
   55109   <p class=note>The name <a href=#resetBCName>gets reset</a> when
   55110   the browsing context is navigated to another domain.</p>
   55111 
   55112   <hr><p>The <dfn id=dom-window-close title=dom-window-close><code>close()</code></dfn>
   55113   method on <code><a href=#window>Window</a></code> objects should, if the corresponding
   55114   <a href=#browsing-context>browsing context</a> <var title="">A</var> is an
   55115   <a href=#auxiliary-browsing-context>auxiliary browsing context</a> that was created by a script
   55116   (as opposed to by an action of the user), and if the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
   55117   <a href=#concept-script title=concept-script>script</a> that invokes the method
   55118   is <a href=#allowed-to-navigate>allowed to navigate</a> the <a href=#browsing-context>browsing
   55119   context</a> <var title="">A</var>, close the <a href=#browsing-context>browsing
   55120   context</a> <var title="">A</var> (and may <a href=#a-browsing-context-is-discarded title="a
   55121   browsing context is discarded">discard</a> it too).</p>
   55122 
   55123   <p>The <dfn id=dom-window-stop title=dom-window-stop><code>stop()</code></dfn> method
   55124   on <code><a href=#window>Window</a></code> objects should, if there is an existing
   55125   attempt to <a href=#navigate>navigate</a> the <a href=#browsing-context>browsing context</a>
   55126   and that attempt is not currently running the <a href=#unload-a-document>unload a
   55127   document</a> algorithm, cancel that <a href=#navigate title=navigate>navigation</a> and any associated instances of
   55128   the <a href=#fetch title=fetch>fetch algorithm</a>. Otherwise, it must
   55129   do nothing.</p>
   55130 
   55131   </div>
   55132 
   55133 
   55134   <h4 id=accessing-other-browsing-contexts><span class=secno>6.2.3 </span>Accessing other browsing contexts</h4>
   55135 
   55136   <dl class=domintro><dt><var title="">window</var> . <code title=dom-length><a href=#dom-length>length</a></code></dt>
   55137 
   55138    <dd>
   55139 
   55140     <p>Returns the number of <a href=#child-browsing-context title="child browsing
   55141     context">child browsing contexts</a>.</p>
   55142 
   55143    </dd>
   55144 
   55145    <dt><var title="">window</var>[<var title="">index</var>]</dt>
   55146 
   55147    <dd>
   55148 
   55149     <p>Returns the indicated <a href=#child-browsing-context>child browsing context</a>.</p>
   55150 
   55151    </dd>
   55152 
   55153   </dl><div class=impl>
   55154 
   55155   <p>The <dfn id=dom-length title=dom-length><code>length</code></dfn> IDL
   55156   attribute on the <code><a href=#window>Window</a></code> interface must return the
   55157   number of <a href=#child-browsing-context title="child browsing context">child browsing
   55158   contexts</a> that are <a href=#browsing-context-nested-through title="browsing context nested
   55159   through">nested through</a> elements that are <a href=#in-a-document title="in a
   55160   document">in the <code>Document</code></a> that is the
   55161   <a href=#active-document>active document</a> of that <code><a href=#window>Window</a></code> object, if
   55162   that <code><a href=#window>Window</a></code>'s <a href=#browsing-context>browsing context</a> shares the
   55163   same <a href=#event-loop>event loop</a> as the <a href="#script's-browsing-context">script's browsing
   55164   context</a> of the <a href=#entry-script>entry script</a> accessing the IDL
   55165   attribute; otherwise, it must return zero.</p>
   55166 
   55167   <!-- in other words, frames are only accessible to same-thread processes -->
   55168 
   55169   <p>The <span>indices of the supported indexed properties</span> on
   55170   the <code><a href=#window>Window</a></code> object at any instant are the numbers in the
   55171   range 0 .. <span title=""><var title="">n</var>-1</span>, where <var title="">n</var> is the number returned by the <code title=dom-length><a href=#dom-length>length</a></code> IDL attribute. If <var title="">n</var> is zero then there are no <span>supported indexed
   55172   properties</span>.</p>
   55173 
   55174   <p>When a <code><a href=#window>Window</a></code> object is <dfn id=dom-window-item title=dom-window-item>indexed to retrieve an indexed
   55175   property</dfn> <var title="">index</var>, the value returned must be
   55176   the <code><a href=#windowproxy>WindowProxy</a></code> object of the <var title="">index</var>th <a href=#child-browsing-context>child browsing context</a> of the
   55177   <code><a href=#document>Document</a></code> that is nested through an element that is
   55178   <a href=#in-a-document title="in a document">in the <code>Document</code></a>,
   55179   sorted in the <a href=#tree-order>tree order</a> of the elements nesting those
   55180   <a href=#browsing-context title="browsing context">browsing contexts</a>.</p>
   55181 
   55182   <p>These properties are the <dfn id=dynamic-nested-browsing-context-properties>dynamic nested browsing context
   55183   properties</dfn>.</p>
   55184 
   55185   </div>
   55186 
   55187 
   55188 
   55189   <h4 id=named-access-on-the-window-object><span class=secno>6.2.4 </span>Named access on the <code><a href=#window>Window</a></code> object</h4>
   55190 
   55191   <dl class=domintro><dt><var title="">window</var>[<var title="">name</var>]</dt>
   55192 
   55193    <dd>
   55194 
   55195     <p>Returns the indicated element or collection of elements.</p>
   55196 
   55197    </dd>
   55198 
   55199   </dl><div class=impl>
   55200 
   55201   <p>The <code><a href=#window>Window</a></code> interface <span title="support named
   55202   properties">supports named properties</span>. The <span>names of the
   55203   supported named properties</span> at any moment consist of:</p>
   55204 
   55205   <ul><li>the value of the <code title="">name</code> content attribute
   55206    for all <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   55207    <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   55208    <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, and
   55209    <code><a href=#the-object-element>object</a></code> elements in the <a href=#active-document>active document</a>
   55210    that have a <code title="">name</code> content attribute, and</li>
   55211 
   55212    <li>the value of the <code title=attr-id><a href=#the-id-attribute>id</a></code> content
   55213    attribute of any <a href=#html-elements title="HTML elements">HTML element</a> in
   55214    the <a href=#active-document>active document</a> with an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute.</li>
   55215 
   55216   </ul><p>When <dfn id=dom-window-nameditem title=dom-window-namedItem>the <code>Window</code>
   55217   object is indexed for property retrieval</dfn> using a name <var title="">name</var>, then the user agent must return the value
   55218   obtained using the following steps:</p>
   55219 
   55220   <ol><li>
   55221 
   55222     <p>Let <var title="">elements</var> be the list of <a href=#dom-window-nameditem-filter title=dom-window-namedItem-filter>named elements</a> with the
   55223     name <var title="">name</var> in the <a href=#active-document>active document</a>.
   55224 
   55225     <p class=note>There will be at least one such element, by
   55226     definition.<!-- (If there wasn't, then this algorithm wouldn't
   55227     have been invoked by Web IDL.) --></p>
   55228 
   55229    </li>
   55230 
   55231    <li>
   55232 
   55233     <p>If <var title="">elements</var> contains an <code><a href=#the-iframe-element>iframe</a></code>
   55234     element, then return the <code><a href=#windowproxy>WindowProxy</a></code> object of the
   55235     <a href=#nested-browsing-context>nested browsing context</a> represented by the first such
   55236     <code><a href=#the-iframe-element>iframe</a></code> element in <a href=#tree-order>tree order</a>, and abort
   55237     these steps.</p>
   55238 
   55239    </li>
   55240 
   55241    <li>
   55242 
   55243     <p>Otherwise, if <var title="">elements</var> has only one
   55244     element, return that element and abort these steps.</p>
   55245 
   55246    </li>
   55247 
   55248    <li>
   55249 
   55250     <p>Otherwise return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   55251     <code><a href=#document>Document</a></code> node, whose filter matches only <a href=#dom-window-nameditem-filter title=dom-window-namedItem-filter>named elements</a> with
   55252     the name <var title="">name</var>.</p> <!-- the same one each time
   55253     is returned, because of the rule under collections -->
   55254 
   55255    </li>
   55256 
   55257   </ol><p><dfn id=dom-window-nameditem-filter title=dom-window-nameditem-filter>Named elements</dfn>
   55258   with the name <var title="">name</var>, for the purposes of the
   55259   above algorithm, are those that are either:</p>
   55260 
   55261   <ul><li><code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-area-element>area</a></code>,
   55262    <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#frame>frame</a></code>,
   55263    <code><a href=#frameset>frameset</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or
   55264    <code><a href=#the-object-element>object</a></code> elements that have a <code title=attr-name>name</code> content attribute whose value is <var title="">name</var>, or</li>
   55265 
   55266    <li><a href=#html-elements>HTML elements</a> elements that have an <code title=attr-id><a href=#the-id-attribute>id</a></code> content attribute whose value is <var title="">name</var>.</li>
   55267 
   55268   </ul></div>
   55269 
   55270 
   55271   <div class=impl>
   55272 
   55273   <h4 id=garbage-collection-and-browsing-contexts><span class=secno>6.2.5 </span>Garbage collection and browsing contexts</h4>
   55274 
   55275   <p>A <a href=#browsing-context>browsing context</a> has a strong reference to each of
   55276   its <code><a href=#document>Document</a></code>s and its <code><a href=#windowproxy>WindowProxy</a></code> object,
   55277   and the user agent itself has a strong reference to its <a href=#top-level-browsing-context title="top-level browsing context">top-level browsing
   55278   contexts</a>.</p>
   55279 
   55280   <p>A <code><a href=#document>Document</a></code> has a strong reference to its
   55281   <code><a href=#window>Window</a></code> object.</p>
   55282 
   55283   <p class=note>A <code><a href=#window>Window</a></code> object <a href=#implied-strong-reference title="implied
   55284   strong reference">has a strong reference</a> to its
   55285   <code><a href=#document>Document</a></code> object through its <code title=dom-document><a href=#dom-document>document</a></code> attribute.  Thus, references
   55286   from other scripts to either of those objects will keep both
   55287   alive. Similarly, both <code><a href=#document>Document</a></code> and <code><a href=#window>Window</a></code>
   55288   objects have <a href=#implied-strong-reference title="implied strong reference">implied strong
   55289   references</a> to the <code><a href=#windowproxy>WindowProxy</a></code> object.</p>
   55290 
   55291   <p>Each <a href=#concept-script title=concept-script>script</a> has a strong
   55292   reference to its <a href="#script's-browsing-context" title="script's browsing context">browsing
   55293   context</a> and its <a href="#script's-document" title="script's
   55294   document">document</a>.</p>
   55295 
   55296   <p>When a <a href=#browsing-context>browsing context</a> is to <dfn id=discard-a-document>discard a
   55297   <code>Document</code></dfn>, the user agent must run the following
   55298   steps:</p>
   55299 
   55300   <ol><li><p>Set the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   55301    false.</li>
   55302 
   55303    <li><p>Run any <a href=#unloading-document-cleanup-steps>unloading document cleanup steps</a> for
   55304    the <code><a href=#document>Document</a></code> that are defined by this specification or
   55305    any other relevant specifications.</li>
   55306 
   55307    <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
   55308    associated with the <code><a href=#document>Document</a></code> in any <a href=#task-source>task
   55309    source</a>, without running those tasks.</li>
   55310 
   55311    <li><p><a href=#a-browsing-context-is-discarded title="a browsing context is discarded">Discard</a>
   55312    all the <a href=#child-browsing-context title="child browsing context">child browsing
   55313    contexts</a> of the <code><a href=#document>Document</a></code>.</li>
   55314 
   55315    <li><p>Lose the strong reference from the <code><a href=#document>Document</a></code>'s
   55316    <a href=#browsing-context>browsing context</a> to the
   55317    <code><a href=#document>Document</a></code>.</li>
   55318 
   55319   </ol><p class=note>Whenever a <code><a href=#document>Document</a></code> object is <a href=#discard-a-document title="discard a Document">discarded</a>, it is also removed from
   55320   the list of <span>the worker's <code><a href=#document>Document</a></code>s</span> of each
   55321   worker whose list contains that <code><a href=#document>Document</a></code>.</p>
   55322 
   55323   <p>When <dfn id=a-browsing-context-is-discarded>a <em><span>browsing context</span></em> is
   55324   discarded</dfn>, the strong reference from the user agent itself to
   55325   the <a href=#browsing-context>browsing context</a> must be severed, and all the
   55326   <code><a href=#document>Document</a></code> objects for all the entries in the
   55327   <a href=#browsing-context>browsing context</a>'s session history must be <a href=#discard-a-document title="discard a document">discarded</a> as well.</p>
   55328 
   55329   <p>User agents may <a href=#a-browsing-context-is-discarded title="a browsing context is
   55330   discarded">discard</a> <a href=#top-level-browsing-context title="top-level browsing
   55331   context">top-level browsing contexts</a> at any time (typically,
   55332   in response to user requests, e.g. when a user closes a window
   55333   containing one or more <a href=#top-level-browsing-context title="top-level browsing
   55334   context">top-level browsing contexts</a>). Other <a href=#browsing-context title="browsing context">browsing contexts</a> must be discarded
   55335   once their <code><a href=#windowproxy>WindowProxy</a></code> object is eligible for garbage
   55336   collection.</p>
   55337 
   55338   </div>
   55339 
   55340 
   55341 
   55342   <h4 id=browser-interface-elements><span class=secno>6.2.6 </span>Browser interface elements</h4>
   55343 
   55344   <p>To allow Web pages to integrate with Web browsers, certain Web
   55345   browser interface elements are exposed in a limited way to scripts
   55346   in Web pages.</p>
   55347 
   55348   <p>Each interface element is represented by a <code><a href=#barprop>BarProp</a></code>
   55349   object:</p>
   55350 
   55351   <pre class=idl>interface <dfn id=barprop>BarProp</dfn> {
   55352            attribute boolean <a href=#dom-barprop-visible title=dom-BarProp-visible>visible</a>;
   55353 };</pre>
   55354 
   55355   <dl class=domintro><dt><var title="">window</var> . <code title=dom-window-locationbar><a href=#dom-window-locationbar>locationbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55356    <dd>
   55357     <p>Returns true if the location bar is visible; otherwise, returns false.</p>
   55358    </dd>
   55359 
   55360    <dt><var title="">window</var> . <code title=dom-window-menubar><a href=#dom-window-menubar>menubar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55361    <dd>
   55362     <p>Returns true if the menu bar is visible; otherwise, returns false.</p>
   55363    </dd>
   55364 
   55365    <dt><var title="">window</var> . <code title=dom-window-personalbar><a href=#dom-window-personalbar>personalbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55366    <!--<dt><var title="">window</var> . <code title="dom-window-directories">directories</code> . <code title="dom-BarProp-visible">visible</code></dt>-->
   55367    <dd>
   55368     <p>Returns true if the personal bar is visible; otherwise, returns false.</p>
   55369    </dd>
   55370 
   55371    <dt><var title="">window</var> . <code title=dom-window-scrollbars><a href=#dom-window-scrollbars>scrollbars</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55372    <dd>
   55373     <p>Returns true if the scroll bars are visible; otherwise, returns false.</p>
   55374    </dd>
   55375 
   55376    <dt><var title="">window</var> . <code title=dom-window-statusbar><a href=#dom-window-statusbar>statusbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55377    <dd>
   55378     <p>Returns true if the status bar is visible; otherwise, returns false.</p>
   55379    </dd>
   55380 
   55381    <dt><var title="">window</var> . <code title=dom-window-toolbar><a href=#dom-window-toolbar>toolbar</a></code> . <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code></dt>
   55382    <dd>
   55383     <p>Returns true if the toolbar is visible; otherwise, returns false.</p>
   55384    </dd>
   55385 
   55386   </dl><div class=impl>
   55387 
   55388   <p>The <dfn id=dom-barprop-visible title=dom-BarProp-visible>visible</dfn> attribute, on
   55389   getting, must return either true or a value determined by the user
   55390   agent to most accurately represent the visibility state of the user
   55391   interface element that the object represents, as described below. On
   55392   setting, the new value must be discarded.</p>
   55393 
   55394   <p>The following <code><a href=#barprop>BarProp</a></code> objects exist for each
   55395   <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
   55396   context</a>. Some of the user interface elements represented by
   55397   these objects might have no equivalent in some user agents; for
   55398   those user agents, except when otherwise specified, the object must
   55399   act as if it was present and visible (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code> attribute must return
   55400   true).</p>
   55401 
   55402   <dl><dt><dfn id=the-location-bar-barprop-object>The location bar <code>BarProp</code> object</dfn></dt>
   55403 
   55404    <dd>Represents the user interface element that contains a control
   55405    that displays the <a href=#url>URL</a> of the <a href=#active-document>active
   55406    document</a>, or some similar interface concept.</dd>
   55407 
   55408    <dt><dfn id=the-menu-bar-barprop-object>The menu bar <code>BarProp</code> object</dfn></dt>
   55409 
   55410    <dd>Represents the user interface element that contains a list of
   55411    commands in menu form, or some similar interface concept.</dd>
   55412 
   55413    <dt><dfn id=the-personal-bar-barprop-object>The personal bar <code>BarProp</code> object</dfn></dt>
   55414 
   55415    <dd>Represents the user interface element that contains links to
   55416    the user's favorite pages, or some similar interface concept.</dd>
   55417 
   55418    <dt><dfn id=the-scrollbar-barprop-object>The scrollbar <code>BarProp</code> object</dfn></dt>
   55419 
   55420    <dd>Represents the user interface element that contains a scrolling
   55421    mechanism, or some similar interface concept.</dd>
   55422 
   55423    <dt><dfn id=the-status-bar-barprop-object>The status bar <code>BarProp</code> object</dfn></dt>
   55424 
   55425    <dd>Represents a user interface element found immediately below or
   55426    after the document, as appropriate for the user's media. If the
   55427    user agent has no such user interface element, then the object may
   55428    act as if the corresponding user interface element was absent
   55429    (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code>
   55430    attribute may return false).</dd>
   55431 
   55432    <dt><dfn id=the-toolbar-barprop-object>The toolbar <code>BarProp</code> object</dfn></dt>
   55433 
   55434    <dd>Represents the user interface element found immediately above
   55435    or before the document, as appropriate for the user's media. If the
   55436    user agent has no such user interface element, then the object may
   55437    act as if the corresponding user interface element was absent
   55438    (i.e. its <code title=dom-BarProp-visible><a href=#dom-barprop-visible>visible</a></code>
   55439    attribute may return false).</dd>
   55440 
   55441   </dl><p>The <dfn id=dom-window-locationbar title=dom-window-locationbar><code>locationbar</code></dfn>
   55442   attribute must return <a href=#the-location-bar-barprop-object>the location bar <code>BarProp</code>
   55443   object</a>.</p>
   55444 
   55445   <p>The <dfn id=dom-window-menubar title=dom-window-menubar><code>menubar</code></dfn>
   55446   attribute must return <a href=#the-menu-bar-barprop-object>the menu bar <code>BarProp</code>
   55447   object</a>.</p>
   55448 
   55449   <p>The <dfn id=dom-window-personalbar title=dom-window-personalbar><code>personalbar</code></dfn>
   55450   attribute must return <a href=#the-personal-bar-barprop-object>the personal bar <code>BarProp</code>
   55451   object</a>.</p>
   55452 
   55453   <p>The <dfn id=dom-window-scrollbars title=dom-window-scrollbars><code>scrollbars</code></dfn>
   55454   attribute must return <a href=#the-scrollbar-barprop-object>the scrollbar <code>BarProp</code>
   55455   object</a>.</p>
   55456 
   55457   <p>The <dfn id=dom-window-statusbar title=dom-window-statusbar><code>statusbar</code></dfn> attribute
   55458   must return <a href=#the-status-bar-barprop-object>the status bar <code>BarProp</code>
   55459   object</a>.</p>
   55460 
   55461   <p>The <dfn id=dom-window-toolbar title=dom-window-toolbar><code>toolbar</code></dfn>
   55462   attribute must return <a href=#the-toolbar-barprop-object>the toolbar <code>BarProp</code>
   55463   object</a>.</p>
   55464 
   55465 <!--
   55466   <p>For legacy reasons, the <dfn
   55467   title="dom-window-directories"><code>directories</code></dfn>
   55468   attribute must also return <span>the personal bar
   55469   <code>BarProp</code> object</span>.</p>
   55470 -->
   55471 
   55472   </div>
   55473 
   55474 
   55475   <div class=impl>
   55476 
   55477   <h4 id=the-windowproxy-object><span class=secno>6.2.7 </span>The <code><a href=#windowproxy>WindowProxy</a></code> object</h4>
   55478 
   55479 
   55480   <p>As mentioned earlier, each <a href=#browsing-context>browsing context</a> has a
   55481   <dfn id=windowproxy><code>WindowProxy</code></dfn> object. This object is unusual
   55482   in that all operations that would be performed on it must be
   55483   performed on the <code><a href=#window>Window</a></code> object of the <a href=#browsing-context>browsing
   55484   context</a>'s <a href=#active-document>active document</a> instead. It is thus
   55485   indistinguishable from that <code><a href=#window>Window</a></code> object in every way
   55486   until the <a href=#browsing-context>browsing context</a> is navigated.</p>
   55487 
   55488   <p>There is no <code><a href=#windowproxy>WindowProxy</a></code> interface object.</p>
   55489 
   55490   <p class=note>The <code><a href=#windowproxy>WindowProxy</a></code> object allows scripts
   55491   to act as if each <a href=#browsing-context>browsing context</a> had a single
   55492   <code><a href=#window>Window</a></code> object, while still keeping separate
   55493   <code><a href=#window>Window</a></code> objects for each <code><a href=#document>Document</a></code>.</p>
   55494 
   55495   <div class=example>
   55496 
   55497    <p>In the following example, the variable <var title="">x</var> is
   55498    set to the <code><a href=#windowproxy>WindowProxy</a></code> object returned by the <code title=dom-window><a href=#dom-window>window</a></code> accessor on the global object. All
   55499    of the expressions following the assignment return true, because in
   55500    every respect, the <code><a href=#windowproxy>WindowProxy</a></code> object acts like the
   55501    underlying <code><a href=#window>Window</a></code> object.</p>
   55502 
   55503    <pre>var x = window;
   55504 x instanceof Window; // true
   55505 x === this; // true</pre>
   55506 
   55507   </div>
   55508 
   55509   </div>
   55510 
   55511 
   55512 
   55513   <h3 id=origin-0><span class=secno>6.3 </span>Origin</h3>
   55514   <!-- Hallowed are the Ori -->
   55515 
   55516   <p>The <dfn id=origin>origin</dfn> of a resource and the <dfn id=effective-script-origin>effective script
   55517   origin</dfn> of a resource are both either opaque identifiers or
   55518   tuples consisting of a scheme component, a host component, a port
   55519   component, and optionally extra data.</p>
   55520 
   55521   <p class=note>The extra data could include the certificate of the
   55522   site when using encrypted connections, to ensure that if the site's
   55523   secure certificate changes, the origin is considered to change as
   55524   well.</p>
   55525 
   55526 
   55527   <div class=impl>
   55528 
   55529   <p>These characteristics are defined as follows:</p>
   55530 
   55531   <dl><dt>For URLs</dt>
   55532 
   55533    <dd>
   55534 
   55535     <p>The <a href=#origin>origin</a> and <a href=#effective-script-origin>effective script
   55536     origin</a> of the <a href=#url>URL</a> is whatever is returned by
   55537     the following algorithm:</p>
   55538 
   55539     <ol><li><p>Let <var title="">url</var> be the <a href=#url>URL</a> for
   55540      which the <a href=#origin>origin</a> is being determined.</li>
   55541 
   55542      <li><p><a href=#parse-a-url title="parse a url">Parse</a> <var title="">url</var>.</li>
   55543 
   55544      <li><p>If <var title="">url</var> identifies a resource that is
   55545      its own trust domain (e.g. it identifies an e-mail on an IMAP
   55546      server or a post on an NNTP server) then return a globally unique
   55547      identifier specific to the resource identified by <var title="">url</var>, so that if this algorithm is invoked again
   55548      for <a href=#url title=URL>URLs</a> that identify the same resource,
   55549      the same identifier will be returned.</li>
   55550 
   55551      <li><p>If <var title="">url</var> does not use a server-based
   55552      naming authority, or if parsing <var title="">url</var> failed,
   55553      or if <var title="">url</var> is not an <a href=#absolute-url>absolute
   55554      URL</a>, then return a new globally unique
   55555      identifier.</li>
   55556 
   55557      <li><p>Let <var title="">scheme</var> be the <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component of <var title="">url</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
   55558 
   55559      <li><p>If the UA doesn't support the protocol given by <var title="">scheme</var>, then return a new globally unique
   55560      identifier.</li>
   55561 
   55562      <li><p>If <var title="">scheme</var> is "<code title="">file</code>", then the user agent may return a
   55563      UA-specific value.</li>
   55564 
   55565      <li><p>Let <var title="">host</var> be the <a href=#url-host title=url-host>&lt;host&gt;</a> component of <var title="">url</var>.</li>
   55566 
   55567      <li>
   55568 
   55569       <p>Apply the IDNA ToASCII algorithm to <var title="">host</var>,
   55570       with both the AllowUnassigned and UseSTD3ASCIIRules flags
   55571       set. Let <var title="">host</var> be the result of the ToASCII
   55572       algorithm.</p>
   55573 
   55574       <p>If ToASCII fails to convert one of the components of the
   55575       string, e.g. because it is too long or because it contains
   55576       invalid characters, then return a new globally unique
   55577       identifier. <a href=#refsRFC3490>[RFC3490]</a></p>
   55578 
   55579      </li>
   55580 
   55581      <li><p>Let <var title="">host</var> be the result of converting
   55582      <var title="">host</var> <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">to
   55583      ASCII lowercase</a>.</li>
   55584 
   55585      <li><p>If there is no <a href=#url-port title=url-port>&lt;port&gt;</a>
   55586      component, then let <var title="">port</var> be the default port
   55587      for the protocol given by <var title="">scheme</var>. Otherwise,
   55588      let <var title="">port</var> be the <a href=#url-port title=url-port>&lt;port&gt;</a> component of <var title="">url</var>.</li>
   55589 
   55590      <li><p>Return the tuple (<var title="">scheme</var>, <var title="">host</var>, <var title="">port</var>).</li>
   55591 
   55592     </ol><p>In addition, if the <a href=#url>URL</a> is in fact associated with
   55593     a <code><a href=#document>Document</a></code> object that was created by parsing the
   55594     resource obtained from fetching <a href=#url>URL</a>, and this was
   55595     done over a secure connection, then the server's secure
   55596     certificate may be added to the origin as additional data.</p>
   55597 
   55598    </dd>
   55599 
   55600    <dt>For scripts</dt>
   55601 
   55602    <dd>
   55603 
   55604     <p>The <a href=#origin>origin</a> and <a href=#effective-script-origin>effective script
   55605     origin</a> of a script are determined from another resource,
   55606     called the <i>owner</i>:</p>
   55607 
   55608     <dl class=switch><dt>If a script is in a <code><a href=#script>script</a></code> element</dt>
   55609 
   55610      <dd>The owner is the <code><a href=#document>Document</a></code> to which the
   55611      <code><a href=#script>script</a></code> element belongs.</dd>
   55612 
   55613 
   55614      <dt>If a script is in an <a href=#event-handler-content-attributes title="event handler content
   55615      attributes">event handler content attribute</a></dt>
   55616 
   55617      <dd>The owner is the <code><a href=#document>Document</a></code> to which the
   55618      attribute node belongs.</dd>
   55619 
   55620 
   55621      <dt>If a script is a function or other code reference created by
   55622      another script</dt>
   55623 
   55624      <dd>The owner is the script that created it.</dd>
   55625 
   55626 
   55627      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> that was returned as the
   55628      location of an HTTP redirect (<a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a> in
   55629      other protocols)</dt>
   55630 
   55631      <dd>The owner is the <a href=#url>URL</a> that redirected to the
   55632      <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a>.</dd>
   55633 
   55634 
   55635      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> in an attribute</dt>
   55636 
   55637      <dd>The owner is the <code><a href=#document>Document</a></code> of the element on
   55638      which the attribute is found.</dd>
   55639 
   55640 
   55641      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> in a style sheet</dt>
   55642 
   55643      <dd>The owner is the <a href=#url>URL</a> of the style sheet.</dd>
   55644 
   55645 
   55646      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
   55647      context</a> is being <a href=#navigate title=navigate>navigated</a>,
   55648      the URL having been provided by the user (e.g. by using a
   55649      <i>bookmarklet</i>)</dt>
   55650 
   55651      <dd>The owner is the <code><a href=#document>Document</a></code> of the <a href=#browsing-context>browsing
   55652      context</a>'s <a href=#active-document>active document</a>.</dd>
   55653 
   55654 
   55655      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
   55656      context</a> is being <a href=#navigate title=navigate>navigated</a>,
   55657      the URL having been declared in markup</dt>
   55658 
   55659      <dd>The owner is the <code><a href=#document>Document</a></code> of the element
   55660      (e.g. an <code><a href=#the-a-element>a</a></code> or <code><a href=#the-area-element>area</a></code> element) that
   55661      declared the URL.</dd>
   55662 
   55663 
   55664      <dt>If a script is a <a href=#javascript-protocol title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href=#browsing-context>browsing
   55665      context</a> is being <a href=#navigate title=navigate>navigated</a>,
   55666      the URL having been provided by script</dt>
   55667 
   55668      <dd>The owner is the script that provided the URL.</dd>
   55669 
   55670     </dl><p>The <a href=#origin>origin</a> of the script is then equal to the
   55671     <a href=#origin>origin</a> of the owner, and the <a href=#effective-script-origin>effective script
   55672     origin</a> of the script is equal to the <a href=#effective-script-origin>effective script
   55673     origin</a> of the owner.</p>
   55674 
   55675    </dd>
   55676 
   55677    <dt>For <code><a href=#document>Document</a></code> objects and images</dt>
   55678 
   55679    <dd>
   55680 
   55681     <dl class=switch><dt id=sandboxOrigin>If a <code><a href=#document>Document</a></code> is in a
   55682      <a href=#browsing-context>browsing context</a> whose <a href=#sandboxed-origin-browsing-context-flag>sandboxed origin
   55683      browsing context flag</a> was set when the
   55684      <code><a href=#document>Document</a></code> was created</dt>
   55685 
   55686      <dt>If a <code><a href=#document>Document</a></code> was generated from a resource
   55687      labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code></dt>
   55688 
   55689      <dd>The <a href=#origin>origin</a> is a globally unique identifier
   55690      assigned when the <code><a href=#document>Document</a></code> is created.</dd>
   55691 
   55692 
   55693      <dt>If a <code><a href=#document>Document</a></code> or image was returned by the
   55694      <code>XMLHttpRequest</code> API</dt>
   55695 
   55696      <dd>The <a href=#origin>origin</a> is equal to the <span>XMLHttpRequest
   55697      origin</span> of the <code>XMLHttpRequest</code> object. <a href=#refsXHR>[XHR]</a></dd>
   55698 
   55699 
   55700      <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
   55701      <a href=#javascript-protocol title="javascript protocol"><code>javascript:</code>
   55702      URL</a></dt>
   55703 
   55704      <dd>The <a href=#origin>origin</a> is equal to the <a href=#origin>origin</a>
   55705      of the script of that <a href=#javascript-protocol title="javascript
   55706      protocol"><code>javascript:</code> URL</a>.</dd>
   55707 
   55708 
   55709      <dt>If a <code><a href=#document>Document</a></code> or image was served over the
   55710      network and has an address that uses a URL scheme with a
   55711      server-based naming authority</dt>
   55712 
   55713      <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
   55714      <a href="#the-document's-address" title="the document's address">address</a> of the
   55715      <code><a href=#document>Document</a></code> or the <a href=#url>URL</a> of the image, as
   55716      appropriate.</dd>
   55717 
   55718 
   55719      <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
   55720      <code title="">data:</code> URL that was returned as the location
   55721      of an HTTP redirect (<a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a> in
   55722      other protocols)</dt>
   55723 
   55724      <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
   55725      <a href=#url>URL</a> that redirected to the <code title="">data:</code> URL.</dd>
   55726 
   55727 
   55728      <dt>If a <code><a href=#document>Document</a></code> or image was generated from a
   55729      <code title="">data:</code> URL found in another
   55730      <code><a href=#document>Document</a></code> or in a script</dt>
   55731 
   55732      <dd>The <a href=#origin>origin</a> is the <a href=#origin>origin</a> of the
   55733      <code><a href=#document>Document</a></code> or script that initiated the <a href=#navigate title=navigate>navigation</a> to that <a href=#url>URL</a>.</dd>
   55734 
   55735 
   55736      <dt>If a <code><a href=#document>Document</a></code> has the <a href="#the-document's-address" title="the
   55737      document's address">address</a>
   55738      "<code><a href=#about:blank>about:blank</a></code>"</dt>
   55739 
   55740      <dd>The <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code> is <a href=#about-blank-origin>the <span>origin</span> it was
   55741      assigned when its browsing context was created</a>.</dd>
   55742 
   55743 
   55744      <dt>If a <code><a href=#document>Document</a></code> is <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a></dt>
   55745 
   55746      <dd>The <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code> is the
   55747      <a href=#origin>origin</a> of the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
   55748      context</a>'s <a href=#browsing-context-container>browsing context container</a>'s
   55749      <code><a href=#document>Document</a></code>.</dd>
   55750 
   55751 
   55752      <dt>If a <code><a href=#document>Document</a></code> or image was obtained in some
   55753      other manner (e.g. a <code title="">data:</code> URL typed in by
   55754      the user, a <code><a href=#document>Document</a></code> created using the <code title=dom-DOMImplementation-createDocument><a href=#dom-domimplementation-createdocument>createDocument()</a></code>
   55755      API, etc)</dt>
   55756 
   55757      <dd>The <a href=#origin>origin</a> is a globally unique identifier
   55758      assigned when the <code><a href=#document>Document</a></code> or image is created.</dd>
   55759 
   55760     </dl><p>When a <code><a href=#document>Document</a></code> is created, its <a href=#effective-script-origin>effective
   55761     script origin</a> is initialized to the <a href=#origin>origin</a> of
   55762     the <code><a href=#document>Document</a></code>. However, the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute can
   55763     be used to change it.</p>
   55764 
   55765    </dd>
   55766 
   55767    <dt>For <code><a href=#audio>audio</a></code> and <code><a href=#video>video</a></code> elements</dt>
   55768 
   55769    <dd>
   55770 
   55771     <p>If value of the <a href=#media-element>media element</a>'s <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute is the
   55772     empty string, the <a href=#origin>origin</a> is the same as the
   55773     <a href=#origin>origin</a> of the element's <code><a href=#document>Document</a></code>'s
   55774     <a href=#origin>origin</a>.</p>
   55775 
   55776     <p>Otherwise, the <a href=#origin>origin</a> is equal to the
   55777     <a href=#origin>origin</a> of the <a href=#absolute-url>absolute URL</a> given by the
   55778     <a href=#media-element>media element</a>'s <code title=dom-media-currentSrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute.</p>
   55779 
   55780    </dd>
   55781 
   55782   </dl><p>The <dfn id=unicode-serialization-of-an-origin>Unicode serialization of an origin</dfn> is the string
   55783   obtained by applying the following algorithm to the given
   55784   <a href=#origin>origin</a>:</p>
   55785 
   55786   <ol><li><p>If the <a href=#origin>origin</a> in question is not a
   55787    scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</li>
   55788 
   55789    <li><p>Otherwise, let <var title="">result</var> be the scheme part
   55790    of the <a href=#origin>origin</a> tuple.</li>
   55791 
   55792    <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</li>
   55793 
   55794    <li><p>Apply the IDNA ToUnicode algorithm to each component of the
   55795    host part of the <a href=#origin>origin</a> tuple, and append the results
   55796    &mdash; each component, in the same order, separated by U+002E FULL
   55797    STOP characters (.) &mdash; to <var title="">result</var>. <a href=#refsRFC3490>[RFC3490]</a></li>
   55798 
   55799    <li><p>If the port part of the <a href=#origin>origin</a> tuple gives a port
   55800    that is different from the default port for the protocol given by
   55801    the scheme part of the <a href=#origin>origin</a> tuple, then append a
   55802    U+003A COLON character (:) and the given port, in base ten, to
   55803    <var title="">result</var>.</li>
   55804 
   55805    <li><p>Return <var title="">result</var>.</li>
   55806 
   55807   </ol><p>The <dfn id=ascii-serialization-of-an-origin>ASCII serialization of an origin</dfn> is the string
   55808   obtained by applying the following algorithm to the given
   55809   <a href=#origin>origin</a>:</p>
   55810 
   55811   <ol><li><p>If the <a href=#origin>origin</a> in question is not a
   55812    scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</li>
   55813 
   55814    <li><p>Otherwise, let <var title="">result</var> be the scheme part
   55815    of the <a href=#origin>origin</a> tuple.</li>
   55816 
   55817    <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</li>
   55818 
   55819    <li>
   55820 
   55821     <p>Apply the IDNA ToASCII algorithm the host part of the
   55822     <a href=#origin>origin</a> tuple, with both the AllowUnassigned and
   55823     UseSTD3ASCIIRules flags set, and append the results <var title="">result</var>.</p>
   55824 
   55825     <p>If ToASCII fails to convert one of the components of the
   55826     string, e.g. because it is too long or because it contains invalid
   55827     characters, then return the empty string and abort these steps. <a href=#refsRFC3490>[RFC3490]</a></p>
   55828 
   55829    </li>
   55830 
   55831    <li><p>If the port part of the <a href=#origin>origin</a> tuple gives a port
   55832    that is different from the default port for the protocol given by
   55833    the scheme part of the <a href=#origin>origin</a> tuple, then append a
   55834    U+003A COLON character (:) and the given port, in base ten, to
   55835    <var title="">result</var>.</li>
   55836 
   55837    <li><p>Return <var title="">result</var>.</li>
   55838 
   55839   </ol><p>Two <a href=#origin title=origin>origins</a> are said to be the
   55840   <dfn id=same-origin>same origin</dfn> if the following algorithm returns true:</p>
   55841 
   55842   <ol><li><p>Let <var title="">A</var> be the first <a href=#origin>origin</a>
   55843    being compared, and <var title="">B</var> be the second
   55844    <a href=#origin>origin</a> being compared.</li>
   55845 
   55846    <li><p>If <var title="">A</var> and <var title="">B</var> are both
   55847    opaque identifiers, and their value is equal, then return
   55848    true.</li>
   55849 
   55850    <li><p>Otherwise, if either <var title="">A</var> or <var title="">B</var> or both are opaque identifiers, return
   55851    false.</li>
   55852 
   55853    <li><p>If <var title="">A</var> and <var title="">B</var> have
   55854    scheme components that are not identical, return false.</li>
   55855 
   55856    <li><p>If <var title="">A</var> and <var title="">B</var> have host
   55857    components that are not identical, return false.</li>
   55858 
   55859    <li><p>If <var title="">A</var> and <var title="">B</var> have port
   55860    components that are not identical, return false.</li>
   55861 
   55862    <li><p>If either <var title="">A</var> or <var title="">B</var>
   55863    have additional data, but that data is not identical for both,
   55864    return false.</li>
   55865 
   55866    <li><p>Return true.</li>
   55867 
   55868   </ol></div>
   55869 
   55870 
   55871   <h4 id=relaxing-the-same-origin-restriction><span class=secno>6.3.1 </span>Relaxing the same-origin restriction</h4>
   55872 
   55873   <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>
   55874 
   55875    <dd>
   55876 
   55877     <p>Returns the current domain used for security checks.</p>
   55878 
   55879     <p>Can be set to a value that removes subdomains, to change the
   55880     <a href=#effective-script-origin>effective script origin</a> to allow pages on other
   55881     subdomains of the same domain (if they do the same thing) to
   55882     access each other.</p>
   55883 
   55884    </dd>
   55885 
   55886   </dl><div class=impl>
   55887 
   55888   <p>The <dfn id=dom-document-domain title=dom-document-domain><code>domain</code></dfn>
   55889   attribute on <code><a href=#document>Document</a></code> objects must be initialized to
   55890   <a href="#the-document's-domain">the document's domain</a>, if it has one, and the empty
   55891   string otherwise. If the value is an IPv6 address, then the square
   55892   brackets from the host portion of the <a href=#url-host title=url-host>&lt;host&gt;</a> component must be omitted from
   55893   the attribute's value.</p>
   55894 
   55895   <p>On getting, the attribute must return its current
   55896   value, unless the document was created by
   55897   <code>XMLHttpRequest</code>, in which case it must throw an
   55898   <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception.</p>
   55899 
   55900   <p>On setting, the user agent must run the following algorithm:</p>
   55901 
   55902   <ol><li>
   55903 
   55904     <p>If the document was created by <code>XMLHttpRequest</code>,
   55905     throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code> exception and abort these
   55906     steps.</p>
   55907 
   55908    </li>
   55909 
   55910    <li>
   55911 
   55912     <p>If the new value is an IP address, let <var title="">new
   55913     value</var> be the new value. Otherwise, apply the IDNA ToASCII
   55914     algorithm to the new value, with both the AllowUnassigned and
   55915     UseSTD3ASCIIRules flags set, and let <var title="">new value</var>
   55916     be the result of the ToASCII algorithm.</p>
   55917 
   55918     <p>If ToASCII fails to convert one of the components of the
   55919     string, e.g. because it is too long or because it contains invalid
   55920     characters, then throw a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort
   55921     these steps. <a href=#refsRFC3490>[RFC3490]</a></p>
   55922 
   55923    </li>
   55924 
   55925    <li>
   55926 
   55927     <p>If <var title="">new value</var> is not exactly equal to the
   55928     current value of the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute, then
   55929     run these substeps:</p>
   55930 
   55931     <ol><li>
   55932 
   55933       <p>If the current value is an IP address, throw a
   55934       <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these steps.</p>
   55935 
   55936      </li>
   55937 
   55938      <li>
   55939 
   55940       <p>If <var title="">new value</var>, prefixed by a U+002E FULL
   55941       STOP (.), does not exactly match the end of the current value,
   55942       throw a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these
   55943       steps.</p>
   55944 
   55945      </li>
   55946 
   55947      <li>
   55948 
   55949       <p>If <var title="">new value</var> matches a suffix in the
   55950       Public Suffix List, or, if <var title="">new value</var>,
   55951       prefixed by a U+002E FULL STOP (.), matches the end of a
   55952       suffix in the Public Suffix List, then throw a
   55953       <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these steps. <a href=#refsPSL>[PSL]</a></p>
   55954 
   55955       <p>Suffixes must be compared after applying the IDNA ToASCII
   55956       algorithm to them, with both the AllowUnassigned and
   55957       UseSTD3ASCIIRules flags set, in an <a href=#ascii-case-insensitive>ASCII
   55958       case-insensitive</a> manner. <a href=#refsRFC3490>[RFC3490]</a></p>
   55959 
   55960      </li>
   55961 
   55962     </ol></li>
   55963 
   55964    <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>
   55965 
   55966    <li>
   55967 
   55968     <p>Set the attribute's value to <var title="">new value</var>.</p>
   55969 
   55970    </li>
   55971 
   55972    <li>
   55973 
   55974     <p>Set the host part of the <a href=#effective-script-origin>effective script origin</a>
   55975     tuple of the <code><a href=#document>Document</a></code> to <var title="">new
   55976     value</var>.</p>
   55977 
   55978    </li>
   55979 
   55980    <li>
   55981 
   55982     <p>Set the port part of the <a href=#effective-script-origin>effective script origin</a>
   55983     tuple of the <code><a href=#document>Document</a></code> to "manual override" (a value
   55984     that, for the purposes of <a href=#same-origin title="same origin">comparing
   55985     origins</a>, is identical to "manual override" but not
   55986     identical to any other value).</p>
   55987 
   55988    </li>
   55989 
   55990   </ol><p>The <dfn id="the-document's-domain" title="the document's domain">domain</dfn> of a
   55991   <code><a href=#document>Document</a></code> is the host part of the document's
   55992   <a href=#origin>origin</a>, if that is a scheme/host/port tuple. If it
   55993   isn't, then the document does not have a domain.</p>
   55994 
   55995   </div>
   55996 
   55997   <p class=note>The <code title=dom-document-domain><a href=#dom-document-domain>domain</a></code>
   55998   attribute is used to enable pages on different hosts of a domain to
   55999   access each others' DOMs.</p>
   56000 
   56001   <p class=warning>Do not use the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute when
   56002   using shared hosting. If an untrusted third party is able to host an
   56003   HTTP server at the same IP address but on a different port, then the
   56004   same-origin protection that normally protects two different sites on
   56005   the same host will fail, as the ports are ignored when comparing
   56006   origins after the <code title=dom-document-domain><a href=#dom-document-domain>document.domain</a></code> attribute has
   56007   been used.</p>
   56008 
   56009 
   56010 
   56011   <h3 id=history><span class=secno>6.4 </span>Session history and navigation</h3>
   56012 
   56013   <h4 id=the-session-history-of-browsing-contexts><span class=secno>6.4.1 </span>The session history of browsing contexts</h4>
   56014 
   56015   <p>The sequence of <code><a href=#document>Document</a></code>s in a <a href=#browsing-context>browsing
   56016   context</a> is its <dfn id=session-history>session history</dfn>.</p>
   56017 
   56018   <p><code><a href=#history-0>History</a></code> objects provide a representation of the
   56019   pages in the session history of <a href=#browsing-context title="browsing
   56020   context">browsing contexts</a>. Each <a href=#browsing-context>browsing
   56021   context</a>, including <a href=#nested-browsing-context title="nested browsing
   56022   context">nested browsing contexts</a>, has a distinct session
   56023   history.</p>
   56024 
   56025   <p>Each <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
   56026   context</a>'s <a href=#session-history>session history</a> is associated with a
   56027   unique instance of the <code><a href=#history-0>History</a></code> object, although they
   56028   all must model the same underlying <a href=#session-history>session history</a>.</p>
   56029 
   56030   <div class=impl>
   56031 
   56032   <p>The <dfn id=dom-history title=dom-history><code>history</code></dfn> attribute
   56033   of the <code><a href=#window>Window</a></code> interface must return the object
   56034   implementing the <code><a href=#history-0>History</a></code> interface for that
   56035   <code><a href=#window>Window</a></code> object's <code><a href=#document>Document</a></code>.</p>
   56036 
   56037   </div>
   56038 
   56039   <p><code><a href=#history-0>History</a></code> objects represent their <a href=#browsing-context>browsing
   56040   context</a>'s session history as a flat list of <a href=#session-history-entry title="session history entry">session history entries</a>. Each
   56041   <dfn id=session-history-entry>session history entry</dfn> consists of either a
   56042   <a href=#url>URL</a> or a <a href=#state-object>state object</a>, or both<span class=impl>, and may in addition have a title, a
   56043   <code><a href=#document>Document</a></code> object, form data, a scroll position, and
   56044   other information associated with it</span>.</p>
   56045 
   56046   <div class=impl>
   56047 
   56048   <p class=note>This does not imply that the user interface need be
   56049   linear. See the <a href=#history-notes>notes below</a>.</p>
   56050 
   56051   </div>
   56052 
   56053   <p class=note>Titles associated with <a href=#session-history-entry title="session history
   56054   entry">session history entries</a> need not have any relation
   56055   with the current <code><a href=#the-title-element-0>title</a></code> of the
   56056   <code><a href=#document>Document</a></code>. The title of a <a href=#session-history-entry>session history
   56057   entry</a> is intended to explain the state of the document at
   56058   that point, so that the user can navigate the document's
   56059   history.</p>
   56060 
   56061   <p>URLs without associated <a href=#state-object title="state object">state
   56062   objects</a> are added to the session history as the user (or
   56063   script) navigates from page to page.</p>
   56064 
   56065   <p>A <dfn id=state-object>state object</dfn> is an object representing a user
   56066   interface state.</p>
   56067 
   56068   <p>Pages can <a href=#dom-history-pushstate title=dom-history-pushState>add</a> <a href=#state-object title="state object">state objects</a> between their entry in the
   56069   session history and the next ("forward") entry. These are then <a href=#event-popstate title=event-popstate>returned to the script</a> when the user
   56070   (or script) goes back in the history, thus enabling authors to use
   56071   the "navigation" metaphor even in one-page applications.</p>
   56072 
   56073   <div class=note>
   56074 
   56075    <p><a href=#state-object title="state object">State objects</a> are intended to
   56076    be used for two main purposes: first, storing a preparsed
   56077    description of the state in the <a href=#url>URL</a> so that in the
   56078    simple case an author doesn't have to do the parsing (though one
   56079    would still need the parsing for handling <a href=#url title=URL>URLs</a> passed around by users, so it's only a minor
   56080    optimization), and second, so that the author can store state that
   56081    one wouldn't store in the URL because it only applies to the current
   56082    <code><a href=#document>Document</a></code> instance and it would have to be reconstructed
   56083    if a new <code><a href=#document>Document</a></code> were opened.</p>
   56084 
   56085    <p>An example of the latter would be something like keeping track of
   56086    the precise coordinate from which a popup <code><a href=#the-div-element>div</a></code> was made
   56087    to animate, so that if the user goes back, it can be made to animate
   56088    to the same location. Or alternatively, it could be used to keep a
   56089    pointer into a cache of data that would be fetched from the server
   56090    based on the information in the <a href=#url>URL</a>, so that when going
   56091    back and forward, the information doesn't have to be fetched
   56092    again.</p>
   56093 
   56094   </div>
   56095 
   56096   <hr><p>At any point, one of the entries in the session history is the
   56097   <dfn id=current-entry>current entry</dfn>. This is the entry representing the
   56098   <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
   56099   context</a>. The <a href=#current-entry>current entry</a> is usually an entry
   56100   for the <a href=#dom-location-href title=dom-location-href>location</a> of the
   56101   <code><a href=#document>Document</a></code>. However, it can also be one of the entries
   56102   for <a href=#state-object title="state object">state objects</a> added to the
   56103   history by that document.</p>
   56104 
   56105   <p>Entries that consist of <a href=#state-object title="state object">state
   56106   objects</a> share the same <code><a href=#document>Document</a></code> as the entry for
   56107   the page that was active when they were added.</p>
   56108 
   56109   <p>Contiguous entries that differ just by fragment identifier also
   56110   share the same <code><a href=#document>Document</a></code>.</p>
   56111 
   56112   <p class=note>All entries that share the same
   56113   <code><a href=#document>Document</a></code> (and that are therefore merely different
   56114   states of one particular document) are contiguous by definition.</p>
   56115 
   56116   <div class=impl>
   56117 
   56118   <p>User agents may <a href=#discard-a-document title="discard a Document">discard</a>
   56119   the <code><a href=#document>Document</a></code> objects of entries other than the
   56120   <a href=#current-entry>current entry</a> that are not referenced from any script,
   56121   reloading the pages afresh when the user or script navigates back to
   56122   such pages. This specification does not specify when user agents
   56123   should discard <code><a href=#document>Document</a></code> objects and when they should
   56124   cache them.</p>
   56125 
   56126   <p>Entries that have had their <code><a href=#document>Document</a></code> objects
   56127   discarded must, for the purposes of the algorithms given below, act
   56128   as if they had not. When the user or script navigates back or
   56129   forwards to a page which has no in-memory DOM objects, any other
   56130   entries that shared the same <code><a href=#document>Document</a></code> object with it
   56131   must share the new object as well.</p>
   56132 
   56133   </div>
   56134 
   56135 
   56136   <h4 id=the-history-interface><span class=secno>6.4.2 </span>The <code><a href=#history-0>History</a></code> interface</h4>
   56137 
   56138   <pre class=idl>interface <dfn id=history-0>History</dfn> {
   56139   readonly attribute long <a href=#dom-history-length title=dom-history-length>length</a>;
   56140   void <a href=#dom-history-go title=dom-history-go>go</a>(in optional long delta);
   56141   void <a href=#dom-history-back title=dom-history-back>back</a>();
   56142   void <a href=#dom-history-forward title=dom-history-forward>forward</a>();
   56143   void <a href=#dom-history-pushstate title=dom-history-pushState>pushState</a>(in any data, in DOMString title, in optional DOMString url);
   56144   void <a href=#dom-history-replacestate title=dom-history-replaceState>replaceState</a>(in any data, in DOMString title, in optional DOMString url);
   56145 };</pre>
   56146 
   56147   <dl class=domintro><dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-length><a href=#dom-history-length>length</a></code></dt>
   56148 
   56149    <dd>
   56150 
   56151     <p>Returns the number of entries in the <a href=#joint-session-history>joint session history</a>.</p>
   56152 
   56153    </dd>
   56154 
   56155    <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-go><a href=#dom-history-go>go</a></code>( [ <var title="">delta</var> ] )</dt>
   56156 
   56157    <dd>
   56158 
   56159     <p>Goes back or forward the specified number of steps in the <a href=#joint-session-history>joint session history</a>.</p>
   56160 
   56161     <p>A zero delta will reload the current page.</p>
   56162 
   56163     <p>If the delta is out of range, does nothing.</p>
   56164 
   56165    </dd>
   56166 
   56167    <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-back><a href=#dom-history-back>back</a></code>()</dt>
   56168 
   56169    <dd>
   56170 
   56171     <p>Goes back one step in the <a href=#joint-session-history>joint session history</a>.</p>
   56172 
   56173     <p>If there is no previous page, does nothing.</p>
   56174 
   56175    </dd>
   56176 
   56177    <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-forward><a href=#dom-history-forward>forward</a></code>()</dt>
   56178 
   56179    <dd>
   56180 
   56181     <p>Goes forward one step in the <a href=#joint-session-history>joint session history</a>.</p>
   56182 
   56183     <p>If there is no next page, does nothing.</p>
   56184 
   56185    </dd>
   56186 
   56187    <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>
   56188 
   56189    <dd>
   56190 
   56191     <p>Pushes the given data onto the session history, with the given title, and, if provided, the given URL.</p>
   56192 
   56193    </dd>
   56194 
   56195    <dt><var title="">window</var> . <code title=dom-history><a href=#dom-history>history</a></code> . <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>
   56196 
   56197    <dd>
   56198 
   56199     <p>Updates the current entry in the session histor to have the given data, title, and, if provided, URL.</p>
   56200 
   56201    </dd>
   56202 
   56203   </dl><p>The <dfn id=joint-session-history>joint session history</dfn> of a <code><a href=#history-0>History</a></code>
   56204   object is the union of all the <a href=#session-history title="session history">session
   56205   histories</a> of all <a href=#browsing-context title="browsing context">browsing
   56206   contexts</a> of all the <a href=#fully-active>fully active</a>
   56207   <code><a href=#document>Document</a></code> objects that share the <code><a href=#history-0>History</a></code>
   56208   object's <a href=#top-level-browsing-context>top-level browsing context</a>, with all the
   56209   entries that are <a href=#current-entry title="current entry">current entries</a>
   56210   in their respective <a href=#session-history title="session history">session
   56211   histories</a> removed except for the <a href=#current-entry-of-the-joint-session-history>current entry of the
   56212   joint session history</a>.</p>
   56213 
   56214   <p>The <dfn id=current-entry-of-the-joint-session-history>current entry of the joint session history</dfn> is the
   56215   entry that most recently became a <a href=#current-entry>current entry</a> in its
   56216   <a href=#session-history>session history</a>.</p>
   56217 
   56218   <p>Entries in the <a href=#joint-session-history>joint session history</a> are ordered
   56219   chronologically by the time they were added to their respective
   56220   <a href=#session-history title="session history">session histories</a>. (Since all
   56221   these <a href=#browsing-context title="browsing context">browsing contexts</a> by
   56222   definition share an <a href=#event-loop>event loop</a>, there is always a
   56223   well-defined sequential order in which their <a href=#session-history title="session
   56224   history">session histories</a> had their entries added.) Each
   56225   entry has an index; the earliest entry has index 0, and the
   56226   subsequent entries are numbered with consecutively increasing
   56227   integers (1, 2, 3, etc).</p>
   56228 
   56229   <div class=impl>
   56230 
   56231   <p>The <dfn id=dom-history-length title=dom-history-length><code>length</code></dfn>
   56232   attribute of the <code><a href=#history-0>History</a></code> interface must return the
   56233   number of entries in the <a href=#joint-session-history>joint session history</a>.</p>
   56234 
   56235   <p>The actual entries are not accessible from script.</p>
   56236 
   56237   <p>When the <dfn id=dom-history-go title=dom-history-go><code>go(<var title="">delta</var>)</code></dfn> method is invoked, if the
   56238   argument to the method was omitted or has the value zero, the user
   56239   agent must act as if the <code title=dom-location-reload><a href=#dom-location-reload>location.reload()</a></code> method was
   56240   called instead. Otherwise, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the
   56241   history by a delta</a> whose value is the value of the method's
   56242   argument.</p>
   56243 
   56244   <p>When the <dfn id=dom-history-back title=dom-history-back><code>back()</code></dfn>
   56245   method is invoked, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the history by
   56246   a delta</a> &minus;1.</p>
   56247 
   56248   <p>When the <dfn id=dom-history-forward title=dom-history-forward><code>forward()</code></dfn>method is
   56249   invoked, the user agent must <a href=#traverse-the-history-by-a-delta>traverse the history by a
   56250   delta</a> +1.</p>
   56251 
   56252   <p>To <dfn id=traverse-the-history-by-a-delta>traverse the history by a delta</dfn> <var title="">delta</var>, the user agent must <a href=#queue-a-task>queue a task</a>
   56253   to run the following steps. The <a href=#task-source>task source</a> for the
   56254   queued task is the <a href=#history-traversal-task-source>history traversal task source</a>.</p>
   56255 
   56256   <ol><li><p>Let <var title="">delta</var> be the argument to the
   56257    method.</li>
   56258 
   56259    <li><p>If the index of the <a href=#current-entry-of-the-joint-session-history>current entry of the joint session
   56260    history</a> plus <var title="">delta</var> is less than zero or
   56261    greater than or equal to the number of items in the <a href=#joint-session-history>joint
   56262    session history</a>, then the user agent must do nothing.</p>
   56263 
   56264    <li><p>Let <var title="">specified entry</var> be the entry in the
   56265    <a href=#joint-session-history>joint session history</a> whose index is the sum of <var title="">delta</var> and the index of the <a href=#current-entry-of-the-joint-session-history>current entry of
   56266    the joint session history</a>.</li>
   56267 
   56268    <li><p>Let <var title="">specified browsing context</var> be the
   56269    <a href=#browsing-context>browsing context</a> of the <var title="">specified
   56270    entry</var>.</li>
   56271 
   56272    <!-- XXX if going to another doc, try to unload the document here
   56273    (firing beforeunload, unload, pagehide) -->
   56274 
   56275    <li><p><a href=#traverse-the-history>Traverse the history</a> of the <var title="">specified browsing context</var> to the <var title="">specified entry</var>.</p>
   56276 
   56277   </ol><p>When the user navigates through a <a href=#browsing-context>browsing context</a>,
   56278   e.g. using a browser's back and forward buttons, the user agent must
   56279   <a href=#traverse-the-history-by-a-delta>traverse the history by a delta</a> equivalent to the
   56280   action specified by the user.</p>
   56281 
   56282   <hr><p>The <dfn id=dom-history-pushstate title=dom-history-pushState><code>pushState(<var title="">data</var>, <var title="">title</var>, <var title="">url</var>)</code></dfn> method adds a state object entry to
   56283   the history.</p>
   56284 
   56285   <p>The <dfn id=dom-history-replacestate title=dom-history-replaceState><code>replaceState(<var title="">data</var>, <var title="">title</var>, <var title="">url</var>)</code></dfn> method updates the state object,
   56286   title, and optionally the <a href=#url>URL</a> of the <a href=#current-entry>current
   56287   entry</a> in the history.</p>
   56288 
   56289   <p>When either of these methods is invoked, the user agent must run
   56290   the following steps:</p>
   56291 
   56292   <ol><li><p>Let <var title="">clone data</var> be a <a href=#structured-clone>structured
   56293    clone</a> of the specified <var title="">data</var>. If this
   56294    throws an exception, then rethrow that exception and abort these
   56295    steps.</li>
   56296 
   56297    <li>
   56298 
   56299     <p>If a third argument is specified, run these substeps:</p>
   56300 
   56301     <ol><li><a href=#resolve-a-url title="resolve a url">Resolve</a> the value of the
   56302      third argument, relative to the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>.</li>
   56303 
   56304      <li>If that fails, raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception
   56305      and abort these steps.</li>
   56306 
   56307      <li>Compare the resulting <a href=#absolute-url>absolute URL</a> to <a href="#the-document's-address">the
   56308      document's address</a>. If any part of these two <a href=#url title=URL>URLs</a> differ other than the <a href=#url-path title=url-path>&lt;path&gt;</a>, <a href=#url-query title=url-query>&lt;query&gt;</a>, and <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components, then
   56309      raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort these
   56310      steps.</li>
   56311 
   56312      <li>If the <a href=#origin>origin</a> of the resulting <a href=#absolute-url>absolute
   56313      URL</a> is not the same as the <a href=#origin>origin</a> of the
   56314      <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
   56315      document">document</a>, and either the <a href=#url-path title=url-path>&lt;path&gt;</a> or <a href=#url-query title=url-query>&lt;query&gt;</a> components of the two
   56316      <a href=#url title=URL>URLs</a> compared in the previous step
   56317      differ, raise a <code><a href=#security_err>SECURITY_ERR</a></code> exception and abort
   56318      these steps. (This prevents sandboxed content from spoofing other
   56319      pages on the same origin.)</li>
   56320 
   56321     </ol><p>For the purposes of the comparisons in the above substeps, the
   56322     <a href=#url-path title=url-path>&lt;path&gt;</a> and <a href=#url-query title=url-query>&lt;query&gt;</a> components can only be the
   56323     same if the URLs are both <a href=#hierarchical-url title="hierarchical
   56324     URL">hierarchical URLs</a>.</p>
   56325 
   56326    </li>
   56327 
   56328    <li>
   56329 
   56330     <p>If the method invoked was the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method:</p>
   56331 
   56332     <ol><li>
   56333 
   56334       <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
   56335       <a href=#session-history>session history</a> after the <a href=#current-entry>current
   56336       entry</a>. If the <a href=#current-entry>current entry</a> is the last
   56337       entry in the session history, then no entries are
   56338       removed.</p>
   56339 
   56340       <p class=note>This <a href=#history-notes>doesn't
   56341       necessarily have to affect</a> the user agent's user
   56342       interface.</p>
   56343 
   56344      </li>
   56345 
   56346      <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued
   56347      by the <a href=#history-traversal-task-source>history traversal task source</a>.</li>
   56348 
   56349      <li><p>Add a state object entry to the session history, after the
   56350      <a href=#current-entry>current entry</a>, with <var title="">cloned data</var> as
   56351      the state object, the given <var title="">title</var> as the title,
   56352      and, if the third argument is present, the <a href=#absolute-url>absolute
   56353      URL</a> that was found earlier in this algorithm as the
   56354      <a href=#url>URL</a> of the entry.</li>
   56355 
   56356      <li><p>Update the <a href=#current-entry>current entry</a> to be the this newly
   56357      added entry.</li>
   56358 
   56359     </ol><p>Otherwise, if the method invoked was the <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code> method:</p>
   56360 
   56361     <ol><li><p>Update the <a href=#current-entry>current entry</a> in the session
   56362      history so that <var title="">cloned data</var> is the entry's
   56363      new state object, the given <var title="">title</var> is the new
   56364      title, and, if the third argument is present, the <a href=#absolute-url>absolute
   56365      URL</a> that was found earlier in this algorithm is the
   56366      entry's new <a href=#url>URL</a>.</li>
   56367 
   56368     </ol></li>
   56369 
   56370    <li>
   56371 
   56372     <p>If the third argument is present, set <a href="#the-document's-current-address">the document's
   56373     current address</a> to the <a href=#absolute-url>absolute URL</a> that was
   56374     found earlier in this algorithm.</p>
   56375 
   56376     <p class=note>Since this is neither a <a href=#navigate title=navigate>navigation</a> of the <a href=#browsing-context>browsing
   56377     context</a> nor a <a href=#traverse-the-history title="traverse the history">history
   56378     traversal</a>, it does not cause a <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event to be fired.</p>
   56379 
   56380    </li>
   56381 
   56382   </ol><p class=note>The <var title="">title</var> is purely
   56383   advisory. User agents might use the title in the user interface.</p>
   56384 
   56385   <p>User agents may limit the number of state objects added to the
   56386   session history per page. If a page hits the UA-defined limit, user
   56387   agents must remove the entry immediately after the first entry for
   56388   that <code><a href=#document>Document</a></code> object in the session history after
   56389   having added the new entry. (Thus the state history acts as a FIFO
   56390   buffer for eviction, but as a LIFO buffer for navigation.)</p>
   56391 
   56392   </div>
   56393 
   56394   <div class=example>
   56395 
   56396    <p>Consider a game where the user can navigate along a line, such
   56397    that the user is always at some coordinate, and such that the user
   56398    can bookmark the page corresponding to a particular coordinate, to
   56399    return to it later.</p>
   56400 
   56401    <p>A static page implementing the x=5 position in such a game could
   56402    look like the following:</p>
   56403 
   56404    <pre>&lt;!DOCTYPE HTML&gt;
   56405 &lt;!-- this is http://example.com/line?x=5 --&gt;
   56406 &lt;title&gt;Line Game - 5&lt;/title&gt;
   56407 &lt;p&gt;You are at coordinate 5 on the line.&lt;/p&gt;
   56408 &lt;p&gt;
   56409  &lt;a href="?x=6"&gt;Advance to 6&lt;/a&gt; or
   56410  &lt;a href="?x=4"&gt;retreat to 4&lt;/a&gt;?
   56411 &lt;/p&gt;</pre>
   56412 
   56413    <p>The problem with such a system is that each time the user
   56414    clicks, the whole page has to be reloaded. Here instead is another
   56415    way of doing it, using script:</p>
   56416 
   56417    <pre>&lt;!DOCTYPE HTML&gt;
   56418 &lt;!-- this starts off as http://example.com/line?x=5 --&gt;
   56419 &lt;title&gt;Line Game - 5&lt;/title&gt;
   56420 &lt;p&gt;You are at coordinate &lt;span id="coord"&gt;5&lt;/span&gt; on the line.&lt;/p&gt;
   56421 &lt;p&gt;
   56422  &lt;a href="?x=6" onclick="go(1)"&gt;Advance to 6&lt;/a&gt; or
   56423  &lt;a href="?x=4" onclick="go(-1)"&gt;retreat to 4&lt;/a&gt;?
   56424 &lt;/p&gt;
   56425 &lt;script&gt;
   56426  var currentPage = 5; // prefilled by server
   56427  function go(d) {
   56428    history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
   56429    setupPage(currentPage + d);
   56430  }
   56431  onpopstate = function(event) {
   56432    setupPage(event.state);
   56433  }
   56434  function setupPage(page) {
   56435    currentPage = page;
   56436    document.title = 'Line Game - ' + currentPage;
   56437    document.getElementById('coord').textContent = currentPage;
   56438    document.links[0].href = '?x=' + (currentPage+1);
   56439    document.links[0].textContent = 'Advance to ' + (currentPage+1);
   56440    document.links[1].href = '?x=' + (currentPage-1);
   56441    document.links[1].textContent = 'retreat to ' + (currentPage-1);
   56442  }
   56443 &lt;/script&gt;</pre>
   56444 
   56445    <p>In systems without script, this still works like the previous
   56446    example. However, users that <em>do</em> have script support can
   56447    now navigate much faster, since there is no network access for the
   56448    same experience. Furthermore, contrary to the experience the user
   56449    would have with just a na&iuml;ve script-based approach,
   56450    bookmarking and navigating the session history still work.</p>
   56451 
   56452    <p>In the example above, the <var title="">data</var> argument to
   56453    the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method
   56454    is the same information as would be sent to the server, but in a
   56455    more convenient form, so that the script doesn't have to parse the
   56456    URL each time the user navigates.</p>
   56457 
   56458   </div>
   56459 
   56460   <div class=example>
   56461 
   56462    <p>Applications might not use the same title for a <a href=#session-history-entry>session
   56463    history entry</a> as the value of the document's
   56464    <code><a href=#the-title-element-0>title</a></code> element at that time. For example, here is a
   56465    simple page that shows a block in the <code><a href=#the-title-element-0>title</a></code> element.
   56466    Clearly, when navigating backwards to a previous state the user
   56467    does not go back in time, and therefore it would be inappropriate
   56468    to put the time in the session history title.</p>
   56469 
   56470    <pre>&lt;!DOCTYPE HTML&gt;
   56471 &lt;TITLE&gt;Line&lt;/TITLE&gt;
   56472 &lt;SCRIPT&gt;
   56473  setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000);
   56474  var i = 1;
   56475  function inc() {
   56476    set(i+1);
   56477    history.pushState(i, 'Line - ' + i);
   56478  }
   56479  function set(newI) {
   56480    i = newI;
   56481    document.forms.F.I.value = newI;
   56482  }
   56483 &lt;/SCRIPT&gt;
   56484 &lt;BODY ONPOPSTATE="recover(event.state)"&gt;
   56485 &lt;FORM NAME=F&gt;
   56486 State: &lt;OUTPUT NAME=I&gt;1&lt;/OUTPUT&gt; &lt;INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()"&gt;
   56487 &lt;/FORM&gt;</pre>
   56488 
   56489   </div>
   56490 
   56491 
   56492 
   56493   <h4 id=the-location-interface><span class=secno>6.4.3 </span>The <code><a href=#location>Location</a></code> interface</h4>
   56494 
   56495   <p>Each <code><a href=#document>Document</a></code> object in a <a href=#browsing-context>browsing
   56496   context</a>'s session history is associated with a unique
   56497   instance of a <code><a href=#location>Location</a></code> object.</p>
   56498 
   56499   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-location><a href=#dom-document-location>location</a></code> [ = <var title="">value</var> ]</dt>
   56500    <dt><var title="">window</var> . <code title=dom-location><a href=#dom-location>location</a></code> [ = <var title="">value</var> ]</dt>
   56501 
   56502    <dd>
   56503 
   56504     <p>Returns a <code><a href=#location>Location</a></code> object with the current page's location.</p>
   56505 
   56506     <p>Can be set, to navigate to another page.</p>
   56507 
   56508    </dd>
   56509 
   56510   </dl><div class=impl>
   56511 
   56512   <p>The <dfn id=dom-document-location title=dom-document-location><code>location</code></dfn> attribute
   56513   of the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
   56514   <code><a href=#location>Location</a></code> object for that <code><a href=#document>Document</a></code> object,
   56515   if it is in a <a href=#browsing-context>browsing context</a>, and null otherwise.</p>
   56516 
   56517   <p>The <dfn id=dom-location title=dom-location><code>location</code></dfn>
   56518   attribute of the <code><a href=#window>Window</a></code> interface must return the
   56519   <code><a href=#location>Location</a></code> object for that <code><a href=#window>Window</a></code> object's
   56520   <code><a href=#document>Document</a></code>.</p>
   56521 
   56522   </div>
   56523 
   56524   <p><code><a href=#location>Location</a></code> objects provide a representation of <a href="#the-document's-current-address" title="the document's current address">their document's current
   56525   address</a>, and allow the <a href=#current-entry>current entry</a> of the
   56526   <a href=#browsing-context>browsing context</a>'s session history to be changed, by
   56527   adding or replacing entries in the <code title=dom-history><a href=#dom-history>history</a></code> object.</p>
   56528 
   56529   <pre class=idl>interface <dfn id=location>Location</dfn> {
   56530   stringifier attribute DOMString <a href=#dom-location-href title=dom-location-href>href</a>;
   56531   void <a href=#dom-location-assign title=dom-location-assign>assign</a>(in DOMString url);
   56532   void <a href=#dom-location-replace title=dom-location-replace>replace</a>(in DOMString url);
   56533   void <a href=#dom-location-reload title=dom-location-reload>reload</a>();
   56534 
   56535   // <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a> <!-- blame brendan for these "innovative" names -->
   56536            attribute DOMString <a href=#dom-location-protocol title=dom-location-protocol>protocol</a>;
   56537            attribute DOMString <a href=#dom-location-host title=dom-location-host>host</a>;
   56538            attribute DOMString <a href=#dom-location-hostname title=dom-location-hostname>hostname</a>;
   56539            attribute DOMString <a href=#dom-location-port title=dom-location-port>port</a>;
   56540            attribute DOMString <a href=#dom-location-pathname title=dom-location-pathname>pathname</a>;
   56541            attribute DOMString <a href=#dom-location-search title=dom-location-search>search</a>;
   56542            attribute DOMString <a href=#dom-location-hash title=dom-location-hash>hash</a>;
   56543 
   56544   // resolving relative URLs
   56545   DOMString <a href=#dom-location-resolveurl title=dom-location-resolveURL>resolveURL</a>(in DOMString url);
   56546 };</pre>
   56547 
   56548   <dl class=domintro><dt><var title="">location</var> . <code title=dom-location-href><a href=#dom-location-href>href</a></code> [ = <var title="">value</var> ]</dt>
   56549 
   56550    <dd>
   56551 
   56552     <p>Returns the current page's location.</p>
   56553 
   56554     <p>Can be set, to navigate to another page.</p>
   56555 
   56556    </dd>
   56557 
   56558    <dt><var title="">location</var> . <code title=dom-location-assign><a href=#dom-location-assign>assign</a></code>(<var title="">url</var>)</dt>
   56559 
   56560    <dd>
   56561 
   56562     <p>Navigates to the given page.</p>
   56563 
   56564    </dd>
   56565 
   56566    <dt><var title="">location</var> . <code title=dom-location-replace><a href=#dom-location-replace>replace</a></code>(<var title="">url</var>)</dt>
   56567 
   56568    <dd>
   56569 
   56570     <p>Removes the current page from the session history and navigates to the given page.</p>
   56571 
   56572    </dd>
   56573 
   56574    <dt><var title="">location</var> . <code title=dom-location-reload><a href=#dom-location-reload>reload</a></code>()</dt>
   56575 
   56576    <dd>
   56577 
   56578     <p>Reloads the current page.</p>
   56579 
   56580    </dd>
   56581 
   56582    <dt><var title="">url</var> = <var title="">location</var> . <code title=dom-location-resolveURL><a href=#dom-location-resolveurl>resolveURL</a></code>(<var title="">url</var>)</dt>
   56583 
   56584    <dd>
   56585 
   56586     <p>Resolves the given relative URL to an absolute URL.</p>
   56587 
   56588    </dd>
   56589 
   56590   </dl><div class=impl>
   56591 
   56592   <p>The <dfn id=dom-location-href title=dom-location-href><code>href</code></dfn>
   56593   attribute must return <a href="#the-document's-current-address" title="the document's current
   56594   address">the current address</a> of the associated
   56595   <code><a href=#document>Document</a></code> object, as an <a href=#absolute-url>absolute URL</a>.</p>
   56596 
   56597   <p>On setting, <!-- READ ME WHEN EDITING THIS: Mozilla does this,
   56598   but IE doesn't. What should we do?: the behavior depends on the
   56599   context in which the script that set the attribute is running. If
   56600   the script ran as the direct result of the execution of a
   56601   <code>script</code> element in the document represented by the
   56602   <code>Location</code> object's associated <code>Document</code>
   56603   object, then the user agent must act as if the <code
   56604   title="dom-location-replace">replace()</code> method had been called
   56605   with the new value as its argument. Otherwise,--> the user agent
   56606   must act as if the <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code>
   56607   method had been called with the new value as its argument.</p><!--
   56608   v2: may wish to allow replace instead as a UI improvement -->
   56609 
   56610   <!-- we could change the magic .location setter to simply refer
   56611   straight to assign(), so we don't have two levels of indirection -->
   56612 
   56613   <p>When the <dfn id=dom-location-assign title=dom-location-assign><code>assign(<var title="">url</var>)</code></dfn> method is invoked, the UA must
   56614   <a href=#resolve-a-url title="resolve a url">resolve</a> the argument, relative to
   56615   the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base
   56616   URL</a>, and if that is successful, must <a href=#navigate>navigate</a>
   56617   the <a href=#browsing-context>browsing context</a> to the specified <var title="">url</var>. If the <a href=#browsing-context>browsing context</a>'s
   56618   <a href=#session-history>session history</a> contains only one
   56619   <code><a href=#document>Document</a></code>, and that was the <code><a href=#about:blank>about:blank</a></code>
   56620   <code><a href=#document>Document</a></code> created when the <a href=#browsing-context>browsing context</a>
   56621   was created, then the navigation must be done with
   56622   <a href=#replacement-enabled>replacement enabled</a>.</p> <!-- READ ME WHEN EDITING
   56623   THIS: IE and Firefox only seem to treat it that way if the DOM is
   56624   still a virgin DOM; Safari doesn't check that. Thus this might need
   56625   changing if testing shows the IE/Firefox behaviour is required
   56626   here. -->
   56627 
   56628   <p>When the <dfn id=dom-location-replace title=dom-location-replace><code>replace(<var title="">url</var>)</code></dfn> method is invoked, the UA must
   56629   <a href=#resolve-a-url title="resolve a url">resolve</a> the argument, relative to
   56630   the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base URL">base
   56631   URL</a>, and if that is successful, <a href=#navigate>navigate</a> the
   56632   <a href=#browsing-context>browsing context</a> to the specified <var title="">url</var> with <a href=#replacement-enabled>replacement enabled</a>.</p>
   56633 
   56634   <p>Navigation for the <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code> and <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> methods must be done
   56635   with the <a href="#script's-browsing-context" title="script's browsing context">browsing
   56636   context</a> of the script that invoked the method as the
   56637   <a href=#source-browsing-context>source browsing context</a>.</p>
   56638 
   56639   <p>If the <a href=#resolve-a-url title="resolve a url">resolving</a> step of the
   56640   <code title=dom-location-assign><a href=#dom-location-assign>assign()</a></code> and <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> methods is not
   56641   successful, then the user agent must instead throw a
   56642   <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>
   56643 
   56644   <p>When the <dfn id=dom-location-reload title=dom-location-reload><code>reload()</code></dfn> method is
   56645   invoked, the user agent must run the appropriate steps from the
   56646   following list:</p>
   56647 
   56648   <dl class=switch><dt>If the currently executing <a href=#concept-task title=concept-task>task</a> is the dispatch of a <code title=event-resize>resize</code> event in response to the user
   56649    resizing the <a href=#browsing-context>browsing context</a></dt>
   56650 
   56651    <dd><p>Repaint the <a href=#browsing-context>browsing context</a> and abort these
   56652    steps.</dd> <!-- this theoretically would have no effect but in
   56653    practice can be useful to work around rendering bugs. -->
   56654 
   56655    <dt>Otherwise</dt>
   56656 
   56657    <dd><p><a href=#navigate>Navigate</a> the <a href=#browsing-context>browsing context</a> to
   56658    <a href="#the-document's-current-address">the document's current address</a> with
   56659    <a href=#replacement-enabled>replacement enabled</a>. The <a href=#source-browsing-context>source browsing
   56660    context</a> must be the <a href=#browsing-context>browsing context</a> being
   56661    navigated.</dd> <!-- it appears that document.reload() always
   56662    uses GET and does not, e.g., re-POST. -->
   56663 
   56664    <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/141 -->
   56665 
   56666   </dl><p>When a user requests that the current page be reloaded through a
   56667   user interface element, the user agent should <a href=#navigate>navigate</a>
   56668   the <a href=#browsing-context>browsing context</a> to the same resource as
   56669   <code><a href=#document>Document</a></code>, with <a href=#replacement-enabled>replacement enabled</a>. In the
   56670   case of non-idempotent methods (e.g. HTTP POST), the user agent
   56671   should prompt the user to confirm the operation first, since
   56672   otherwise transactions (e.g. purchases or database modifications)
   56673   could be repeated. User agents may allow the user to explicitly
   56674   override any caches when reloading.</p>
   56675 
   56676   </div>
   56677 
   56678   <p>The <code><a href=#location>Location</a></code> interface also has the complement of
   56679   <a href=#url-decomposition-idl-attributes>URL decomposition IDL attributes</a>, <dfn id=dom-location-protocol title=dom-location-protocol><code>protocol</code></dfn>, <dfn id=dom-location-host title=dom-location-host><code>host</code></dfn>, <dfn id=dom-location-port title=dom-location-port><code>port</code></dfn>, <dfn id=dom-location-hostname title=dom-location-hostname><code>hostname</code></dfn>, <dfn id=dom-location-pathname title=dom-location-pathname><code>pathname</code></dfn>, <dfn id=dom-location-search title=dom-location-search><code>search</code></dfn>, and <dfn id=dom-location-hash title=dom-location-hash><code>hash</code></dfn>. <span class=impl>These must follow the rules given for URL decomposition IDL
   56680   attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a>
   56681   being <a href="#the-document's-current-address" title="the document's current address">the current
   56682   address</a> of the associated <code><a href=#document>Document</a></code> object, as an
   56683   <a href=#absolute-url>absolute URL</a> (same as the <code title=dom-location-href><a href=#dom-location-href>href</a></code> attribute), and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
   56684   same as setting the <code title=dom-location-href><a href=#dom-location-href>href</a></code>
   56685   attribute to the new output value.</span></p>
   56686 
   56687   <div class=impl>
   56688 
   56689   <hr><p>The <dfn id=dom-location-resolveurl title=dom-location-resolveURL><code>resolveURL(<var title="">url</var>)</code></dfn> method must <a href=#resolve-a-url title="resolve a
   56690   url">resolve</a> its <var title="">url</var> argument, relative
   56691   to the <a href=#entry-script>entry script</a>'s <a href="#script's-base-url" title="script's base
   56692   URL">base URL</a>, and if that succeeds, return the resulting
   56693   <a href=#absolute-url>absolute URL</a>. If it fails, it must throw a
   56694   <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception instead.</p>
   56695 
   56696   </div>
   56697 
   56698 
   56699   <div class=impl>
   56700 
   56701   <h5 id=security-location><span class=secno>6.4.3.1 </span>Security</h5>
   56702 
   56703   <p id=security-3>User agents must raise a
   56704   <code><a href=#security_err>SECURITY_ERR</a></code> exception whenever any of the members of a
   56705   <code><a href=#location>Location</a></code> object are accessed by scripts whose
   56706   <a href=#effective-script-origin>effective script origin</a> is not the <a href=#same-origin title="same
   56707   origin">same</a> as the <code><a href=#location>Location</a></code> object's associated
   56708   <code><a href=#document>Document</a></code>'s <a href=#effective-script-origin>effective script origin</a>, with
   56709   the following exceptions:</p>
   56710 
   56711   <ul><li>The <code title=dom-location-href><a href=#dom-location-href>href</a></code> setter, if the
   56712    script is running in a <a href=#browsing-context>browsing context</a> that is
   56713    <a href=#allowed-to-navigate>allowed to navigate</a> the browsing context with which
   56714    the <code><a href=#location>Location</a></code> object is associated
   56715 
   56716    <li>The <code title=dom-location-replace><a href=#dom-location-replace>replace()</a></code> method,
   56717    if the script is running in a <a href=#browsing-context>browsing context</a> that is
   56718    <a href=#allowed-to-navigate>allowed to navigate</a> the browsing context with which
   56719    the <code><a href=#location>Location</a></code> object is associated
   56720 
   56721   </ul></div>
   56722 
   56723 
   56724   <div class=impl>
   56725 
   56726   <h4 id=history-notes><span class=secno>6.4.4 </span>Implementation notes for session history</h4>
   56727   <!-- don't change the ID without updating multiple internal links -->
   56728 
   56729   <p><i>This section is non-normative.</i></p>
   56730 
   56731   <p>The <code><a href=#history-0>History</a></code> interface is not meant to place
   56732   restrictions on how implementations represent the session history to
   56733   the user.</p>
   56734 
   56735   <p>For example, session history could be implemented in a tree-like
   56736   manner, with each page having multiple "forward" pages. This
   56737   specification doesn't define how the linear list of pages in the
   56738   <code title=dom-history><a href=#dom-history>history</a></code> object are derived from the
   56739   actual session history as seen from the user's perspective.</p>
   56740 
   56741   <p>Similarly, a page containing two <code><a href=#the-iframe-element>iframe</a></code>s has a <code title=dom-history><a href=#dom-history>history</a></code> object distinct from the
   56742   <code><a href=#the-iframe-element>iframe</a></code>s' <code title=dom-history><a href=#dom-history>history</a></code>
   56743   objects, despite the fact that typical Web browsers present the user
   56744   with just one "Back" button, with a session history that interleaves
   56745   the navigation of the two inner frames and the outer page.</p>
   56746 
   56747   <p><strong>Security</strong>: It is suggested that to avoid letting
   56748   a page "hijack" the history navigation facilities of a UA by abusing
   56749   <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code>, the UA
   56750   provide the user with a way to jump back to the previous page
   56751   (rather than just going back to the previous state). For example,
   56752   the back button could have a drop down showing just the pages in the
   56753   session history, and not showing any of the states. Similarly, an
   56754   aural browser could have two "back" commands, one that goes back to
   56755   the previous state, and one that jumps straight back to the previous
   56756   page.</p>
   56757 
   56758   <p>In addition, a user agent could ignore calls to <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> that are invoked on
   56759   a timer, or from event listeners that are not triggered in response
   56760   to a clear user action, or that are invoked in rapid succession.</p>
   56761 
   56762   </div>
   56763 
   56764 
   56765   <h3 id=browsing-the-web><span class=secno>6.5 </span>Browsing the Web</h3>
   56766 
   56767   <div class=impl>
   56768 
   56769   <h4 id=navigating-across-documents><span class=secno>6.5.1 </span>Navigating across documents</h4>
   56770 
   56771   <p>Certain actions cause the <a href=#browsing-context>browsing context</a> to
   56772   <i><a href=#navigate>navigate</a></i> to a new resource. Navigation always involves
   56773   <dfn id=source-browsing-context>source browsing context</dfn>, which is the browsing context
   56774   which was responsible for starting the navigation.</p>
   56775 
   56776   <p class=example>For example, <a href=#following-hyperlinks title="following
   56777   hyperlinks">following a hyperlink</a>, <a href=#concept-form-submit title=concept-form-submit>form submission</a>, and the <code title=dom-open><a href=#dom-open>window.open()</a></code> and <code title=dom-location-assign><a href=#dom-location-assign>location.assign()</a></code> methods can all
   56778   cause a browsing context to navigate.</p>
   56779 
   56780   <p>A user agent may provide various ways for the user to explicitly
   56781   cause a browsing context to navigate, in addition to those defined
   56782   in this specification.</p>
   56783 
   56784   <!-- NAVIGATE <dfn>navigate</dfn> -->
   56785   <p>When a browsing context is <dfn id=navigate title=navigate>navigated</dfn>
   56786   to a new resource, the user agent must run the following steps:</p>
   56787 
   56788   <ol><li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>
   56789 
   56790    <li id=sandboxLinks>
   56791 
   56792     <p>If the <a href=#source-browsing-context>source browsing context</a> is not the same as
   56793     the <a href=#browsing-context>browsing context</a> being navigated, and the
   56794     <a href=#source-browsing-context>source browsing context</a> is not one of the <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
   56795     contexts</a> of the <a href=#browsing-context>browsing context</a> being
   56796     navigated, and the <a href=#browsing-context>browsing context</a> being navigated is
   56797     not both a <a href=#top-level-browsing-context>top-level browsing context</a> and one of the
   56798     <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
   56799     contexts</a> of the <a href=#source-browsing-context>source browsing context</a>, and
   56800     the <a href=#source-browsing-context>source browsing context</a> had its <a href=#sandboxed-navigation-browsing-context-flag>sandboxed
   56801     navigation browsing context flag</a> set when its <a href=#active-document>active
   56802     document</a> was created, then abort these steps.</p>
   56803 
   56804     <p>Otherwise, if the <a href=#browsing-context>browsing context</a> being navigated
   56805     is a <a href=#top-level-browsing-context>top-level browsing context</a>, and is one of the
   56806     <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
   56807     contexts</a> of the <a href=#source-browsing-context>source browsing context</a>, and
   56808     the <a href=#source-browsing-context>source browsing context</a> had its <a href=#sandboxed-top-level-navigation-browsing-context-flag>sandboxed
   56809     top-level navigation browsing context flag</a> set when its
   56810     <a href=#active-document>active document</a> was created, then abort these
   56811     steps.</p>
   56812 
   56813     <p>In both cases, the user agent may additionally offer to open
   56814     the new resource in a new <a href=#top-level-browsing-context>top-level browsing context</a>
   56815     or in the <a href=#top-level-browsing-context>top-level browsing context</a> of the
   56816     <a href=#source-browsing-context>source browsing context</a>, at the user's option, in
   56817     which case the user agent must <a href=#navigate>navigate</a> that
   56818     designated <a href=#top-level-browsing-context>top-level browsing context</a> to the new
   56819     resource as if the user had requested it independently.</p>
   56820 
   56821    </li>
   56822 
   56823    <li id=seamlessLinks><p>If the <a href=#source-browsing-context>source browsing
   56824    context</a> is the same as the <a href=#browsing-context>browsing context</a>
   56825    being navigated, and this browsing context has its <a href=#seamless-browsing-context-flag>seamless
   56826    browsing context flag</a> set, then find the nearest
   56827    <a href=#ancestor-browsing-context>ancestor browsing context</a> that does not have its
   56828    <a href=#seamless-browsing-context-flag>seamless browsing context flag</a> set, and continue these
   56829    steps as if <em>that</em> <a href=#browsing-context>browsing context</a> was the one
   56830    that was going to be <a href=#navigate title=navigate>navigated</a>
   56831    instead.</li>
   56832 
   56833    <li><p>If there is a preexisting attempt to navigate the
   56834    <a href=#browsing-context>browsing context</a>, and the <a href=#source-browsing-context>source browsing
   56835    context</a> is the same as the <a href=#browsing-context>browsing context</a>
   56836    being navigated, and that attempt is currently
   56837    running the <a href=#unload-a-document>unload a document</a> algorithm, and the
   56838    <a href=#origin>origin</a> of the <a href=#url>URL</a> of the resource being
   56839    loaded in that navigation is not the <a href=#same-origin>same origin</a> as
   56840    the <a href=#origin>origin</a> of the <a href=#url>URL</a> of the resource
   56841    being loaded in <em>this</em> navigation, then abort these steps
   56842    without affecting the preexisting attempt to navigate the
   56843    <a href=#browsing-context>browsing context</a>.</li>
   56844    <!-- http://www.hixie.ch/tests/adhoc/html/navigation/unload/ -->
   56845 
   56846    <li><p>If there is a preexisting attempt to navigate the
   56847    <a href=#browsing-context>browsing context</a>, and either that attempt has not yet
   56848    <a href=#concept-navigate-mature title=concept-navigate-mature>matured</a> (i.e. it has
   56849    not passed the point of making its <code><a href=#document>Document</a></code> the
   56850    <a href=#active-document>active document</a>), or that navigation's resource is not
   56851    to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, or its
   56852    resource's <a href=#absolute-url>absolute URL</a> differs from this attempt's by
   56853    more than the presence, absence, or value of the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component, then cancel
   56854    that preexisting attempt to navigate the <a href=#browsing-context>browsing
   56855    context</a>.</li>
   56856 
   56857    <li id=navigate-fragid-step><p><i>Fragment identifiers</i>: If
   56858    the <a href=#absolute-url>absolute URL</a> of the new resource is the same as
   56859    the <a href="#the-document's-address" title="the document's address">address</a> of the
   56860    <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a>
   56861    being navigated, ignoring any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components of those
   56862    <a href=#url title=URL>URLs</a>, and the new resource is to be
   56863    fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   56864    equivalent</a>, and the <a href=#absolute-url>absolute URL</a> of the new
   56865    resource has a <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   56866    component (even if it is empty), then <a href=#scroll-to-fragid title=navigate-fragid>navigate to that fragment identifier</a>
   56867    and abort these steps.</li>
   56868 
   56869    <li><p>Cancel <em>any</em> preexisting attempt to navigate the
   56870    <a href=#browsing-context>browsing context</a>.</li>
   56871 
   56872    <li><p>If the new resource is to be handled using a mechanism that
   56873    does not affect the browsing context, e.g. ignoring the navigation
   56874    request altogether because the specified scheme is not one of the
   56875    supported protocols, then abort these steps and proceed with that
   56876    mechanism instead.</li>
   56877 
   56878    <li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
   56879    unload</a> the <code><a href=#document>Document</a></code> object. If the user
   56880    <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
   56881    these steps must be aborted.</li>
   56882 
   56883    <li>
   56884 
   56885     <p>If the new resource is to be handled by displaying some sort of
   56886     inline content, e.g. an error message because the specified scheme
   56887     is not one of the supported protocols, or an inline prompt to
   56888     allow the user to select <a href=#dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler>a registered
   56889     handler</a> for the given scheme, then <a href=#read-ua-inline title=navigate-ua-inline>display the inline content</a> and
   56890     abort these steps.</p>
   56891 
   56892     <p class=note>In the case of a registered handler being used,
   56893     the algorithm will be reinvoked with a new URL to handle the
   56894     request.</p>
   56895 
   56896    </li>
   56897 
   56898    <li>
   56899 
   56900     <p>If the new resource is to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, then
   56901     check if there are any <a href=#relevant-application-cache title="relevant application
   56902     cache">relevant application caches</a> that are identified by a
   56903     URL with the <a href=#same-origin>same origin</a> as the URL in question, and
   56904     that have this URL as one of their entries, excluding entries
   56905     marked as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>. If so, then the
   56906     user agent must then get the resource from the <a href=#concept-appcache-selection title=concept-appcache-selection>most appropriate application
   56907     cache</a> of those that match.</p>
   56908 
   56909     <p class=example>For example, imagine an HTML page with an
   56910     associated application cache displaying an image and a form, where
   56911     the image is also used by several other application caches. If the
   56912     user right-clicks on the image and chooses "View Image", then the
   56913     user agent could decide to show the image from any of those
   56914     caches, but it is likely that the most useful cache for the user
   56915     would be the one that was used for the aforementioned HTML
   56916     page. On the other hand, if the user submits the form, and the
   56917     form does a POST submission, then the user agent will not use an
   56918     application cache at all; the submission will be made to the
   56919     network.</p>
   56920 
   56921     <p>Otherwise, unless it has already been obtained<!-- it's
   56922     obtained by <object>, for instance -->, <a href=#fetch>fetch</a> the new
   56923     resource, with the <i>manual redirect flag</i> set.</p>
   56924 
   56925     <p>If the resource is being fetched using a method other than one
   56926     <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>equivalent to</a>
   56927     HTTP's GET<!-- or HEAD (but that can't happen) -->, or, if the
   56928     <a href=#navigate title=navigate>navigation algorithm</a> was invoked as
   56929     a result of the <a href=#concept-form-submit title=concept-form-submit>form submission
   56930     algorithm</a>, then the <a href=#fetch title=fetch>fetching
   56931     algorithm</a> must be invoked from the <a href=#origin>origin</a> of
   56932     the <a href=#active-document>active document</a> of the <a href=#source-browsing-context>source browsing
   56933     context</a>, if any.</p> <!-- potentially http-origin privacy
   56934     sensitive -->
   56935 
   56936     <p>If the <a href=#browsing-context>browsing context</a> being navigated is a
   56937     <a href=#child-browsing-context>child browsing context</a> for an <code><a href=#the-iframe-element>iframe</a></code> or
   56938     <code><a href=#the-object-element>object</a></code> element, then the <a href=#fetch title=fetch>fetching
   56939     algorithm</a> must be invoked from the <code><a href=#the-iframe-element>iframe</a></code> or
   56940     <code><a href=#the-object-element>object</a></code> element's <a href=#browsing-context-scope-origin>browsing context scope
   56941     origin</a>, if it has one.</p> <!-- potentially http-origin
   56942     privacy sensitive -->
   56943 
   56944    </li>
   56945 
   56946    <li>
   56947 
   56948     <p>At this point, unless this step has already been reached once
   56949     before in the execution of this instance of the algorithm, the
   56950     user agents must return to whatever algorithm invoked the
   56951     navigation steps and must continue these steps asynchronously.</p>
   56952 
   56953    </li>
   56954 
   56955    <li>
   56956 
   56957     <p>If fetching the resource results in a redirect, and either the
   56958     <a href=#url>URL</a> of the target of the redirect has the <a href=#same-origin>same
   56959     origin</a> as the original resource, or the resource is being
   56960     obtained using the POST method or a safe method (in HTTP terms),
   56961     return to <a href=#navigate-fragid-step>the step labeled
   56962     "fragment identifiers"</a> with the new resource.</p>
   56963 
   56964     <p>Otherwise, if fetching the resource results in a redirect but
   56965     the <a href=#url>URL</a> of the target of the redirect does not have
   56966     the <a href=#same-origin>same origin</a> as the original resource and the
   56967     resource is being obtained using a method that is neither the POST
   56968     method nor a safe method (in HTTP terms), then abort these
   56969     steps. The user agent may indicate to the user that the navigation
   56970     has been aborted for security reasons.</p>
   56971 
   56972    </li>
   56973 
   56974    <li><p>Wait for one or more bytes to be available or for the user
   56975    agent to establish that the resource in question is empty. During
   56976    this time, the user agent may allow the user to cancel this
   56977    navigation attempt or start other navigation attempts.</li>
   56978 
   56979    <li>
   56980 
   56981     <p>If the resource was not fetched from an <a href=#application-cache>application
   56982     cache</a>, and was to be fetched using HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or equivalent</a>, and its
   56983     URL <a href=#concept-appcache-matches-fallback title=concept-appcache-matches-fallback>matches the
   56984     fallback namespace</a> of one or more <a href=#relevant-application-cache title="relevant
   56985     application cache">relevant application caches</a>, and the
   56986     user didn't cancel the navigation attempt during the previous
   56987     step, and the navigation attempt failed (e.g. the server returned
   56988     a 4xx or 5xx status code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, or
   56989     there was a DNS error), then:</p> <!-- note that a redirect can
   56990     never reach this point as it is handled earlier, meaning that a
   56991     captive portal captures URLs in fallback namespaces and you can't
   56992     ever get to the fallback file of a resource if you have a captive
   56993     portal -->
   56994 
   56995     <p>Let <var title="">candidate</var> be the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback resource</a>
   56996     specified for the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a> in
   56997     question. If multiple application caches match, the user agent
   56998     must use the fallback of the <a href=#concept-appcache-selection title=concept-appcache-selection>most appropriate application
   56999     cache</a> of those that match.</p>
   57000 
   57001     <p>If <var title="">candidate</var> is not marked as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>, then the user
   57002     agent must discard the failed load and instead continue along
   57003     these steps using <var title="">candidate</var> as the
   57004     resource. <a href="#the-document's-address">The document's address</a>, if appropriate,
   57005     will still be the originally requested URL, not the fallback URL,
   57006     but the user agent may indicate to the user that the original page
   57007     load failed, that the page used was a fallback resource, and what
   57008     the URL of the fallback resource actually is.</p>
   57009 
   57010    </li>
   57011 
   57012    <li><p>If the document's out-of-band metadata (e.g. HTTP headers),
   57013    not counting any <a href=#content-type title=Content-Type>type information</a>
   57014    (such as the Content-Type HTTP header), requires some sort of
   57015    processing that will not affect the browsing context, then perform
   57016    that processing and abort these steps.</p>
   57017 
   57018    <div class=note>
   57019     <p>Such processing might be triggered by, amongst other things, the
   57020     following:</p>
   57021     <ul class=brief><li>HTTP status codes (e.g. 204 No Content or 205 Reset Content)</li>
   57022      <li>HTTP Content-Disposition headers</li>
   57023      <li>Network errors</li>
   57024     </ul></div>
   57025 
   57026     <!-- theorectically, HTTP 205 processing would occur here,
   57027     resetting all forms with no other effect. However, it seems nobody
   57028     actually wants to use this ability, so requiring it here seems
   57029     like unnecessary work. -->
   57030 
   57031     <p>HTTP 401 responses that do not include a challenge recognized
   57032     by the user agent must be processed as if they had no challenge,
   57033     e.g. rendering the entity body as if the response had been 200
   57034     OK.</p>
   57035 
   57036     <p>User agents may show the entity body of an HTTP 401 response
   57037     even when the response do include a recognized challenge, with the
   57038     option to login being included in a non-modal fashion, to enable
   57039     the information provided by the server to be used by the user
   57040     before authenticating. Similarly, user agents should allow the
   57041     user to authenticate (in a non-modal fashion) against
   57042     authentication challenges included in other responses such as HTTP
   57043     200 OK responses, effectively allowing resources to present HTTP
   57044     login forms without requiring their use.</p>
   57045 
   57046    </li>
   57047 
   57048    <li><p>Let <var title="">type</var> be <a href=#content-type-sniffing-0 title="Content-Type
   57049    sniffing">the sniffed type of the resource</a>.</li>
   57050 
   57051    <li><p>If the user agent has been configured to process resources
   57052    of the given <var title="">type</var> using some mechanism other
   57053    than rendering the content in a <a href=#browsing-context>browsing context</a>, then
   57054    skip this step. Otherwise, if the <var title="">type</var> is one
   57055    of the following types, jump to the appropriate entry in the
   57056    following list, and process the resource as described there:</p>
   57057 
   57058     <dl class=switch><!-- an <span>HTML MIME type</span> --><dt>"<code><a href=#text/html>text/html</a></code>"</dt>
   57059      <dt>"<code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>"</dt>
   57060      <dd>Follow the steps given in the <a href=#read-html title=navigate-html>HTML document</a> section, and abort
   57061      these steps.</dd>
   57062 
   57063      <!-- an <span>XML MIME type</span> -->
   57064      <dt>Any type ending in "<code title="">+xml</code>"</dt> <!-- no need to say that the _subtype_ ends in "+xml" so long as the "sniffed type" algorithm continues to drop parameters -->
   57065      <dt>"<code>application/xml</code>"</dt>
   57066      <dt>"<code>text/xml</code>"</dt>
   57067      <dd>Follow the steps given in the <a href=#read-xml title=navigate-xml>XML
   57068      document</a> section. If that section determines that the
   57069      content is <em>not</em> to be displayed as a generic XML
   57070      document, then proceed to the next step in this overall set of
   57071      steps. Otherwise, abort these steps.</dd>
   57072 
   57073      <dt>"<code>text/plain</code>"</dt>
   57074      <dd>Follow the steps given in the <a href=#read-text title=navigate-text>plain text file</a> section, and abort
   57075      these steps.</dd>
   57076 
   57077      <dt>A supported image type</dt>
   57078      <dd>Follow the steps given in the <a href=#read-image title=navigate-image>image</a> section, and abort these
   57079      steps.</dd>
   57080 
   57081      <dt>A type that will use an external application to render the
   57082      content in the <a href=#browsing-context>browsing context</a></dt>
   57083      <dd>Follow the steps given in the <a href=#read-plugin title=navigate-plugin>plugin</a> section, and abort these
   57084      steps.</dd>
   57085 
   57086     </dl><p><dfn id="set-the-document's-address" title="set the document's address">Setting the document's
   57087     address</dfn>: If there is no <dfn id=override-url>override URL</dfn>, then any
   57088     <code><a href=#document>Document</a></code> created by these steps must have its <a href="#the-document's-address" title="the document's address">address</a> set to the
   57089     <a href=#url>URL</a> that was originally to be <a href=#fetch title=fetch>fetched</a>, ignoring any other data that was
   57090     used to obtain the resource (e.g. the entity body in the case of a
   57091     POST submission is not part of <a href="#the-document's-address">the document's
   57092     address</a>, nor is the URL of the fallback resource in the
   57093     case of the original load having failed and that URL having been
   57094     found to match a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   57095     namespace</a>). However, if there <em>is</em> an <a href=#override-url>override
   57096     URL</a>, then any <code><a href=#document>Document</a></code> created by these steps
   57097     must have its <a href="#the-document's-address" title="the document's address">address</a>
   57098     set to that <a href=#url>URL</a> instead.</p>
   57099 
   57100     <p class=note>An <a href=#override-url title="override URL">override URL</a>
   57101     is set when <a href=#concept-js-deref title=concept-js-deref>dereferencing a
   57102     <code>javascript:</code> URL</a>.</p>
   57103 
   57104     <p><dfn id=create-a-document-object title="create a Document object">Creating a new
   57105     <code>Document</code> object</dfn>: When a <code><a href=#document>Document</a></code>
   57106     is created as part of the above steps, a new <code><a href=#window>Window</a></code>
   57107     object must be created and associated with the
   57108     <code><a href=#document>Document</a></code>, with one exception: if the <a href=#browsing-context>browsing
   57109     context</a>'s only entry in its <a href=#session-history>session history</a> is
   57110     the <code><a href=#about:blank>about:blank</a></code> <code><a href=#document>Document</a></code> that was added
   57111     when the <a href=#browsing-context>browsing context</a> was created, and navigation
   57112     is occurring with <a href=#replacement-enabled>replacement enabled</a>, and that
   57113     <code><a href=#document>Document</a></code> has the <a href=#same-origin>same origin</a> as the new
   57114     <code><a href=#document>Document</a></code>, then the <code><a href=#window>Window</a></code> object of that
   57115     <code><a href=#document>Document</a></code> must be used instead, and the <code title=dom-document><a href=#dom-document>document</a></code> attribute of the
   57116     <code><a href=#window>Window</a></code> object must be changed to point to the new
   57117     <code><a href=#document>Document</a></code> instead.</p>
   57118 
   57119    </li>
   57120 
   57121    <li id=navigate-non-Document>
   57122 
   57123     <p><i>Non-document content</i>: If, given <var title="">type</var>, the new resource is to be handled by
   57124     displaying some sort of inline content, e.g. a native rendering of
   57125     the content, an error message because the specified type is not
   57126     supported, or an inline prompt to allow the user to select <a href=#dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler>a registered
   57127     handler</a> for the given type, then <a href=#read-ua-inline title=navigate-ua-inline>display the inline content</a> and
   57128     abort these steps.</p>
   57129 
   57130     <p class=note>In the case of a registered handler being used,
   57131     the algorithm will be reinvoked with a new URL to handle the
   57132     request.</p>
   57133 
   57134    </li>
   57135 
   57136    <li><p>Otherwise, the document's <var title="">type</var> is such
   57137    that the resource will not affect the browsing context,
   57138    e.g. because the resource is to be handed to an external
   57139    application. Process the resource appropriately.</p>
   57140 
   57141   </ol><hr><p>Some of the sections below, to which the above algorithm defers
   57142   in certain cases, require the user agent to <dfn id=update-the-session-history-with-the-new-page>update the session
   57143   history with the new page</dfn>. When a user agent is required to do
   57144   this, it must <a href=#queue-a-task>queue a task</a> to run the following
   57145   steps:</p>
   57146 
   57147   <ol><li><p><a href=#unload-a-document title="unload a document">Unload</a> the
   57148    <code><a href=#document>Document</a></code> object of the <a href=#current-entry>current entry</a>,
   57149    with the <var title="">recycle</var> parameter set to
   57150    false.</li>
   57151 
   57152    <li>
   57153 
   57154     <dl><dt>If the navigation was initiated for <dfn id=entry-update>entry update</dfn> of
   57155      an entry</dt>
   57156 
   57157      <dd>
   57158 
   57159       <ol><li><p>Replace the <code><a href=#document>Document</a></code> of the entry being
   57160        updated, and any other entries that referenced the same
   57161        document as that entry, with the new
   57162        <code><a href=#document>Document</a></code>.</li>
   57163 
   57164        <li><p><a href=#traverse-the-history>Traverse the history</a> to the new
   57165        entry.</li>
   57166 
   57167       </ol><p class=note>This can only happen if the entry being updated
   57168       is no the <a href=#current-entry>current entry</a>, and can never happen with
   57169       <a href=#replacement-enabled>replacement enabled</a>. (It happens when the user
   57170       tried to traverse to a session history entry that no longer had
   57171       a <code><a href=#document>Document</a></code> object.)</p>
   57172 
   57173      </dd>
   57174 
   57175 
   57176      <dt>Otherwise</dt>
   57177 
   57178      <dd>
   57179 
   57180       <ol><li>
   57181 
   57182         <p>Remove all the entries in the <a href=#browsing-context>browsing
   57183         context</a>'s <a href=#session-history>session history</a> after the
   57184         <a href=#current-entry>current entry</a>. If the <a href=#current-entry>current entry</a>
   57185         is the last entry in the session history, then no entries are
   57186         removed.</p>
   57187 
   57188         <p class=note>This <a href=#history-notes>doesn't
   57189         necessarily have to affect</a> the user agent's user
   57190         interface.</p>
   57191 
   57192        </li>
   57193 
   57194        <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a>
   57195        queued by the <a href=#history-traversal-task-source>history traversal task
   57196        source</a>.</li> <!-- so the network is racing
   57197        history.back(), in the case of setting location.href="" and
   57198        then calling history.back() -->
   57199 
   57200        <li><p>Append a new entry at the end of the <code><a href=#history-0>History</a></code>
   57201        object representing the new resource and its
   57202        <code><a href=#document>Document</a></code> object and related state.</li>
   57203 
   57204        <li><p><a href=#traverse-the-history>Traverse the history</a> to the new entry. If
   57205        the navigation was initiated with <a href=#replacement-enabled>replacement
   57206        enabled</a>, then the traversal must itself be initiated
   57207        with <a href=#replacement-enabled>replacement enabled</a>.</p>
   57208 
   57209        </li>
   57210 
   57211       </ol></dd>
   57212 
   57213     </dl></li>
   57214 
   57215    <li><p>The <a href=#navigate title=navigate>navigation algorithm</a> has
   57216    now <dfn id=concept-navigate-mature title=concept-navigate-mature>matured</dfn>.</li>
   57217 
   57218    <li><p><i>Fragment identifier loop</i>: <a href=#spin-the-event-loop>Spin the event
   57219    loop</a> for a user-agent-defined amount of time, as desired by
   57220    the user agent implementor. (This is intended to allow the user
   57221    agent to optimize the user experience in the face of performance
   57222    concerns.)</li>
   57223 
   57224    <li><p>If the <code><a href=#document>Document</a></code> object has no parser, or its
   57225    parser has <a href=#stop-parsing title="stop parsing">stopped parsing</a>, or
   57226    the user agent has reason to believe the user is no longer
   57227    interested in scrolling to the fragment identifier, then abort
   57228    these steps.</li>
   57229 
   57230    <li><p><a href=#scroll-to-the-fragment-identifier>Scroll to the fragment identifier</a> given in
   57231    <a href="#the-document's-current-address">the document's current address</a>. If this fails to find
   57232    <a href=#the-indicated-part-of-the-document title="the indicated part of the document">an indicated part
   57233    of the document</a>, then return to the <i>fragment identifier
   57234    loop</i> step.</li>
   57235 
   57236   </ol><p>The <a href=#task-source>task source</a> for this <a href=#concept-task title=concept-task>task</a> is the <a href=#networking-task-source>networking task
   57237   source</a>.</p>
   57238 
   57239 
   57240   <h4 id=read-html><span class=secno>6.5.2 </span><dfn title=navigate-html>Page load processing model for HTML files</dfn></h4>
   57241 
   57242   <p>When an HTML document is to be loaded in a <a href=#browsing-context>browsing
   57243   context</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
   57244   <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it as being
   57245   an <a href=#html-documents title="HTML documents">HTML document</a>, create an
   57246   <a href=#html-parser>HTML parser</a>, and associate it with the document. Each
   57247   <a href=#concept-task title=concept-task>task</a> that the <a href=#networking-task-source>networking
   57248   task source</a> places on the <a href=#task-queue>task queue</a> while the
   57249   <a href=#fetch title=fetch>fetching algorithm</a> runs must then fill
   57250   the parser's <a href=#the-input-stream>input stream</a> with the fetched bytes and
   57251   cause the <a href=#html-parser>HTML parser</a> to perform the appropriate
   57252   processing of the input stream.</p>
   57253 
   57254   <p class=note>The <a href=#the-input-stream>input stream</a> converts bytes into
   57255   characters for use in the <a href=#tokenization title=tokenization>tokenizer</a>. This process relies, in part,
   57256   on character encoding information found in the real <a href=#content-type title=Content-Type>Content-Type metadata</a> of the resource;
   57257   the "sniffed type" is not used for this purpose.</p>
   57258 
   57259   <!-- next two paragraphs are nearly identical to the navigate-text
   57260   section, keep them in sync -->
   57261 
   57262   <p>When no more bytes are available, the user agent must <a href=#queue-a-task>queue
   57263   a task</a> for the parser to process the implied EOF character,
   57264   which eventually causes a <code title=event-load>load</code> event
   57265   to be fired.</p>
   57266 
   57267   <p>After creating the <code><a href=#document>Document</a></code> object, but before any
   57268   script execution, certainly before the parser <a href=#stop-parsing title="stop
   57269   parsing">stops</a>, the user agent must <a href=#update-the-session-history-with-the-new-page>update the session
   57270   history with the new page</a>.</p>
   57271 
   57272   <p class=note><a href=#concept-appcache-init title=concept-appcache-init>Application
   57273   cache selection</a> happens <a href=#parser-appcache>in the
   57274   HTML parser</a>.</p>
   57275 
   57276   <p>The <a href=#task-source>task source</a> for the two tasks mentioned in this
   57277   section must be the <a href=#networking-task-source>networking task source</a>.</p>
   57278 
   57279 
   57280 
   57281   <h4 id=read-xml><span class=secno>6.5.3 </span><dfn title=navigate-xml>Page load processing model for XML files</dfn></h4>
   57282 
   57283   <p>When faced with displaying an XML file inline, user agents must
   57284   first <a href=#create-a-document-object>create a <code>Document</code> object</a>, following
   57285   the requirements of the XML and Namespaces in XML recommendations,
   57286   RFC 3023, DOM3 Core, and other relevant specifications. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a> <a href=#refsRFC3023>[RFC3023]</a> <a href=#refsDOMCORE>[DOMCORE]</a></p>
   57287 
   57288   <p>The actual HTTP headers and other metadata, not the headers as
   57289   mutated or implied by the algorithms given in this specification,
   57290   are the ones that must be used when determining the character
   57291   encoding according to the rules given in the above
   57292   specifications. Once the character encoding is established, the
   57293   <a href="#document's-character-encoding">document's character encoding</a> must be set to that
   57294   character encoding.</p>
   57295 
   57296   <p>If the root element, as parsed according to the XML
   57297   specifications cited above, is found to be an <code><a href=#the-html-element-0>html</a></code>
   57298   element with an attribute <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> whose value is not the
   57299   empty string, then, as soon as the element is <a href=#insert-an-element-into-a-document title="insert an
   57300   element into a document">inserted into the document</a>, the user
   57301   agent must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of
   57302   that attribute relative to that element, and if that is successful,
   57303   must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
   57304   selection algorithm</a> with the resulting <a href=#absolute-url>absolute
   57305   URL</a> with any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component removed as
   57306   the manifest URL, and passing in the newly-created
   57307   <code><a href=#document>Document</a></code>. Otherwise, if the attribute is absent, its
   57308   value is the empty string, or resolving its value fails, then as
   57309   soon as the root element is <a href=#insert-an-element-into-a-document title="insert an element into a
   57310   document">inserted into the document</a>, the user agent must run
   57311   the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
   57312   algorithm</a> with no manifest, and passing in the
   57313   <code><a href=#document>Document</a></code>.</p>
   57314 
   57315   <p class=note>Because the processing of the <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute happens
   57316   only once the root element is parsed, any URLs referenced by
   57317   processing instructions before the root element (such as <code title="">&lt;?xml-stylesheet?&gt;</code> and <code title="">&lt;?xbl?&gt;</code> PIs) will be fetched from the network and
   57318   cannot be cached.</p><!-- v2: fix this somehow -->
   57319 
   57320   <p>User agents may examine the namespace of the root
   57321   <code><a href=#element>Element</a></code> node of this <code><a href=#document>Document</a></code> object to
   57322   perform namespace-based dispatch to alternative processing tools,
   57323   e.g. determining that the content is actually a syndication feed and
   57324   passing it to a feed handler. If such processing is to take place,
   57325   abort the steps in this section, and jump to <a href=#navigate-non-Document>the next step</a> (labeled
   57326   "non-document content") in the <a href=#navigate>navigate</a> steps
   57327   above.</p>
   57328 
   57329   <p>Otherwise, then, with the newly created <code><a href=#document>Document</a></code>,
   57330   the user agents must <a href=#update-the-session-history-with-the-new-page>update the session history with the new
   57331   page</a>. User agents may do this before the complete document
   57332   has been parsed (thus achieving <i>incremental rendering</i>), and
   57333   must do this before any scripts are to be executed.</p>
   57334 
   57335   <p>Error messages from the parse process (e.g. XML namespace
   57336   well-formedness errors) may be reported inline by mutating the
   57337   <code><a href=#document>Document</a></code>.</p>
   57338 
   57339 
   57340   <h4 id=read-text><span class=secno>6.5.4 </span><dfn title=navigate-text>Page load processing model for text files</dfn></h4>
   57341 
   57342   <p>When a plain text document is to be loaded in a <a href=#browsing-context>browsing
   57343   context</a>, the user agent should <a href=#queue-a-task>queue a task</a> to
   57344   <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it as being
   57345   an <a href=#html-documents title="HTML documents">HTML document</a>, create an
   57346   <a href=#html-parser>HTML parser</a>, associate it with the document, act as if
   57347   the tokenizer had emitted a start tag token with the tag name "pre"
   57348   followed by a single U+000A LINE FEED (LF) character<!-- to get
   57349   eaten, so that a leading LF in the text/plain stream doesn't get
   57350   eaten itself-->, and switch the <a href=#html-parser>HTML parser</a>'s tokenizer
   57351   to the <a href=#plaintext-state>PLAINTEXT state</a>.  Each <a href=#concept-task title=concept-task>task</a> that the <a href=#networking-task-source>networking task
   57352   source</a> places on the <a href=#task-queue>task queue</a> while the <a href=#fetch title=fetch>fetching algorithm</a> runs must then fill the
   57353   parser's <a href=#the-input-stream>input stream</a> with the fetched bytes and cause
   57354   the <a href=#html-parser>HTML parser</a> to perform the appropriate processing
   57355   of the input stream.</p>
   57356 
   57357   <p>The rules for how to convert the bytes of the plain text document
   57358   into actual characters are defined in RFC 2046, RFC 2646, and
   57359   subsequent versions thereof. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsRFC2646>[RFC2646]</a></p>
   57360 
   57361   <p>The <a href="#document's-character-encoding">document's character encoding</a> must be set to the
   57362   character encoding used to decode the document.</p>
   57363 
   57364   <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
   57365   must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
   57366   selection algorithm</a> with no manifest, and passing in the
   57367   newly-created <code><a href=#document>Document</a></code>.</p>
   57368 
   57369   <!-- next two paragraphs are nearly identical to the navigate-html
   57370   section and similar to the "navigate-ua-inline" section, and the
   57371   next three are similar to the navigate-image and navigate-plugin
   57372   sections; keep them all in sync -->
   57373 
   57374   <p>When no more bytes are available, the user agent must <a href=#queue-a-task>queue
   57375   a task</a> for the parser to process the implied EOF character,
   57376   which eventually causes a <code title=event-load>load</code> event
   57377   to be fired.</p>
   57378 
   57379   <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
   57380   before the page has finished parsing, the user agent must
   57381   <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>
   57382 
   57383   <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
   57384   the <code><a href=#document>Document</a></code>, e.g. linking to a style sheet or an XBL
   57385   binding, providing script, giving the document a <code><a href=#the-title-element-0>title</a></code>,
   57386   etc.</p>
   57387 
   57388   <p>The <a href=#task-source>task source</a> for the two tasks mentioned in this
   57389   section must be the <a href=#networking-task-source>networking task source</a>.</p>
   57390 
   57391 
   57392   <h4 id=read-image><span class=secno>6.5.5 </span><dfn title=navigate-image>Page load processing model for images</dfn></h4>
   57393 
   57394   <p>When an image resource is to be loaded in a <a href=#browsing-context>browsing
   57395   context</a>, the user agent should <a href=#create-a-document-object>create a
   57396   <code>Document</code> object</a>, mark it as being an <a href=#html-documents title="HTML documents">HTML document</a>, append an
   57397   <code><a href=#the-html-element-0>html</a></code> element to the <code><a href=#document>Document</a></code>, append a
   57398   <code><a href=#the-head-element-0>head</a></code> element and a <code><a href=#the-body-element-0>body</a></code> element to the
   57399   <code><a href=#the-html-element-0>html</a></code> element, append an <code><a href=#the-img-element>img</a></code> to the
   57400   <code><a href=#the-body-element-0>body</a></code> element, and set the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of the <code><a href=#the-img-element>img</a></code>
   57401   element to the address of the image.</p>
   57402 
   57403   <!-- next three paragraphs are similar to the navigate-text section,
   57404   keep them in sync -->
   57405 
   57406   <p>Then, the user agent must act as if it had <a href=#stop-parsing title="stop
   57407   parsing">stopped parsing</a>.</p>
   57408 
   57409   <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
   57410   must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
   57411   selection algorithm</a> with no manifest, and passing in the
   57412   newly-created <code><a href=#document>Document</a></code>.</p>
   57413 
   57414   <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
   57415   before the page has finished fully loading, the user agent must
   57416   <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>
   57417 
   57418   <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
   57419   the <code><a href=#document>Document</a></code>, or attributes to the <code><a href=#the-img-element>img</a></code>
   57420   element, e.g. to link to a style sheet or an XBL binding, to provide
   57421   a script, to give the document a <code><a href=#the-title-element-0>title</a></code>, etc.</p>
   57422 
   57423 
   57424   <h4 id=read-plugin><span class=secno>6.5.6 </span><dfn title=navigate-plugin>Page load processing model for content that uses plugins</dfn></h4>
   57425 
   57426   <p>When a resource that requires an external resource to be rendered
   57427   is to be loaded in a <a href=#browsing-context>browsing context</a>, the user agent
   57428   should <a href=#create-a-document-object>create a <code>Document</code> object</a>, mark it
   57429   as being an <a href=#html-documents title="HTML documents">HTML document</a>,
   57430   append an <code><a href=#the-html-element-0>html</a></code> element to the <code><a href=#document>Document</a></code>,
   57431   append a <code><a href=#the-head-element-0>head</a></code> element and a <code><a href=#the-body-element-0>body</a></code> element
   57432   to the <code><a href=#the-html-element-0>html</a></code> element, append an <code><a href=#the-embed-element>embed</a></code> to
   57433   the <code><a href=#the-body-element-0>body</a></code> element, and set the <code title=attr-embed-src><a href=#attr-embed-src>src</a></code> attribute of the
   57434   <code><a href=#the-embed-element>embed</a></code> element to the address of the resource.</p>
   57435 
   57436   <!-- next three paragraphs are similar to the navigate-text section,
   57437   keep them in sync -->
   57438 
   57439   <p>Then, the user agent must act as if it had <a href=#stop-parsing title="stop
   57440   parsing">stopped parsing</a>.</p>
   57441 
   57442   <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
   57443   must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
   57444   selection algorithm</a> with no manifest, and passing in the
   57445   newly-created <code><a href=#document>Document</a></code>.</p>
   57446 
   57447   <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
   57448   before the page has finished fully loading, the user agent must
   57449   <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>
   57450 
   57451   <p>User agents may add content to the <code><a href=#the-head-element-0>head</a></code> element of
   57452   the <code><a href=#document>Document</a></code>, or attributes to the <code><a href=#the-embed-element>embed</a></code>
   57453   element, e.g. to link to a style sheet or an XBL binding, or to give
   57454   the document a <code><a href=#the-title-element-0>title</a></code>.</p>
   57455 
   57456   <p class=note id=sandboxPluginNavigate>If the <a href=#sandboxed-plugins-browsing-context-flag>sandboxed
   57457   plugins browsing context flag</a> was set on the <a href=#browsing-context>browsing
   57458   context</a> when the <code><a href=#document>Document</a></code> was created, the
   57459   synthesized <code><a href=#the-embed-element>embed</a></code> element will <a href=#sandboxPluginEmbed>fail to render the content</a>.</p>
   57460 
   57461 
   57462   <h4 id=read-ua-inline><span class=secno>6.5.7 </span><dfn title=navigate-ua-inline>Page load processing model for inline content that doesn't have a DOM</dfn></h4>
   57463 
   57464   <p>When the user agent is to display a user agent page inline in a
   57465   <a href=#browsing-context>browsing context</a>, the user agent should <a href=#create-a-document-object>create a
   57466   <code>Document</code> object</a>, mark it as being an <a href=#html-documents title="HTML documents">HTML document</a>, and then either
   57467   associate that <code><a href=#document>Document</a></code> with a custom rendering that is
   57468   not rendered using the normal <code><a href=#document>Document</a></code> rendering rules,
   57469   or mutate that <code><a href=#document>Document</a></code> until it represents the content
   57470   the user agent wants to render.</p>
   57471 
   57472   <!-- next two paragraphs are similar to the navigate-text section,
   57473   keep them in sync -->
   57474 
   57475   <p>Once the page has been set up, the user agent must act as if it
   57476   had <a href=#stop-parsing title="stop parsing">stopped parsing</a>.</p>
   57477 
   57478   <p>Upon creation of the <code><a href=#document>Document</a></code> object, the user agent
   57479   must run the <a href=#concept-appcache-init title=concept-appcache-init>application cache
   57480   selection algorithm</a> with no manifest, passing in the
   57481   newly-created <code><a href=#document>Document</a></code>.</p>
   57482 
   57483   <p>After creating the <code><a href=#document>Document</a></code> object, but potentially
   57484   before the page has been completely set up, the user agent must
   57485   <a href=#update-the-session-history-with-the-new-page>update the session history with the new page</a>.</p>
   57486 
   57487 
   57488 
   57489   <h4 id=scroll-to-fragid><span class=secno>6.5.8 </span><dfn title=navigate-fragid>Navigating to a fragment identifier</dfn></h4>
   57490 
   57491   <p>When a user agent is supposed to navigate to a fragment
   57492   identifier, then the user agent must <a href=#queue-a-task>queue a task</a> to
   57493   run the following steps:</p>
   57494 
   57495   <ol><li>
   57496 
   57497     <p>Remove all the entries in the <a href=#browsing-context>browsing context</a>'s
   57498     <a href=#session-history>session history</a> after the <a href=#current-entry>current
   57499     entry</a>. If the <a href=#current-entry>current entry</a> is the last entry
   57500     in the session history, then no entries are removed.</p>
   57501 
   57502     <p class=note>This <a href=#history-notes>doesn't necessarily
   57503     have to affect</a> the user agent's user interface.</p>
   57504 
   57505    </li>
   57506 
   57507    <li><p>Remove any <a href=#concept-task title=concept-task>tasks</a> queued by
   57508    the <a href=#history-traversal-task-source>history traversal task source</a>.</li>
   57509 
   57510    <li><p>Append a new entry at the end of the <code><a href=#history-0>History</a></code>
   57511    object representing the new resource and its <code><a href=#document>Document</a></code>
   57512    object and related state. Its <a href=#url>URL</a> must be set to the
   57513    address to which the user agent was <a href=#navigate title=navigate>navigating</a>. The title must be left
   57514    unset.</li>
   57515 
   57516    <li><p><a href=#traverse-the-history>Traverse the history</a> to the new entry. This
   57517    will <a href=#scroll-to-the-fragment-identifier>scroll to the fragment identifier</a> given in what
   57518    is now <a href="#the-document's-current-address">the document's current address</a>.</li>
   57519 
   57520   </ol><p class=note>If the scrolling fails because the relevant ID has
   57521   not yet been parsed, then the original <a href=#navigate title=navigate>navigation</a> algorithm will take care of the
   57522   scrolling instead, as the last few steps of its <a href=#update-the-session-history-with-the-new-page>update the
   57523   session history with the new page</a> algorithm.</p>
   57524 
   57525   <hr><p>When the user agent is required to <dfn id=scroll-to-the-fragment-identifier>scroll to the fragment
   57526   identifier</dfn>, it must change the scrolling position of the
   57527   document, or perform some other action, such that <a href=#the-indicated-part-of-the-document>the
   57528   indicated part of the document</a> is brought to the user's
   57529   attention. If there is no indicated part, then the user agent must
   57530   not scroll anywhere.</p>
   57531 
   57532   <p><dfn id=the-indicated-part-of-the-document>The indicated part of the document</dfn> is the one that the
   57533   fragment identifier, if any, identifies. The semantics of the
   57534   fragment identifier in terms of mapping it to a specific DOM Node is
   57535   defined by the specification that defines the <a href=#mime-type>MIME type</a>
   57536   used by the <code><a href=#document>Document</a></code> (for example, the processing of
   57537   fragment identifiers for <a href=#xml-mime-type title="XML MIME type">XML MIME
   57538   types</a> is the responsibility of RFC3023). <a href=#refsRFC3023>[RFC3023]</a></p>
   57539 
   57540   <p>For HTML documents (and <a href=#html-mime-type title="HTML MIME type">HTML MIME
   57541   types</a>), the following processing model must be followed to
   57542   determine what <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>
   57543   is.</p>
   57544 
   57545   <ol><li><p><a href=#parse-a-url title="parse a url">Parse</a> the <a href=#url>URL</a>,
   57546    and let <var title="">fragid</var> be the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component of the
   57547    URL.</li><!-- parsing can't fail, since we checked earlier on
   57548    when navigating -->
   57549 
   57550    <li><p>If <var title="">fragid</var> is the empty string, then
   57551    <a href=#the-indicated-part-of-the-document>the indicated part of the document</a> is the top of the
   57552    document; stop the algorithm here.</li>
   57553 
   57554    <li><p>Let <var title="">decoded fragid</var> be the result of
   57555    expanding any sequences of percent-encoded octets in <var title="">fragid</var> that are valid UTF-8 sequences into Unicode
   57556    characters as defined by UTF-8. If any percent-encoded octets in
   57557    that string are not valid UTF-8 sequences, then skip this step and
   57558    the next one.</p>
   57559 
   57560    <li><p>If this step was not skipped and there is an element in the
   57561    DOM that has an ID exactly equal to <var title="">decoded
   57562    fragid</var>, then the first such element in tree order is
   57563    <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>; stop the algorithm
   57564    here.</li>
   57565 
   57566    <li><p>If there is an <code><a href=#the-a-element>a</a></code> element in the DOM that has a
   57567    <code title=attr-a-name><a href=#attr-a-name>name</a></code> attribute whose value is
   57568    exactly equal to <var title="">fragid</var> (<em>not</em> <var title="">decoded fragid</var>), then the first such element in tree
   57569    order is <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>; stop the
   57570    algorithm here.</li>
   57571 
   57572    <li><p>If <var title="">fragid</var> is an <a href=#ascii-case-insensitive>ASCII
   57573    case-insensitive</a> match for the string <code title="">top</code>, then <a href=#the-indicated-part-of-the-document>the indicated part of the
   57574    document</a> is the top of the document; stop the algorithm
   57575    here.</li>
   57576 
   57577    <li><p>Otherwise, there is no <a href=#the-indicated-part-of-the-document title="the indicated part of
   57578    the document">indicated part of the document</a>.</li>
   57579 
   57580   </ol><p>For the purposes of the interaction of HTML with Selectors' <code title=selector-target>:target</code> pseudo-class, the
   57581   <dfn id=target-element><i>target element</i></dfn> is <a href=#the-indicated-part-of-the-document>the indicated part of the
   57582   document</a>, if that is an element; otherwise there is no
   57583   <i><a href=#target-element>target element</a></i>. <a href=#refsSELECTORS>[SELECTORS]</a></p>
   57584 
   57585   </div>
   57586 
   57587 
   57588 
   57589   <h4 id=history-traversal><span class=secno>6.5.9 </span>History traversal</h4> <!-- session history -->
   57590 
   57591   <div class=impl>
   57592 
   57593   <p>When a user agent is required to <dfn id=traverse-the-history>traverse the history</dfn>
   57594   to a <i>specified entry</i>, optionally with <a href=#replacement-enabled>replacement
   57595   enabled</a>, the user agent must act as follows:</p>
   57596 
   57597   <ol><li><p>If there is no longer a <code><a href=#document>Document</a></code> object for the
   57598    entry in question, the user agent must <a href=#navigate>navigate</a> the
   57599    browsing context to the location for that entry to perform an
   57600    <a href=#entry-update>entry update</a> of that entry, and abort these steps. The
   57601    "<a href=#navigate>navigate</a>" algorithm reinvokes this "traverse"
   57602    algorithm to complete the traversal, at which point there
   57603    <em>is</em> a <code><a href=#document>Document</a></code> object and so this step gets
   57604    skipped. The navigation must be done using the same <a href=#source-browsing-context>source
   57605    browsing context</a> as was used the first time this entry was
   57606    created. (This can never happen with <a href=#replacement-enabled>replacement
   57607    enabled</a>.)</li>
   57608 
   57609    <li><p>If the <a href=#current-entry>current entry</a>'s title was not set by the
   57610    <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> or <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code> methods,
   57611    then set its title to the value returned by the <code title=dom-document-title><a href=#document.title>document.title</a></code> IDL
   57612    attribute.</li>
   57613 
   57614    <li>
   57615 
   57616     <p>If appropriate, update the <a href=#current-entry>current entry</a> in the
   57617     <a href=#browsing-context>browsing context</a>'s <code><a href=#document>Document</a></code> object's
   57618     <code><a href=#history-0>History</a></code> object to reflect any state that the user
   57619     agent wishes to persist. The entry is then said to be <dfn id=an-entry-with-persisted-user-state>an
   57620     entry with persisted user state</dfn>.</p>
   57621 
   57622     <p class=example>For example, some user agents might want to
   57623     persist the scroll position, or the values of form controls.</p>
   57624 
   57625    </li>
   57626 
   57627    <li><p>If the <i>specified entry</i> has a different
   57628    <code><a href=#document>Document</a></code> object than the <a href=#current-entry>current entry</a>
   57629    then the user agent must run the following substeps:</p>
   57630 
   57631     <ol><li>If the browsing context is a <a href=#top-level-browsing-context>top-level browsing
   57632      context</a>, but not an <a href=#auxiliary-browsing-context>auxiliary browsing
   57633      context</a>, and the <a href=#origin>origin</a> of the
   57634      <code><a href=#document>Document</a></code> of the <i>specified entry</i> is not the
   57635      <a href=#same-origin title="same origin">same</a> as the <a href=#origin>origin</a>
   57636      of the <code><a href=#document>Document</a></code> of the <a href=#current-entry>current entry</a>,
   57637      then the following sub-sub-steps must be run:
   57638 
   57639       <ol><li>The current <a href=#browsing-context-name>browsing context name</a> must be
   57640        stored with all the entries in the history that are associated
   57641        with <code><a href=#document>Document</a></code> objects with the <a href=#same-origin>same
   57642        origin</a> as the <a href=#active-document>active document</a> <em>and</em>
   57643        that are contiguous with the <a href=#current-entry>current entry</a>.</li>
   57644 
   57645        <li id=resetBCName>The browsing context's <a href=#browsing-context-name>browsing
   57646        context name</a> must be unset.</li>
   57647 
   57648       </ol></li>
   57649 
   57650      <li id=appcache-history-2>The user agent must make the
   57651      <i>specified entry</i>'s <code><a href=#document>Document</a></code> object the
   57652      <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
   57653      context</a>.</li>
   57654 
   57655      <li>If the <i>specified entry</i> has a <a href=#browsing-context-name>browsing
   57656      context name</a> stored with it, then the following
   57657      sub-sub-steps must be run:
   57658 
   57659       <ol><li>The browsing context's <a href=#browsing-context-name>browsing context name</a>
   57660        must be set to the name stored with the specified entry.</li>
   57661 
   57662        <li>Any <a href=#browsing-context-name>browsing context name</a> stored with the
   57663        entries in the history that are associated with
   57664        <code><a href=#document>Document</a></code> objects with the <a href=#same-origin>same origin</a>
   57665        as the new <a href=#active-document>active document</a>, and that are
   57666        contiguous with the specified entry, must be cleared.</li>
   57667 
   57668       </ol></li>
   57669 
   57670      <li id=history-autocomplete><p>If the <i>specified entry</i>'s
   57671      <code><a href=#document>Document</a></code> has any <code><a href=#the-input-element>input</a></code> elements whose
   57672      <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">off</i>, invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
   57673      of those elements.</li>
   57674 
   57675      <li><p>If the <a href=#current-document-readiness>current document readiness</a> of the
   57676      <i>specified entry</i>'s <code><a href=#document>Document</a></code> is "complete",
   57677      <a href=#queue-a-task>queue a task</a> to fire a <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event at the
   57678      <code><a href=#window>Window</a></code> object of that <code><a href=#document>Document</a></code>, but
   57679      with its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   57680      <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   57681      <code><a href=#window>Window</a></code> object), using the
   57682      <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
   57683      attribute set to true. This event must not bubble, must not be
   57684      cancelable, and has no default action.</li>
   57685 
   57686     </ol></li>
   57687 
   57688    <li><p>Set <a href="#the-document's-current-address">the document's current address</a> to the URL
   57689    of the <i>specified entry</i>.</li>
   57690 
   57691    <li><p>If the <i>specified entry</i> has a URL that differs from
   57692    the <a href=#current-entry>current entry</a>'s only by its fragment identifier,
   57693    and the two share the same <code><a href=#document>Document</a></code> object, then let
   57694    <var title="">hash changed</var> be true, and let <var title="">old
   57695    URL</var> be the URL of the <a href=#current-entry>current entry</a> and <var title="">new URL</var> be the URL of the <i>specified
   57696    entry</i>. Otherwise, let <var title="">hash changed</var> be
   57697    false.</li>
   57698 
   57699    <li><p>If the traversal was initiated with <dfn id=replacement-enabled>replacement
   57700    enabled</dfn>, remove the entry immediately before the
   57701    <var title="">specified entry</var> in the session history.</p>
   57702 
   57703    <li><p>If the <i>specified entry</i> is not <a href=#an-entry-with-persisted-user-state>an entry with
   57704    persisted user state</a>, but its URL has a fragment identifier,
   57705    <a href=#scroll-to-the-fragment-identifier>scroll to the fragment identifier</a>.</li>
   57706 
   57707    <li><p>If the entry is <a href=#an-entry-with-persisted-user-state>an entry with persisted user
   57708    state</a>, the user agent may update aspects of the document and
   57709    its rendering, for instance the scroll position or values of form
   57710    fields, that it had previously recorded.</li>
   57711 
   57712    <li>
   57713 
   57714     <p>If the <i>specified entry</i> is a state object or the first
   57715     entry for a <code><a href=#document>Document</a></code>, the user agent must run the
   57716     following substeps:</p>
   57717 
   57718     <ol><li><p>If the entry is a <a href=#state-object>state object</a> entry, let <var title="">state</var> be a <a href=#structured-clone>structured clone</a> of that
   57719      state object. Otherwise, let <var title="">state</var> be
   57720      null.</li>
   57721 
   57722      <li>
   57723 
   57724       <p>Run the appropriate steps according to the conditions
   57725       described:</p>
   57726 
   57727       <dl class=switch><dt>If the <a href=#current-document-readiness>current document readiness</a> is set to the
   57728        string "complete"</dt>
   57729 
   57730        <dd><p><a href=#queue-a-task>Queue a task</a> to fire a <code title=event-popstate><a href=#event-popstate>popstate</a></code> event at the
   57731        <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, using
   57732        the <code><a href=#popstateevent>PopStateEvent</a></code> interface, with the <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code> attribute set to
   57733        the value of <var title="">state</var>. This event must bubble
   57734        but not be cancelable and has no default action.</dd>
   57735 
   57736        <dt>Otherwise</dt>
   57737 
   57738        <dd><p>Let the <code><a href=#document>Document</a></code>'s <dfn id=pending-state-object>pending state
   57739        object</dfn> be <var title="">state</var>. (If there was already
   57740        a <a href=#pending-state-object>pending state object</a>, the previous one is
   57741        discarded.)</p>
   57742 
   57743        <p class=note>The event will then be fired just after the <code title=event-load>load</code> event.</dd>
   57744 
   57745       </dl></li>
   57746 
   57747     </ol></li>
   57748 
   57749    <li><p>If <var title="">hash changed</var> is true, then
   57750    <a href=#queue-a-task>queue a task</a> to fire a <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event at the
   57751    <a href=#browsing-context>browsing context</a>'s <code><a href=#window>Window</a></code> object, using
   57752    the <code><a href=#hashchangeevent>HashChangeEvent</a></code> interface, with the <code title=dom-HashChangeEvent-oldURL><a href=#dom-hashchangeevent-oldurl>oldURL</a></code> attribute set to
   57753    <var title="">old URL</var> and the <code title=dom-HashChangeEvent-newURL><a href=#dom-hashchangeevent-newurl>newURL</a></code> attribute set to
   57754    <var title="">new URL</var>. This event must bubble but not be
   57755    cancelable and has no default action.</li>
   57756 
   57757    <li><p>The <a href=#current-entry>current entry</a> is now the <i>specified
   57758    entry</i>.</li>
   57759 
   57760   </ol><p>The <a href=#pending-state-object>pending state object</a> must be initially null.</p>
   57761 
   57762   <p>The <a href=#task-source>task source</a> for the tasks mentioned above is the
   57763   <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>
   57764 
   57765 
   57766   <h5 id=event-definitions><span class=secno>6.5.9.1 </span>Event definitions</h5>
   57767 
   57768   </div>
   57769 
   57770   <p>The <dfn id=event-popstate title=event-popstate><code>popstate</code></dfn> event
   57771   is fired when navigating to a <a href=#session-history-entry>session history entry</a>
   57772   that represents a state object.</p>
   57773 
   57774   <pre class=idl>interface <dfn id=popstateevent>PopStateEvent</dfn> : <a href=#event>Event</a> {
   57775   readonly attribute any <a href=#dom-popstateevent-state title=dom-PopStateEvent-state>state</a>;
   57776   void <a href=#dom-popstateevent-initpopstateevent title=dom-PopStateEvent-initPopStateEvent>initPopStateEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any stateArg);
   57777 };</pre>
   57778 
   57779   <dl class=domintro><dt><var title="">event</var> . <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code></dt>
   57780 
   57781    <dd>
   57782 
   57783     <p>Returns a copy of the information that was provided to <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> or <code title=dom-history-replaceState><a href=#dom-history-replacestate>replaceState()</a></code>.</p>
   57784 
   57785    </dd>
   57786 
   57787   </dl><div class=impl>
   57788 
   57789   <p>The <dfn id=dom-popstateevent-initpopstateevent title=dom-PopStateEvent-initPopStateEvent><code>initPopStateEvent()</code></dfn>
   57790   method must initialize the event in a manner analogous to the
   57791   similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   57792 
   57793   <p>The <dfn id=dom-popstateevent-state title=dom-PopStateEvent-state><code>state</code></dfn>
   57794   attribute represents the context information for the event, or null,
   57795   if the state represented is the initial state of the
   57796   <code><a href=#document>Document</a></code>.</p>
   57797 
   57798   </div>
   57799 
   57800   <hr><p>The <dfn id=event-hashchange title=event-hashchange><code>hashchange</code></dfn>
   57801   event is fired when navigating to a <a href=#session-history-entry>session history
   57802   entry</a> whose <a href=#url>URL</a> differs from that of the
   57803   previous one only in the fragment identifier.</p>
   57804 
   57805   <pre class=idl>interface <dfn id=hashchangeevent>HashChangeEvent</dfn> : <a href=#event>Event</a> {
   57806   readonly attribute any <a href=#dom-hashchangeevent-oldurl title=dom-HashChangeEvent-oldURL>oldURL</a>;
   57807   readonly attribute any <a href=#dom-hashchangeevent-newurl title=dom-HashChangeEvent-newURL>newURL</a>;
   57808   void <a href=#dom-hashchangeevent-inithashchangeevent title=dom-HashChangeEvent-initHashChangeEvent>initHashChangeEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString oldURLArg, in DOMString newURLArg);
   57809 };</pre>
   57810 
   57811   <dl class=domintro><dt><var title="">event</var> . <code title=dom-HashChangeEvent-oldURL><a href=#dom-hashchangeevent-oldurl>oldURL</a></code></dt>
   57812 
   57813    <dd>
   57814 
   57815     <p>Returns the <a href=#url>URL</a> of the <a href=#session-history-entry>session history
   57816     entry</a> that was previously current.</p>
   57817 
   57818    </dd>
   57819 
   57820 
   57821    <dt><var title="">event</var> . <code title=dom-HashChangeEvent-newURL><a href=#dom-hashchangeevent-newurl>newURL</a></code></dt>
   57822 
   57823    <dd>
   57824 
   57825     <p>Returns the <a href=#url>URL</a> of the <a href=#session-history-entry>session history
   57826     entry</a> that is now current.</p>
   57827 
   57828    </dd>
   57829 
   57830   </dl><div class=impl>
   57831 
   57832   <p>The <dfn id=dom-hashchangeevent-inithashchangeevent title=dom-HashChangeEvent-initHashChangeEvent><code>initHashChangeEvent()</code></dfn>
   57833   method must initialize the event in a manner analogous to the
   57834   similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   57835 
   57836   <p>The <dfn id=dom-hashchangeevent-oldurl title=dom-HashChangeEvent-oldURL><code>oldURL</code></dfn>
   57837   attribute represents context information for the event, specifically
   57838   the URL of the <a href=#session-history-entry>session history entry</a> that was traversed
   57839   from.</p>
   57840 
   57841   <p>The <dfn id=dom-hashchangeevent-newurl title=dom-HashChangeEvent-newURL><code>newURL</code></dfn>
   57842   attribute represents context information for the event, specifically
   57843   the URL of the <a href=#session-history-entry>session history entry</a> that was traversed
   57844   to.</p>
   57845 
   57846   </div>
   57847 
   57848   <hr><p>The <dfn id=event-pageshow title=event-pageshow><code>pageshow</code></dfn> event
   57849   is fired when traversing <em>to</em> a <a href=#session-history-entry>session history
   57850   entry</a>.</p>
   57851 
   57852   <p>The <dfn id=event-pagehide title=event-pagehide><code>pagehide</code></dfn>
   57853   event is fired when traversing <em>from</em> a <a href=#session-history-entry>session history
   57854   entry</a>.</p>
   57855 
   57856   <pre class=idl>interface <dfn id=pagetransitionevent>PageTransitionEvent</dfn> : <a href=#event>Event</a> {
   57857   readonly attribute any <a href=#dom-pagetransitionevent-persisted title=dom-PageTransitionEvent-persisted>persisted</a>;
   57858   void <a href=#dom-pagetransitionevent-initpagetransitionevent title=dom-PageTransitionEvent-initPageTransitionEvent>initPageTransitionEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any persistedArg);
   57859 };</pre>
   57860 
   57861   <dl class=domintro><dt><var title="">event</var> . <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code></dt>
   57862 
   57863    <dd>
   57864 
   57865     <p>Returns false if the page is newly being loaded (and the <code title=event-load>load</code> event will fire). Otherwise, returns true.</p>
   57866 
   57867    </dd>
   57868 
   57869   </dl><div class=impl>
   57870 
   57871   <p>The <dfn id=dom-pagetransitionevent-initpagetransitionevent title=dom-PageTransitionEvent-initPageTransitionEvent><code>initPageTransitionEvent()</code></dfn>
   57872   method must initialize the event in a manner analogous to the
   57873   similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   57874 
   57875   <p>The <dfn id=dom-pagetransitionevent-persisted title=dom-PageTransitionEvent-persisted><code>persisted</code></dfn>
   57876   attribute represents the context information for the event.</p>
   57877 
   57878   </div>
   57879 
   57880 
   57881 
   57882   <h4 id=unloading-documents><span class=secno>6.5.10 </span>Unloading documents</h4>
   57883 
   57884   <div class=impl>
   57885 
   57886   <p>A <code><a href=#document>Document</a></code> has a <var title=concept-document-salvageable>salvageable</var> state, which
   57887   is initially true.</p>
   57888 
   57889   <p>When a user agent is to <dfn id=prompt-to-unload-a-document>prompt to unload a document</dfn>,
   57890   it must run the following steps.</p>
   57891 
   57892   <ol><li><p>Let <var title="">event</var> be a new
   57893    <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code> event object with the name <code title=event-beforeunload>beforeunload</code>, which does not
   57894    bubble but is cancelable.</li>
   57895 
   57896    <li><p><i>Dispatch</i>: Dispatch <var title="">event</var> at the
   57897    <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</li>
   57898 
   57899    <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>
   57900 
   57901    <li><p>If any event listeners were triggered by the earlier
   57902    <i>dispatch</i> step, then set the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   57903    false.</li>
   57904 
   57905    <li>
   57906 
   57907     <p>If the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   57908     attribute of the <var title="">event</var> object is not the empty
   57909     string, or if the event was canceled, then the user agent should
   57910     ask the user to confirm that they wish to unload the document.</p>
   57911 
   57912     <p>The prompt shown by the user agent may include the string of
   57913     the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   57914     attribute, or some leading subset thereof. (A user agent may want
   57915     to truncate the string to 1024 characters for display, for
   57916     instance.)</p>
   57917 
   57918     <p>The user agent must <a href=#pause>pause</a> while waiting for the
   57919     user's response.</p>
   57920 
   57921     <p>If the user did not confirm the page navigation, then the user
   57922     agent <dfn id=refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</dfn>.</p>
   57923 
   57924    </li>
   57925 
   57926    <li><p>If this algorithm was invoked by another instance of the
   57927    "prompt to unload a document" algorithm (i.e. through the steps
   57928    below that invoke this algorithm for all descendant browsing
   57929    contexts), then abort these steps here.</li>
   57930 
   57931    <li><p>Let <var title="">descendants</var> be the <a href=#list-of-the-descendant-browsing-contexts>list of the
   57932    descendant browsing contexts</a> of the
   57933    <code><a href=#document>Document</a></code>.</li>
   57934 
   57935    <li>
   57936 
   57937     <p>If <var title="">descendants</var> is not an empty list, then
   57938     for each <a href=#browsing-context>browsing context</a> <var title="">b</var> in
   57939     <var title="">descendants</var> run the following substeps:</p>
   57940 
   57941     <ol><li><p><a href=#prompt-to-unload-a-document title="prompt to unload a document">Prompt to
   57942      unload</a> the <a href=#active-document>active document</a> of the
   57943      <a href=#browsing-context>browsing context</a> <var title="">b</var>. If the user
   57944      <a href=#refused-to-allow-the-document-to-be-unloaded>refused to allow the document to be unloaded</a>, then
   57945      the user implicitly also <a href=#refused-to-allow-the-document-to-be-unloaded title="refused to allow the
   57946      document to be unloaded">refused to allow <em>this</em> document
   57947      to be unloaded</a>; abort these steps.</p>
   57948 
   57949      <li><p>If <var title=concept-document-salvageable>salvageable</var> state of
   57950      the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
   57951      context</a> <var title="">b</var> is false, then set the <var title=concept-document-salvageable>salvageable</var> state of
   57952      <em>this</em> document to false also.</li>
   57953 
   57954     </ol></li>
   57955 
   57956   </ol><p>When a user agent is to <dfn id=unload-a-document>unload a document</dfn>, it must run
   57957   the following steps. These steps are passed an argument, <var title="">recycle</var>, which is either true or false, indicating
   57958   whether the <code><a href=#document>Document</a></code> object is going to be
   57959   re-used. (This is set by the <code title=dom-document-open><a href=#dom-document-open>document.open()</a></code> method.)</p>
   57960 
   57961   <ol><li><p>Fire a <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> event at
   57962    the <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, but
   57963    with its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   57964    <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   57965    <code><a href=#window>Window</a></code> object), using the
   57966    <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
   57967    attribute set to true. This event must not bubble, must not be
   57968    cancelable, and has no default action.</li>
   57969 
   57970    <li><p><i>Unload event</i>: <a href=#fire-a-simple-event>Fire a simple event</a> named
   57971    <code title=event-unload>unload</code> at the
   57972    <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</li>
   57973 
   57974    <li><p>Release the <a href=#storage-mutex>storage mutex</a>.</li>
   57975 
   57976    <li><p>If any event listeners were triggered by the earlier
   57977    <i>unload event</i> step, then set the <code><a href=#document>Document</a></code>
   57978    object's <var title=concept-document-salvageable>salvageable</var> state to
   57979    false.</li>
   57980 
   57981    <li><p>Run any <a href=#unloading-document-cleanup-steps>unloading document cleanup steps</a> for
   57982    <code><a href=#document>Document</a></code> that are defined by this specification or any
   57983    other relevant specifications.</li>
   57984 
   57985    <li><p>If this algorithm was invoked by another instance of the
   57986    "unload a document" algorithm (i.e. through the steps below that
   57987    invoke this algorithm for all descendant browsing contexts), then
   57988    abort these steps here.</li>
   57989 
   57990    <li><p>Let <var title="">descendants</var> be the <a href=#list-of-the-descendant-browsing-contexts>list of the
   57991    descendant browsing contexts</a> of the
   57992    <code><a href=#document>Document</a></code>.</li>
   57993 
   57994    <li>
   57995 
   57996     <p>If <var title="">descendants</var> is not an empty list, then
   57997     for each <a href=#browsing-context>browsing context</a> <var title="">b</var> in
   57998     <var title="">descendants</var> run the following substeps:</p>
   57999 
   58000     <ol><li><p><a href=#unload-a-document title="unload a document">Unload</a> the
   58001      <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a>
   58002      <var title="">b</var> with the <var title="">recycle</var>
   58003      parameter set to false.</li>
   58004 
   58005      <li><p>If <var title=concept-document-salvageable>salvageable</var> state of
   58006      the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
   58007      context</a> <var title="">b</var> is false, then set the <var title=concept-document-salvageable>salvageable</var> state of
   58008      <em>this</em> document to false also.</li>
   58009 
   58010     </ol></li>
   58011 
   58012    <li><p>If <var title=concept-document-salvageable>salvageable</var> and <var title="">recycle</var> are both false, then the
   58013    <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> must <a href=#discard-a-document title="discard a document">discard the
   58014    <code>Document</code></a>.</li>
   58015 
   58016   </ol><p>This specification defines the following <dfn id=unloading-document-cleanup-steps>unloading document
   58017   cleanup steps</dfn>. Other specifications can define more.</p>
   58018 
   58019   <ol><li><p>If there are any outstanding transactions that have
   58020    callbacks that involve <a href=#concept-script title=concept-script>scripts</a>
   58021    whose <a href="#script's-global-object" title="script's global object">global object</a> is
   58022    the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object, roll them
   58023    back (without invoking any of the callbacks) and set the
   58024    <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   58025    false. <a href=#refsWEBSQL>[WEBSQL]</a> </li>
   58026 
   58027    <li><p><span>Close the WebSocket connection</span> of any
   58028    <code>WebSocket</code> objects that were created by the <code title=dom-WebSocket>WebSocket()</code> constructor visible on the
   58029    <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object. If this
   58030    affected any <code>WebSocket</code> objects, the set
   58031    <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state to
   58032    false.
   58033    
   58034    <a href=#refsWEBSOCKET>[WEBSOCKET]</a>
   58035    
   58036    </li>
   58037 
   58038    <li><p>If the <code><a href=#document>Document</a></code>'s <var title=concept-document-salvageable>salvageable</var> state is
   58039    false, empty the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code>'s
   58040    <a href=#list-of-active-timeouts>list of active timeouts</a> and its <a href=#list-of-active-intervals>list of active
   58041    intervals</a>.</li>
   58042 
   58043   </ol><h5 id=event-definition><span class=secno>6.5.10.1 </span>Event definition</h5>
   58044 
   58045   </div>
   58046 
   58047   <pre class=idl>interface <dfn id=beforeunloadevent>BeforeUnloadEvent</dfn> : <a href=#event>Event</a> {
   58048            attribute DOMString <a href=#dom-beforeunloadevent-returnvalue title=dom-BeforeUnloadEvent-returnValue>returnValue</a>;
   58049 };</pre>
   58050 
   58051   <dl class=domintro><dt><var title="">event</var> . <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code> [ = <var title="">value</var> ]</dt>
   58052 
   58053    <dd>
   58054 
   58055     <p>Returns the current return value of the event (the message to show the user).</p>
   58056 
   58057     <p>Can be set, to update the message.</p>
   58058 
   58059    </dd>
   58060 
   58061   </dl><p class=note>There are no <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code>-specific
   58062   initialization methods.</p>
   58063 
   58064   <div class=impl>
   58065 
   58066   <p>The <dfn id=dom-beforeunloadevent-returnvalue title=dom-BeforeUnloadEvent-returnValue><code>returnValue</code></dfn>
   58067   attribute represents the message to show the user. When the event is
   58068   created, the attribute must be set to the empty string. On getting,
   58069   it must return the last value it was set to. On setting, the
   58070   attribute must be set to the new value.</p>
   58071 
   58072   </div>
   58073 
   58074 
   58075   <div class=impl>
   58076 
   58077   <h4 id=aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</h4>
   58078 
   58079   <p>If the user cancels any instance of the <a href=#fetch title=fetch>fetching algorithm</a> in the context of a
   58080   <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a>, then, if
   58081   that <code><a href=#document>Document</a></code> is an <a href=#active-document>active document</a>, the
   58082   user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   58083   event</a> named <code title=event-abort>abort</code> at that
   58084   <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object.</p>
   58085 
   58086   <!-- I'd love to make this more precise, anyone have any suggestions
   58087   on what it should say? -->
   58088 
   58089   </div>
   58090 
   58091 
   58092   <h3 id=offline><span class=secno>6.6 </span>Offline Web applications</h3>
   58093 
   58094   <!-- v2 ideas for appcache:
   58095 
   58096      * A way to limit what gets download when the user agent is
   58097        updating the application cache and it turns out the server has
   58098        changed EVERY page because every page has a dynamic "site last
   58099        modified" date on it.
   58100 
   58101        http://groups.google.com/group/gears-users/browse_thread/thread/efbd808325df607a/c73adb34f9b63cf7?hl=en&q=whatwg#c73adb34f9b63cf7
   58102 
   58103 
   58104      * Multiuser appcaches.
   58105 
   58106        If the application code (HTML, JS, CSS) is all the same for two
   58107        users, then appcache works for multiple users by just having
   58108        the data for the users separate from the logic.
   58109 
   58110        This is the expected model for most apps. For example, your
   58111        typical blog has just one set of CSS for all users.
   58112 
   58113        For systems where the user affects what HTML, JS, and CSS is
   58114        served back, the spec as written pretty much requires that
   58115        there be one app per user, and one generic "login" app that
   58116        then redirects to one of those other apps - and where each app
   58117        has a different base URL, separate manifest, etc.
   58118 
   58119        An alternative that we could explore in a future version is to
   58120        have the manifest include a manifest name, and then have script
   58121        that allows you to "activate" a particular manifest name for a
   58122        given appcache.
   58123 
   58124        So each appcache group would be futher subdivided into named
   58125        subgroups, and for a given manifest URL with such a group of
   58126        subgroups, one subgroup would be the default one at a time. The
   58127        inactive ones would just lie dormant, but and the active ones
   58128        would act like now, but there'd be a scripted way to change the
   58129        default (and maybe query what available variants exist for the
   58130        current appcache), so that you could log back in as someone
   58131        else by just making the script pick the other user's variant,
   58132        and then reloading.
   58133 
   58134   -->
   58135 
   58136   <h4 id=introduction-3><span class=secno>6.6.1 </span>Introduction</h4>
   58137 
   58138   <p><i>This section is non-normative.</i></p>
   58139 
   58140   <p>In order to enable users to continue interacting with Web
   58141   applications and documents even when their network connection is
   58142   unavailable &mdash; for instance, because they are traveling outside
   58143   of their ISP's coverage area &mdash; authors can provide a manifest
   58144   which lists the files that are needed for the Web application to
   58145   work offline and which causes the user's browser to keep a copy of
   58146   the files for use offline.</p>
   58147 
   58148   <p>To illustrate this, consider a simple clock applet consisting of
   58149   an HTML page "<code title="">clock.html</code>", a CSS style sheet
   58150   "<code title="">clock.css</code>", and a JavaScript script "<code title="">clock.js</code>".</p>
   58151 
   58152   <p>Before adding the manifest, these three files might look like
   58153   this:</p>
   58154 
   58155   <pre>&lt;!-- clock.html --&gt;
   58156 &lt;!DOCTYPE HTML&gt;
   58157 &lt;html&gt;
   58158  &lt;head&gt;
   58159   &lt;title&gt;Clock&lt;/title&gt;
   58160   &lt;script src="clock.js"&gt;&lt;/script&gt;
   58161   &lt;link rel="stylesheet" href="clock.css"&gt;
   58162  &lt;/head&gt;
   58163  &lt;body&gt;
   58164   &lt;p&gt;The time is: &lt;output id="clock"&gt;&lt;/output&gt;&lt;/p&gt;
   58165  &lt;/body&gt;
   58166 &lt;/html&gt;</pre>
   58167   <pre>/* clock.css */
   58168 output { font: 2em sans-serif; }</pre>
   58169   <pre>/* clock.js */
   58170 setTimeout(function () {
   58171     document.getElementById('clock').value = new Date();
   58172 }, 1000);</pre>
   58173 
   58174   <p>If the user tries to open the "<code title="">clock.html</code>"
   58175   page while offline, though, the user agent (unless it happens to
   58176   have it still in the local cache) will fail with an error.</p>
   58177 
   58178   <p>The author can instead provide a manifest of the three files:</p>
   58179 
   58180   <pre>CACHE MANIFEST
   58181 clock.html
   58182 clock.css
   58183 clock.js</pre>
   58184 
   58185   <p>With a small change to the HTML file, the manifest (served as
   58186   <code><a href=#text/cache-manifest>text/cache-manifest</a></code>) is linked to the application:</p>
   58187 
   58188   <pre>&lt;!-- clock.html --&gt;
   58189 &lt;!DOCTYPE HTML&gt;
   58190 &lt;html manifest="clock.manifest"&gt;
   58191  &lt;head&gt;
   58192   &lt;title&gt;Clock&lt;/title&gt;
   58193   &lt;script src="clock.js"&gt;&lt;/script&gt;
   58194   &lt;link rel="stylesheet" href="clock.css"&gt;
   58195  &lt;/head&gt;
   58196  &lt;body&gt;
   58197   &lt;p&gt;The time is: &lt;output id="clock"&gt;&lt;/output&gt;&lt;/p&gt;
   58198  &lt;/body&gt;
   58199 &lt;/html&gt;</pre>
   58200 
   58201   <p>Now, if the user goes to the page, the browser will cache the
   58202   files and make them available even when the user is offline.</p>
   58203 
   58204   <p class=note>Authors are encouraged to include the main page in
   58205   the manifest also, but in practice the page that referenced the
   58206   manifest is automatically cached even if it isn't explicitly
   58207   mentioned.</p>
   58208 
   58209   <p class=note>HTTP cache headers and restrictions on caching pages
   58210   served over TLS (encrypted, using <code title="">https:</code>) are
   58211   overridden by manifests. Thus, pages will not expire from an
   58212   application cache before the user agent has updated it, and even
   58213   applications served over TLS can be made to work offline.</p>
   58214 
   58215 <!--(doesn't currently function)
   58216   <p><a href="http://www.whatwg.org/demos/offline/clock/clock2.html">View this example online</a>.</p>
   58217 -->
   58218 
   58219   <h5 id=appcacheevents><span class=secno>6.6.1.1 </span>Event summary</h5>
   58220 
   58221   <p><i>This section is non-normative.</i></p>
   58222 
   58223   <p>When the user visits a page that declares a manifest, the browser
   58224   will try to update the cache. It does this by fetching a copy of the
   58225   manifest and, if the manifest has changed since the user agent last
   58226   saw it, redownloading all the resources it mentions and caching them
   58227   anew.</p>
   58228 
   58229   <p>As this is going on, a number of events get fired on the
   58230   <code><a href=#applicationcache>ApplicationCache</a></code> object to keep the script updated as
   58231   to the state of the cache update, so that the user can be notified
   58232   appropriately. The events are as follows:</p>
   58233 
   58234   <table><thead><tr><th> Event name
   58235      <th> Interface
   58236      <th> Dispatched when...
   58237      <th> Next events
   58238    <tbody><tr><td> <dfn id=event-appcache-checking title=event-appcache-checking><code>checking</code></dfn>
   58239      <td> <code><a href=#event>Event</a></code>
   58240      <td> The user agent is checking for an update, or attempting to download the manifest for the first time. <strong>This is always the first event in the sequence.</strong>
   58241      <td> <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code>, <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code>, <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>
   58242     <tr><td> <dfn id=event-appcache-noupdate title=event-appcache-noupdate><code>noupdate</code></dfn>
   58243      <td> <code><a href=#event>Event</a></code>
   58244      <td> The manifest hadn't changed.
   58245      <td> Last event in sequence.
   58246     <tr><td> <dfn id=event-appcache-downloading title=event-appcache-downloading><code>downloading</code></dfn>
   58247      <td> <code><a href=#event>Event</a></code>
   58248      <td> The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.
   58249      <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>, <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>, <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
   58250     <tr><td> <dfn id=event-appcache-progress title=event-appcache-progress><code>progress</code></dfn>
   58251      <td> <code>ProgressEvent</code>
   58252      <td> The user agent is downloading resources listed by the manifest.
   58253      <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>, <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>, <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
   58254     <tr><td> <dfn id=event-appcache-cached title=event-appcache-cached><code>cached</code></dfn>
   58255      <td> <code><a href=#event>Event</a></code>
   58256      <td> The resources listed in the manifest have been downloaded, and the application is now cached.
   58257      <td> Last event in sequence.
   58258     <tr><td> <dfn id=event-appcache-updateready title=event-appcache-updateready><code>updateready</code></dfn>
   58259      <td> <code><a href=#event>Event</a></code>
   58260      <td> The resources listed in the manifest have been newly redownloaded, and the script can use <code title=dom-appcache-swapCache><a href=#dom-appcache-swapcache>swapCache()</a></code> to switch to the new cache.
   58261      <td> Last event in sequence.
   58262     <tr><td> <dfn id=event-appcache-obsolete title=event-appcache-obsolete><code>obsolete</code></dfn>
   58263      <td> <code><a href=#event>Event</a></code>
   58264      <td> The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
   58265      <td> Last event in sequence.
   58266     <tr><td rowspan=4> <dfn id=event-appcache-error title=event-appcache-error><code>error</code></dfn>
   58267      <td rowspan=4> <code><a href=#event>Event</a></code>
   58268      <td> The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.
   58269      <td rowspan=3> Last event in sequence.
   58270     <tr><td> The manifest hadn't changed, but the page referencing the manifest failed to download properly.
   58271     <tr><td> A fatal error occurred while fetching the resources listed in the manifest.
   58272     <tr><td> The manifest changed while the update was being run.
   58273      <td> The user agent will try fetching the files again momentarily.
   58274   </table><div class=impl>
   58275 
   58276   <h4 id=appcache><span class=secno>6.6.2 </span>Application caches</h4>
   58277 
   58278   <p>An <dfn id=application-cache>application cache</dfn> is a set of cached resources
   58279   consisting of:</p>
   58280 
   58281   <ul><li>
   58282 
   58283     <p>One or more resources (including their out-of-band metadata,
   58284     such as HTTP headers, if any), identified by URLs, each falling
   58285     into one (or more) of the following categories:</p>
   58286 
   58287     <dl><dt><dfn id=concept-appcache-master title=concept-appcache-master>Master entries</dfn>
   58288 
   58289      <dd>Documents that were added to the cache because a
   58290      <a href=#browsing-context>browsing context</a> was <a href=#navigate title=navigate>navigated</a> to that document and the
   58291      document indicated that this was its cache, using the <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute.
   58292 
   58293 
   58294      <dt><dfn id=concept-appcache-manifest title=concept-appcache-manifest>The manifest</dfn>
   58295 
   58296      <dd>The resource corresponding to the URL that was given in a
   58297      master entry's <code><a href=#the-html-element-0>html</a></code> element's <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute. The
   58298      manifest is fetched and processed during the <a href=#application-cache-download-process>application
   58299      cache download process</a>. All the <a href=#concept-appcache-master title=concept-appcache-master>master entries</a> have
   58300      the <a href=#same-origin title="same origin">same origin</a> as the manifest.
   58301 
   58302 
   58303      <dt><dfn id=concept-appcache-explicit title=concept-appcache-explicit>Explicit entries</dfn>
   58304 
   58305      <dd>Resources that were listed in the cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> in an <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
   58306      section</a>. Explicit entries can also be marked as <dfn id=concept-appcache-foreign title=concept-appcache-foreign>foreign</dfn>, which means that
   58307      they have a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code>
   58308      attribute but that it doesn't point at this cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>.
   58309 
   58310 
   58311      <dt><dfn id=concept-appcache-fallback title=concept-appcache-fallback>Fallback entries</dfn>
   58312 
   58313      <dd>Resources that were listed in the cache's <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> in a <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback
   58314      section</a>.
   58315 
   58316 
   58317     </dl><p class=note>A URL in the list can be flagged with multiple
   58318     different types, and thus an entry can end up being categorized as
   58319     multiple entries. For example, an entry can be a manifest entry
   58320     and an explicit entry at the same time, if the manifest is listed
   58321     within the manifest.</p>
   58322 
   58323    </li>
   58324 
   58325    <li>Zero or more <dfn id=concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   58326    namespaces</dfn>: URLs, used as <a href=#concept-appcache-matches-fallback title=concept-appcache-matches-fallback>prefix match
   58327    patterns</a>, each of which is mapped to a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>. Each
   58328    namespace URL has the <a href=#same-origin>same origin</a> as <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>.</li>
   58329 
   58330    <li>Zero or more URLs that form the <dfn id=concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   58331    namespaces</dfn>.
   58332 
   58333    <li>An <dfn id=concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   58334    wildcard flag</dfn>, which is either <i title="">open</i> or <i title="">blocking</i>.</li>
   58335 
   58336   </ul><p>Each <a href=#application-cache>application cache</a> has a <dfn id=concept-appcache-completeness title=concept-appcache-completeness>completeness flag</dfn>, which is
   58337   either <i>complete</i> or <i>incomplete</i>.</p>
   58338 
   58339   <hr><p>An <dfn id=application-cache-group>application cache group</dfn> is a group of <a href=#application-cache title="application cache">application caches</a>, identified by
   58340   the <a href=#absolute-url>absolute URL</a> of a resource <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> which is used to
   58341   populate the caches in the group.</p>
   58342 
   58343   <p>An <a href=#application-cache>application cache</a> is <dfn id=concept-appcache-newer title=concept-appcache-newer>newer</dfn> than another if it was
   58344   created after the other (in other words, <a href=#application-cache title="application
   58345   cache">application caches</a> in an <a href=#application-cache-group>application cache
   58346   group</a> have a chronological order).</p>
   58347 
   58348   <p>Only the newest <a href=#application-cache>application cache</a> in an
   58349   <a href=#application-cache-group>application cache group</a> can have its <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> set to
   58350   <i>incomplete</i>; the others are always all <i>complete</i>.</p>
   58351 
   58352   <p>Each <a href=#application-cache-group>application cache group</a> has an <dfn id=concept-appcache-status title=concept-appcache-status>update status</dfn>, which is one of
   58353   the following: <i>idle</i>, <i>checking</i>, <i>downloading</i>.</p>
   58354 
   58355   <p>A <dfn id=relevant-application-cache>relevant application cache</dfn> is an <a href=#application-cache>application
   58356   cache</a> that is the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> in its <a href=#application-cache-group title="application cache group">group</a> to be
   58357   <i>complete</i>.</p>
   58358 
   58359   <p>Each <a href=#application-cache-group>application cache group</a> has a <dfn id=concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   58360   entries</dfn>. Each entry in this list consists of a resource and a
   58361   corresponding <code><a href=#document>Document</a></code> object. It is used during the
   58362   <a href=#application-cache-download-process>application cache download process</a> to ensure that new
   58363   master entries are cached even if the <a href=#application-cache-download-process>application cache
   58364   download process</a> was already running for their
   58365   <a href=#application-cache-group>application cache group</a> when they were loaded.</p>
   58366 
   58367   <p>An <a href=#application-cache-group>application cache group</a> can be marked as <dfn id=concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</dfn>, meaning that it
   58368   must be ignored when looking at what <a href=#application-cache-group title="application cache
   58369   group">application cache groups</a> exist.</p>
   58370 
   58371   <hr><p>A <dfn id=cache-host>cache host</dfn> is a <code><a href=#document>Document</a></code> or a
   58372   <code>SharedWorkerGlobalScope</code> object. A <a href=#cache-host>cache
   58373   host</a> can be associated with an <a href=#application-cache>application
   58374   cache</a>.
   58375   
   58376   <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
   58377   
   58378   </p>
   58379 
   58380   <p>A <code><a href=#document>Document</a></code> initially is not associated with an
   58381   <a href=#application-cache>application cache</a>, but can become associated with one
   58382   early during the page load process, when steps <a href=#parser-appcache>in the parser</a> and in the <a href=#navigate title=navigate>navigation</a> sections cause <a href=#concept-appcache-init title=concept-appcache-init>cache selection</a> to occur.</p>
   58383 
   58384   <p>A <code>SharedWorkerGlobalScope</code> can be associated with an
   58385   <a href=#application-cache>application cache</a> when it is created.
   58386   
   58387   <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
   58388   
   58389   </p>
   58390 
   58391   <p>Each <a href=#cache-host>cache host</a> has an associated
   58392   <code><a href=#applicationcache>ApplicationCache</a></code> object.</p>
   58393 
   58394   <hr><p>Multiple <a href=#application-cache title="application cache">application
   58395   caches</a> in different <a href=#application-cache-group title="application cache
   58396   group">application cache groups</a> can contain the same
   58397   resource, e.g. if the manifests all reference that resource. If the
   58398   user agent is to <dfn id=concept-appcache-selection title=concept-appcache-selection>select an
   58399   application cache</dfn> from a list of <a href=#relevant-application-cache title="relevant
   58400   application cache">relevant application caches</a> that contain a
   58401   resource, the user agent must use the application cache that the
   58402   user most likely wants to see the resource from, taking into account
   58403   the following:</p>
   58404 
   58405   <ul><li>which application cache was most recently updated,
   58406 
   58407    <li>which application cache was being used to display the
   58408    resource from which the user decided to look at the new resource,
   58409    and
   58410 
   58411    <li>which application cache the user prefers.
   58412 
   58413   </ul><hr><p>A URL <dfn id=concept-appcache-matches-fallback title=concept-appcache-matches-fallback>matches a
   58414   fallback namespace</dfn> if there exists a <a href=#relevant-application-cache>relevant
   58415   application cache</a> whose <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>'s URL has the
   58416   <a href=#same-origin>same origin</a> as the URL in question, and that has a
   58417   <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
   58418   that is a <a href=#prefix-match>prefix match</a> for the URL being examined. If
   58419   multiple fallback namespaces match the same URL, the longest one is
   58420   the one that matches. A URL looking for a fallback namespace can
   58421   match more than one application cache at a time, but only matches
   58422   one namespace in each cache.</p>
   58423 
   58424   <div class=example>
   58425 
   58426    <p>If a manifest <code title="">http://example.com/app1/manifest</code> declares that
   58427    <code title="">http://example.com/resources/images</code> is a
   58428    fallback namespace, and the user navigates to <code title="">HTTP://EXAMPLE.COM:80/resources/images/cat.png</code>,
   58429    then the user agent will decide that the application cache
   58430    identified by <code title="">http://example.com/app1/manifest</code> contains a
   58431    namespace with a match for that URL.</p>
   58432 
   58433    <!-- "resolve a url" canonicalises the case for the scheme and host
   58434    and removes the port if it is the default -->
   58435 
   58436   </div>
   58437 
   58438   </div>
   58439 
   58440 
   58441 
   58442   <h4 id=manifests><span class=secno>6.6.3 </span>The cache manifest syntax</h4>
   58443 
   58444 
   58445   <h5 id=a-sample-manifest><span class=secno>6.6.3.1 </span>A sample manifest</h5>
   58446 
   58447   <p><i>This section is non-normative.</i></p>
   58448 
   58449   <p>This example manifest requires two images and a style sheet to be
   58450   cached and whitelists a CGI script.</p>
   58451 
   58452   <pre>CACHE MANIFEST
   58453 # the above line is required
   58454 
   58455 # this is a comment
   58456 # there can be as many of these anywhere in the file
   58457 # they are all ignored
   58458   # comments can have spaces before them
   58459   # but must be alone on the line
   58460 
   58461 # blank lines are ignored too
   58462 
   58463 # these are files that need to be cached they can either be listed
   58464 # first, or a "CACHE:" header could be put before them, as is done
   58465 # lower down.
   58466 images/sound-icon.png
   58467 images/background.png
   58468 # note that each file has to be put on its own line
   58469 
   58470 # here is a file for the online whitelist -- it isn't cached, and
   58471 # references to this file will bypass the cache, always hitting the
   58472 # network (or trying to, if the user is offline).
   58473 NETWORK:
   58474 comm.cgi
   58475 
   58476 # here is another set of files to cache, this time just the CSS file.
   58477 CACHE:
   58478 style/default.css</pre>
   58479 
   58480   <p>It could equally well be written as follows:</p>
   58481 
   58482   <pre>CACHE MANIFEST
   58483 NETWORK:
   58484 comm.cgi
   58485 CACHE:
   58486 style/default.css
   58487 images/sound-icon.png
   58488 images/background.png</pre>
   58489 
   58490   <hr><p>The following manifest defines a catch-all error page that is
   58491   displayed for any page on the site while the user is offline. It
   58492   also specifies that the <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   58493   wildcard flag</a> is <i title="">open</i>, meaning that accesses
   58494   to resources on other sites will not be blocked. (Resources on the
   58495   same site are already not blocked because of the catch-all fallback
   58496   namespace.)</p>
   58497 
   58498   <p>So long as all pages on the site reference this manifest, they
   58499   will get cached locally as they are fetched, so that subsequent hits
   58500   to the same page will load the page immediately from the
   58501   cache. Until the manifest is changed, those pages will not be
   58502   fetched from the server again. When the manifest changes, then all
   58503   the files will be redownloaded.</p>
   58504 
   58505   <p>Subresources, such as style sheets, images, etc, would only be
   58506   cached using the regular HTTP caching semantics, however.</p>
   58507 
   58508   <pre>CACHE MANIFEST
   58509 FALLBACK:
   58510 / /offline.html
   58511 NETWORK:
   58512 *</pre>
   58513 
   58514 
   58515   <h5 id=writing-cache-manifests><span class=secno>6.6.3.2 </span>Writing cache manifests</h5>
   58516 
   58517   <p>Manifests must be served using the
   58518   <code><a href=#text/cache-manifest>text/cache-manifest</a></code> <a href=#mime-type>MIME type</a>. All
   58519   resources served using the <code><a href=#text/cache-manifest>text/cache-manifest</a></code>
   58520   <a href=#mime-type>MIME type</a> must follow the syntax of application cache
   58521   manifests, as described in this section.</p>
   58522 
   58523   <p>An application cache manifest is a text file, whose text is
   58524   encoded using UTF-8. Data in application cache manifests is
   58525   line-based. Newlines must be represented by U+000A LINE FEED (LF)
   58526   characters, U+000D CARRIAGE RETURN (CR) characters, or U+000D
   58527   CARRIAGE RETURN (CR) U+000A LINE FEED (LF) pairs.</p>
   58528 
   58529   <p class=note>This is a <a href=#willful-violation>willful violation</a> of two
   58530   aspects of RFC 2046, which requires all <code title="">text/*</code>
   58531   types to support an open-ended set of character encodings and only
   58532   allows CRLF line breaks. These requirements, however, are outdated;
   58533   UTF-8 is now widely used, such that supporting other encodings is no
   58534   longer necessary, and use of CR, LF, and CRLF line breaks is
   58535   commonly supported and indeed sometimes CRLF is <em>not</em>
   58536   supported by text editors. <a href=#refsRFC2046>[RFC2046]</a></p>
   58537   <!-- also RFC 2045 for charset -->
   58538 
   58539   <p>The first line of an application cache manifest must consist of
   58540   the string "CACHE", a single U+0020 SPACE character, the string
   58541   "MANIFEST", and either a U+0020 SPACE character, a U+0009 CHARACTER
   58542   TABULATION (tab) character, a U+000A LINE FEED (LF) character, or a
   58543   U+000D CARRIAGE RETURN (CR) character. The first line may optionally
   58544   be preceded by a U+FEFF BYTE ORDER MARK (BOM) character. If any
   58545   other text is found on the first line, it is ignored.</p>
   58546 
   58547   <p>Subsequent lines, if any, must all be one of the following:</p>
   58548 
   58549   <dl><dt>A blank line
   58550    <dd>
   58551     <p>Blank lines must consist of zero or more U+0020 SPACE and
   58552     U+0009 CHARACTER TABULATION (tab) characters only.</p>
   58553 
   58554    <dt>A comment
   58555    <dd>
   58556     <p>Comment lines must consist of zero or more U+0020 SPACE and
   58557     U+0009 CHARACTER TABULATION (tab) characters, followed by a single
   58558     U+0023 NUMBER SIGN character (#), followed by zero or more
   58559     characters other than U+000A LINE FEED (LF) and U+000D CARRIAGE
   58560     RETURN (CR) characters.</p>
   58561 
   58562     <p class=note>Comments must be on a line on their own. If they
   58563     were to be included on a line with a URL, the "#" would be
   58564     mistaken for part of a fragment identifier.</p>
   58565 
   58566    <dt>A section header
   58567    <dd>
   58568     <p>Section headers change the current section. There are three
   58569     possible section headers:
   58570 
   58571     <dl><dt><code>CACHE:</code>
   58572      <dd>Switches to the <dfn id=concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</dfn>.
   58573 
   58574      <dt><code>FALLBACK:</code>
   58575      <dd>Switches to the <dfn id=concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback section</dfn>.
   58576 
   58577      <dt><code>NETWORK:</code>
   58578      <dd>Switches to the <dfn id=concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist section</dfn>.
   58579 
   58580     </dl><p>Section header lines must consist of zero or more U+0020 SPACE
   58581     and U+0009 CHARACTER TABULATION (tab) characters, followed by one
   58582     of the names above (including the U+003A COLON character (:))
   58583     followed by zero or more U+0020 SPACE and U+0009 CHARACTER
   58584     TABULATION (tab) characters.</p>
   58585 
   58586     <p>Ironically, by default, the current section is the
   58587     <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</a>.</p>
   58588 
   58589    <dt>Data for the current section
   58590    <dd>
   58591     <p>The format that data lines must take depends on the current
   58592     section.</p>
   58593 
   58594     <p>When the current section is the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
   58595     section</a>, data lines must consist of zero or more U+0020
   58596     SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
   58597     <a href=#valid-url>valid URL</a> identifying a resource other than the
   58598     manifest itself, and then zero or more U+0020 SPACE and U+0009
   58599     CHARACTER TABULATION (tab) characters.</p>
   58600 
   58601     <p>When the current section is the <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback
   58602     section</a>, data lines must consist of zero or more U+0020
   58603     SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
   58604     <a href=#valid-url>valid URL</a> identifying a resource other than the
   58605     manifest itself, one or more U+0020 SPACE and U+0009 CHARACTER
   58606     TABULATION (tab) characters, another <a href=#valid-url>valid URL</a>
   58607     identifying a resource other than the manifest itself, and then
   58608     zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab)
   58609     characters.</p>
   58610 
   58611     <p>When the current section is the <a href=#concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist
   58612     section</a>, data lines must consist of zero or more U+0020
   58613     SPACE and U+0009 CHARACTER TABULATION (tab) characters, either a
   58614     single U+002A ASTERISK character (*) <!--
   58615     concept-appcache-onlinewhitelist-wildcard --> or a <a href=#valid-url>valid
   58616     URL</a> identifying a resource other than the manifest itself,
   58617     and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION
   58618     (tab) characters.</p>
   58619 
   58620 <!--
   58621     <p class="note">The URLs in data lines can't be empty strings,
   58622     since those would be relative URLs to the manifest itself. Such
   58623     lines would be confused with blank or invalid lines, anyway.</p>
   58624 -->
   58625 
   58626   </dl><p>Manifests may contain sections more than once. Sections may be
   58627   empty.</p>
   58628 
   58629   <p>If the manifest's <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a>
   58630   is <code title="">https:</code> or another scheme intended for
   58631   encrypted data transfer, then all URLs in <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit sections</a>
   58632   must have the <a href=#same-origin>same origin</a> as the manifest itself.</p>
   58633 
   58634   <p>URLs that are to be fallback pages associated with <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a>, and
   58635   those namespaces themselves, must be given in <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback sections</a>,
   58636   with the namespace being the first URL of the data line, and the
   58637   corresponding fallback page being the second URL. All the other
   58638   pages to be cached must be listed in <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
   58639   sections</a>.</p>
   58640 
   58641   <p><a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>Fallback
   58642   namespaces</a> and <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> must have
   58643   the <a href=#same-origin>same origin</a> as the manifest itself.</p>
   58644 
   58645   <p>A <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   58646   namespace</a> must not be listed more than once.</p>
   58647 
   58648   <p>Namespaces that the user agent is to put into the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a>
   58649   must all be specified in <a href=#concept-appcache-manifest-network title=concept-appcache-manifest-network>online whitelist
   58650   sections</a>. (This is needed for any URL that the page is
   58651   intending to use to communicate back to the server.) To specify that
   58652   all URLs are automatically whitelisted in this way, a U+002A
   58653   ASTERISK character character (*) may be specified as one of the
   58654   URLs. <!-- concept-appcache-onlinewhitelist-wildcard --></p>
   58655 
   58656   <p>Authors should not include namespaces in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> for
   58657   which another namespace in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> is
   58658   a <a href=#prefix-match>prefix match</a>.</p>
   58659 
   58660   <p>Relative URLs must be given relative to the manifest's own
   58661   URL. All URLs in the manifest must have the same <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> as the manifest itself
   58662   (either explicitly or implicitly, through the use of relative
   58663   URLs).</p>
   58664 
   58665   <p>URLs in manifests must not have fragment identifiers (i.e. the
   58666   U+0023 NUMBER SIGN character isn't allowed in URLs in
   58667   manifests).</p>
   58668 
   58669   <p><a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>Fallback
   58670   namespaces</a> and namespaces in the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> are
   58671   matched by <a href=#prefix-match>prefix match</a>.</p>
   58672 
   58673 
   58674   <div class=impl>
   58675 
   58676   <h5 id=parsing-cache-manifests><span class=secno>6.6.3.3 </span>Parsing cache manifests</h5>
   58677 
   58678   <p>When a user agent is to <dfn id=parse-a-manifest>parse a manifest</dfn>, it means
   58679   that the user agent must run the following steps:</p>
   58680 
   58681   <ol><li><p>The user agent must decode the byte stream corresponding with
   58682    the manifest to be parsed, treating it as UTF-8. Bytes or sequences
   58683    of bytes that are not valid UTF-8 sequences must be interpreted as
   58684    a U+FFFD REPLACEMENT CHARACTER. <!--All U+0000 NULL characters must
   58685    be replaced by U+FFFD REPLACEMENT CHARACTERs. (this isn't black-box
   58686    testable since neither U+0000 nor U+FFFD are valid anywhere in the
   58687    syntax and thus both will be treated the same anyway)--></li>
   58688 
   58689    <li><p>Let <var title="">base URL</var> be the <a href=#absolute-url>absolute
   58690    URL</a> representing the manifest.</li>
   58691 
   58692    <li><p>Let <var title="">explicit URLs</var> be an initially empty
   58693    list of <a href=#absolute-url title="absolute URL">absolute URLs</a> for <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a>.</li>
   58694 
   58695    <li><p>Let <var title="">fallback URLs</var> be an initially empty
   58696    mapping of <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   58697    namespaces</a> to <a href=#absolute-url title="absolute URL">absolute
   58698    URLs</a> for <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
   58699    entries</a>.</li>
   58700 
   58701    <li><p>Let <var title="">online whitelist namespaces</var> be an
   58702    initially empty list of <a href=#absolute-url title="absolute URL">absolute
   58703    URLs</a> for an <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   58704    whitelist</a>.</li>
   58705 
   58706    <li><p>Let <var title="">online whitelist wildcard flag</var> be <i title="">blocking</i>. <!--
   58707    concept-appcache-onlinewhitelist-wildcard --></li>
   58708 
   58709    <li><p>Let <var title="">input</var> be the decoded text of the
   58710    manifest's byte stream.</li>
   58711 
   58712    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the first
   58713    character.</li>
   58714 
   58715    <li><p>If <var title="">position</var> is pointing at a U+FEFF BYTE
   58716    ORDER MARK (BOM) character, then advance <var title="">position</var> to the next character.</li>
   58717 
   58718    <li><p>If the characters starting from <var title="">position</var>
   58719    are "CACHE", followed by a U+0020 SPACE character, followed by
   58720    "MANIFEST", then advance <var title="">position</var> to the next
   58721    character after those. Otherwise, this isn't a cache manifest;
   58722    abort this algorithm with a failure while checking for the magic
   58723    signature.</li>
   58724 
   58725    <li><p>If the character at <var title="">position</var> is neither
   58726    a U+0020 SPACE character, a U+0009 CHARACTER TABULATION (tab)
   58727    character, U+000A LINE FEED (LF) character, nor a U+000D CARRIAGE
   58728    RETURN (CR) character, then this isn't a cache manifest; abort this
   58729    algorithm with a failure while checking for the magic
   58730    signature.</li>
   58731 
   58732    <li><p>This is a cache manifest. The algorithm cannot fail beyond
   58733    this point (though bogus lines can get ignored).</li>
   58734 
   58735    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are
   58736    <em>not</em> U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
   58737    characters, and ignore those characters. (Extra text on the first
   58738    line, after the signature, is ignored.)</li>
   58739 
   58740    <li><p>Let <var title="">mode</var> be "explicit".</li>
   58741 
   58742    <li><p><i>Start of line</i>: If <var title="">position</var> is
   58743    past the end of <var title="">input</var>, then jump to the last
   58744    step. Otherwise, <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that
   58745    are U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), U+0020
   58746    SPACE, or U+0009 CHARACTER TABULATION (tab) characters.</li>
   58747    <!-- strips leading spaces, ignores space-only lines, ignores blank lines -->
   58748 
   58749    <li><p>Now, <a href=#collect-a-sequence-of-characters>collect a sequence of characters</a> that are
   58750    <em>not</em> U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
   58751    characters, and let the result be <var title="">line</var>.</li>
   58752 
   58753    <li><p>Drop any trailing U+0020 SPACE and U+0009 CHARACTER
   58754    TABULATION (tab) characters at the end of <var title="">line</var>.</li>
   58755 
   58756    <li><p>If <var title="">line</var> is the empty string, then jump
   58757    back to the step labeled "start of line".</li>
   58758 
   58759    <li><p>If the first character in <var title="">line</var> is a
   58760    U+0023 NUMBER SIGN character (#), then jump back to the step
   58761    labeled "start of line".</li>
   58762 
   58763    <li><p>If <var title="">line</var> equals "CACHE:" (the word
   58764    "CACHE" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "explicit" and jump back to the step
   58765    labeled "start of line".</li>
   58766 
   58767    <li><p>If <var title="">line</var> equals "FALLBACK:" (the word
   58768    "FALLBACK" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "fallback" and jump back to the step
   58769    labeled "start of line".</li>
   58770 
   58771    <li><p>If <var title="">line</var> equals "NETWORK:" (the word
   58772    "NETWORK" followed by a U+003A COLON character (:)), then set <var title="">mode</var> to "online whitelist" and jump back to the step
   58773    labeled "start of line".</li>
   58774 
   58775    <li><p>If <var title="">line</var> ends with a U+003A COLON
   58776    character (:), then set <var title="">mode</var> to "unknown" and
   58777    jump back to the step labeled "start of line".</li>
   58778 
   58779    <li><p>This is either a data line or it is syntactically
   58780    incorrect.</li>
   58781 
   58782    <li><p>Let <var title="">position</var> be a pointer into <var title="">line</var>, initially pointing at the start of the
   58783    string.</li>
   58784 
   58785    <li><p>Let <var title="">tokens</var> be a list of strings,
   58786    initially empty.</li>
   58787 
   58788    <li>
   58789 
   58790     <p>While <var title="">position</var> doesn't point past the end
   58791     of <var title="">line</var>:</p>
   58792 
   58793     <ol><li><p>Let <var title="">current token</var> be an empty
   58794      string.</li>
   58795 
   58796      <li><p>While <var title="">position</var> doesn't point past the
   58797      end of <var title="">line</var> and the character at <var title="">position</var> is neither a U+0020 SPACE nor a U+0009
   58798      CHARACTER TABULATION (tab) character, add the character at <var title="">position</var> to <var title="">current token</var> and
   58799      advance <var title="">position</var> to the next character in
   58800      <var title="">input</var>.</li>
   58801 
   58802      <li><p>Add <var title="">current token</var> to the <var title="">tokens</var> list.</li>
   58803 
   58804      <li><p>While <var title="">position</var> doesn't point past the
   58805      end of <var title="">line</var> and the character at <var title="">position</var> is either a U+0020 SPACE or a U+0009
   58806      CHARACTER TABULATION (tab) character, advance <var title="">position</var> to the next character in <var title="">input</var>.</li>
   58807 
   58808     </ol></li>
   58809 
   58810    <li>
   58811 
   58812     <p>Process <var title="">tokens</var> as follows:</p>
   58813 
   58814     <dl class=switch><dt>If <var title="">mode</var> is "explicit"</dt>
   58815 
   58816      <dd>
   58817 
   58818       <p><a href=#resolve-a-url title="resolve a url">Resolve</a> the first item in
   58819       <var title="">tokens</var>, relative to <var title="">base
   58820       URL</var>; ignore the rest.</p>
   58821 
   58822       <p>If this fails, then jump back to the step labeled "start of
   58823       line".</p>
   58824 
   58825       <p>If the resulting <a href=#absolute-url>absolute URL</a> has a different
   58826       <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than
   58827       the manifest's URL (compared in an <a href=#ascii-case-insensitive>ASCII
   58828       case-insensitive</a> manner), then jump back to the step
   58829       labeled "start of line". If the manifest's <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> is <code title="">https:</code> or another scheme intended for encrypted
   58830       data transfer, and the resulting <a href=#absolute-url>absolute URL</a> does
   58831       not have the <a href=#same-origin>same origin</a> as the manifest's URL,
   58832       then jump back to the step labeled "start of line".</p>
   58833 
   58834       <p>Drop the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   58835       component of the resulting <a href=#absolute-url>absolute URL</a>, if it has
   58836       one.</p>
   58837 
   58838       <p>Add the resulting <a href=#absolute-url>absolute URL</a> to the <var title="">explicit URLs</var>.</p>
   58839 
   58840      </dd>
   58841 
   58842      <dt>If <var title="">mode</var> is "fallback"</dt>
   58843 
   58844      <dd>
   58845 
   58846       <p>Let <var title="">part one</var> be the first token in <var title="">tokens</var>, and let <var title="">part two</var> be
   58847       the second token in <var title="">tokens</var>.</p>
   58848 
   58849       <p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">part
   58850       one</var> and <var title="">part two</var>, relative to <var title="">base URL</var>.</p>
   58851 
   58852       <p>If either fails, then jump back to the step labeled "start of
   58853       line".</p>
   58854 
   58855       <p>If the <a href=#absolute-url>absolute URL</a> corresponding to either <var title="">part one</var> or <var title="">part two</var> does not
   58856       have the <a href=#same-origin>same origin</a> as the manifest's URL, then
   58857       jump back to the step labeled "start of line".</p> <!-- SECURITY
   58858       -->
   58859 
   58860       <p>Drop any the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> components of the
   58861       resulting <a href=#absolute-url title="absolute URL">absolute URLs</a>.</p>
   58862 
   58863       <p>If the <a href=#absolute-url>absolute URL</a> corresponding to <var title="">part one</var> is already in the <var title="">fallback
   58864       URLs</var> mapping as a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>,
   58865       then jump back to the step labeled "start of line".</p>
   58866 
   58867       <p>Otherwise, add the <a href=#absolute-url>absolute URL</a> corresponding to
   58868       <var title="">part one</var> to the <var title="">fallback
   58869       URLs</var> mapping as a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>,
   58870       mapped to the <a href=#absolute-url>absolute URL</a> corresponding to <var title="">part two</var> as the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>.</p>
   58871 
   58872      </dd>
   58873 
   58874      <dt>If <var title="">mode</var> is "online whitelist"</dt>
   58875 
   58876      <dd>
   58877 
   58878       <p>If the first item in <var title="">tokens</var> is a U+002A
   58879       ASTERISK character (*), then set <var title="">online whitelist
   58880       wildcard flag</var> to <i title="">open</i> and jump back to the
   58881       step labeled "start of line".</p>
   58882 
   58883       <p>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the
   58884       first item in <var title="">tokens</var>, relative to <var title="">base URL</var>; ignore the rest.</p>
   58885 
   58886       <p>If this fails, then jump back to the step labeled "start of
   58887       line".</p>
   58888 
   58889       <p>If the resulting <a href=#absolute-url>absolute URL</a> has a different
   58890       <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than
   58891       the manifest's URL (compared in an <a href=#ascii-case-insensitive>ASCII
   58892       case-insensitive</a> manner), then jump back to the step
   58893       labeled "start of line".</p>
   58894 
   58895       <p>Drop the <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a>
   58896       component of the resulting <a href=#absolute-url>absolute URL</a>, if it has
   58897       one.</p>
   58898 
   58899       <p>Add the resulting <a href=#absolute-url>absolute URL</a> to the <var title="">online whitelist namespaces</var>.</p>
   58900 
   58901      </dd>
   58902 
   58903      <dt>If <var title="">mode</var> is "unknown"</dt>
   58904 
   58905      <dd>
   58906 
   58907       <p>Do nothing. The line is ignored.</p>
   58908 
   58909      </dd>
   58910 
   58911     </dl></li>
   58912 
   58913    <li><p>Jump back to the step labeled "start of line". (That step
   58914    jumps to the next, and last, step when the end of the file is
   58915    reached.)</li>
   58916 
   58917    <li><p>Return the <var title="">explicit URLs</var> list, the <var title="">fallback URLs</var> mapping, the <var title="">online
   58918    whitelist namespaces</var>, and the <var title="">online whitelist
   58919    wildcard flag</var>.</li>
   58920 
   58921   </ol><div class=note>
   58922 
   58923    <p>If a resource is listed in the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit section</a>
   58924    or as a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
   58925    entry</a> in the <a href=#concept-appcache-manifest-fallback title=concept-appcache-manifest-fallback>fallback section</a>,
   58926    the resource will always be taken from the cache, regardless of any
   58927    other matching entries in the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a> or
   58928    <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   58929    namespaces</a>.</p>
   58930 
   58931    <p>When a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   58932    namespace</a> and an <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   58933    namespace</a> overlap, the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist
   58934    namespace</a> has priority.</p>
   58935 
   58936    <p>The <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   58937    wildcard flag</a> is applied last, only for URLs that match
   58938    neither the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   58939    whitelist namespace</a> nor the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a> and
   58940    that are not listed in the <a href=#concept-appcache-manifest-explicit title=concept-appcache-manifest-explicit>explicit
   58941    section</a>.</p>
   58942 
   58943   </div>
   58944 
   58945 
   58946   <h4 id=downloading-or-updating-an-application-cache><span class=secno>6.6.4 </span>Downloading or updating an application cache</h4>
   58947 
   58948   <p>When the user agent is required (by other parts of this
   58949   specification) to start the <dfn id=application-cache-download-process>application cache download
   58950   process</dfn> for an <a href=#absolute-url>absolute URL</a> purported to identify
   58951   a <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, or for an
   58952   <a href=#application-cache-group>application cache group</a>, potentially given a particular
   58953   <a href=#cache-host>cache host</a>, and potentially given a <a href=#concept-appcache-master title=concept-appcache-master>master</a> resource, the user
   58954   agent must run the steps below. These steps are always run
   58955   asynchronously, in parallel with the <a href=#event-loop>event loop</a> <a href=#concept-task title=concept-task>tasks</a>.</p>
   58956 
   58957   <p>Some of these steps have requirements that only apply if the user
   58958   agent <dfn id=shows-caching-progress>shows caching progress</dfn>. Support for this is
   58959   optional. Caching progress UI could consist of a progress bar or
   58960   message panel in the user agent's interface, or an overlay, or
   58961   something else. Certain events fired during the <a href=#application-cache-download-process>application
   58962   cache download process</a> allow the script to override the display
   58963   of such an interface. The goal of this is to allow Web applications
   58964   to provide more seamless update mechanisms, hiding from the user the
   58965   mechanics of the application cache mechanism. User agents may
   58966   display user interfaces independent of this, but are encouraged to
   58967   not show prominent update progress notifications for applications
   58968   that cancel the relevant events.</p>
   58969 
   58970   <p class=note>These events are delayed until after the <code title=event-load>load</code> event has fired.</p>
   58971 
   58972   <p>The <a href=#application-cache-download-process>application cache download process</a> steps are as
   58973   follows:
   58974 
   58975   <ol><li><p>Optionally, wait until the permission to start the
   58976    <a href=#application-cache-download-process>application cache download process</a> has been obtained
   58977    from the user and until the user agent is confident that the
   58978    network is available. This could include doing nothing until the
   58979    user explicitly opts-in to caching the site, or could involve
   58980    prompting the user for permission. The algorithm might never get
   58981    past this point. (This step is particularly intended to be used by
   58982    user agents running on severely space-constrained devices or in
   58983    highly privacy-sensitive environments).</li>
   58984 
   58985    <li>
   58986 
   58987     <p>Atomically, so as to avoid race conditions, perform the
   58988     following substeps:</p>
   58989 
   58990     <ol><li>
   58991 
   58992       <p>Pick the appropriate substeps:</p>
   58993 
   58994       <dl class=switch><dt>If these steps were invoked with an <a href=#absolute-url>absolute
   58995        URL</a> purported to identify a <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a></dt>
   58996 
   58997        <dd>
   58998 
   58999         <p>Let <var title="">manifest URL</var> be that <a href=#absolute-url>absolute
   59000         URL</a>.</p>
   59001 
   59002         <p>If there is no <a href=#application-cache-group>application cache group</a>
   59003         identified by <var title="">manifest URL</var>, then create a
   59004         new <a href=#application-cache-group>application cache group</a> identified by <var title="">manifest URL</var>. Initially, it has no <a href=#application-cache title="application cache">application caches</a>. One will
   59005         be created later in this algorithm.</p>
   59006 
   59007        </dd>
   59008 
   59009 
   59010        <dt>If these steps were invoked with an <a href=#application-cache-group>application cache
   59011        group</a></dt>
   59012 
   59013        <dd>
   59014 
   59015         <p>Let <var title="">manifest URL</var> be the <a href=#absolute-url>absolute
   59016         URL</a> of the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> used to
   59017         identify the <a href=#application-cache-group>application cache group</a> to be
   59018         updated.</p>
   59019 
   59020        </dd>
   59021 
   59022       </dl></li>
   59023 
   59024      <li><p>Let <var title="">cache group</var> be the
   59025      <a href=#application-cache-group>application cache group</a> identified by <var title="">manifest URL</var>.</li>
   59026 
   59027      <li><p>If these steps were invoked with a <a href=#concept-appcache-master title=concept-appcache-master>master</a> resource, then add
   59028      the resource, along with the resource's <code><a href=#document>Document</a></code>, to
   59029      <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59030      entries</a>.</li>
   59031 
   59032      <li><p>If these steps were invoked with a <a href=#cache-host>cache
   59033      host</a>, and the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> is <i>checking</i> or
   59034      <i>downloading</i>, then <a href=#queue-a-post-load-task>queue a post-load task</a> to
   59035      <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> that is
   59036      cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that
   59037      <a href=#cache-host>cache host</a>. The default action of this event must
   59038      be, if the user agent <a href=#shows-caching-progress>shows caching progress</a>, the
   59039      display of some sort of user interface indicating to the user
   59040      that the user agent is checking to see if it can download the
   59041      application.</li>
   59042 
   59043      <li><p>If these steps were invoked with a <a href=#cache-host>cache
   59044      host</a>, and the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> is <i>downloading</i>, then also
   59045      <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
   59046      event</a> named <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code> that is
   59047      cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that
   59048      <a href=#cache-host>cache host</a>. The default action of this event must
   59049      be, if the user agent <a href=#shows-caching-progress>shows caching progress</a>, the
   59050      display of some sort of user interface indicating to the user the
   59051      application is being downloaded.</li>
   59052 
   59053      <li><p>If the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
   59054      of the <var title="">cache group</var> is either <i>checking</i>
   59055      or <i>downloading</i>, then abort this instance of the
   59056      <a href=#application-cache-download-process>application cache download process</a>, as an update is
   59057      already in progress.</li>
   59058 
   59059      <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> to <i>checking</i>.</p>
   59060 
   59061      <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59062      <a href=#application-cache>application cache</a> in <var title="">cache
   59063      group</var>, <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a
   59064      simple event</a> that is cancelable named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> at the
   59065      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59066      host</a>. The default action of these events must be, if the
   59067      user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of
   59068      some sort of user interface indicating to the user that the user
   59069      agent is checking for the availability of updates.</li>
   59070 
   59071     </ol><p class=note>The remainder of the steps run asynchronously.</p>
   59072 
   59073     <p>If <var title="">cache group</var> already has an
   59074     <a href=#application-cache>application cache</a> in it, then this is an <dfn id=concept-appcache-upgrade title=concept-appcache-upgrade>upgrade attempt</dfn>. Otherwise,
   59075     this is a <dfn id=concept-appcache-cache title=concept-appcache-cache>cache
   59076     attempt</dfn>.</p>
   59077 
   59078    </li>
   59079 
   59080    <li><p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   59081    attempt</a>, then this algorithm was invoked with a <a href=#cache-host>cache
   59082    host</a>; <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a
   59083    simple event</a> named <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code> that is cancelable
   59084    at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of that <a href=#cache-host>cache
   59085    host</a>. The default action of this event must be, if the user
   59086    agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort
   59087    of user interface indicating to the user that the user agent is
   59088    checking for the availability of updates.</li>
   59089 
   59090    <li>
   59091 
   59092     <p><i>Fetching the manifest</i>: <a href=#fetch>Fetch</a> the resource
   59093     from <var title="">manifest URL</var>, and let <var title="">manifest</var> be that resource.</p> <!-- http-origin
   59094     privacy sensitive, though it doesn't matter, since this can never
   59095     be cross-origin -->
   59096 
   59097     <p>If the resource is labeled with the <a href=#mime-type>MIME type</a>
   59098     <code><a href=#text/cache-manifest>text/cache-manifest</a></code>, parse <var title="">manifest</var> according to the <a href=#parse-a-manifest title="parse a
   59099     manifest">rules for parsing manifests</a>, obtaining a list of
   59100     <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a>,
   59101     <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a>
   59102     and the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback
   59103     namespaces</a> that map to them, entries for the <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a>,
   59104     and a value for the <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   59105     wildcard flag</a>.</p>
   59106 
   59107    </li>
   59108 
   59109    <li>
   59110 
   59111     <p>If <i>fetching the manifest</i> fails due to a 404 or 410
   59112     response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
   59113     equivalent</a>, then run these substeps:</p>
   59114 
   59115     <ol><li><p>Mark <var title="">cache group</var> as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>. This <var title="">cache group</var> no longer exists for any purpose other
   59116      than the processing of <code><a href=#document>Document</a></code> objects already
   59117      associated with an <a href=#application-cache>application cache</a> in the <var title="">cache group</var>.</li>
   59118 
   59119      <li><p>Let <var title="">task list</var> be an empty list of
   59120      <a href=#concept-task title=concept-task>tasks</a>.</p>
   59121 
   59122      <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59123      <a href=#application-cache>application cache</a> in <var title="">cache
   59124      group</var>, create a <a href=#concept-task title=concept-task>task</a> to
   59125      <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code> that is
   59126      cancelable at the <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
   59127      <a href=#cache-host>cache host</a>, and add it to <var title="">task
   59128      list</var>. The default action of these events must be, if the
   59129      user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of
   59130      some sort of user interface indicating to the user that the
   59131      application is no longer available for offline use.</li>
   59132 
   59133      <li><p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59134      entries</a>, create a <a href=#concept-task title=concept-task>task</a>
   59135      to <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named
   59136      <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> (not <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>!) at the
   59137      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59138      host</a> the <code><a href=#document>Document</a></code> for this entry, if there
   59139      still is one, and add it to <var title="">task list</var>. The
   59140      default action of this event must be, if the user agent
   59141      <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59142      user interface indicating to the user that the user agent failed
   59143      to save the application for offline use.</li>
   59144 
   59145      <li><p>If <var title="">cache group</var> has an
   59146      <a href=#application-cache>application cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   59147      <i>incomplete</i>, then discard that <a href=#application-cache>application
   59148      cache</a>.</p>
   59149 
   59150      <li><p>If appropriate, remove any user interface indicating that
   59151      an update for this cache is in progress.</li>
   59152 
   59153      <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> be <i>idle</i>.</li>
   59154 
   59155      <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   59156      task">queue that task as a post-load task</a>.</li>
   59157 
   59158      <li><p>Abort the <a href=#application-cache-download-process>application cache download
   59159      process</a>.</li>
   59160 
   59161     </ol></li>
   59162 
   59163    <li>
   59164 
   59165     <p>Otherwise, if <i>fetching the manifest</i> fails in some other
   59166     way (e.g. the server returns another 4xx or 5xx response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, or
   59167     there is a DNS error, or the connection times out, or the user
   59168     cancels the download, or the parser for manifests fails when
   59169     checking the magic signature), or if the server returned a
   59170     redirect, or if the resource is labeled with a <a href=#mime-type>MIME
   59171     type</a> other than <code><a href=#text/cache-manifest>text/cache-manifest</a></code>, then run
   59172     the <a href=#cache-failure-steps>cache failure steps</a>.</p>
   59173 
   59174    </li>
   59175 
   59176    <li>
   59177 
   59178     <p>If this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
   59179     attempt</a> and the newly downloaded <var title="">manifest</var> is byte-for-byte identical to the manifest
   59180     found in the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a>
   59181     <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   59182     or the server reported it as "304 Not Modified" <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>, then
   59183     run these substeps:</p>
   59184 
   59185     <ol><li><p>Let <var title="">cache</var> be the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   59186      cache</a> in <var title="">cache group</var>.</li>
   59187 
   59188      <li><p>Let <var title="">task list</var> be an empty list of
   59189      <a href=#concept-task title=concept-task>tasks</a>.</p>
   59190 
   59191      <li>
   59192 
   59193       <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59194       entries</a>, wait for the resource for this entry to have
   59195       either completely downloaded or failed.</p>
   59196 
   59197       <p>If the download failed (e.g. the connection times out, or the
   59198       user cancels the download), then create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a simple
   59199       event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
   59200       <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59201       host</a> the <code><a href=#document>Document</a></code> for this entry, if there
   59202       still is one, and add it to <var title="">task list</var>. The
   59203       default action of this event must be, if the user agent
   59204       <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59205       user interface indicating to the user that the user agent failed
   59206       to save the application for offline use.</p>
   59207 
   59208       <p>Otherwise, associate the <code><a href=#document>Document</a></code> for this entry
   59209       with <var title="">cache</var>; store the resource for this
   59210       entry in <var title="">cache</var>, if it isn't already there,
   59211       and categorize its entry as a <a href=#concept-appcache-master title=concept-appcache-master>master entry</a>. If the
   59212       resource's <a href=#url>URL</a> has a <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component, it must
   59213       be removed from the entry in <var title="">cache</var>
   59214       (application caches never include fragment identifiers).</p>
   59215 
   59216       <p class=note>HTTP caching rules, such as <code title="">Cache-Control: no-store</code>, are ignored for the
   59217       purposes of the <a href=#application-cache-download-process>application cache download
   59218       process</a>.</p>
   59219 
   59220      </li>
   59221 
   59222      <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59223      <a href=#application-cache>application cache</a> in <var title="">cache
   59224      group</var>, create a <a href=#concept-task title=concept-task>task</a> to
   59225      <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code> at the
   59226      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59227      host</a>, and add it to <var title="">task list</var>. The
   59228      default action of these events must be, if the user agent
   59229      <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59230      user interface indicating to the user that the application is up
   59231      to date.</li>
   59232 
   59233      <li><p>Empty <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59234      entries</a>.</li>
   59235 
   59236      <li><p>If appropriate, remove any user interface indicating that
   59237      an update for this cache is in progress.</li>
   59238 
   59239      <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a> of <var title="">cache group</var> be <i>idle</i>.</li>
   59240 
   59241      <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   59242      task">queue that task as a post-load task</a>.</li>
   59243 
   59244      <li><p>Abort the <a href=#application-cache-download-process>application cache download
   59245      process</a>.</li>
   59246 
   59247     </ol></li>
   59248 
   59249    <li><p>Let <var title="">new cache</var> be a newly created
   59250    <a href=#application-cache>application cache</a> in <var title="">cache
   59251    group</var>. Set its <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> to
   59252    <i>incomplete</i>.</li>
   59253 
   59254    <li><p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59255    entries</a>, associate the <code><a href=#document>Document</a></code> for this entry
   59256    with <var title="">new cache</var>.</li>
   59257 
   59258    <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
   59259    of <var title="">cache group</var> to <i>downloading</i>.</li>
   59260 
   59261    <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59262    <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   59263    <a href=#queue-a-post-load-task>queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
   59264    event</a> that is cancelable named <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code> at the
   59265    <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59266    host</a>. The default action of these events must be, if the
   59267    user agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some
   59268    sort of user interface indicating to the user that a new version is
   59269    being downloaded.</li>
   59270 
   59271    <li><p>Let <var title="">file list</var> be an empty list of
   59272    URLs with flags.</li>
   59273 
   59274    <li><p>Add all the URLs in the list of <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit entries</a> obtained
   59275    by parsing <var title="">manifest</var> to <var title="">file
   59276    list</var>, each flagged with "explicit entry".</li>
   59277 
   59278    <li><p>Add all the URLs in the list of <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> obtained
   59279    by parsing <var title="">manifest</var> to <var title="">file
   59280    list</var>, each flagged with "fallback entry".</li>
   59281 
   59282    <li><p>If this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
   59283    attempt</a>, then add all the URLs of <a href=#concept-appcache-master title=concept-appcache-master>master entries</a> in the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   59284    cache</a> in <var title="">cache group</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   59285    <i>complete</i> to <var title="">file list</var>, each flagged with
   59286    "master entry".</li>
   59287 
   59288    <li><p>If any URL is in <var title="">file list</var> more than
   59289    once, then merge the entries into one entry for that URL, that
   59290    entry having all the flags that the original entries had.</li>
   59291 
   59292    <li>
   59293 
   59294     <p>For each URL in <var title="">file list</var>, run the
   59295     following steps. These steps may be run in parallel for two or
   59296     more of the URLs at a time.</p>
   59297 
   59298     <ol><li>
   59299 
   59300       <p>If the resource URL being processed was flagged as neither an
   59301       "explicit entry" nor or a "fallback entry", then the user agent
   59302       may skip this URL.</p>
   59303 
   59304       <p class=note>This is intended to allow user agents to expire
   59305       resources not listed in the manifest from the cache. Generally,
   59306       implementors are urged to use an approach that expires
   59307       lesser-used resources first.</p>
   59308 
   59309      </li>
   59310 
   59311      <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59312      <a href=#application-cache>application cache</a> in <var title="">cache
   59313      group</var>, <a href=#queue-a-post-load-task>queue a post-load task</a> to fire an event
   59314      with the name <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, which does not
   59315      bubble, which is cancelable, and which uses the
   59316      <code>ProgressEvent</code> interface, at the
   59317      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59318      host</a>. The <code title=dom-ProgressEvents-lengthComputable>lengthComputable</code>
   59319      attribute must be set to true, the <code title=dom-ProgressEvents-total>total</code> attribute must be
   59320      set to the number of files in <var title="">file list</var>, and
   59321      the <code title=dom-ProgressEvents-loaded>loaded</code>
   59322      attribute must be set to the number of number of files in <var title="">file list</var> that have been either downloaded or
   59323      skipped so far. The default action of these events must be, if
   59324      the user agent <a href=#shows-caching-progress>shows caching progress</a>, the display
   59325      of some sort of user interface indicating to the user that a file
   59326      is being downloaded in preparation for updating the
   59327      application. <a href=#refsPROGRESS>[PROGRESS]</a></li>
   59328 
   59329      <li>
   59330 
   59331       <p><a href=#fetch>Fetch</a> the resource, from the <a href=#origin>origin</a>
   59332       of the <a href=#url>URL</a> <var title="">manifest URL</var>. If
   59333       this is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade
   59334       attempt</a>, then use the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   59335       cache</a> in <var title="">cache group</var> as an HTTP
   59336       cache, and honor HTTP caching semantics (such as expiration,
   59337       ETags, and so forth) with respect to that cache. User agents may
   59338       also have other caches in place that are also honored.</p> <!--
   59339       not http-origin privacy sensitive -->
   59340 
   59341       <p class=note>If the resource in question is already being
   59342       downloaded for other reasons then the existing download process
   59343       can sometimes be used for the purposes of this step, as defined
   59344       by the <a href=#fetch title=fetch>fetching</a> algorithm.</p>
   59345 
   59346       <p class=example>An example of a resource that might already
   59347       be being downloaded is a large image on a Web page that is being
   59348       seen for the first time. The image would get downloaded to
   59349       satisfy the <code><a href=#the-img-element>img</a></code> element on the page, as well as
   59350       being listed in the cache manifest. According to the rules for
   59351       <a href=#fetch title=fetch>fetching</a> that image only need be
   59352       downloaded once, and it can be used both for the cache and for
   59353       the rendered Web page.</p>
   59354 
   59355      </li>
   59356 
   59357      <li>
   59358 
   59359       <p>If the previous step fails (e.g. the server returns a 4xx or
   59360       5xx response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or
   59361       equivalent</a>, or there is a DNS error, or the connection
   59362       times out, or the user cancels the download), or if the server
   59363       returned a redirect, then run the first appropriate step from
   59364       the following list:</p>
   59365 
   59366       <dl class=switch><dt>If the URL being processed was flagged as an "explicit
   59367        entry" or a "fallback entry"</dt>
   59368 
   59369        <dd>
   59370 
   59371         <p>Run the <a href=#cache-failure-steps>cache failure steps</a>.</p>
   59372 
   59373         <p class=note>Redirects are fatal because they are either
   59374         indicative of a network problem (e.g. a captive portal); or
   59375         would allow resources to be added to the cache under URLs that
   59376         differ from any URL that the networking model will allow
   59377         access to, leaving orphan entries; or would allow resources to
   59378         be stored under URLs different than their true URLs. All of
   59379         these situations are bad.</p>
   59380 
   59381        </dd>
   59382 
   59383        <dt>If the error was a 404 or 410 HTTP response <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a></dt>
   59384 
   59385        <dd>
   59386 
   59387         <p>Skip this resource. It is dropped from the cache.</p>
   59388 
   59389        </dd>
   59390 
   59391        <dt>Otherwise</dt>
   59392 
   59393        <dd>
   59394 
   59395         <p>Copy the resource and its metadata from the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   59396         cache</a> in <var title="">cache group</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a>
   59397         is <i>complete</i>, and act as if that was the fetched
   59398         resource, ignoring the resource obtained from the network.</p>
   59399 
   59400        </dd>
   59401 
   59402       </dl><p>User agents may warn the user of these errors as an aid to
   59403       development.</p>
   59404 
   59405       <p class=note>These rules make errors for resources listed in
   59406       the manifest fatal, while making it possible for other resources
   59407       to be removed from caches when they are removed from the server,
   59408       without errors, and making non-manifest resources survive
   59409       server-side errors.</p>
   59410 
   59411      </li>
   59412 
   59413      <li><p>Otherwise, the fetching succeeded. Store the resource in
   59414      the <var title="">new cache</var>.</li>
   59415 
   59416      <li><p>If the URL being processed was flagged as an "explicit
   59417      entry" in <var title="">file list</var>, then categorize the
   59418      entry as an <a href=#concept-appcache-explicit title=concept-appcache-explicit>explicit
   59419      entry</a>.</li>
   59420 
   59421      <li><p>If the URL being processed was flagged as a "fallback
   59422      entry" in <var title="">file list</var>, then categorize the
   59423      entry as a <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback
   59424      entry</a>.</li>
   59425 
   59426      <li><p>If the URL being processed was flagged as an "master
   59427      entry" in <var title="">file list</var>, then categorize the
   59428      entry as a <a href=#concept-appcache-master title=concept-appcache-master>master
   59429      entry</a>.</li>
   59430 
   59431      <li><p>As an optimization, if the resource is an HTML or XML file
   59432      whose root element is an <code><a href=#the-html-element-0>html</a></code> element with a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute whose value
   59433      doesn't match the manifest URL of the application cache being
   59434      processed, then the user agent should mark the entry as being
   59435      <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>.</p>
   59436 
   59437     </ol></li>
   59438 
   59439    <li><p>For each <a href=#cache-host>cache host</a> associated with an
   59440    <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   59441    <a href=#queue-a-post-load-task>queue a post-load task</a> to fire an event with the name
   59442    <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>, which does
   59443    not bubble, which is cancelable, and which uses the
   59444    <code>ProgressEvent</code> interface, at the
   59445    <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59446    host</a>. The <code title=dom-ProgressEvents-lengthComputable>lengthComputable</code>
   59447    attribute must be set to true, the <code title=dom-ProgressEvents-total>total</code> and the <code title=dom-ProgressEvents-loaded>loaded</code> attributes must be
   59448    set to the number of number of files in <var title="">file
   59449    list</var>. The default action of these events must be, if the user
   59450    agent <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort
   59451    of user interface indicating to the user that all the files have
   59452    been downloaded. <a href=#refsPROGRESS>[PROGRESS]</a></li>
   59453 
   59454    <li><p>Store the list of <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespaces</a>,
   59455    and the URLs of the <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entries</a> that they
   59456    map to, in <var title="">new cache</var>.</li>
   59457 
   59458    <li><p>Store the URLs that form the new <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online whitelist</a> in
   59459    <var title="">new cache</var>.</li>
   59460 
   59461    <li><p>Store the value of the new <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   59462    wildcard flag</a> in <var title="">new cache</var>.</li>
   59463 
   59464    <li>
   59465 
   59466     <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59467     entries</a>, wait for the resource for this entry to have
   59468     either completely downloaded or failed.</p>
   59469 
   59470     <p>If the download failed (e.g. the connection times out, or the
   59471     user cancels the download), then run these substeps:</p>
   59472 
   59473     <ol><li><p>Unassociate the <code><a href=#document>Document</a></code> for this entry from
   59474      <var title="">new cache</var>.</li>
   59475 
   59476      <li><p><a href=#queue-a-post-load-task>Queue a post-load task</a> to <a href=#fire-a-simple-event>fire a simple
   59477      event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
   59478      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
   59479      <code><a href=#document>Document</a></code> for this entry, if there still is one. The
   59480      default action of this event must be, if the user agent
   59481      <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59482      user interface indicating to the user that the user agent failed
   59483      to save the application for offline use.</p>
   59484 
   59485      <li>
   59486 
   59487       <p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   59488       attempt</a> and this entry is the last entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59489       entries</a>, then run these further substeps:</p>
   59490 
   59491       <ol><li><p>Discard <var title="">cache group</var> and its only
   59492        <a href=#application-cache>application cache</a>, <var title="">new
   59493        cache</var>.</p>
   59494 
   59495        <li><p>If appropriate, remove any user interface indicating
   59496        that an update for this cache is in progress.</li>
   59497 
   59498        <li><p>Abort the <a href=#application-cache-download-process>application cache download
   59499        process</a>.</li>
   59500 
   59501       </ol></li>
   59502 
   59503      <li><p>Otherwise, remove this entry from <var title="">cache
   59504      group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list
   59505      of pending master entries</a>.</li>
   59506 
   59507     </ol><p>Otherwise, store the resource for this entry in <var title="">new cache</var>, if it isn't already there, and
   59508     categorize its entry as a <a href=#concept-appcache-master title=concept-appcache-master>master entry</a>.</p>
   59509 
   59510    </li>
   59511 
   59512    <li>
   59513 
   59514     <p><a href=#fetch>Fetch</a> the resource from <var title="">manifest
   59515     URL</var> again, and let <var title="">second manifest</var> be
   59516     that resource.</p> <!-- http-origin privacy sensitive, though it
   59517     doesn't matter, since this can never be cross-origin -->
   59518 
   59519    </li>
   59520 
   59521    <li>
   59522 
   59523     <p>If the previous step failed for any reason, or if the fetching
   59524     attempt involved a redirect, or if <var title="">second
   59525     manifest</var> and <var title="">manifest</var> are not
   59526     byte-for-byte identical, then schedule a rerun of the entire
   59527     algorithm with the same parameters after a short delay, and run
   59528     the <a href=#cache-failure-steps>cache failure steps</a>.</p>
   59529 
   59530    </li>
   59531 
   59532    <li>
   59533 
   59534     <p>Otherwise, store <var title="">manifest</var> in <var title="">new cache</var>, if it's not there already, and
   59535     categorize its entry as <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>.</p>
   59536 
   59537    </li>
   59538 
   59539    <li><p>Set the <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> of
   59540    <var title="">new cache</var> to <i>complete</i>.</li>
   59541 
   59542    <li><p>Let <var title="">task list</var> be an empty list of <a href=#concept-task title=concept-task>tasks</a>.</p>
   59543 
   59544    <li>
   59545 
   59546     <p>If this is a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   59547     attempt</a>, then for each <a href=#cache-host>cache host</a> associated
   59548     with an <a href=#application-cache>application cache</a> in <var title="">cache
   59549     group</var>, create a <a href=#concept-task title=concept-task>task</a> to
   59550     <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code> at the
   59551     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59552     host</a>, and add it to <var title="">task list</var>. The
   59553     default action of these events must be, if the user agent
   59554     <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59555     user interface indicating to the user that the application has
   59556     been cached and that they can now use it offline.</p>
   59557 
   59558     <p>Otherwise, it is an <a href=#concept-appcache-upgrade title=concept-appcache-upgrade>upgrade attempt</a>. For each
   59559     <a href=#cache-host>cache host</a> associated with an <a href=#application-cache>application
   59560     cache</a> in <var title="">cache group</var>, create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a simple
   59561     event</a> that is cancelable named <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code> at the
   59562     <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59563     host</a>, and add it to <var title="">task list</var>. The
   59564     default action of these events must be, if the user agent
   59565     <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59566     user interface indicating to the user that a new version is
   59567     available and that they can activate it by reloading the page.</p>
   59568 
   59569    </li>
   59570 
   59571    <li><p>If appropriate, remove any user interface indicating that
   59572    an update for this cache is in progress.</li>
   59573 
   59574    <li><p>Set the <a href=#concept-appcache-status title=concept-appcache-status>update
   59575    status</a> of <var title="">cache group</var> to
   59576    <i>idle</i>.</li>
   59577 
   59578    <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   59579    task">queue that task as a post-oad task</a>.</li>
   59580 
   59581   </ol><p>The <dfn id=cache-failure-steps>cache failure steps</dfn> are as follows:</p>
   59582 
   59583   <ol><li><p>Let <var title="">task list</var> be an empty list of <a href=#concept-task title=concept-task>tasks</a>.</p>
   59584 
   59585    <li>
   59586 
   59587     <p>For each entry in <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59588     entries</a>, run the following further substeps. These steps
   59589     may be run in parallel for two or more entries at a time.</p>
   59590 
   59591     <ol><li><p>Wait for the resource for this entry to have either
   59592      completely downloaded or failed.</p>
   59593 
   59594      <li><p>Unassociate the <code><a href=#document>Document</a></code> for this entry from
   59595      its <a href=#application-cache>application cache</a>, if it has one.</li>
   59596 
   59597      <li><p>Create a <a href=#concept-task title=concept-task>task</a> to
   59598      <a href=#fire-a-simple-event>fire a simple event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
   59599      <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the
   59600      <code><a href=#document>Document</a></code> for this entry, if there still is one, and
   59601      add it to <var title="">task list</var>. The default action of
   59602      these events must be, if the user agent <a href=#shows-caching-progress>shows caching
   59603      progress</a>, the display of some sort of user interface
   59604      indicating to the user that the user agent failed to save the
   59605      application for offline use.</p>
   59606 
   59607     </ol></li>
   59608 
   59609    <li><p>For each <a href=#cache-host>cache host</a> still associated with an
   59610    <a href=#application-cache>application cache</a> in <var title="">cache group</var>,
   59611    create a <a href=#concept-task title=concept-task>task</a> to <a href=#fire-a-simple-event>fire a
   59612    simple event</a> that is cancelable named <code title=event-appcache-error><a href=#event-appcache-error>error</a></code> at the
   59613    <code><a href=#applicationcache>ApplicationCache</a></code> singleton of the <a href=#cache-host>cache
   59614    host</a>, and add it to <var title="">task list</var>. The
   59615    default action of these events must be, if the user agent
   59616    <a href=#shows-caching-progress>shows caching progress</a>, the display of some sort of
   59617    user interface indicating to the user that the user agent failed to
   59618    save the application for offline use.</li>
   59619 
   59620    <li><p>Empty <var title="">cache group</var>'s <a href=#concept-appcache-pending-masters title=concept-appcache-pending-masters>list of pending master
   59621    entries</a>.</li>
   59622 
   59623    <li><p>If <var title="">cache group</var> has an <a href=#application-cache>application
   59624    cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   59625    <i>incomplete</i>, then discard that <a href=#application-cache>application
   59626    cache</a>.</p>
   59627 
   59628    <li><p>If appropriate, remove any user interface indicating that an
   59629    update for this cache is in progress.</li>
   59630 
   59631    <li><p>Let the <a href=#concept-appcache-status title=concept-appcache-status>status</a>
   59632    of <var title="">cache group</var> be <i>idle</i>.</li>
   59633 
   59634    <li><p>If this was a <a href=#concept-appcache-cache title=concept-appcache-cache>cache
   59635    attempt</a>, discard <var title="">cache group</var>
   59636    altogether.</p>
   59637 
   59638    <li><p>For each <a href=#concept-task title=concept-task>task</a> in <var title="">task list</var>, <a href=#queue-a-post-load-task title="queue a post-load
   59639    task">queue that task as a post-load task</a>.</li>
   59640 
   59641    <li><p>Abort the <a href=#application-cache-download-process>application cache download
   59642    process</a>.</li>
   59643 
   59644   </ol><p>Attempts to <a href=#fetch>fetch</a> resources as part of the
   59645   <a href=#application-cache-download-process>application cache download process</a> may be done with
   59646   cache-defeating semantics, to avoid problems with stale or
   59647   inconsistent intermediary caches.</p>
   59648 
   59649   <hr><p>User agents may invoke the <a href=#application-cache-download-process>application cache download
   59650   process</a>, in the background, for any <a href=#application-cache>application
   59651   cache</a>, at any time (with no <a href=#cache-host>cache host</a>). This
   59652   allows user agents to keep caches primed and to update caches even
   59653   before the user visits a site.</p>
   59654 
   59655   <hr><p>Each <code><a href=#document>Document</a></code> has a list of <dfn id=pending-application-cache-download-process-tasks>pending application
   59656   cache download process tasks</dfn> that is used to delay events
   59657   fired by the algorithm above until the document's <code title=event-load>load</code> event has fired. When the
   59658   <code><a href=#document>Document</a></code> is created, the list must be empty.</p>
   59659 
   59660   <p>When the steps above say to <dfn id=queue-a-post-load-task>queue a post-load task</dfn>
   59661   <var title="">task</var>, where <var title="">task</var> is a <a href=#concept-task title=concept-task>task</a> that dispatches an event on a
   59662   target <code><a href=#applicationcache>ApplicationCache</a></code> object <var title="">target</var>, the user agent must run the appropriate steps
   59663   from the following list:</p>
   59664 
   59665   <dl><dt>If <var title="">target</var>'s <code><a href=#document>Document</a></code> has
   59666    <a href=#completely-loaded>completely loaded</a></dt>
   59667 
   59668    <dd><p><a href=#queue-a-task title="queue a task">Queue</a> the task <var title="">task</var>.</dd>
   59669 
   59670    <dt>Otherwise</dt>
   59671 
   59672    <dd><p>Add <var title="">task</var> to <var title="">target</var>'s
   59673    <code><a href=#document>Document</a></code>'s list of <a href=#pending-application-cache-download-process-tasks>pending application cache
   59674    download process tasks</a>.</dd>
   59675 
   59676   </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#networking-task-source>networking task
   59677   source</a>.</p>
   59678 
   59679 
   59680 
   59681 
   59682   <h4 id=the-application-cache-selection-algorithm><span class=secno>6.6.5 </span>The application cache selection algorithm</h4>
   59683 
   59684   <p>When the <dfn id=concept-appcache-init title=concept-appcache-init>application cache
   59685   selection algorithm</dfn> algorithm is invoked with a
   59686   <code><a href=#document>Document</a></code> <var title="">document</var> and optionally a
   59687   manifest <a href=#url>URL</a> <var title="">manifest URL</var>, the user
   59688   agent must run the first applicable set of steps from the following
   59689   list:</p>
   59690 
   59691   <dl class=switch><dt>If there is a <var title="">manifest URL</var>, and <var title="">document</var> was loaded from an <a href=#application-cache>application
   59692    cache</a>, and the URL of the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> of that cache's
   59693    <a href=#application-cache-group>application cache group</a> is <em>not</em> the same as
   59694    <var title="">manifest URL</var></dt>
   59695 
   59696    <dd>
   59697 
   59698     <p>Mark the entry for the resource from which <var title="">document</var> was taken in the <a href=#application-cache>application
   59699     cache</a> from which it was loaded as <a href=#concept-appcache-foreign title=concept-appcache-foreign>foreign</a>.</p>
   59700 
   59701     <p>Restart the current navigation from the top of the <a href=#navigate title=navigate>navigation algorithm</a>, undoing any changes
   59702     that were made as part of the initial load (changes can be avoided
   59703     by ensuring that the step to <a href=#update-the-session-history-with-the-new-page>update the session history with
   59704     the new page</a> is only ever completed <em>after</em> this
   59705     <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
   59706     algorithm</a> is run, though this is not required).</p>
   59707 
   59708     <p class=note>The navigation will not result in the same
   59709     resource being loaded, because "foreign" entries are never picked
   59710     during navigation.</p>
   59711 
   59712     <p>User agents may notify the user of the inconsistency between
   59713     the cache manifest and the document's own metadata, to aid in
   59714     application development.</p>
   59715 
   59716    </dd>
   59717 
   59718 
   59719    <dt>If <var title="">document</var> was loaded from an
   59720    <a href=#application-cache>application cache</a><!--[redundant], and either there is
   59721    no <var title="">manifest URL</var>, or the URL of the <span
   59722    title="concept-appcache-manifest">manifest</span> of the cache's
   59723    <span>application cache group</span> is the same as <var
   59724    title="">manifest URL</var>--></dt>
   59725 
   59726    <dd>
   59727 
   59728     <p>Associate <var title="">document</var> with the
   59729     <a href=#application-cache>application cache</a> from which it was loaded. Invoke,
   59730     in the background, the <a href=#application-cache-download-process>application cache download
   59731     process</a> for that <a href=#application-cache>application cache</a>'s
   59732     <a href=#application-cache-group>application cache group</a>, with <var title="">document</var> as the <a href=#cache-host>cache host</a>.</p>
   59733 
   59734    </dd>
   59735 
   59736 
   59737    <dt>If <var title="">document</var> <!--[redundant] was not loaded
   59738    from an <span>application cache</span>, but it--> was loaded using
   59739    HTTP GET <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   59740    equivalent</a>, and, there is a <var title="">manifest
   59741    URL</var>, and <var title="">manifest URL</var> has the <a href=#same-origin>same
   59742    origin</a> as <var title="">document</var></dt>
   59743 
   59744    <dd>
   59745 
   59746     <p>Invoke, in the background, the <a href=#application-cache-download-process>application cache download
   59747     process</a> for <var title="">manifest URL</var>, with <var title="">document</var> as the <a href=#cache-host>cache host</a> and with
   59748     the resource from which <var title="">document</var> was parsed as
   59749     the <a href=#concept-appcache-master title=concept-appcache-master>master</a>
   59750     resource.</p>
   59751 
   59752    </dd>
   59753 
   59754 
   59755    <dt>Otherwise</dt> <!-- not from cache and either no <var
   59756    title="">manifest URL</var>, or non-GET, or wrong-origin manifest -->
   59757 
   59758    <dd>
   59759 
   59760     <p>The <code><a href=#document>Document</a></code> is not associated with any
   59761     <a href=#application-cache>application cache</a>.</p>
   59762 
   59763     <p>If there was a <var title="">manifest URL</var>, the user agent
   59764     may report to the user that it was ignored, to aid in application
   59765     development.</p>
   59766 
   59767    </dd>
   59768 
   59769   </dl><h4 id=changesToNetworkingModel><span class=secno>6.6.6 </span>Changes to the networking model</h4>
   59770 
   59771   <p>When a <a href=#cache-host>cache host</a> is associated with an
   59772   <a href=#application-cache>application cache</a> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   59773   <i>complete</i>, any and all loads for resources related to that
   59774   <a href=#cache-host>cache host</a> other than those for <a href=#child-browsing-context title="child
   59775   browsing context">child browsing contexts</a> must go through the
   59776   following steps instead of immediately invoking the mechanisms
   59777   appropriate to that resource's scheme:</p>
   59778 
   59779   <ol><li><p>If the resource is not to be fetched using the HTTP GET
   59780    mechanism <a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   59781    equivalent</a>, or if its <a href=#url>URL</a> has a different <a href=#url-scheme title=url-scheme>&lt;scheme&gt;</a> component than the
   59782    <a href=#application-cache>application cache</a>'s <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a>, then
   59783    <a href=#fetch>fetch</a> the resource normally and abort these
   59784    steps.</li>
   59785 
   59786    <li><p>If the resource's URL is <a href=#concept-appcache-master title=concept-appcache-master>a master entry</a>, <a href=#concept-appcache-manifest title=concept-appcache-manifest>the manifest</a>, <a href=#concept-appcache-explicit title=concept-appcache-explicit>an explicit entry</a>, or
   59787    <a href=#concept-appcache-fallback title=concept-appcache-fallback>a fallback entry</a> in
   59788    the <a href=#application-cache>application cache</a>, then get the resource from the
   59789    cache (instead of fetching it), and abort these steps.</li>
   59790 
   59791    <li><p>If there is an entry in the <a href=#application-cache>application cache</a>'s
   59792    <a href=#concept-appcache-onlinewhitelist title=concept-appcache-onlinewhitelist>online
   59793    whitelist</a> that has the <a href=#same-origin>same origin</a> as the
   59794    resource's URL and that is a <a href=#prefix-match>prefix match</a> for the
   59795    resource's URL, then <a href=#fetch>fetch</a> the resource normally and
   59796    abort these steps.</li>
   59797 
   59798    <li>
   59799 
   59800     <p>If the resource's URL has the <a href=#same-origin>same origin</a> as the
   59801     manifest's URL, and there is a <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
   59802     <var title="">f</var> in the <a href=#application-cache>application cache</a> that
   59803     is a <a href=#prefix-match>prefix match</a> for the resource's URL, then:</p>
   59804 
   59805     <p><a href=#fetch>Fetch</a> the resource normally. If this results in a
   59806     redirect to a resource with another <a href=#origin>origin</a>
   59807     (indicative of a captive portal), or a 4xx or 5xx status code
   59808     <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>,
   59809     or if there were network errors (but not if the user canceled the
   59810     download), then instead get, from the cache, the resource of the
   59811     <a href=#concept-appcache-fallback title=concept-appcache-fallback>fallback entry</a>
   59812     corresponding to the <a href=#concept-appcache-fallback-ns title=concept-appcache-fallback-ns>fallback namespace</a>
   59813     <var title="">f</var>. Abort these steps.</p>
   59814 
   59815    </li>
   59816 
   59817    <li><p>If the <a href=#application-cache>application cache</a>'s <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online whitelist
   59818    wildcard flag</a> is <i title="">open</i>, then
   59819    <a href=#fetch>fetch</a> the resource normally and abort these
   59820    steps.</li>
   59821 
   59822    <li><p>Fail the resource load as if there had been a generic
   59823    network error.</li>
   59824 
   59825   </ol><p class=note>The above algorithm ensures that so long as the
   59826   <a href=#concept-appcache-onlinewhitelist-wildcard title=concept-appcache-onlinewhitelist-wildcard>online
   59827   whitelist wildcard flag</a> is <i title="">blocking</i>,
   59828   resources that are not present in the <a href=#concept-appcache-manifest title=concept-appcache-manifest>manifest</a> will always fail
   59829   to load (at least, after the <a href=#application-cache>application cache</a> has been
   59830   primed the first time), making the testing of offline applications
   59831   simpler.</p>
   59832 
   59833   </div>
   59834 
   59835 
   59836   <h4 id=expiring-application-caches><span class=secno>6.6.7 </span>Expiring application caches</h4>
   59837 
   59838   <p>As a general rule, user agents should not expire application
   59839   caches, except on request from the user, or after having been left
   59840   unused for an extended period of time.</p>
   59841 
   59842   <p>Application caches and cookies have similar implications with
   59843   respect to privacy (e.g. if the site can identify the user when
   59844   providing the cache, it can store data in the cache that can be used
   59845   for cookie resurrection). Implementors are therefore encouraged to
   59846   expose application caches in a manner related to HTTP cookies,
   59847   allowing caches to be expunged together with cookies and other
   59848   origin-specific data.</p>
   59849 
   59850   <p class=example>For example, a user agent could have a "delete
   59851   site-specific data" feature that clears all cookies, application
   59852   caches, local storage, databases, etc, from an origin all at
   59853   once.</p>
   59854 
   59855 
   59856 
   59857   <h4 id=application-cache-api><span class=secno>6.6.8 </span>Application cache API</h4>
   59858 
   59859   <pre class=idl>interface <dfn id=applicationcache>ApplicationCache</dfn> {
   59860 
   59861   // <a href=#concept-appcache-status title=concept-appcache-status>update status</a>
   59862   const unsigned short <a href=#dom-appcache-uncached title=dom-appcache-UNCACHED>UNCACHED</a> = 0;
   59863   const unsigned short <a href=#dom-appcache-idle title=dom-appcache-IDLE>IDLE</a> = 1;
   59864   const unsigned short <a href=#dom-appcache-checking title=dom-appcache-CHECKING>CHECKING</a> = 2;
   59865   const unsigned short <a href=#dom-appcache-downloading title=dom-appcache-DOWNLOADING>DOWNLOADING</a> = 3;
   59866   const unsigned short <a href=#dom-appcache-updateready title=dom-appcache-UPDATEREADY>UPDATEREADY</a> = 4;
   59867   const unsigned short <a href=#dom-appcache-obsolete title=dom-appcache-OBSOLETE>OBSOLETE</a> = 5;
   59868   readonly attribute unsigned short <a href=#dom-appcache-status title=dom-appcache-status>status</a>;
   59869 
   59870   // updates
   59871   void <a href=#dom-appcache-update title=dom-appcache-update>update</a>();
   59872   void <a href=#dom-appcache-swapcache title=dom-appcache-swapCache>swapCache</a>();
   59873 
   59874   // events
   59875            attribute <a href=#function>Function</a> <a href=#handler-appcache-onchecking title=handler-appcache-onchecking>onchecking</a>;
   59876            attribute <a href=#function>Function</a> <a href=#handler-appcache-onerror title=handler-appcache-onerror>onerror</a>;
   59877            attribute <a href=#function>Function</a> <a href=#handler-appcache-onnoupdate title=handler-appcache-onnoupdate>onnoupdate</a>;
   59878            attribute <a href=#function>Function</a> <a href=#handler-appcache-ondownloading title=handler-appcache-ondownloading>ondownloading</a>;
   59879            attribute <a href=#function>Function</a> <a href=#handler-appcache-onprogress title=handler-appcache-onprogress>onprogress</a>;
   59880            attribute <a href=#function>Function</a> <a href=#handler-appcache-onupdateready title=handler-appcache-onupdateready>onupdateready</a>;
   59881            attribute <a href=#function>Function</a> <a href=#handler-appcache-oncached title=handler-appcache-oncached>oncached</a>;
   59882            attribute <a href=#function>Function</a> <a href=#handler-appcache-onobsolete title=handler-appcache-onobsolete>onobsolete</a>;
   59883 };
   59884 <a href=#applicationcache>ApplicationCache</a> implements <a href=#eventtarget>EventTarget</a>;</pre>
   59885 
   59886   <dl class=domintro><dt><var title="">cache</var> = <var title="">window</var> . <code title=dom-applicationCache><a href=#dom-applicationcache>applicationCache</a></code></dt>
   59887    <dd>
   59888 
   59889     <p>(In a window.) Returns the <code><a href=#applicationcache>ApplicationCache</a></code> object that applies to the <a href=#active-document>active document</a> of that <code><a href=#window>Window</a></code>.</p>
   59890 
   59891    </dd>
   59892 
   59893    <dt><var title="">cache</var> = <var title="">self</var> . <code title=dom-applicationCache><a href=#dom-applicationcache>applicationCache</a></code></dt>
   59894    <dd>
   59895 
   59896     <p>(In a shared worker.) Returns the <code><a href=#applicationcache>ApplicationCache</a></code> object that applies to the current shared worker.
   59897     
   59898     <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
   59899     
   59900     </p>
   59901 
   59902    </dd>
   59903 
   59904    <dt><var title="">cache</var> . <code title=dom-appcache-status><a href=#dom-appcache-status>status</a></code></dt>
   59905    <dd>
   59906 
   59907     <p>Returns the current status of the application cache, as given by the constants defined below.</p>
   59908 
   59909    </dd>
   59910 
   59911    <dt><var title="">cache</var> . <code title=dom-appcache-update><a href=#dom-appcache-update>update</a></code>()</dt>
   59912    <dd>
   59913 
   59914     <p>Invokes the <a href=#application-cache-download-process>application cache download process</a>.</p>
   59915 
   59916     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no application cache to update.</p>
   59917 
   59918    </dd>
   59919 
   59920    <dt><var title="">cache</var> . <code title=dom-appcache-swapCache><a href=#dom-appcache-swapcache>swapCache</a></code>()</dt>
   59921    <dd>
   59922 
   59923     <p>Switches to the most recent application cache, if there is a
   59924     newer one. If there isn't, throws an
   59925     <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</p>
   59926 
   59927     <p>This does not cause previously-loaded resources to be reloaded;
   59928     for example, images do not suddenly get reloaded and style sheets
   59929     and scripts do not get reparsed or reevaluated. The only change is
   59930     that subsequent requests for cached resources will obtain the
   59931     newer copies.</p>
   59932 
   59933    </dd>
   59934 
   59935   </dl><div class=impl>
   59936 
   59937   <p>There is a one-to-one mapping from <a href=#cache-host title="cache host">cache
   59938   hosts</a> to <code><a href=#applicationcache>ApplicationCache</a></code> objects. The <dfn id=dom-applicationcache title=dom-applicationCache><code>applicationCache</code></dfn>
   59939   attribute on <code><a href=#window>Window</a></code> objects must return the
   59940   <code><a href=#applicationcache>ApplicationCache</a></code> object associated with the
   59941   <code><a href=#window>Window</a></code> object's <a href=#active-document>active document</a>. The <dfn id=dom-sharedworkerglobalscope-applicationcache title=dom-SharedWorkerGlobalScope-applicationCache><code>applicationCache</code></dfn>
   59942   attribute on <code>SharedWorkerGlobalScope</code> objects must
   59943   return the <code><a href=#applicationcache>ApplicationCache</a></code> object associated with the
   59944   worker.
   59945   
   59946   <a href=#refsWEBWORKERS>[WEBWORKERS]</a>
   59947   
   59948   </p>
   59949 
   59950   <p class=note>A <code><a href=#window>Window</a></code> or
   59951   <code>SharedWorkerGlobalScope</code> object has an associated
   59952   <code><a href=#applicationcache>ApplicationCache</a></code> object even if that <a href=#cache-host>cache
   59953   host</a> has no actual <a href=#application-cache>application cache</a>.</p>
   59954 
   59955   <hr><p>The <dfn id=dom-appcache-status title=dom-appcache-status><code>status</code></dfn>
   59956   attribute, on getting, must return the current state of the
   59957   <a href=#application-cache>application cache</a> that the
   59958   <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache host</a> is
   59959   associated with, if any. This must be the appropriate value from the
   59960   following list:</p>
   59961 
   59962   </div>
   59963 
   59964   <dl><dt><dfn id=dom-appcache-uncached title=dom-appcache-UNCACHED><code>UNCACHED</code></dfn>
   59965    (numeric value 0)</dt>
   59966 
   59967    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   59968    host</a> is not associated with an <a href=#application-cache>application
   59969    cache</a> at this time.</dd>
   59970 
   59971    <dt><dfn id=dom-appcache-idle title=dom-appcache-IDLE><code>IDLE</code></dfn>
   59972    (numeric value 1)</dt>
   59973 
   59974    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   59975    host</a> is associated with an <a href=#application-cache>application cache</a>
   59976    whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   59977    <i>idle</i>, and that <a href=#application-cache>application cache</a> is the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> cache in its
   59978    <a href=#application-cache-group>application cache group</a>, and the <a href=#application-cache-group>application
   59979    cache group</a> is not marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>.</dd>
   59980 
   59981    <dt><dfn id=dom-appcache-checking title=dom-appcache-CHECKING><code>CHECKING</code></dfn>
   59982    (numeric value 2)</dt>
   59983 
   59984    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   59985    host</a> is associated with an <a href=#application-cache>application cache</a>
   59986    whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   59987    <i>checking</i>.</dd>
   59988 
   59989    <dt><dfn id=dom-appcache-downloading title=dom-appcache-DOWNLOADING><code>DOWNLOADING</code></dfn>
   59990    (numeric value 3)</dt>
   59991 
   59992    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   59993    host</a> is associated with an <a href=#application-cache>application cache</a>
   59994    whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   59995    <i>downloading</i>.</dd>
   59996 
   59997    <dt><dfn id=dom-appcache-updateready title=dom-appcache-UPDATEREADY><code>UPDATEREADY</code></dfn>
   59998    (numeric value 4)</dt>
   59999 
   60000    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   60001    host</a> is associated with an <a href=#application-cache>application cache</a>
   60002    whose <a href=#application-cache-group>application cache group</a>'s <a href=#concept-appcache-status title=concept-appcache-status>update status</a> is
   60003    <i>idle</i>, and whose <a href=#application-cache-group>application cache group</a> is not
   60004    marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>,
   60005    but that <a href=#application-cache>application cache</a> is <em>not</em> the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> cache in its
   60006    group.</dd>
   60007 
   60008    <dt><dfn id=dom-appcache-obsolete title=dom-appcache-OBSOLETE><code>OBSOLETE</code></dfn>
   60009    (numeric value 5)</dt>
   60010 
   60011    <dd><p>The <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache
   60012    host</a> is associated with an <a href=#application-cache>application cache</a>
   60013    whose <a href=#application-cache-group>application cache group</a> is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>.</dd>
   60014 
   60015   </dl><div class=impl>
   60016 
   60017   <hr><p>If the <dfn id=dom-appcache-update title=dom-appcache-update><code>update()</code></dfn> method is
   60018   invoked, the user agent must invoke the <a href=#application-cache-download-process>application cache
   60019   download process</a>, in the background, for the <a href=#application-cache>application
   60020   cache</a> with which the <code><a href=#applicationcache>ApplicationCache</a></code> object's
   60021   <a href=#cache-host>cache host</a> is associated, but without giving that
   60022   <a href=#cache-host>cache host</a> to the algorithm. If there is no such
   60023   <a href=#application-cache>application cache</a>, or if it is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>, then the method
   60024   must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception instead.</p>
   60025 
   60026   <p>If the <dfn id=dom-appcache-swapcache title=dom-appcache-swapCache><code>swapCache()</code></dfn> method
   60027   is invoked, the user agent must run the following steps:
   60028 
   60029   <ol><li><p>Check that <code><a href=#applicationcache>ApplicationCache</a></code> object's
   60030    <a href=#cache-host>cache host</a> is associated with an <a href=#application-cache>application
   60031    cache</a>. If it is not, then raise an
   60032    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   60033    steps.</li>
   60034 
   60035    <li><p>Let <var title="">cache</var> be the <a href=#application-cache>application
   60036    cache</a> with which the <code><a href=#applicationcache>ApplicationCache</a></code> object's
   60037    <a href=#cache-host>cache host</a> is associated. (By definition, this is the
   60038    same as the one that was found in the previous step.)</li>
   60039 
   60040    <li><p>If <var title="">cache</var>'s <a href=#application-cache-group>application cache
   60041    group</a> is marked as <a href=#concept-appcache-obsolete title=concept-appcache-obsolete>obsolete</a>, then unassociate
   60042    the <code><a href=#applicationcache>ApplicationCache</a></code> object's <a href=#cache-host>cache host</a>
   60043    from <var title="">cache</var> and abort these steps. (Resources
   60044    will now load from the network instead of the cache.)</li>
   60045 
   60046    <li><p>Check that there is an application cache in the same
   60047    <a href=#application-cache-group>application cache group</a> as <var title="">cache</var>
   60048    whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness
   60049    flag</a> is <i>complete</i> and that is <a href=#concept-appcache-newer title=concept-appcache-newer>newer</a> than <var title="">cache</var>. If there is not, then raise an
   60050    <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   60051    steps.</li>
   60052 
   60053    <li><p>Let <var title="">new cache</var> be the <a href=#concept-appcache-newer title=concept-appcache-newer>newest</a> <a href=#application-cache>application
   60054    cache</a> in the same <a href=#application-cache-group>application cache group</a> as
   60055    <var title="">cache</var> whose <a href=#concept-appcache-completeness title=concept-appcache-completeness>completeness flag</a> is
   60056    <i>complete</i>.</li>
   60057 
   60058    <li><p>Unassociate the <code><a href=#applicationcache>ApplicationCache</a></code> object's
   60059    <a href=#cache-host>cache host</a> from <var title="">cache</var> and instead
   60060    associate it with <var title="">new cache</var>.</li>
   60061 
   60062   </ol><p>The following are the <a href=#event-handlers>event handlers</a> (and their
   60063   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   60064   event types</a>) that must be supported, as IDL attributes, by
   60065   all objects implementing the <code><a href=#applicationcache>ApplicationCache</a></code>
   60066   interface:</p>
   60067 
   60068   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   60069    <tbody><tr><td><dfn id=handler-appcache-onchecking title=handler-appcache-onchecking><code>onchecking</code></dfn> <td> <code title=event-appcache-checking><a href=#event-appcache-checking>checking</a></code>
   60070     <tr><td><dfn id=handler-appcache-onerror title=handler-appcache-onerror><code>onerror</code></dfn> <td> <code title=event-appcache-error><a href=#event-appcache-error>error</a></code>
   60071     <tr><td><dfn id=handler-appcache-onnoupdate title=handler-appcache-onnoupdate><code>onnoupdate</code></dfn> <td> <code title=event-appcache-noupdate><a href=#event-appcache-noupdate>noupdate</a></code>
   60072     <tr><td><dfn id=handler-appcache-ondownloading title=handler-appcache-ondownloading><code>ondownloading</code></dfn> <td> <code title=event-appcache-downloading><a href=#event-appcache-downloading>downloading</a></code>
   60073     <tr><td><dfn id=handler-appcache-onprogress title=handler-appcache-onprogress><code>onprogress</code></dfn> <td> <code title=event-appcache-progress><a href=#event-appcache-progress>progress</a></code>
   60074     <tr><td><dfn id=handler-appcache-onupdateready title=handler-appcache-onupdateready><code>onupdateready</code></dfn> <td> <code title=event-appcache-updateready><a href=#event-appcache-updateready>updateready</a></code>
   60075     <tr><td><dfn id=handler-appcache-oncached title=handler-appcache-oncached><code>oncached</code></dfn> <td> <code title=event-appcache-cached><a href=#event-appcache-cached>cached</a></code>
   60076     <tr><td><dfn id=handler-appcache-onobsolete title=handler-appcache-onobsolete><code>onobsolete</code></dfn> <td> <code title=event-appcache-obsolete><a href=#event-appcache-obsolete>obsolete</a></code>
   60077   </table></div>
   60078 
   60079 
   60080   <h4 id=browser-state><span class=secno>6.6.9 </span>Browser state</h4>
   60081 
   60082   <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-onLine><a href=#dom-navigator-online>onLine</a></code></dt>
   60083 
   60084    <dd>
   60085 
   60086     <p>Returns false if the user agent is definitely offline
   60087     (disconnected from the network). Returns true if the user agent
   60088     might be online.</p>
   60089 
   60090    </dd>
   60091 
   60092   </dl><div class=impl>
   60093 
   60094   <p>The <dfn id=dom-navigator-online title=dom-navigator-onLine><code>navigator.onLine</code></dfn>
   60095   attribute must return false if the user agent will not contact the
   60096   network when the user follows links or when a script requests a
   60097   remote page (or knows that such an attempt would fail), and must
   60098   return true otherwise.</p>
   60099 
   60100   <p>When the value that would be returned by the <code title=dom-navigator-onLine><a href=#dom-navigator-online>navigator.onLine</a></code> attribute of
   60101   the <code><a href=#window>Window</a></code> changes from true to false, the user agent
   60102   must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   60103   named <dfn id=event-offline title=event-offline><code>offline</code></dfn> at the
   60104   <code><a href=#window>Window</a></code> object.</p>
   60105 
   60106   <p>On the other hand, when the value that would be returned by the
   60107   <code title=dom-navigator-onLine><a href=#dom-navigator-online>navigator.onLine</a></code> attribute
   60108   of the <code><a href=#window>Window</a></code> changes from false to true, the user
   60109   agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   60110   event</a> named <dfn id=event-online title=event-online><code>online</code></dfn> at the
   60111   <code><a href=#window>Window</a></code> object.</p>
   60112 
   60113   <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#networking-task-source>networking task
   60114   source</a>.</p>
   60115 
   60116   </div>
   60117 
   60118   <p class=note>This attribute is inherently unreliable. A computer
   60119   can be connected to a network without having Internet access.</p>
   60120 
   60121 
   60122 
   60123   <h2 id=webappapis><span class=secno>7 </span>Web application APIs</h2>
   60124 
   60125   <h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
   60126 
   60127   <h4 id=introduction-4><span class=secno>7.1.1 </span>Introduction</h4>
   60128 
   60129   <p>Various mechanisms can cause author-provided executable code to
   60130   run in the context of a document. These mechanisms include, but are
   60131   probably not limited to:</p>
   60132 
   60133   <ul><li>Processing of <code><a href=#script>script</a></code> elements.</li>
   60134 
   60135    <li>Processing of inline <code title="javascript
   60136    protocol"><a href=#javascript-protocol>javascript:</a></code> URLs (e.g. the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of <code><a href=#the-img-element>img</a></code>
   60137    elements, or an <code title="">@import</code> rule in a CSS
   60138    <code><a href=#the-style-element>style</a></code> element block).</li>
   60139 
   60140    <li>Event handlers, whether registered through the DOM using <code title="">addEventListener()</code>, by explicit <a href=#event-handler-content-attributes>event handler
   60141    content attributes</a>, by <a href=#event-handler-idl-attributes>event handler IDL
   60142    attributes</a>, or otherwise.</li>
   60143 
   60144    <li>Processing of technologies like XBL or SVG that have their own
   60145    scripting features.</li>
   60146 
   60147   </ul><div class=impl>
   60148 
   60149   <h4 id=enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</h4>
   60150 
   60151   <p><dfn id=concept-bc-script title=concept-bc-script>Scripting is enabled</dfn> in a
   60152   <em><a href=#browsing-context>browsing context</a></em> when all of the
   60153   following conditions are true:</p>
   60154 
   60155   <ul><li>The user agent supports scripting.</li>
   60156 
   60157    <li>The user has not disabled scripting for this <a href=#browsing-context>browsing
   60158    context</a> at this time. (User agents may provide users with
   60159    the option to disable scripting globally, or in a finer-grained
   60160    manner, e.g. on a per-origin basis.)</li>
   60161 
   60162    <li id=sandboxScriptBlocked>The <a href=#browsing-context>browsing context</a> did
   60163    not have the <a href=#sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</a>
   60164    set when the <a href=#browsing-context>browsing context</a>'s <a href=#active-document>active
   60165    document</a> was created.</li>
   60166 
   60167   </ul><p><dfn id=concept-bc-noscript title=concept-bc-noscript>Scripting is disabled</dfn> in a
   60168   <a href=#browsing-context>browsing context</a> when any of the above conditions are
   60169   false (i.e. when scripting is not <a href=#concept-bc-script title=concept-bc-script>enabled</a>).</p>
   60170 
   60171   <hr><p><dfn id=concept-n-script title=concept-n-script>Scripting is enabled</dfn> for a
   60172   <em>node</em> if the <code><a href=#document>Document</a></code> object of the node (the
   60173   node itself, if it is itself a <code><a href=#document>Document</a></code> object) has an
   60174   associated <a href=#browsing-context>browsing context</a>, and <a href=#concept-bc-script title=concept-bc-script>scripting is enabled</a> in that
   60175   <a href=#browsing-context>browsing context</a>.</p>
   60176 
   60177   <p><dfn id=concept-n-noscript title=concept-n-noscript>Scripting is disabled</dfn> for a
   60178   node if there is no such <a href=#browsing-context>browsing context</a>, or if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a> in that
   60179   <a href=#browsing-context>browsing context</a>.</p>
   60180 
   60181   </div>
   60182 
   60183 
   60184   <div class=impl>
   60185 
   60186   <!-- SCRIPT EXEC (marks areas related to creation of scripts) -->
   60187   <h4 id=processing-model-1><span class=secno>7.1.3 </span>Processing model</h4>
   60188 
   60189   <h5 id=definitions-0><span class=secno>7.1.3.1 </span>Definitions</h5>
   60190 
   60191   <p>A <dfn id=concept-script title=concept-script>script</dfn> has:</p>
   60192 
   60193   <dl><dt>A <dfn id=script-execution-environment>script execution environment</dfn></dt>
   60194 
   60195    <dd>
   60196 
   60197     <p>The characteristics of the script execution environment depend
   60198     on the language, and are not defined by this specification.</p>
   60199 
   60200     <p class=example>In JavaScript, the script execution environment
   60201     consists of the interpreter, the stack of <i>execution
   60202     contexts</i>, the <i>global code</i> and <i>function code</i> and
   60203     the Function objects resulting, and so forth.</p>
   60204 
   60205    </dd>
   60206 
   60207    <dt>A <dfn id=list-of-code-entry-points>list of code entry-points</dfn></dt>
   60208 
   60209    <dd>
   60210 
   60211     <p>Each code entry-point represents a block of executable code
   60212     that the script exposes to other scripts and to the user
   60213     agent.</p>
   60214 
   60215     <p class=example>Each Function object in a JavaScript
   60216     <a href=#script-execution-environment>script execution environment</a> has a corresponding code
   60217     entry-point, for instance.</p>
   60218 
   60219     <p>The main program code of the script, if any, is the
   60220     <dfn id=initial-code-entry-point><i>initial code entry-point</i></dfn>. Typically, the code
   60221     corresponding to this entry-point is executed immediately after
   60222     the script is parsed.</p>
   60223 
   60224     <p class=example>In JavaScript, this corresponds to the
   60225     execution context of the global code.</p>
   60226 
   60227    </dd>
   60228 
   60229    <dt>A relationship with the <dfn id="script's-global-object">script's global object</dfn></dt>
   60230 
   60231    <dd>
   60232 
   60233     <p>An object that provides the APIs that the code can use.</p>
   60234 
   60235     <p class=example>This is typically a <code><a href=#window>Window</a></code>
   60236     object. In JavaScript, this corresponds to the <i>global
   60237     object</i>.</p>
   60238 
   60239     <p class=note>When a <a href="#script's-global-object">script's global object</a> is an
   60240     empty object, it can't do anything that interacts with the
   60241     environment.</p>
   60242 
   60243     <p>If the <a href="#script's-global-object">script's global object</a> is a
   60244     <code><a href=#window>Window</a></code> object, then in JavaScript, the ThisBinding of
   60245     the global execution context for this script must be the
   60246     <code><a href=#window>Window</a></code> object's <code><a href=#windowproxy>WindowProxy</a></code> object,
   60247     rather than the global object. <a href=#refsECMA262>[ECMA262]</a></p>
   60248 
   60249     <p class=note>This is a <a href=#willful-violation>willful violation</a> of the
   60250     JavaScript specification current at the time of writing
   60251     (ECMAScript edition 5, as defined in section 10.4.1.1 Initial
   60252     Global Execution Context, step 3). The JavaScript specification
   60253     requires that the <code title="">this</code> keyword in the global
   60254     scope return the global object, but this is not compatible with
   60255     the security design prevalent in implementations as specified
   60256     herein. <a href=#refsECMA262>[ECMA262]</a></p>
   60257 
   60258    </dd>
   60259 
   60260    <dt>A relationship with the <dfn id="script's-browsing-context">script's browsing context</dfn></dt>
   60261 
   60262    <dd>
   60263 
   60264     <p>A <a href=#browsing-context>browsing context</a> that is assigned responsibility
   60265     for actions taken by the script.</p>
   60266 
   60267     <p class=example>When a script creates and <a href=#navigate title=navigate>navigates</a> a new <a href=#top-level-browsing-context>top-level browsing
   60268     context</a>, the <code title=dom-opener><a href=#dom-opener>opener</a></code>
   60269     attribute of the new <a href=#browsing-context>browsing context</a>'s
   60270     <code><a href=#window>Window</a></code> object will be set to the <a href="#script's-browsing-context">script's
   60271     browsing context</a>'s <code><a href=#windowproxy>WindowProxy</a></code> object.</p>
   60272 
   60273    </dd>
   60274 
   60275    <dt>A relationship with the <dfn id="script's-document">script's document</dfn></dt>
   60276 
   60277    <dd>
   60278 
   60279     <p>A <code><a href=#document>Document</a></code> that is assigned responsibility for
   60280     actions taken by the script.</p>
   60281 
   60282     <p class=example>When a script <a href=#fetch title=fetch>fetches</a> a resource, the <a href="#the-document's-current-address" title="the
   60283     document's current address">current address</a> of the
   60284     <a href="#script's-document">script's document</a> will be used to set the <code title=http-referer>Referer</code> (sic) header.</p>
   60285 
   60286    </dd>
   60287 
   60288    <dt>A <dfn id="script's-url-character-encoding" title="script's URL character encoding">URL character encoding</dfn></dt>
   60289 
   60290    <dd>
   60291 
   60292     <p>A character encoding, set when the script is created, used to
   60293     encode URLs. <span id=sce-not-copy title="">If the character
   60294     encoding is set from another source, e.g. a <a href="#document's-character-encoding">document's
   60295     character encoding</a>, then the <a href="#script's-url-character-encoding">script's URL character
   60296     encoding</a> must follow the source, so that if the source's
   60297     changes, so does the script's.</span></p>
   60298 
   60299    </dd>
   60300 
   60301    <dt>A <dfn id="script's-base-url" title="script's base URL">base URL</dfn></dt>
   60302 
   60303    <dd>
   60304 
   60305     <p>A <a href=#url>URL</a>, set when the script is created, used to
   60306     resolve relative URLs. <span id=sbu-not-copy title="">If the
   60307     base URL is set from another source, e.g. a <a href=#document-base-url>document base
   60308     URL</a>, then the <a href="#script's-base-url">script's base URL</a> must follow
   60309     the source, so that if the source's changes, so does the
   60310     script's.</span></p>
   60311 
   60312    </dd>
   60313 
   60314   </dl></div>
   60315 
   60316 
   60317   <div class=impl>
   60318 
   60319   <h5 id=calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</h5>
   60320 
   60321   <p>When a user agent is to <dfn id=jump-to-a-code-entry-point>jump to a code entry-point</dfn> for
   60322   a <a href=#concept-script title=concept-script>script</a>, for example to invoke
   60323   an event listener defined in that <a href=#concept-script title=concept-script>script</a>, the user agent must run the
   60324   following steps:</p>
   60325 
   60326   <ol><li><p>If the <a href="#script's-global-object">script's global object</a> is a
   60327    <code><a href=#window>Window</a></code> object whose <code><a href=#document>Document</a></code> object is
   60328    not <a href=#fully-active>fully active</a>, then abort these steps without doing
   60329    anything. The callback is not fired.</p>
   60330 
   60331    <li><p>Set the <a href=#entry-script>entry script</a> to be the <a href=#concept-script title=concept-script>script</a> being invoked.</li>
   60332 
   60333    <li><p>Make the <a href=#script-execution-environment title="script execution environment">script
   60334    execution environment</a> for the <a href=#concept-script title=concept-script>script</a> execute the code for the given
   60335    code entry-point.</li>
   60336 
   60337    <li><p>Set the <a href=#entry-script>entry script</a> back to whatever it was
   60338    when this algorithm started.</li>
   60339 
   60340   </ol><p>This algorithm is not invoked by one script calling another.</p>
   60341 
   60342   </div>
   60343 
   60344 
   60345   <div class=impl>
   60346 
   60347   <h5 id=creating-scripts><span class=secno>7.1.3.3 </span>Creating scripts</h5>
   60348 
   60349   <p>When the specification says that a <a href=#concept-script title=concept-script>script</a> is to be <dfn id=create-a-script title="create a
   60350   script">created</dfn>, given some script source, its scripting
   60351   language, a global object, a browsing context, a URL character
   60352   encoding, and a base URL, the user agent must run the following
   60353   steps:</p>
   60354 
   60355   <ol><li><p>If <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
   60356    disabled</a> for <a href=#browsing-context>browsing context</a> passed to this
   60357    algorithm, then abort these steps, as if the script did nothing but
   60358    return void.</p>
   60359 
   60360    <li><p>Set up a <a href=#script-execution-environment>script execution environment</a> as
   60361    appropriate for the scripting language.</li>
   60362 
   60363    <li><p>Parse/compile/initialize the source of the script using the
   60364    <a href=#script-execution-environment>script execution environment</a>, as appropriate for the
   60365    scripting language, and thus obtain the <a href=#list-of-code-entry-points>list of code
   60366    entry-points</a> for the script. If the semantics of the
   60367    scripting language and the given source code are such that there is
   60368    executable code to be immediately run, then the <i><a href=#initial-code-entry-point>initial code
   60369    entry-point</a></i> is the entry-point for that code.</li>
   60370 
   60371    <li><p>Set up the <a href="#script's-global-object">script's global object</a>, the
   60372    <a href="#script's-browsing-context">script's browsing context</a>, the <a href="#script's-document">script's
   60373    document</a>, the <a href="#script's-url-character-encoding">script's URL character encoding</a>,
   60374    and the <a href="#script's-base-url">script's base URL</a> from the settings passed to
   60375    this algorithm.</li>
   60376 
   60377    <li><p><a href=#jump-to-a-code-entry-point title="jump to a code entry-point">Jump</a> to the
   60378    <a href=#concept-script title=concept-script>script</a>'s <i><a href=#initial-code-entry-point>initial code
   60379    entry-point</a></i>.</li>
   60380 
   60381   </ol><hr><p>When the user agent is to <dfn id=create-an-impotent-script>create an impotent script</dfn>,
   60382   given some script source, its scripting language, and a browsing
   60383   context, the user agent must <a href=#create-a-script>create a script</a>, using the
   60384   given script source and scripting language, using a new empty object
   60385   as the global object, and using the given browsing context as the
   60386   browsing context. The URL character encoding and base URL for the
   60387   resulting <a href=#concept-script title=concept-script>script</a> are not
   60388   important as no APIs are exposed to the script.</p>
   60389 
   60390   <hr><p>When the specification says that a <a href=#concept-script title=concept-script>script</a> is to be <dfn id=create-a-script-from-a-node title="create a
   60391   script from a node">created from a node</dfn> <var title="">node</var>, given some script source and its scripting
   60392   language, the user agent must <a href=#create-a-script>create a script</a>, using
   60393   the given script source and scripting language, and using <a href=#the-script-settings-determined-from-the-node>the
   60394   script settings determined from the node</a> <var title="">node</var>.</p>
   60395 
   60396   <p><dfn id=the-script-settings-determined-from-the-node>The script settings determined from the node</dfn> <var title="">node</var> are computed as follows:</p>
   60397 
   60398   <ol><li><p>Let <var title="">document</var> be the
   60399    <code><a href=#document>Document</a></code> of <var title="">node</var> (or <var title="">node</var> itself if it is a
   60400    <code><a href=#document>Document</a></code>).</li>
   60401 
   60402    <li><p>The browsing context is the <a href=#browsing-context>browsing context</a> of
   60403    <var title="">document</var>.</p>
   60404 
   60405    <li><p>The global object is the <code><a href=#window>Window</a></code> object of
   60406    <var title="">document</var>.</li>
   60407 
   60408    <li><p>The URL character encoding is the <a href="#document's-character-encoding" title="document's
   60409    character encoding">character encoding</a> of <var title="">document</var>. (<a href=#sce-not-copy>This is a
   60410    reference, not a copy</a>.)</li>
   60411 
   60412    <li><p>The base URL is the <a href=#document-base-url title="document base URL">base
   60413    URL</a> of <var title="">document</var>. (<a href=#sbu-not-copy>This is a reference, not a copy</a>.)</li>
   60414 
   60415   </ol></div>
   60416 
   60417 
   60418   <div class=impl>
   60419 
   60420   <h5 id=killing-scripts><span class=secno>7.1.3.4 </span>Killing scripts</h5>
   60421 
   60422   <p>User agents may impose resource limitations on scripts, for
   60423   example CPU quotas, memory limits, total execution time limits, or
   60424   bandwidth limitations. When a script exceeds a limit, the user agent
   60425   may either throw a <code><a href=#quota_exceeded_err>QUOTA_EXCEEDED_ERR</a></code> exception, abort
   60426   the script without an exception, prompt the user, or throttle script
   60427   execution.</p>
   60428 
   60429   <div class=example>
   60430 
   60431    <p>For example, the following script never terminates. A user agent
   60432    could, after waiting for a few seconds, prompt the user to either
   60433    terminate the script or let it continue.</p>
   60434 
   60435    <pre>&lt;script&gt;
   60436  while (true) { /* loop */ }
   60437 &lt;/script&gt;</pre>
   60438 
   60439   </div>
   60440 
   60441   <p>User agents are encouraged to allow users to disable scripting
   60442   whenever the user is prompted either by a script (e.g. using the
   60443   <code title=dom-alert><a href=#dom-alert>window.alert()</a></code> API) or because of a
   60444   script's actions (e.g. because it has exceeded a time limit).</p>
   60445 
   60446   <p>If scripting is disabled while a script is executing, the script
   60447   should be terminated immediately.</p>
   60448 
   60449   </div>
   60450 
   60451 
   60452   <div class=impl>
   60453 
   60454   <h4 id=event-loops><span class=secno>7.1.4 </span>Event loops</h4>
   60455 
   60456   <h5 id=definitions-1><span class=secno>7.1.4.1 </span>Definitions</h5>
   60457 
   60458   <p>To coordinate events, user interaction, scripts, rendering,
   60459   networking, and so forth, user agents must use <dfn id=event-loop title="event
   60460   loop">event loops</dfn> as described in this section.</p>
   60461 
   60462   <p>There must be at least one <a href=#event-loop>event loop</a> per user
   60463   agent, and at most one <a href=#event-loop>event loop</a> per <a href=#unit-of-related-similar-origin-browsing-contexts>unit of
   60464   related similar-origin browsing contexts</a>.</p>
   60465 
   60466   <p>An <a href=#event-loop>event loop</a> always has at least one <a href=#browsing-context>browsing
   60467   context</a>. If an <a href=#event-loop>event loop</a>'s <a href=#browsing-context title="browsing context">browsing contexts</a> all go away, then
   60468   the <a href=#event-loop>event loop</a> goes away as well. A <a href=#browsing-context>browsing
   60469   context</a> always has an <a href=#event-loop>event loop</a> coordinating
   60470   its activities.</p>
   60471 
   60472   
   60473   <p class=note>Other specifications can define new kinds of event
   60474   loops that aren't associated with browsing contexts; in particular,
   60475   the Web Workers specification does so.</p>
   60476   
   60477 
   60478   <p>An <a href=#event-loop>event loop</a> has one or more <dfn id=task-queue title="task
   60479   queue">task queues</dfn>. A <a href=#task-queue>task queue</a> is an ordered
   60480   list of <dfn id=concept-task title=concept-task>tasks</dfn>, which can be:</p>
   60481 
   60482   <dl><dt>Events</dt>
   60483 
   60484    <dd>
   60485 
   60486     <p>Asynchronously dispatching an <code><a href=#event>Event</a></code> object at a
   60487     particular <code><a href=#eventtarget>EventTarget</a></code> object is a task.</p>
   60488 
   60489     <p class=note>Not all events are dispatched using the <a href=#task-queue>task
   60490     queue</a>, many are dispatched synchronously during other
   60491     tasks.</p>
   60492 
   60493    </dd>
   60494 
   60495 
   60496    <dt>Parsing</dt>
   60497 
   60498    <dd><p>The <a href=#html-parser>HTML parser</a> tokenizing a single byte, and
   60499    then processing any resulting tokens, is a task.</dd>
   60500 
   60501 
   60502    <dt>Callbacks</dt>
   60503 
   60504    <dd><p>Calling a callback asynchronously is a task.</dd>
   60505 
   60506 
   60507    <dt>Using a resource</dt>
   60508 
   60509    <dd><p>When an algorithm <a href=#fetch title=fetch>fetches</a> a
   60510    resource, if the fetching occurs asynchronously then the processing
   60511    of the resource once some or all of the resource is available is a
   60512    task.</dd>
   60513 
   60514 
   60515    <dt>Reacting to DOM manipulation</dt>
   60516 
   60517    <dd><p>Some elements have tasks that trigger in response to DOM
   60518    manipulation, e.g. when that element is <a href=#insert-an-element-into-a-document title="insert an
   60519    element into a document">inserted into the document</a>.</p>
   60520 
   60521   </dl><p>When a user agent is to <dfn id=queue-a-task>queue a task</dfn>, it must add the
   60522   given task to one of the <a href=#task-queue title="task queue">task queues</a>
   60523   of the relevant <a href=#event-loop>event loop</a>. All the tasks from one
   60524   particular <dfn id=task-source>task source</dfn> (e.g. the callbacks generated by
   60525   timers, the events dispatched for mouse movements, the tasks queued
   60526   for the parser) must always be added to the same <a href=#task-queue>task
   60527   queue</a>, but tasks from different <a href=#task-source title="task
   60528   source">task sources</a> may be placed in different <a href=#task-queue title="task queue">task queues</a>.</p>
   60529 
   60530   <p class=example>For example, a user agent could have one
   60531   <a href=#task-queue>task queue</a> for mouse and key events (the <a href=#user-interaction-task-source>user
   60532   interaction task source</a>), and another for everything
   60533   else. The user agent could then give keyboard and mouse events
   60534   preference over other tasks three quarters of the time, keeping the
   60535   interface responsive but not starving other task queues, and never
   60536   processing events from any one <a href=#task-source>task source</a> out of
   60537   order.</p>
   60538 
   60539   <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> onto a <a href=#task-queue>task queue</a> of
   60540   an <a href=#event-loop>event loop</a> defined by this specification is
   60541   associated with a <code><a href=#document>Document</a></code>; if the task was queued in
   60542   the context of an element, then it is the element's
   60543   <code><a href=#document>Document</a></code>; if the task was queued in the context of a
   60544   <a href=#browsing-context>browsing context</a>, then it is the <a href=#browsing-context>browsing
   60545   context</a>'s <a href=#active-document>active document</a> at the time the task
   60546   was queued; if the task was queued by or for a <a href=#concept-script title=concept-script>script</a> then the document is the
   60547   <a href="#script's-document">script's document</a>.</p>
   60548 
   60549   <p>A user agent is required to have one <dfn id=storage-mutex>storage
   60550   mutex</dfn>. This mutex is used to control access to shared state
   60551   like cookies. At any one point, the <a href=#storage-mutex>storage mutex</a> is
   60552   either free, or owned by a particular <a href=#event-loop>event loop</a> or
   60553   instance of the <a href=#fetch title=fetch>fetching</a> algorithm.</p>
   60554 
   60555   <p>Whenever a <a href=#concept-script title=concept-script>script</a> calls into
   60556   a <a href=#plugin>plugin</a>, and whenever a <a href=#plugin>plugin</a> calls into
   60557   a <a href=#concept-script title=concept-script>script</a>, the user agent must
   60558   release the <a href=#storage-mutex>storage mutex</a>.</p>
   60559 
   60560 
   60561   <h5 id=processing-model-2><span class=secno>7.1.4.2 </span>Processing model</h5>
   60562 
   60563   <p>An <a href=#event-loop>event loop</a> must continually run through the
   60564   following steps for as long as it exists:</p>
   60565 
   60566   <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one
   60567    of the <a href=#event-loop>event loop</a>'s <a href=#task-queue title="task queue">task
   60568    queues</a>, ignoring tasks whose associated
   60569    <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user
   60570    agent may pick any <a href=#task-queue>task queue</a>.</li>
   60571 
   60572    <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the
   60573    <a href=#event-loop>event loop</a>, release it so that it is once again
   60574    free.</p>
   60575 
   60576    <li><p>Remove that task from its <a href=#task-queue>task queue</a>.</li>
   60577 
   60578    <li><p>If any asynchronously-running algorithms are <dfn id=await-a-stable-state title="await a stable state">awaiting a stable state</dfn>, then
   60579    run their <dfn id=synchronous-section>synchronous section</dfn> and then resume running
   60580    their asynchronous algorithm.</p>
   60581 
   60582    <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates
   60583    the DOM, runs any script, or has any other side-effects.</p>
   60584 
   60585    <p class=note>Steps in <a href=#synchronous-section title="synchronous
   60586    section">synchronous sections</a> are marked with
   60587    &#8987;.</li>
   60588 
   60589    <li><p>If necessary, update the rendering or user interface of any
   60590    <code><a href=#document>Document</a></code> or <a href=#browsing-context>browsing context</a> to reflect
   60591    the current state.</li>
   60592 
   60593    <li><p>Return to the first step of the <a href=#event-loop>event
   60594    loop</a>.</li>
   60595 
   60596   </ol><hr><p>When an algorithm says to <dfn id=spin-the-event-loop>spin the event loop</dfn> until
   60597   a condition <var title="">goal</var> is met, the user agent must run
   60598   the following steps:</p>
   60599 
   60600   <ol><li><p>Let <var title="">task source</var> be the <a href=#task-source>task
   60601    source</a> of the currently running <a href=#concept-task title=concept-task>task</a>.</li>
   60602 
   60603    <li><p>Stop the currently running <a href=#concept-task title=concept-task>task</a>, allowing the <a href=#event-loop>event
   60604    loop</a> to resume, but continue these steps
   60605    asynchronously.</li>
   60606 
   60607    <li><p>Wait until the condition <var title="">goal</var> is
   60608    met.</li>
   60609 
   60610    <li><p><a href=#queue-a-task>Queue a task</a> to continue running these steps,
   60611    using the <a href=#task-source>task source</a> <var title="">task
   60612    source</var>. Wait until this task runs before continuing these
   60613    steps.</li>
   60614 
   60615    <li><p>Return to the caller.</li>
   60616 
   60617   </ol><hr><p>Some of the algorithms in this specification, for historical
   60618   reasons, require the user agent to <dfn id=pause>pause</dfn> while running a
   60619   <a href=#concept-task title=concept-task>task</a> until some condition has been
   60620   met. While a user agent has a paused <a href=#concept-task title=concept-task>task</a>, the corresponding <a href=#event-loop>event
   60621   loop</a> must not run further <a href=#concept-task title=concept-task>tasks</a>, and any script in the currently
   60622   running <a href=#concept-task title=concept-task>task</a> must block. User
   60623   agents should remain responsive to user input while paused, however,
   60624   albeit in a reduced capacity since the <a href=#event-loop>event loop</a> will
   60625   not be doing anything.</p>
   60626 
   60627   <hr><p>When a user agent is to <dfn id=obtain-the-storage-mutex>obtain the storage mutex</dfn> as
   60628   part of running a <a href=#concept-task title=concept-task>task</a>, it must
   60629   run through the following steps:</p>
   60630 
   60631   <ol><li><p>If the <a href=#storage-mutex>storage mutex</a> is already owned by this
   60632    <a href=#concept-task title=concept-task>task</a>'s <a href=#event-loop>event loop</a>,
   60633    then abort these steps.</li>
   60634 
   60635    <li><p>Otherwise, <a href=#pause>pause</a> until the <a href=#storage-mutex>storage
   60636    mutex</a> can be taken by the <a href=#event-loop>event loop</a>.</li>
   60637 
   60638    <li><p>Take ownership of the <a href=#storage-mutex>storage mutex</a>.</li>
   60639 
   60640   </ol></div>
   60641 
   60642 
   60643   <div class=impl>
   60644 
   60645   <h5 id=generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</h5>
   60646 
   60647   <p>The following <a href=#task-source title="task source">task sources</a> are
   60648   used by a number of mostly unrelated features in this and other
   60649   specifications.</p>
   60650 
   60651   <dl><dt>The <dfn id=dom-manipulation-task-source>DOM manipulation task source</dfn></dt>
   60652 
   60653    <dd>
   60654 
   60655     <p>This <a href=#task-source>task source</a> is used for features that react
   60656     to DOM manipulations, such as things that happen asynchronously
   60657     when an element is <a href=#insert-an-element-into-a-document title="insert an element into a
   60658     document">inserted into the document</a>.</p>
   60659 
   60660     <!--
   60661     <p>Asynchronous mutation events must be dispatched using <span
   60662     title="concept-task">tasks</span> <span title="queue a
   60663     task">queued</span> with the <span>DOM manipulation task
   60664     source</span>. <a href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
   60665     -->
   60666 
   60667    </dd>
   60668 
   60669    <dt>The <dfn id=user-interaction-task-source>user interaction task source</dfn></dt>
   60670 
   60671    <dd>
   60672 
   60673     <p>This <a href=#task-source>task source</a> is used for features that react
   60674     to user interaction, for example keyboard or mouse input.</p>
   60675 
   60676     <p>Asynchronous events sent in response to user input (e.g. <code title=event-click><a href=#event-click>click</a></code> events) must be dispatched using
   60677     <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue a
   60678     task">queued</a> with the <a href=#user-interaction-task-source>user interaction task
   60679     source</a>. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   60680 
   60681    </dd>
   60682 
   60683    <dt>The <dfn id=networking-task-source>networking task source</dfn></dt>
   60684 
   60685    <dd>
   60686 
   60687     <p>This <a href=#task-source>task source</a> is used for features that trigger
   60688     in response to network activity.</p>
   60689 
   60690     <!-- XHR should use this -->
   60691 
   60692    </dd>
   60693 
   60694    <dt>The <dfn id=history-traversal-task-source>history traversal task source</dfn></dt>
   60695 
   60696    <dd>
   60697 
   60698     <p>This <a href=#task-source>task source</a> is used to queue calls to <code title=dom-history-back><a href=#dom-history-back>history.back()</a></code> and similar
   60699     APIs.</p>
   60700 
   60701    </dd>
   60702 
   60703   </dl></div>
   60704 
   60705 
   60706 
   60707   <div class=impl>
   60708 
   60709   <!-- SCRIPT EXEC -->
   60710   <h4 id=javascript-protocol><span class=secno>7.1.5 </span><dfn title="javascript protocol">The <code title="">javascript:</code> protocol</dfn></h4>
   60711 
   60712   <p>When a <a href=#url>URL</a> using the <code title="">javascript:</code> protocol is <dfn id=concept-js-deref title=concept-js-deref>dereferenced</dfn>, the user agent must run
   60713   the following steps:</p>
   60714 
   60715   <ol><li><p>Let the script source be the string obtained using the
   60716    content retrieval operation defined for <code title="">javascript:</code> URLs. <a href=#refsJSURL>[JSURL]</a></li>
   60717 
   60718    <li>
   60719 
   60720     <p>Use the appropriate step from the following list:</p>
   60721 
   60722     <dl><dt>If a <a href=#browsing-context>browsing context</a> is being <a href=#navigate title=navigate>navigated</a> to a <code>javascript:</code>
   60723      URL, and the <a href=#active-document>active document</a> of that browsing
   60724      context has the <a href=#same-origin>same origin</a> as the script given by
   60725      that URL</dt>
   60726 
   60727      <dd>
   60728 
   60729       <!-- http://www.hixie.ch/tests/adhoc/html/navigation/javascript-url/ -->
   60730 
   60731       <p>Let <var title="">address</var> be the <a href="#the-document's-address" title="the
   60732       document's address">address</a> of the <a href=#active-document>active
   60733       document</a> of the <a href=#browsing-context>browsing context</a> being
   60734       navigated.</p>
   60735 
   60736       <p>If <var title="">address</var> is <code><a href=#about:blank>about:blank</a></code>,
   60737       and the <a href=#browsing-context>browsing context</a> being navigated has a
   60738       <a href=#creator-browsing-context>creator browsing context</a>, then let <var title="">address</var> be the <a href="#the-document's-address" title="the document's
   60739       address">address</a> of the <a href=#creator-document>creator
   60740       <code>Document</code></a> instead.</p>
   60741 
   60742       <p><a href=#create-a-script-from-a-node title="create a script from a node">Create a
   60743       script</a> from the <code><a href=#document>Document</a></code> node of the
   60744       <a href=#active-document>active document</a>, using the aforementioned script
   60745       source, and assuming the scripting language is JavaScript.</p>
   60746 
   60747       <p>Let <var title="">result</var> be the return value of the
   60748       <i><a href=#initial-code-entry-point>initial code entry-point</a></i> of this <a href=#concept-script title=concept-script>script</a>. If an exception was
   60749       raised, let <var title="">result</var> be void instead. (The
   60750       result will be void also if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a>.)</p>
   60751 
   60752       <p>When it comes time to <a href="#set-the-document's-address">set the document's address</a>
   60753       in the <a href=#navigate title=navigate>navigation algorithm</a>, use
   60754       <var title="">address</var> as the <a href=#override-url>override
   60755       URL</a>.</p>
   60756 
   60757      </dd>
   60758 
   60759      <dt>If the <code><a href=#document>Document</a></code> object of the element,
   60760      attribute, or style sheet from which the <code>javascript:</code>
   60761      URL was reached has an associated <a href=#browsing-context>browsing
   60762      context</a></dt>
   60763 
   60764      <dd>
   60765 
   60766       <p><a href=#create-an-impotent-script>Create an impotent script</a> using the
   60767       aforementioned script source, with the scripting language set to
   60768       JavaScript, and with the <code><a href=#document>Document</a></code>'s object's
   60769       <a href=#browsing-context>browsing context</a> as the browsing context.</p>
   60770 
   60771       <p>Let <var title="">result</var> be the return value of the
   60772       <i><a href=#initial-code-entry-point>initial code entry-point</a></i> of this <a href=#concept-script title=concept-script>script</a>. If an exception was
   60773       raised, let <var title="">result</var> be void instead. (The
   60774       result will be void also if <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is disabled</a>.)</p>
   60775 
   60776      </dd>
   60777 
   60778      <dt>Otherwise</dt>
   60779 
   60780      <dd>
   60781 
   60782       <p>Let <var title="">result</var> be void.</p>
   60783 
   60784      </dd>
   60785 
   60786     </dl></li>
   60787 
   60788    <li>
   60789 
   60790     <p>If the result of executing the script is void (there is no
   60791     return value), then the URL must be treated in a manner equivalent
   60792     to an HTTP resource with an HTTP 204 No Content response.</p>
   60793 
   60794     <p>Otherwise, the URL must be treated in a manner equivalent to an
   60795     HTTP resource with a 200 OK response whose <a href=#content-type title=Content-Type>Content-Type metadata</a> is
   60796     <code><a href=#text/html>text/html</a></code> and whose response body is the return value
   60797     converted to a string value.</p>
   60798 
   60799     <p class=note>Certain contexts, in particular <code><a href=#the-img-element>img</a></code>
   60800     elements, ignore the <a href=#content-type title=Content-Type>Content-Type
   60801     metadata</a>.</p>
   60802 
   60803    </li>
   60804 
   60805   </ol><div class=example>
   60806 
   60807    <p>So for example a <code title="">javascript:</code> URL for a
   60808    <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute of an
   60809    <code><a href=#the-img-element>img</a></code> element would be evaluated in the context of an
   60810    empty object as soon as the attribute is set; it would then be
   60811    sniffed to determine the image type and decoded as an image.</p>
   60812 
   60813    <p>A <code title="">javascript:</code> URL in an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute of an <code><a href=#the-a-element>a</a></code>
   60814    element would only be evaluated when the link was <a href=#following-hyperlinks title="following hyperlinks">followed</a>.</p>
   60815 
   60816    <p>The <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute of an
   60817    <code><a href=#the-iframe-element>iframe</a></code> element would be evaluated in the context of
   60818    the <code><a href=#the-iframe-element>iframe</a></code>'s own <a href=#browsing-context>browsing context</a>; once
   60819    evaluated, its return value (if it was not void) would replace that
   60820    <a href=#browsing-context>browsing context</a>'s document, thus changing the
   60821    variables visible in that <a href=#browsing-context>browsing context</a>.</p>
   60822 
   60823   </div>
   60824 
   60825   </div>
   60826 
   60827 
   60828 
   60829   <h4 id=events><span class=secno>7.1.6 </span>Events</h4>
   60830 
   60831   <div class=impl>
   60832 
   60833   <h5 id=event-handler-attributes><span class=secno>7.1.6.1 </span>Event handlers</h5>
   60834 
   60835   </div>
   60836 
   60837   <!--test: <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cscript%3E%0Aw(a%3Ddocument.implementation.createDocument(null%2C%20null%2C%20null))%3B%0Aw(a.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'html')))%3B%0Aw(b%3Da.firstChild.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'body')))%3B%0Aw(b.test%20%3D%20w)%3B%0Aw(b.setAttribute('onclick'%2C%20'test(%22fire%3A%20%22%20%2B%20event)'))%3B%0Aw(b.onclick)%3B%0Aw(e%3Da.createEvent('Event'))%3B%0Aw(e.initEvent('click'%2C%20false%2C%20false))%3B%0Aw(b.dispatchEvent(e))%3B%0A%3C%2Fscript%3E">test</a>-->
   60838 
   60839   <p>Many objects can have <dfn id=event-handlers>event handlers</dfn> specified. These
   60840   act as bubbling event listeners for the object on which they are
   60841   specified.</p>
   60842 
   60843   <p>An <a href=#event-handlers title="event handlers">event handler</a> can either
   60844   have the value null or be set to a <code><a href=#function>Function</a></code>
   60845   object. <span class=impl>Initially, event handlers must be set to
   60846   null.</span></p>
   60847 
   60848   <p>Event handlers are exposed in one or two ways.</p>
   60849 
   60850   <p>The first way, common to all event handlers, is as an <a href=#event-handler-idl-attributes title="event handler IDL attributes">event handler IDL
   60851   attribute</a>.</p>
   60852 
   60853   <p>The second way is as an <a href=#event-handler-content-attributes title="event handler content
   60854   attributes">event handler content attribute</a>. Event handlers
   60855   on <a href=#html-elements>HTML elements</a> and some of the event handlers on
   60856   <code><a href=#window>Window</a></code> objects are exposed in this way.</p>
   60857 
   60858   <div class=impl>
   60859 
   60860   <hr><p><dfn id=event-handler-idl-attributes>Event handler IDL attributes</dfn>, on setting, must set the
   60861   corresponding event handler to their new value, and on
   60862   getting, must return whatever the current value of the corresponding
   60863   event handler is (possibly null).</p>
   60864 
   60865   <p>If an <a href=#event-handler-idl-attributes title="event handler IDL attributes">event handler
   60866   IDL attribute</a> exposes an <a href=#event-handlers title="event handlers">event
   60867   handler</a> of an object that doesn't exist, it must always
   60868   return null on getting and must do nothing on setting.</p>
   60869 
   60870   <p class=note>This can happen in particular for <a href=#event-handler-idl-attributes title="event
   60871   handler IDL attributes">event handler IDL attribute</a> on
   60872   <code><a href=#the-body-element-0>body</a></code> elements that do not have corresponding
   60873   <code><a href=#window>Window</a></code> objects.</p>
   60874 
   60875   <p class=note>Certain event handler IDL attributes have additional
   60876   requirements, in particular the <code title=handler-MessagePort-onmessage><a href=#handler-messageport-onmessage>onmessage</a></code> attribute of
   60877   <code><a href=#messageport>MessagePort</a></code> objects.</p>
   60878 
   60879   <hr></div>
   60880 
   60881   <p><dfn id=event-handler-content-attributes>Event handler content attributes</dfn>, when specified, must
   60882   contain valid JavaScript code matching the <code title="">FunctionBody</code> production. <a href=#refsECMA262>[ECMA262]</a></p>
   60883 
   60884   <div class=impl>
   60885 
   60886   <!-- SCRIPT EXEC -->
   60887   <p>When an <a href=#event-handler-content-attributes title="event handler content attributes">event
   60888   handler content attribute</a> is set, if the element is owned by
   60889   a <code><a href=#document>Document</a></code> that is in a <a href=#browsing-context>browsing context</a>,
   60890   and <a href=#concept-bc-script title=concept-bc-script>scripting is enabled</a> for
   60891   that <a href=#browsing-context>browsing context</a>, the user agent must run the
   60892   following steps to create a <a href=#concept-script title=concept-script>script</a> after setting the content
   60893   attribute to its new value:</p>
   60894 
   60895   <ol><li><p>Set up a <a href=#script-execution-environment>script execution environment</a> for
   60896    JavaScript.</li>
   60897 
   60898    <li>
   60899 
   60900     <p>Using this script execution environment, create a function
   60901     object (as defined in ECMAScript edition 5 section 13.2 Creating
   60902     Function Objects), with:</p>
   60903 
   60904     <dl><dt>Parameter list <var title="">FormalParameterList</var></dt>
   60905 
   60906      <dd>
   60907 
   60908       <dl class=switch><dt>If the attribute is the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> attribute of the
   60909        <code><a href=#window>Window</a></code> object</dt>
   60910 
   60911        <dd>Let the function have three arguments, named <code title="">event</code>, <code title="">source</code>, and <code title="">fileno</code>.</dd>
   60912 
   60913        <dt>Otherwise</dt>
   60914 
   60915        <dd>Let the function have a single argument called <code title="">event</code>.</dd>
   60916 
   60917       </dl></dd>
   60918 
   60919      <dt>Function body <var title="">FunctionBody</var></dt>
   60920 
   60921      <dd>The <a href=#event-handler-content-attributes title="event handler content attributes">event
   60922      handler content attribute</a>'s new value.</dd>
   60923 
   60924      <dt>Lexical Environment <var title="">Scope</var></dt>
   60925 
   60926      <dd>
   60927 
   60928       <ol><li>Let <var title="">Scope</var> be the result of
   60929        NewObjectEnvironment(the element's <code><a href=#document>Document</a></code>, the
   60930        <var title="">global environment</var>).</li>
   60931 
   60932        <li>If the element has a <a href=#form-owner>form owner</a>, let <var title="">Scope</var> be the result of NewObjectEnvironment(the
   60933        element's <a href=#form-owner>form owner</a>, <var title="">Scope</var>).</li>
   60934 
   60935        <li>Let <var title="">Scope</var> be the result of
   60936        NewObjectEnvironment(the element's object, <var title="">Scope</var>).</li>
   60937 
   60938       </ol><p class=note>NewObjectEnvironment() is defined in ECMAScript
   60939       edition 5 section 10.2.2.3 NewObjectEnvironment (O, E). <a href=#refsECMA262>[ECMA262]</a></p>
   60940 
   60941      </dd>
   60942 
   60943      <dt>Boolean flag <var title="">Strict</var></dt>
   60944 
   60945      <dd>False.</dd>
   60946 
   60947     </dl><p>Let this new function be the only entry in the script's
   60948     <a href=#list-of-code-entry-points>list of code entry-points</a>.</p>
   60949 
   60950    </li>
   60951 
   60952    <li><p>If the previous steps failed to compile the script, then set
   60953    the corresponding <a href=#event-handlers title="event handlers">event handler</a>
   60954    to null and abort these steps.</li>
   60955 
   60956    <li><p>Set up the <a href="#script's-global-object">script's global object</a>, the
   60957    <a href="#script's-browsing-context">script's browsing context</a>, the <a href="#script's-document">script's
   60958    document</a>, the <a href="#script's-url-character-encoding">script's URL character encoding</a>,
   60959    and the <a href="#script's-base-url">script's base URL</a> from <a href=#the-script-settings-determined-from-the-node>the script
   60960    settings determined from the node</a> on which the attribute is
   60961    being set.</li>
   60962 
   60963    <li><p>Set the corresponding <a href=#event-handlers title="event handlers">event
   60964    handler</a> to the aforementioned function.</li>
   60965 
   60966   </ol><p>When an event handler content attribute is removed, the user
   60967   agent must set the corresponding <a href=#event-handlers title="event handlers">event
   60968   handler</a> to null.</p>
   60969   <!--
   60970   http://software.hixie.ch/utilities/js/live-dom-viewer/saved/245 onload
   60971   http://software.hixie.ch/utilities/js/live-dom-viewer/saved/247 onclick
   60972   see http://www.w3.org/Bugs/Public/show_bug.cgi?id=7626#c5 for reasoning
   60973   -->
   60974 
   60975   </div>
   60976 
   60977   <p class=note>When an <a href=#event-handler-content-attributes title="event handler content
   60978   attributes">event handler content attribute</a> is set on an
   60979   element owned by a <code><a href=#document>Document</a></code> that is not in a
   60980   <a href=#browsing-context>browsing context</a>, the corresponding event handler is
   60981   not changed.</p>
   60982 
   60983   <!-- v2: we should probably support HTML4's Content-Script-Type header here. -->
   60984 
   60985   <div class=impl>
   60986 
   60987   <hr><p>All <a href=#event-handlers>event handlers</a> on an object, whether an element
   60988   or some other object, and whether set to null or to a
   60989   <code><a href=#function>Function</a></code> object, must be registered as event listeners
   60990   on the object when it is created, as if the <code title=dom-EventTarget-addEventListener>addEventListener()</code>
   60991   method on the object's <code><a href=#eventtarget>EventTarget</a></code> interface had been
   60992   invoked, with the event type (<var title=dom-event-type>type</var>
   60993   argument) equal to the type corresponding to the event handler (the
   60994   <dfn id=event-handler-event-type>event handler event type</dfn>), the listener set to be a
   60995   target and bubbling phase listener (<var title=dom-event-useCapture>useCapture</var> argument set to
   60996   false), and the event listener itself (<var title=dom-event-listener>listener</var> argument) set to do
   60997   nothing while the event handler's value is not a
   60998   <code><a href=#function>Function</a></code> object, and set to invoke the <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback of the
   60999   <code><a href=#function>Function</a></code> object associated with the event handler
   61000   otherwise.</p>
   61001 
   61002   </div>
   61003 
   61004   <p class=note><a href=#event-handlers>Event handlers</a> <span class=impl>therefore</span> always fire before event listeners
   61005   attached using <code title=dom-EventTarget-addEventListener>addEventListener()</code>.</p>
   61006 
   61007   <div class=impl>
   61008 
   61009   <p class=note>The <var title=dom-event-listener>listener</var>
   61010   argument is emphatically <em>not</em> the <a href=#event-handlers title="event
   61011   handlers">event handler</a> itself.</p>
   61012 
   61013   <p class=note>The interfaces implemented by the event object do
   61014   not influence whether an <a href=#event-handlers title="event handlers">event
   61015   handler</a> is triggered or not.</p>
   61016 
   61017   <p>When an <a href=#event-handlers title="event handlers">event handler</a>'s
   61018   <code><a href=#function>Function</a></code> object is invoked, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
   61019   with one argument, set to the <code><a href=#event>Event</a></code> object of the event
   61020   in question.</p>
   61021 
   61022   <p>The handler's return value must then be processed as follows:</p>
   61023 
   61024   <dl class=switch><dt>If the event type is <code class=event-mouseover>mouseover</code></dt>
   61025 
   61026    <dd><p>If the return value is a boolean with the value true, then
   61027    the event must be canceled.</dd>
   61028 
   61029    <dt>If the event object is a <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code> object</dt>
   61030 
   61031    <dd><p>If the return value is a string, and the event object's
   61032    <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   61033    attribute's value is the empty string, then set the <code title=dom-BeforeUnloadEvent-returnValue><a href=#dom-beforeunloadevent-returnvalue>returnValue</a></code>
   61034    attribute's value to the return value.</dd>
   61035 
   61036    <dt>Otherwise</dt>
   61037 
   61038    <dd><p>If the return value is a boolean with the value false, then
   61039    the event must be canceled.</dd>
   61040 
   61041   </dl></div>
   61042 
   61043   <!-- IE actually uncancels the event if the function returns true -->
   61044 
   61045   <hr><p>The <code><a href=#function>Function</a></code> interface represents a function in the
   61046   scripting language being used. It is represented in IDL as
   61047   follows:</p>
   61048 
   61049   <pre class=idl>[Callback=FunctionOnly, NoInterfaceObject]
   61050 interface <dfn id=function>Function</dfn> {
   61051   any <a href=#dom-function-call title=dom-function-call>call</a>(in any... arguments);
   61052 };</pre>
   61053 
   61054   <p>The <dfn id=dom-function-call title=dom-function-call><code>call(...)</code></dfn>
   61055   method is the object's callback.</p>
   61056 
   61057   <p class=note>In JavaScript, any <code title="">Function</code>
   61058   object implements this interface.</p>
   61059 
   61060   <p>If the <code><a href=#function>Function</a></code> object is a JavaScript <code title="">Function</code>, then when it is invoked by the user agent,
   61061   the user agent must set the <var title="">thisArg</var> (as defined
   61062   by ECMAScript edition 5 section 10.4.3 Entering Function Code) to
   61063   the <a href=#event-handlers title="event handlers">event handler</a>'s object. <a href=#refsECMA262>[ECMA262]</a></p>
   61064 
   61065   <div class=example>
   61066 
   61067    <p>For example, the following document fragment:</p>
   61068 
   61069    <pre>&lt;body onload="alert(this)" onclick="alert(this)"&gt;</pre>
   61070 
   61071    <p>...leads to an alert saying "<code title="">[object&nbsp;Window]</code>" when the document is loaded,
   61072    and an alert saying "<code title="">[object&nbsp;HTMLBodyElement]</code>" whenever the user
   61073    clicks something in the page.</p>
   61074 
   61075   </div>
   61076 
   61077   <p>The return value of the function is affects whether the event is
   61078   canceled or not: <span class=impl>as described above,</span> if
   61079   the return value is false, the event is canceled (except for <code class=event-mouseover>mouseover</code> events, where the return
   61080   value has to be true to cancel the event). With <code title=event-beforeunload>beforeunload</code> events, the value is
   61081   instead used to determine the message to show the user.</p>
   61082 
   61083 
   61084   <div class=impl>
   61085 
   61086   <h5 id=event-handlers-on-elements,-document-objects,-and-window-objects><span class=secno>7.1.6.2 </span>Event handlers on elements, <code><a href=#document>Document</a></code> objects, and <code><a href=#window>Window</a></code> objects</h5>
   61087 
   61088   <p>The following are the <a href=#event-handlers>event handlers</a> (and their
   61089   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   61090   event types</a>) that must be supported by all <a href=#html-elements>HTML
   61091   elements</a>, as both content attributes and IDL attributes, and
   61092   on <code><a href=#document>Document</a></code> and <code><a href=#window>Window</a></code> objects, as IDL
   61093   attributes.</p>
   61094 
   61095   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   61096    <tbody><tr><td><dfn id=handler-onabort title=handler-onabort><code>onabort</code></dfn> <td> <code title=event-abort>abort</code>
   61097     <tr><td><dfn id=handler-oncanplay title=handler-oncanplay><code>oncanplay</code></dfn> <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>
   61098     <tr><td><dfn id=handler-oncanplaythrough title=handler-oncanplaythrough><code>oncanplaythrough</code></dfn> <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>
   61099     <tr><td><dfn id=handler-onchange title=handler-onchange><code>onchange</code></dfn> <td> <code title=event-change>change</code> <!-- widely used -->
   61100     <tr><td><dfn id=handler-onclick title=handler-onclick><code>onclick</code></dfn> <td> <code title=event-click><a href=#event-click>click</a></code> <!-- widely used -->
   61101     <tr><td><dfn id=handler-oncontextmenu title=handler-oncontextmenu><code>oncontextmenu</code></dfn> <td> <code title=event-contextmenu>contextmenu</code> <!-- widely used -->
   61102     <tr><td><dfn id=handler-ondblclick title=handler-ondblclick><code>ondblclick</code></dfn> <td> <code title=event-dblclick>dblclick</code> <!-- widely used -->
   61103     <tr><td><dfn id=handler-ondrag title=handler-ondrag><code>ondrag</code></dfn> <td> <code title=event-drag><a href=#event-drag>drag</a></code>
   61104     <tr><td><dfn id=handler-ondragend title=handler-ondragend><code>ondragend</code></dfn> <td> <code title=event-dragend><a href=#event-dragend>dragend</a></code>
   61105     <tr><td><dfn id=handler-ondragenter title=handler-ondragenter><code>ondragenter</code></dfn> <td> <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
   61106     <tr><td><dfn id=handler-ondragleave title=handler-ondragleave><code>ondragleave</code></dfn> <td> <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code>
   61107     <tr><td><dfn id=handler-ondragover title=handler-ondragover><code>ondragover</code></dfn> <td> <code title=event-dragover><a href=#event-dragover>dragover</a></code>
   61108     <tr><td><dfn id=handler-ondragstart title=handler-ondragstart><code>ondragstart</code></dfn> <td> <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> <!-- widely used -->
   61109     <tr><td><dfn id=handler-ondrop title=handler-ondrop><code>ondrop</code></dfn> <td> <code title=event-drop><a href=#event-drop>drop</a></code>
   61110     <tr><td><dfn id=handler-ondurationchange title=handler-ondurationchange><code>ondurationchange</code></dfn> <td> <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code>
   61111     <tr><td><dfn id=handler-onemptied title=handler-onemptied><code>onemptied</code></dfn> <td> <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code>
   61112     <tr><td><dfn id=handler-onended title=handler-onended><code>onended</code></dfn> <td> <code title=event-media-ended><a href=#event-media-ended>ended</a></code>
   61113     <tr><td><dfn id=handler-onformchange title=handler-onformchange><code>onformchange</code></dfn> <td> <code title=event-formchange>formchange</code>
   61114     <tr><td><dfn id=handler-onforminput title=handler-onforminput><code>onforminput</code></dfn> <td> <code title=event-forminput>forminput</code>
   61115     <tr><td><dfn id=handler-oninput title=handler-oninput><code>oninput</code></dfn> <td> <code title=event-input>input</code>
   61116     <tr><td><dfn id=handler-oninvalid title=handler-oninvalid><code>oninvalid</code></dfn> <td> <code title=event-invalid>invalid</code>
   61117     <tr><td><dfn id=handler-onkeydown title=handler-onkeydown><code>onkeydown</code></dfn> <td> <code title=event-keydown>keydown</code> <!-- widely used -->
   61118     <tr><td><dfn id=handler-onkeypress title=handler-onkeypress><code>onkeypress</code></dfn> <td> <code title=event-keypress>keypress</code> <!-- widely used -->
   61119     <tr><td><dfn id=handler-onkeyup title=handler-onkeyup><code>onkeyup</code></dfn> <td> <code title=event-keyup>keyup</code> <!-- widely used -->
   61120     <tr><td><dfn id=handler-onloadeddata title=handler-onloadeddata><code>onloadeddata</code></dfn> <td> <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code>
   61121     <tr><td><dfn id=handler-onloadedmetadata title=handler-onloadedmetadata><code>onloadedmetadata</code></dfn> <td> <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code>
   61122     <tr><td><dfn id=handler-onloadstart title=handler-onloadstart><code>onloadstart</code></dfn> <td> <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code>
   61123     <tr><td><dfn id=handler-onmousedown title=handler-onmousedown><code>onmousedown</code></dfn> <td> <code title=event-mousedown>mousedown</code> <!-- widely used -->
   61124     <tr><td><dfn id=handler-onmousemove title=handler-onmousemove><code>onmousemove</code></dfn> <td> <code title=event-mousemove>mousemove</code> <!-- widely used -->
   61125     <tr><td><dfn id=handler-onmouseout title=handler-onmouseout><code>onmouseout</code></dfn> <td> <code title=event-mouseout>mouseout</code> <!-- widely used -->
   61126     <tr><td><dfn id=handler-onmouseover title=handler-onmouseover><code>onmouseover</code></dfn> <td> <code title=event-mouseover>mouseover</code> <!-- widely used -->
   61127     <tr><td><dfn id=handler-onmouseup title=handler-onmouseup><code>onmouseup</code></dfn> <td> <code title=event-mouseup>mouseup</code> <!-- widely used -->
   61128     <tr><td><dfn id=handler-onmousewheel title=handler-onmousewheel><code>onmousewheel</code></dfn> <td> <code title=event-mousewheel>mousewheel</code> <!-- widely used -->
   61129     <tr><td><dfn id=handler-onpause title=handler-onpause><code>onpause</code></dfn> <td> <code title=event-media-pause><a href=#event-media-pause>pause</a></code>
   61130     <tr><td><dfn id=handler-onplay title=handler-onplay><code>onplay</code></dfn> <td> <code title=event-media-play><a href=#event-media-play>play</a></code>
   61131     <tr><td><dfn id=handler-onplaying title=handler-onplaying><code>onplaying</code></dfn> <td> <code title=event-media-playing><a href=#event-media-playing>playing</a></code>
   61132     <tr><td><dfn id=handler-onprogress title=handler-onprogress><code>onprogress</code></dfn> <td> <code title=event-media-progress><a href=#event-media-progress>progress</a></code>
   61133     <tr><td><dfn id=handler-onratechange title=handler-onratechange><code>onratechange</code></dfn> <td> <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code>
   61134     <tr><td><dfn id=handler-onreadystatechange title=handler-onreadystatechange><code>onreadystatechange</code></dfn> <td> <code title=event-readystatechange>readystatechange</code>
   61135     <tr><td><dfn id=handler-onscroll title=handler-onscroll><code>onscroll</code></dfn> <td> <code title=event-scroll>scroll</code> <!-- widely used --> <!-- [CSSOM] -->
   61136     <tr><td><dfn id=handler-onseeked title=handler-onseeked><code>onseeked</code></dfn> <td> <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code>
   61137     <tr><td><dfn id=handler-onseeking title=handler-onseeking><code>onseeking</code></dfn> <td> <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code>
   61138     <tr><td><dfn id=handler-onselect title=handler-onselect><code>onselect</code></dfn> <td> <code title=event-select>select</code> <!-- widely used --> <!-- [CSSOM] -->
   61139     <tr><td><dfn id=handler-onshow title=handler-onshow><code>onshow</code></dfn> <td> <code title=event-show>show</code>
   61140     <tr><td><dfn id=handler-onstalled title=handler-onstalled><code>onstalled</code></dfn> <td> <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code>
   61141     <tr><td><dfn id=handler-onsubmit title=handler-onsubmit><code>onsubmit</code></dfn> <td> <code title=event-submit>submit</code> <!-- widely used -->
   61142     <tr><td><dfn id=handler-onsuspend title=handler-onsuspend><code>onsuspend</code></dfn> <td> <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code>
   61143     <tr><td><dfn id=handler-ontimeupdate title=handler-ontimeupdate><code>ontimeupdate</code></dfn> <td> <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code>
   61144     <tr><td><dfn id=handler-onvolumechange title=handler-onvolumechange><code>onvolumechange</code></dfn> <td> <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code>
   61145     <tr><td><dfn id=handler-onwaiting title=handler-onwaiting><code>onwaiting</code></dfn> <td> <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code>
   61146 
   61147 <!-- not supported, use dnd: -->
   61148 <!--<tr><td><dfn title="handler-onbeforecopy"><code>onbeforecopy</code></dfn> <td> <code title="event-beforecopy">beforecopy</code>--> <!-- widely used -->
   61149 <!--<tr><td><dfn title="handler-oncopy"><code>oncopy</code></dfn> <td> <code title="event-copy">copy</code>--> <!-- widely used -->
   61150 <!--<tr><td><dfn title="handler-onpaste"><code>onpaste</code></dfn> <td> <code title="event-paste">paste</code>--> <!-- widely used -->
   61151 <!-- not supported yet (v2?): -->
   61152 <!--<tr><td><dfn title="handler-onselectstart"><code>onselectstart</code></dfn> <td> <code title="event-selectstart">selectstart</code>--> <!-- widely used -->
   61153   </table><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
   61154   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   61155   event types</a>) that must be supported by all <a href=#html-elements>HTML
   61156   elements</a> other than <code><a href=#the-body-element-0>body</a></code>, as both content
   61157   attributes and IDL attributes, and on <code><a href=#document>Document</a></code> objects,
   61158   as IDL attributes:</p>
   61159 
   61160   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   61161    <tbody><tr><td><dfn id=handler-onblur title=handler-onblur><code>onblur</code></dfn> <td> <code title=event-blur>blur</code> <!-- widely used -->
   61162     <tr><td><dfn id=handler-onerror title=handler-onerror><code>onerror</code></dfn> <td> <code title=event-error>error</code>
   61163     <tr><td><dfn id=handler-onfocus title=handler-onfocus><code>onfocus</code></dfn> <td> <code title=event-focus>focus</code> <!-- widely used -->
   61164     <tr><td><dfn id=handler-onload title=handler-onload><code>onload</code></dfn> <td> <code title=event-load>load</code>
   61165   </table><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
   61166   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   61167   event types</a>) that must be supported by <code><a href=#window>Window</a></code>
   61168   objects, as IDL attributes on the <code><a href=#window>Window</a></code> object, and
   61169   with corresponding content attributes and IDL attributes exposed on
   61170   the <code><a href=#the-body-element-0>body</a></code> and <code><a href=#frameset>frameset</a></code> elements:</p>
   61171 
   61172   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   61173    <tbody><tr><td><dfn id=handler-window-onafterprint title=handler-window-onafterprint><code>onafterprint</code></dfn> <td> <code title=event-afterprint>afterprint</code>
   61174     <tr><td><dfn id=handler-window-onbeforeprint title=handler-window-onbeforeprint><code>onbeforeprint</code></dfn> <td> <code title=event-beforeprint>beforeprint</code>
   61175     <tr><td><dfn id=handler-window-onbeforeunload title=handler-window-onbeforeunload><code>onbeforeunload</code></dfn> <td> <code title=event-beforeunload>beforeunload</code>
   61176     <tr><td><dfn id=handler-window-onblur title=handler-window-onblur><code>onblur</code></dfn> <td> <code title=event-blur>blur</code>
   61177     <tr><td><dfn id=handler-window-onerror title=handler-window-onerror><code>onerror</code></dfn> <td> <code title=event-error>error</code>
   61178     <tr><td><dfn id=handler-window-onfocus title=handler-window-onfocus><code>onfocus</code></dfn> <td> <code title=event-focus>focus</code>
   61179     <tr><td><dfn id=handler-window-onhashchange title=handler-window-onhashchange><code>onhashchange</code></dfn> <td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> <!-- new -->
   61180     <tr><td><dfn id=handler-window-onload title=handler-window-onload><code>onload</code></dfn> <td> <code title=event-load>load</code> <!-- widely used -->
   61181     <tr><td><dfn id=handler-window-onmessage title=handler-window-onmessage><code>onmessage</code></dfn> <td> <code title=event-message><a href=#event-message>message</a></code> <!-- new for postMessage -->
   61182     <tr><td><dfn id=handler-window-onoffline title=handler-window-onoffline><code>onoffline</code></dfn> <td> <code title=event-offline><a href=#event-offline>offline</a></code> <!-- new -->
   61183     <tr><td><dfn id=handler-window-ononline title=handler-window-ononline><code>ononline</code></dfn> <td> <code title=event-online><a href=#event-online>online</a></code> <!-- new -->
   61184     <tr><td><dfn id=handler-window-onpagehide title=handler-window-onpagehide><code>onpagehide</code></dfn> <td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> <!-- new -->
   61185     <tr><td><dfn id=handler-window-onpageshow title=handler-window-onpageshow><code>onpageshow</code></dfn> <td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> <!-- new -->
   61186     <tr><td><dfn id=handler-window-onpopstate title=handler-window-onpopstate><code>onpopstate</code></dfn> <td> <code title=event-popstate><a href=#event-popstate>popstate</a></code> <!-- new -->
   61187     <tr><td><dfn id=handler-window-onredo title=handler-window-onredo><code>onredo</code></dfn> <td> <code title=event-redo><a href=#event-redo>redo</a></code> <!-- new -->
   61188     <tr><td><dfn id=handler-window-onresize title=handler-window-onresize><code>onresize</code></dfn> <td> <code title=event-resize>resize</code> <!-- widely used --> <!-- [CSSOM] -->
   61189     <tr><td><dfn id=handler-window-onstorage title=handler-window-onstorage><code>onstorage</code></dfn> <td> <code title=event-storage>storage</code> <!-- new -->
   61190     <tr><td><dfn id=handler-window-onundo title=handler-window-onundo><code>onundo</code></dfn> <td> <code title=event-undo><a href=#event-undo>undo</a></code> <!-- new -->
   61191     <tr><td><dfn id=handler-window-onunload title=handler-window-onunload><code>onunload</code></dfn> <td> <code title=event-unload>unload</code> <!-- widely used -->
   61192   </table><p class=note>The <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>
   61193   handler is also used for <a href=#runtime-script-errors>reporting script errors</a>.</p>
   61194 
   61195   </div>
   61196 
   61197 
   61198   <div class=impl>
   61199 
   61200   <h5 id=event-firing><span class=secno>7.1.6.3 </span>Event firing</h5>
   61201 
   61202   <p>Certain operations and methods are defined as firing events on
   61203   elements. For example, the <code title=dom-click><a href=#dom-click>click()</a></code>
   61204   method on the <code><a href=#htmlelement>HTMLElement</a></code> interface is defined as
   61205   firing a <code title=event-click><a href=#event-click>click</a></code> event on the
   61206   element. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   61207 
   61208   <p><dfn id=fire-a-click-event title="fire a click event">Firing a <code title=event-click>click</code> event</dfn> means that a <code title=event-click><a href=#event-click>click</a></code> event, which bubbles and is
   61209   cancelable, and which uses the <code>MouseEvent</code> interface,
   61210   must be dispatched at the given target. The event object must have
   61211   its <code title="">screenX</code>, <code title="">screenY</code>,
   61212   <code title="">clientX</code>, <code title="">clientY</code>, and
   61213   <code title="">button</code> attributes set to 0, its <code title="">ctrlKey</code>, <code title="">shiftKey</code>, <code title="">altKey</code>, and <code title="">metaKey</code> attributes
   61214   set according to the current state of the key input device, if any
   61215   (false for any keys that are not available), its <code title="">detail</code> attribute set to 1, and its <code title="">relatedTarget</code> attribute set to null. The <code title="">getModifierState()</code> method on the object must return
   61216   values appropriately describing the state of the key input device at
   61217   the time the event is created.</p>
   61218 
   61219   <p><dfn id=fire-a-simple-event title="fire a simple event">Firing a simple event named <var title="">e</var></dfn> means that an event with the name <var title="">e</var>, which does not bubble (except where otherwise
   61220   stated) and is not cancelable (except where otherwise stated), and
   61221   which uses the <code><a href=#event>Event</a></code> interface, must be dispatched at
   61222   the given target.</p>
   61223 
   61224 <!--
   61225   <p><dfn title="fire a progress event">Firing a progress event named
   61226   <var title="">e</var></dfn>, optionally in the context of a
   61227   particular instance of the <span title="fetch">fetching
   61228   algorithm</span>, means that an event with the name <var
   61229   title="">e</var>, which does not bubble (except where otherwise
   61230   stated) and is not cancelable (except where otherwise stated), and
   61231   which uses the <code>ProgressEvent</code> interface, must be
   61232   dispatched at the given target element. If there is a <span
   61233   title="fetch">fetching algorithm</span>, and the <span>URL</span>
   61234   being <span title="fetch">fetched</span> has the <span>same
   61235   origin</span> as the <code>Document</code> of the target element,
   61236   then the <code
   61237   title="dom-ProgressEvents-lengthComputable">lengthComputable</code>
   61238   attribute must be set to true if the <span title="fetch">fetching
   61239   algorithm</span>'s subject has a known <span
   61240   title="concept-fetch-total">size</span>; the <code
   61241   title="dom-ProgressEvents-total">total</code> attribute must be set
   61242   to the subject's <span title="concept-fetch-total">size</span> if it
   61243   is known and zero otherwise; and the <code
   61244   title="dom-ProgressEvents-loaded">loaded</code> attribute must be
   61245   set to the <span title="concept-fetch-loaded">number of bytes
   61246   downloaded</span>, excluding HTTP headers <span
   61247   title="concept-http-equivalent-headers">or
   61248   equivalent</span>. Otherwise, the <code
   61249   title="dom-ProgressEvents-lengthComputable">lengthComputable</code>
   61250   attribute must be set to false, and the <code
   61251   title="dom-ProgressEvents-total">total</code> and the <code
   61252   title="dom-ProgressEvents-loaded">loaded</code> attributes must be
   61253   set to zero. <a href="#r-e-f-sPROGRESS">[PROGRESS]</a></p>
   61254 (also fix reference in line above)-->
   61255 
   61256   <p>The default action of these event is to do nothing except where
   61257   otherwise stated.</p>
   61258 
   61259   </div>
   61260 
   61261 
   61262   <div class=impl>
   61263 
   61264   <h5 id=events-and-the-window-object><span class=secno>7.1.6.4 </span>Events and the <code><a href=#window>Window</a></code> object</h5>
   61265 
   61266   <p>When an event is dispatched at a DOM node in a
   61267   <code><a href=#document>Document</a></code> in a <a href=#browsing-context>browsing context</a>, if the
   61268   event is not a <code title=event-load>load</code> event, the user
   61269   agent must also dispatch the event to the <code><a href=#window>Window</a></code>, as
   61270   follows:</p>
   61271 
   61272   <ol><li>In the capture phase, the event must propagate to the
   61273    <code><a href=#window>Window</a></code> object before propagating to any of the nodes,
   61274    as if the <code><a href=#window>Window</a></code> object was the parent of the
   61275    <code><a href=#document>Document</a></code> in the dispatch chain.</li>
   61276 
   61277    <li>In the bubble phase, the event must propagate up to the
   61278    <code><a href=#window>Window</a></code> object at the end of the phase, unless bubbling
   61279    has been prevented, again as if the <code><a href=#window>Window</a></code> object was
   61280    the parent of the <code><a href=#document>Document</a></code> in the dispatch chain.</li>
   61281 
   61282   </ol></div>
   61283 
   61284 
   61285   <div class=impl>
   61286 
   61287   <h5 id=runtime-script-errors><span class=secno>7.1.6.5 </span>Runtime script errors</h5>
   61288 
   61289   <p><i>This section only applies to user agents that support
   61290   scripting in general and JavaScript in particular.</i></p>
   61291 
   61292   <p>Whenever an uncaught runtime script error occurs in one of the
   61293   scripts associated with a <code><a href=#document>Document</a></code>, the user agent must
   61294   <a href=#report-the-error>report the error</a> using the <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code> <a href=#event-handlers title="event
   61295   handlers">event handler</a> of the <a href="#script's-global-object">script's global
   61296   object</a>. If the error is still <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i> after this, then
   61297   the error may be reported to the user.</p>
   61298 
   61299   <hr><p>When the user agent is required to <dfn id=report-the-error title="report the
   61300   error">report an error</dfn> <var title="">error</var> using the
   61301   <a href=#event-handlers title="event handlers">event handler</a> <var title="">onerror</var>, it must run these steps, after which the
   61302   error is either <dfn id=concept-error-handled title=concept-error-handled><i>handled</i></dfn> or <dfn id=concept-error-nothandled title=concept-error-nothandled><i>not handled</i></dfn>:</p>
   61303 
   61304   <dl class=switch><dt>If the value of <var title="">onerror</var> is a
   61305    <code><a href=#function>Function</a></code></dt>
   61306 
   61307    <dd>
   61308 
   61309     <p>The function must be invoked with three arguments. The three
   61310     arguments passed to the function are all <code>DOMString</code>s;
   61311     the first must give the message that the UA is considering
   61312     reporting, the second must give the <a href=#absolute-url>absolute URL</a> of
   61313     the resource in which the error occurred, and the third must give
   61314     the line number in that resource on which the error occurred.</p>
   61315 
   61316     <p>If the function returns false, then the error is <i title=concept-error-handled><a href=#concept-error-handled>handled</a></i>. Otherwise, the error is
   61317     <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i>.</p>
   61318 
   61319     <p>Any uncaught exceptions thrown or errors caused by this
   61320     function may be reported to the user immediately after the error
   61321     that the function was called for; the <a href=#report-the-error title="report the
   61322     error">report an error</a> algorithm must not be used to handle
   61323     exceptions thrown or errors caused by this function.</p>
   61324 
   61325    </dd>
   61326 
   61327    <dt>Otherwise</dt>
   61328 
   61329    <dd>
   61330 
   61331     <p>The error is <i title=concept-error-nothandled><a href=#concept-error-nothandled>not handled</a></i>.</p>
   61332 
   61333    </dd>
   61334 
   61335   </dl></div>
   61336 
   61337 
   61338   <h3 id=timers><span class=secno>7.2 </span>Timers</h3>
   61339 
   61340   <p>The <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code>
   61341   and <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval()</a></code>
   61342   methods allow authors to schedule timer-based callbacks.</p>
   61343 
   61344 <pre class=idl>[Supplemental, NoInterfaceObject]
   61345 interface <dfn id=windowtimers>WindowTimers</dfn> {
   61346   long <a href=#dom-windowtimers-settimeout title=dom-windowtimers-setTimeout>setTimeout</a>(in any handler, in optional any timeout, in any... args);
   61347   void <a href=#dom-windowtimers-cleartimeout title=dom-windowtimers-clearTimeout>clearTimeout</a>(in long handle);
   61348   long <a href=#dom-windowtimers-setinterval title=dom-windowtimers-setInterval>setInterval</a>(in any handler, in optional any timeout, in any... args);
   61349   void <a href=#dom-windowtimers-clearinterval title=dom-windowtimers-clearInterval>clearInterval</a>(in long handle);
   61350 };
   61351 <a href=#window>Window</a> implements <a href=#windowtimers>WindowTimers</a>;</pre>
   61352 
   61353   <dl class=domintro><dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>
   61354 
   61355    <dd>
   61356 
   61357     <p>Schedules a timeout to run <var title="">handler</var> after
   61358     <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
   61359 
   61360    </dd>
   61361 
   61362    <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>
   61363 
   61364    <dd>
   61365 
   61366     <p>Schedules a timeout to compile and run <var title="">code</var>
   61367     after <var title="">timeout</var> milliseconds.</p>
   61368 
   61369    </dd>
   61370 
   61371    <dt><var title="">window</var> . <code title=dom-windowtimers-clearTimeout><a href=#dom-windowtimers-cleartimeout>clearTimeout</a></code>( <var title="">handle</var> )</dt>
   61372 
   61373    <dd>
   61374 
   61375     <p>Cancels the timeout set with <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code> identified by <var title="">handle</var>.</p>
   61376 
   61377    </dd>
   61378 
   61379    <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>
   61380 
   61381    <dd>
   61382 
   61383     <p>Schedules a timeout to run <var title="">handler</var> every
   61384     <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
   61385 
   61386    </dd>
   61387 
   61388    <dt><var title="">handle</var> = <var title="">window</var> . <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>
   61389 
   61390    <dd>
   61391 
   61392     <p>Schedules a timeout to compile and run <var title="">code</var>
   61393     every <var title="">timeout</var> milliseconds.</p>
   61394 
   61395    </dd>
   61396 
   61397    <dt><var title="">window</var> . <code title=dom-windowtimers-clearInterval><a href=#dom-windowtimers-clearinterval>clearInterval</a></code>( <var title="">handle</var> )</dt>
   61398 
   61399    <dd>
   61400 
   61401     <p>Cancels the timeout set with <code title=dom-windowtimers-setInterval><a href=#dom-windowtimers-setinterval>setInterval()</a></code> identified by <var title="">handle</var>.</p>
   61402 
   61403    </dd>
   61404 
   61405   </dl><p class=note>This API does not guarantee that timers will fire
   61406   exactly on schedule. Delays due to CPU load, other tasks, etc, are
   61407   to be expected.</p>
   61408 
   61409   <div class=impl>
   61410 
   61411   <p class=note>The <code><a href=#windowtimers>WindowTimers</a></code> interface adds to the
   61412   <code><a href=#window>Window</a></code> interface and the <code>WorkerUtils</code>
   61413   interface (part of Web Workers).</p>
   61414 
   61415   <p>Each object that implements the <code><a href=#windowtimers>WindowTimers</a></code>
   61416   interface has a <dfn id=list-of-active-timeouts>list of active timeouts</dfn> and a <dfn id=list-of-active-intervals>list
   61417   of active intervals</dfn>. Each entry in these lists is identified
   61418   by a number, which must be unique within its list for the lifetime
   61419   of the object that implements the <code><a href=#windowtimers>WindowTimers</a></code>
   61420   interface.</p>
   61421 
   61422   <hr><p>The <dfn id=dom-windowtimers-settimeout title=dom-windowtimers-setTimeout><code>setTimeout()</code></dfn>
   61423   method must run the following steps:
   61424 
   61425   <ol><li><p>Let <var title="">handle</var> be a user-agent-defined integer
   61426    that is greater than zero that will identify the timeout to be set
   61427    by this call.</li>
   61428 
   61429    <li><p>Add an entry to the <a href=#list-of-active-timeouts>list of active timeouts</a> for
   61430    <var title="">handle</var>.</li>
   61431 
   61432    <li><p><a href=#get-the-timed-task>Get the timed task</a> <var title="">handle</var> in
   61433    the <a href=#list-of-active-timeouts>list of active timeouts</a>, and let <var title="">task</var> be the result.</li>
   61434 
   61435    <li><p><a href=#get-the-timeout>Get the timeout</a>, and let <var title="">timeout</var> be the result.</li>
   61436 
   61437    <li><p>If the currently running <a href=#concept-task title=concept-task>task</a> is a task that was created by the
   61438    <code title=dom-windowtimers-setTimeout><a href=#dom-windowtimers-settimeout>setTimeout()</a></code>
   61439    method, and <var title="">timeout</var> is less than 4, then
   61440    increase <var title="">timeout</var> to 4.</li>
   61441 
   61442    <li><p>Return <var title="">handle</var>, and then continue running
   61443    this algorithm asynchronously.</li>
   61444 
   61445    <li>
   61446 
   61447     <p>If the <a href=#method-context>method context</a> is a <code><a href=#window>Window</a></code>
   61448     object, wait until the <code><a href=#document>Document</a></code> associated with the
   61449     <a href=#method-context>method context</a> has been <a href=#fully-active>fully active</a> for
   61450     a further <var title="">timeout</var> milliseconds (not
   61451     necessarily consecutively).</p>
   61452 
   61453     <p>Otherwise, if the <a href=#method-context>method context</a> is a
   61454     <code>WorkerUtils</code> object, wait until <var title="">timeout</var> milliseconds have passed with the worker
   61455     not suspended (not necessarily consecutively).</p>
   61456 
   61457     <p>Otherwise, act as described in the specification that defines
   61458     that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
   61459     some other object.</p>
   61460 
   61461    </li>
   61462 
   61463    <li><p>Wait until any invocations of this algorithm started before
   61464    this one whose <var title="">timeout</var> is equal to or less than
   61465    this one's have completed.</li>
   61466 
   61467    <li><p><a href=#queue-a-task title="queue a task">Queue</a> the <var title="">task</var> <a href=#concept-task title=concept-task>task</a>.</li>
   61468 
   61469   </ol><p>The <dfn id=dom-windowtimers-cleartimeout title=dom-windowtimers-clearTimeout><code>clearTimeout()</code></dfn>
   61470   method must clear the entry identified as <var title="">handle</var>
   61471   from the <a href=#list-of-active-timeouts>list of active timeouts</a> of the
   61472   <code><a href=#windowtimers>WindowTimers</a></code> object on which the method was invoked,
   61473   where <var title="">handle</var> is the argument passed to the
   61474   method.</p>
   61475 
   61476   <hr><p>The <dfn id=dom-windowtimers-setinterval title=dom-windowtimers-setInterval><code>setInterval()</code></dfn>
   61477   method must run the following steps:
   61478 
   61479   <ol><li><p>Let <var title="">handle</var> be a user-agent-defined integer
   61480    that is greater than zero that will identify the interval to be set
   61481    by this call.</li>
   61482 
   61483    <li><p>Add an entry to the <a href=#list-of-active-intervals>list of active intervals</a> for
   61484    <var title="">handle</var>.</li>
   61485 
   61486    <li><p><a href=#get-the-timed-task>Get the timed task</a> <var title="">handle</var> in
   61487    the <a href=#list-of-active-intervals>list of active intervals</a>, and let <var title="">task</var> be the result.</li>
   61488 
   61489    <li><p><a href=#get-the-timeout>Get the timeout</a>, and let <var title="">timeout</var> be the result.</li>
   61490 
   61491    <li><p>If <var title="">timeout</var> is less than 10, then
   61492    increase <var title="">timeout</var> to 10.</li> <!-- (but see
   61493    note below about IE) -->
   61494 
   61495    <li><p>Return <var title="">handle</var>, and then continue running
   61496    this algorithm asynchronously.</li>
   61497 
   61498    <!-- Note: IE doesn't actually run intervals with duration zero, it
   61499    aborts roughly here in the algorithm for them. -->
   61500 
   61501    <li>
   61502 
   61503     <p><i title="">Wait</i>: If the <a href=#method-context>method context</a> is a
   61504     <code><a href=#window>Window</a></code> object, wait until the <code><a href=#document>Document</a></code>
   61505     associated with the <a href=#method-context>method context</a> has been <a href=#fully-active>fully
   61506     active</a> for a further <var title="">interval</var>
   61507     milliseconds (not necessarily consecutively).</p>
   61508 
   61509     <p>Otherwise, if the <a href=#method-context>method context</a> is a
   61510     <code>WorkerUtils</code> object, wait until <var title="">interval</var> milliseconds have passed with the worker
   61511     not suspended (not necessarily consecutively).</p>
   61512 
   61513     <p>Otherwise, act as described in the specification that defines
   61514     that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
   61515     some other object.</p>
   61516 
   61517    </li>
   61518 
   61519    <li><p><a href=#queue-a-task title="queue a task">Queue</a> the <var title="">task</var> <a href=#concept-task title=concept-task>task</a>.</li>
   61520 
   61521    <li><p>Return to the step labeled <i>wait</i>.</li>
   61522 
   61523   </ol><p>The <dfn id=dom-windowtimers-clearinterval title=dom-windowtimers-clearInterval><code>clearInterval()</code></dfn>
   61524   method must clear the entry identified as <var title="">handle</var>
   61525   from the <a href=#list-of-active-intervals>list of active intervals</a> of the
   61526   <code><a href=#windowtimers>WindowTimers</a></code> object on which the method was invoked,
   61527   where <var title="">handle</var> is the argument passed to the
   61528   method.</p>
   61529 
   61530   <hr><p>The <dfn id=method-context>method context</dfn>, when referenced by the algorithms
   61531   in this section, is the object on which the method for which the
   61532   algorithm is running is implemented (a <code><a href=#window>Window</a></code> or
   61533   <code>WorkerUtils</code> object).</p>
   61534 
   61535   <p>When the above methods are invoked and try to <dfn id=get-the-timed-task>get the timed
   61536   task</dfn> <var title="">handle</var> in list <var title="">list</var>,
   61537   they must run the following steps:</p>
   61538 
   61539   <ol><li>
   61540 
   61541     <p>If the first argument to the invoked method is an object that
   61542     has an internal [[Call]] method, then return a <a href=#concept-task title=concept-task>task</a> that checks if the entry for <var title="">handle</var> in <var title="">list</var> has been cleared,
   61543     and if it has not, calls the aforementioned [[Call]] method with
   61544     as its arguments the third and subsequent arguments to the invoked
   61545     method (if any), and abort these steps.</p>
   61546 
   61547     <p>Otherwise, continue with the remaining steps.</p>
   61548 
   61549    </li>
   61550 
   61551    <li><p>Apply the ToString() abstract operation to the first
   61552    argument to the method, and let <var title="">script source</var>
   61553    be the result. <a href=#refsECMA262>[ECMA262]</a></li>
   61554 
   61555    <li><p>Let <var title="">script language</var> be
   61556    JavaScript.</li>
   61557 
   61558    <li>
   61559 
   61560     <p>If the <a href=#method-context>method context</a> is a <code><a href=#window>Window</a></code>
   61561     object, let <var title="">global object</var> be the <a href=#method-context>method
   61562     context</a>, let <var title="">browsing context</var> be the
   61563     <a href=#browsing-context>browsing context</a> with which <var title="">global
   61564     object</var> is associated, let <var title="">character
   61565     encoding</var> be the <a href="#document's-character-encoding" title="document's character
   61566     encoding">character encoding</a> of the <code><a href=#document>Document</a></code>
   61567     associated with <var title="">global object</var> (<a href=#sce-not-copy>this is a reference, not a copy</a>), and let
   61568     <var title="">base URL</var> be the <a href=#document-base-url title="document base
   61569     URL">base URL</a> of the <code><a href=#document>Document</a></code> associated with
   61570     <var title="">global object</var> (<a href=#sbu-not-copy>this is
   61571     a reference, not a copy</a>).</p>
   61572 
   61573     <p>Otherwise, if the <a href=#method-context>method context</a> is a
   61574     <code>WorkerUtils</code> object, let <var title="">global
   61575     object</var>, <var title="">browsing context</var>, <var title="">document</var>, <var title="">character encoding</var>,
   61576     and <var title="">base URL</var> be the <a href="#script's-global-object">script's global
   61577     object</a>, <a href="#script's-browsing-context">script's browsing context</a>,
   61578     <a href="#script's-document">script's document</a>, <a href="#script's-url-character-encoding">script's URL character
   61579     encoding</a>, and <a href="#script's-base-url">script's base URL</a> (respectively)
   61580     of the <a href=#concept-script title=concept-script>script</a> that the
   61581     <span>run a worker</span> algorithm created when it created the
   61582     <a href=#method-context>method context</a>.</p>
   61583 
   61584     <p>Otherwise, act as described in the specification that defines
   61585     that the <code><a href=#windowtimers>WindowTimers</a></code> interface is implemented by
   61586     some other object.</p>
   61587 
   61588    </li>
   61589 
   61590    <li><p>Return a <a href=#concept-task title=concept-task>task</a> that checks
   61591    if the entry for <var title="">handle</var> in <var title="">list</var> has been cleared, and if it has not, <a href=#create-a-script title="create a script">creates a script</a> using <var title="">script source</var> as the script source, <var title="">scripting language</var> as the scripting language, <var title="">global object</var> as the global object, <var title="">browsing context</var> as the browsing context, <var title="">document</var> as the document, <var title="">character
   61592    encoding</var> as the URL character encoding, and <var title="">base URL</var> as the base URL.</li>
   61593 
   61594   </ol><p>When the above methods are to <dfn id=get-the-timeout>get the timeout</dfn>, they
   61595   must run the following steps:</p>
   61596 
   61597   <ol><li><p>Let <var title="">timeout</var> be the second argument to
   61598    the method, or zero if the argument was omitted.</li>
   61599 
   61600    <li><p>Apply the ToString() abstract operation to <var title="">timeout</var>, and let <var title="">timeout</var>
   61601    be the result. <a href=#refsECMA262>[ECMA262]</a></li>
   61602 
   61603    <li><p>Apply the ToNumber() abstract operation to <var title="">timeout</var>, and let <var title="">timeout</var> be the
   61604    result. <a href=#refsECMA262>[ECMA262]</a></li>
   61605 
   61606    <li><p>If <var title="">timeout</var> is an Infinity value, a
   61607    Not-a-Number (NaN) value, or negative, let <var title="">timeout</var> be zero.</li>
   61608 
   61609    <li><p>Round <var title="">timeout</var> down to the nearest
   61610    integer, and let <var title="">timeout</var> be the
   61611    result.</li>
   61612 
   61613    <li><p>Return <var title="">timeout</var>.</li>
   61614 
   61615   </ol><hr><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <dfn id=timer-task-source>timer task
   61616   source</dfn>.</p>
   61617 
   61618   </div>
   61619 
   61620 
   61621 
   61622   <h3 id=user-prompts><span class=secno>7.3 </span>User prompts</h3>
   61623 
   61624   <!--
   61625    v2 ideas:
   61626     * in-window modal dialogs
   61627        - escape/enter handling
   61628        - dragging the window out of the tab
   61629     * in-window non-modal palettes
   61630        - with a solution for the mobile space
   61631   -->
   61632 
   61633   <h4 id=simple-dialogs><span class=secno>7.3.1 </span>Simple dialogs</h4>
   61634 
   61635   <dl class=domintro><dt><var title="">window</var> . <code title=dom-alert><a href=#dom-alert>alert</a></code>(<var title="">message</var>)</dt>
   61636    <dd>
   61637 
   61638     <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p>
   61639 
   61640     <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   61641     method is implied when this method is invoked.</p>
   61642 
   61643    </dd>
   61644 
   61645    <dt><var title="">result</var> = <var title="">window</var> . <code title=dom-confirm><a href=#dom-confirm>confirm</a></code>(<var title="">message</var>)</dt>
   61646    <dd>
   61647 
   61648     <p>Displays a modal OK/Cancel prompt with the given message, waits
   61649     for the user to dismiss it, and returns true if the user clicks OK
   61650     and false if the user clicks Cancel.</p>
   61651 
   61652     <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   61653     method is implied when this method is invoked.</p>
   61654 
   61655    </dd>
   61656 
   61657    <dt><var title="">result</var> = <var title="">window</var> . <code title=dom-prompt><a href=#dom-prompt>prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt>
   61658    <dd>
   61659 
   61660     <p>Displays a modal text field prompt with the given message,
   61661     waits for the user to dismiss it, and returns the value that the
   61662     user entered. If the user cancels the prompt, then returns null
   61663     instead. If the second argument is present, then the given value
   61664     is used as a default.</p>
   61665 
   61666     <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   61667     method is implied when this method is invoked.</p>
   61668 
   61669    </dd>
   61670 
   61671   </dl><div class=impl>
   61672 
   61673   <p>The <dfn id=dom-alert title=dom-alert><code>alert(<var title="">message</var>)</code></dfn> method, when invoked, must
   61674   release the <a href=#storage-mutex>storage mutex</a> and show the given <var title="">message</var> to the user. The user agent may make the
   61675   method wait for the user to acknowledge the message before
   61676   returning; if so, the user agent must <a href=#pause>pause</a> while the
   61677   method is waiting.</p>
   61678 
   61679   <p>The <dfn id=dom-confirm title=dom-confirm><code>confirm(<var title="">message</var>)</code></dfn> method, when invoked, must
   61680   release the <a href=#storage-mutex>storage mutex</a> and show the given <var title="">message</var> to the user, and ask the user to respond with
   61681   a positive or negative response. The user agent must then
   61682   <a href=#pause>pause</a> as the method waits for the user's response. If
   61683   the user responds positively, the method must return true, and if
   61684   the user responds negatively, the method must return false.</p>
   61685 
   61686   <p>The <dfn id=dom-prompt title=dom-prompt><code>prompt(<var title="">message</var>, <var title="">default</var>)</code></dfn>
   61687   method, when invoked, must release the <a href=#storage-mutex>storage mutex</a>,
   61688   show the given <var title="">message</var> to the user, and ask the
   61689   user to either respond with a string value or abort. The user agent
   61690   must then <a href=#pause>pause</a> as the method waits for the user's
   61691   response. The second argument is optional. If the second argument
   61692   (<var title="">default</var>) is present, then the response must be
   61693   defaulted to the value given by <var title="">default</var>. If the
   61694   user aborts, then the method must return null; otherwise, the method
   61695   must return the string that the user responded with.</p>
   61696 
   61697   </div>
   61698 
   61699 
   61700   <h4 id=printing><span class=secno>7.3.2 </span>Printing</h4>
   61701 
   61702   <dl class=domintro><dt><var title="">window</var> . <code title=dom-print><a href=#dom-print>print</a></code>()</dt>
   61703 
   61704    <dd>
   61705 
   61706     <p>Prompts the user to print the page.</p>
   61707 
   61708     <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   61709     method is implied when this method is invoked.</p>
   61710 
   61711    </dd>
   61712 
   61713   </dl><div class=impl>
   61714 
   61715   <p>The <dfn id=dom-print title=dom-print><code>print()</code></dfn> method,
   61716   when invoked, must run the <a href=#printing-steps>printing steps</a>.</p>
   61717 
   61718   <p>User agents should also run the <a href=#printing-steps>printing steps</a>
   61719   whenever the user asks for the opportunity to <a href=#obtain-a-physical-form>obtain a
   61720   physical form</a> (e.g. printed copy), or the representation of a
   61721   physical form (e.g. PDF copy), of a document.</p>
   61722 
   61723   <p>The <dfn id=printing-steps>printing steps</dfn> are as follows:</p>
   61724 
   61725   <ol><li>
   61726 
   61727     <p>The user agent may display a message to the user and/or may
   61728     abort these steps.</p>
   61729 
   61730     <p class=example>For instance, a kiosk browser could silently
   61731     ignore any invocations of the <code title=dom-print><a href=#dom-print>print()</a></code> method.</p>
   61732 
   61733     <p class=example>For instance, a browser on a mobile device
   61734     could detect that there are no printers in the vicinity and
   61735     display a message saying so before continuing to offer a "save to
   61736     PDF" option.</p>
   61737 
   61738    </li>
   61739 
   61740    <li>
   61741 
   61742     <p>The user agent must <a href=#fire-a-simple-event>fire a simple event</a> named
   61743     <code title=event-beforeprint>beforeprint</code> at the
   61744     <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code> that is
   61745     being printed, as well as any <a href=#nested-browsing-context title="nested browsing
   61746     context">nested browsing contexts</a> in it.</p>
   61747 
   61748     <p class=example>The <code title=event-beforeprint>beforeprint</code> event can be used
   61749     to annotate the printed copy, for instance adding the time at
   61750     which the document was printed.</p>
   61751 
   61752    </li>
   61753 
   61754    <li>
   61755 
   61756     <p>The user agent must release the <a href=#storage-mutex>storage mutex</a>.</p>
   61757 
   61758    </li>
   61759 
   61760    <li>
   61761 
   61762     <p>The user agent should offer the user the opportunity to
   61763     <a href=#obtain-a-physical-form>obtain a physical form</a> (or the representation of a
   61764     physical form) of the document. The user agent may wait for the
   61765     user to either accept or decline before returning; if so, the user
   61766     agent must <a href=#pause>pause</a> while the method is waiting. Even if
   61767     the user agent doesn't wait at this point, the user agent must use
   61768     the state of the relevant documents as they are at this point in
   61769     the algorithm if and when it eventually creates the alternate
   61770     form.</p>
   61771 
   61772    </li>
   61773 
   61774    <li>
   61775 
   61776     <p>The user agent must <a href=#fire-a-simple-event>fire a simple event</a> named
   61777     <code title=event-afterprint>afterprint</code> at the
   61778     <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code> that is
   61779     being printed, as well as any <a href=#nested-browsing-context title="nested browsing
   61780     context">nested browsing contexts</a> in it.</p>
   61781 
   61782     <p class=example>The <code title=event-afterprint>afterprint</code> event can be used
   61783     to revert annotations added in the earlier event, as well as
   61784     showing post-printing UI. For instance, if a page is walking the
   61785     user through the steps of applying for a home loan, the script
   61786     could automatically advance to the next step after having printed
   61787     a form or other.</p>
   61788 
   61789    </li>
   61790 
   61791   </ol></div>
   61792 
   61793 
   61794   <h4 id=dialogs-implemented-using-separate-documents><span class=secno>7.3.3 </span>Dialogs implemented using separate documents</h4>
   61795 
   61796   <dl class=domintro><dt><var title="">result</var> = <var title="">window</var> . <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt>
   61797 
   61798    <dd>
   61799 
   61800     <p>Prompts the user with the given page, waits for that page to
   61801     close, and returns the return value.</p>
   61802 
   61803     <p>A call to the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   61804     method is implied when this method is invoked.</p>
   61805 
   61806    </dd>
   61807 
   61808   </dl><div class=impl>
   61809 
   61810   <p>The <dfn id=dom-showmodaldialog title=dom-showModalDialog><code>showModalDialog(<var title="">url</var>, <var title="">argument</var><!--, <var
   61811   title="">features</var>-->)</code></dfn> method, when invoked, must
   61812   cause the user agent to run the following steps:</p>
   61813 
   61814   <ol><li>
   61815 
   61816     <p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">url</var> relative to the <a href=#entry-script>entry script</a>'s
   61817     <a href="#script's-base-url" title="script's base URL">base URL</a>.</p>
   61818 
   61819     <p>If this fails, then throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception
   61820     and abort these steps.</p>
   61821 
   61822    </li>
   61823 
   61824    <li>
   61825 
   61826     <p>Release the <a href=#storage-mutex>storage mutex</a>.</p>
   61827 
   61828    </li>
   61829 
   61830    <li>
   61831 
   61832     <p>If the user agent is configured such that this invocation of
   61833     <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> is
   61834     somehow disabled, then return the empty string and abort these
   61835     steps.</p>
   61836 
   61837     <p class=note>User agents are expected to disable this method in
   61838     certain cases to avoid user annoyance (e.g. as part of their popup
   61839     blocker feature). For instance, a user agent could require that a
   61840     site be white-listed before enabling this method, or the user
   61841     agent could be configured to only allow one modal dialog at a
   61842     time.</p>
   61843 
   61844    </li>
   61845 
   61846    <li>
   61847 
   61848     <p>Let <var title="">the list of background browsing
   61849     contexts</var> be a list of all the browsing contexts that:</p>
   61850 
   61851     <ul><li>are part of the same <a href=#unit-of-related-browsing-contexts>unit of related browsing
   61852      contexts</a> as the browsing context of the
   61853      <code><a href=#window>Window</a></code> object on which the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method was
   61854      called, and that</li>
   61855 
   61856      <li>have an <a href=#active-document>active document</a> whose
   61857      <a href=#origin>origin</a> is the <a href=#same-origin title="same origin">same</a>
   61858      as the <a href=#origin>origin</a> of the <a href=#concept-script title=concept-script>script</a> that called the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method at
   61859      the time the method was called,</li> <!-- Note that changing
   61860      document.domain to talk to another domain doesn't make you able
   61861      to block that domain -->
   61862 
   61863     </ul><p>...as well as any browsing contexts that are nested inside any
   61864     of the browsing contexts matching those conditions.</p>
   61865 
   61866    </li>
   61867 
   61868    <li>
   61869 
   61870     <p>Disable the user interface for all the browsing contexts in
   61871     <var title="">the list of background browsing contexts</var>. This
   61872     should prevent the user from navigating those browsing contexts,
   61873     causing events to be sent to those browsing context, or editing
   61874     any content in those browsing contexts. However, it does not
   61875     prevent those browsing contexts from receiving events from sources
   61876     other than the user, from running scripts, from running
   61877     animations, and so forth.</p>
   61878 
   61879    </li>
   61880 
   61881    <li>
   61882 
   61883     <p>Create a new <a href=#auxiliary-browsing-context>auxiliary browsing context</a>, with the
   61884     <a href=#opener-browsing-context>opener browsing context</a> being the browsing context of
   61885     the <code><a href=#window>Window</a></code> object on which the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method was
   61886     called. The new auxiliary browsing context has no name.</p>
   61887 
   61888     <p class=note>This <a href=#browsing-context>browsing context</a>'s
   61889     <code><a href=#document>Document</a></code>s' <code><a href=#window>Window</a></code> objects all implement
   61890     the <code><a href=#windowmodal>WindowModal</a></code> interface.</p>
   61891 
   61892    </li>
   61893 
   61894    <li>
   61895 
   61896     <p>Let the <a href=#dialog-arguments>dialog arguments</a> of the new browsing
   61897     context be set to the value of <var title="">argument</var>, or
   61898     the 'undefined' value if the argument was omitted.</p>
   61899 
   61900    </li>
   61901 
   61902    <li>
   61903 
   61904     <p>Let the <a href="#dialog-arguments'-origin">dialog arguments' origin</a> be the
   61905     <a href=#origin>origin</a> of the <a href=#concept-script title=concept-script>script</a> that called the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method.</p>
   61906 
   61907    </li>
   61908 
   61909    <li>
   61910 
   61911     <p><a href=#navigate>Navigate</a> the new <a href=#browsing-context>browsing context</a> to
   61912     the <a href=#absolute-url>absolute URL</a> that resulted from <a href=#resolve-a-url title="resolve a url">resolving</a> <var title="">url</var>
   61913     earlier, with <a href=#replacement-enabled>replacement enabled</a>, and with the <a href="#script's-browsing-context" title="script's browsing context">browsing context</a> of the
   61914     <a href=#concept-script title=concept-script>script</a> that invoked the method
   61915     as the <a href=#source-browsing-context>source browsing context</a>.</p>
   61916 
   61917    </li>
   61918 
   61919    <li>
   61920 
   61921     <p><a href=#spin-the-event-loop>Spin the event loop</a> until the new <a href=#browsing-context>browsing
   61922     context</a> is closed. (The user agent must allow the user to
   61923     indicate that the <a href=#browsing-context>browsing context</a> is to be
   61924     closed.)</p>
   61925 
   61926    </li>
   61927 
   61928    <li>
   61929 
   61930     <p>Reenable the user interface for all the browsing contexts in
   61931     <var title="">the list of background browsing contexts</var>.</p>
   61932 
   61933    </li>
   61934 
   61935    <li>
   61936 
   61937     <p>Return the <a href=#auxiliary-browsing-context>auxiliary browsing context</a>'s
   61938     <a href=#return-value>return value</a>.</p>
   61939 
   61940    </li>
   61941 
   61942   </ol><p>The <code><a href=#window>Window</a></code> objects of <code><a href=#document>Document</a></code>s hosted
   61943   by <a href=#browsing-context title="browsing context">browsing contexts</a> created
   61944   by the above algorithm must all have the <code><a href=#windowmodal>WindowModal</a></code>
   61945   interface added to their <code><a href=#window>Window</a></code> interface:</p>
   61946 
   61947   </div>
   61948 
   61949   <pre class=idl>[Supplemental, NoInterfaceObject] interface <dfn id=windowmodal>WindowModal</dfn> {
   61950   readonly attribute any <a href=#dom-windowmodal-dialogarguments title=dom-WindowModal-dialogArguments>dialogArguments</a>;
   61951            attribute DOMString <a href=#dom-windowmodal-returnvalue title=dom-WindowModal-returnValue>returnValue</a>;
   61952 };</pre>
   61953 
   61954   <dl class=domintro><dt><var title="">window</var> . <code title=dom-WindowModal-dialogArguments><a href=#dom-windowmodal-dialogarguments>dialogArguments</a></code></dt>
   61955 
   61956    <dd>
   61957 
   61958     <p>Returns the <var title="">argument</var> argument that was
   61959     passed to the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method.</p>
   61960 
   61961    </dd>
   61962 
   61963    <dt><var title="">window</var> . <code title=dom-WindowModal-returnValue><a href=#dom-windowmodal-returnvalue>returnValue</a></code> [ = <var title="">value</var> ]</dt>
   61964 
   61965    <dd>
   61966 
   61967     <p>Returns the current return value for the window.</p>
   61968 
   61969     <p>Can be set, to change the value that will be returned by the
   61970     <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code>
   61971     method.</p>
   61972 
   61973    </dd>
   61974 
   61975   </dl><div class=impl>
   61976 
   61977   <p>Such browsing contexts have associated <dfn id=dialog-arguments>dialog
   61978   arguments</dfn>, which are stored along with the <dfn id="dialog-arguments'-origin">dialog
   61979   arguments' origin</dfn>. These values are set by the <code title=dom-showModalDialog><a href=#dom-showmodaldialog>showModalDialog()</a></code> method in the
   61980   algorithm above, when the browsing context is created, based on the
   61981   arguments provided to the method.</p>
   61982 
   61983   <p>The <dfn id=dom-windowmodal-dialogarguments title=dom-WindowModal-dialogArguments><code>dialogArguments</code></dfn>
   61984   IDL attribute, on getting, must check whether its browsing context's
   61985   <a href=#active-document>active document</a>'s <a href=#origin>origin</a> is the <a href=#same-origin title="same origin">same</a> as the <a href="#dialog-arguments'-origin">dialog arguments'
   61986   origin</a>. If it is, then the browsing context's <a href=#dialog-arguments>dialog
   61987   arguments</a> must be returned unchanged. Otherwise, if the
   61988   <a href=#dialog-arguments>dialog arguments</a> are an object, then the empty string
   61989   must be returned, and if the <a href=#dialog-arguments>dialog arguments</a> are not
   61990   an object, then the stringification of the <a href=#dialog-arguments>dialog
   61991   arguments</a> must be returned.
   61992 
   61993   <p>These browsing contexts also have an associated <dfn id=return-value>return
   61994   value</dfn>. The <a href=#return-value>return value</a> of a browsing context
   61995   must be initialized to the empty string when the browsing context is
   61996   created.</p>
   61997 
   61998   <p>The <dfn id=dom-windowmodal-returnvalue title=dom-WindowModal-returnValue><code>returnValue</code></dfn>
   61999   IDL attribute, on getting, must return the <a href=#return-value>return value</a>
   62000   of its browsing context, and on setting, must set the <a href=#return-value>return
   62001   value</a> to the given new value.</p>
   62002 
   62003   </div>
   62004 
   62005   <p class=note>The <code title=dom-window-close><a href=#dom-window-close>window.close()</a></code> method can be used to
   62006   close the browsing context.</p>
   62007 
   62008 
   62009 
   62010 
   62011   <h3 id=system-state-and-capabilities><span class=secno>7.4 </span>System state and capabilities</h3>
   62012 
   62013   <div class=impl>
   62014 
   62015   <p>The <dfn id=dom-navigator title=dom-navigator><code>navigator</code></dfn>
   62016   attribute of the <code><a href=#window>Window</a></code> interface must return an
   62017   instance of the <code><a href=#navigator>Navigator</a></code> interface, which represents
   62018   the identity and state of the user agent (the client), and allows
   62019   Web pages to register themselves as potential protocol and content
   62020   handlers:</p>
   62021 
   62022   </div>
   62023 
   62024   <pre class=idl>interface <dfn id=navigator>Navigator</dfn> {
   62025   // objects implementing this interface also implement the interfaces given below
   62026 };
   62027 <a href=#navigator>Navigator</a> implements <a href=#navigatorid>NavigatorID</a>;
   62028 <a href=#navigator>Navigator</a> implements <a href=#navigatoronline>NavigatorOnLine</a>;
   62029 <a href=#navigator>Navigator</a> implements <a href=#navigatorabilities>NavigatorAbilities</a>;
   62030 
   62031 [Supplemental, NoInterfaceObject]
   62032 interface <dfn id=navigatorid>NavigatorID</dfn> {<!--
   62033   readonly attribute DOMString <span title="dom-navigator-appCodeName">appCodeName</span>;-->
   62034   readonly attribute DOMString <a href=#dom-navigator-appname title=dom-navigator-appName>appName</a>;
   62035   readonly attribute DOMString <a href=#dom-navigator-appversion title=dom-navigator-appVersion>appVersion</a>;
   62036   readonly attribute DOMString <a href=#dom-navigator-platform title=dom-navigator-platform>platform</a>;
   62037   readonly attribute DOMString <a href=#dom-navigator-useragent title=dom-navigator-userAgent>userAgent</a>;
   62038 };
   62039 
   62040 [Supplemental, NoInterfaceObject]
   62041 interface <dfn id=navigatoronline>NavigatorOnLine</dfn> {
   62042   readonly attribute boolean <a href=#dom-navigator-online title=dom-navigator-onLine>onLine</a>;
   62043 };
   62044 
   62045 [Supplemental, NoInterfaceObject]
   62046 interface <dfn id=navigatorabilities>NavigatorAbilities</dfn> {
   62047   // content handler registration
   62048   void <a href=#dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler>registerProtocolHandler</a>(in DOMString scheme, in DOMString url, in DOMString title);
   62049   void <a href=#dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler>registerContentHandler</a>(in DOMString mimeType, in DOMString url, in DOMString title);
   62050   void <a href=#dom-navigator-yieldforstorageupdates title=dom-navigator-yieldForStorageUpdates>yieldForStorageUpdates</a>();
   62051 <!--  v2: cookieEnabled geolocator javaEnabled mozIsLocallyAvailable preference
   62052   readonly attribute <span>MimeTypeArray</span> <span title="dom-navigator-mimeTypes">mimeTypes</span>;
   62053   readonly attribute <span>PluginArray</span> <span title="dom-navigator-plugins">plugins</span>;
   62054   (the latter is used in a <video> element demo now, so we might need to pull this forward from v2!)
   62055 -->};</pre>
   62056 
   62057   <div class=impl>
   62058 
   62059   <p>These interfaces are defined separately so that other
   62060   specifications can re-use parts of the <code><a href=#navigator>Navigator</a></code>
   62061   interface.</p>
   62062 
   62063    <!-- v2: also, see window.external.AddSearchProvider() and similar DOM APIs from IE -->
   62064 
   62065    <!-- v2: also, could expose languages:
   62066    <dt><dfn title="dom-navigator-browserLanguage"><code>browserLanguage</code></dfn></dt> <!- - Opera and IE only - ->
   62067    <dd><p>Must return either null or a language tag representing the language the browser uses in its interface.</p></dd>
   62068    <dt><dfn title="dom-navigator-userLanguage"><code>userLanguage</code></dfn></dt> <!- - Opera and IE only - ->
   62069    <dt><dfn title="dom-navigator-language"><code>language</code></dfn></dt> <!- - Opera, Safari, and Mozilla only - ->
   62070    <dd><p>Must return either null or a language tag representing the user's preferred language.</p></dd>
   62071    -->
   62072 
   62073   </div>
   62074 
   62075 
   62076   <h4 id=client-identification><span class=secno>7.4.1 </span>Client identification</h4>
   62077 
   62078   <p>In certain cases, despite the best efforts of the entire
   62079   industry, Web browsers have bugs and limitations that Web authors
   62080   are forced to work around.</p>
   62081 
   62082   <p>This section defines a collection of attributes that can be used
   62083   to determine, from script, the kind of user agent in use, in order
   62084   to work around these issues.</p>
   62085 
   62086   <p>Client detection should always be limited to detecting known
   62087   current versions; future versions and unknown versions should always
   62088   be assumed to be fully compliant.</p>
   62089 
   62090   <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-appName><a href=#dom-navigator-appname>appName</a></code></dt>
   62091    <dd>
   62092     <p>Returns the name of the browser.</p>
   62093    </dd>
   62094 
   62095    <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-appVersion><a href=#dom-navigator-appversion>appVersion</a></code></dt>
   62096    <dd>
   62097     <p>Returns the version of the browser.</p>
   62098    </dd>
   62099 
   62100    <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-platform><a href=#dom-navigator-platform>platform</a></code></dt>
   62101    <dd>
   62102     <p>Returns the name of the platform.</p>
   62103    </dd>
   62104 
   62105    <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-userAgent><a href=#dom-navigator-useragent>userAgent</a></code></dt>
   62106    <dd>
   62107     <p>Returns the complete User-Agent header.</p>
   62108    </dd>
   62109 
   62110   </dl><div class=impl>
   62111 
   62112   <dl><!-- redundant
   62113    <dt><dfn title="dom-navigator-appCodeName"><code>appCodeName</code></dfn></dt>
   62114    <dd><p>Must return the string "<code title="">Mozilla</code>".</p></dd>
   62115    --><!-- appMinorVersion: IE only. In IE8b1, returns " Beta" (with the space) --><dt><dfn id=dom-navigator-appname title=dom-navigator-appName><code>appName</code></dfn></dt>
   62116    <dd><p>Must return either the string "<code title="">Netscape</code>" or the full name of the browser, e.g. "<code title="">Mellblom Browsernator</code>".</dd>
   62117 
   62118    <dt><dfn id=dom-navigator-appversion title=dom-navigator-appVersion><code>appVersion</code></dfn></dt>
   62119    <dd><p>Must return either the string "<code title="">4.0</code>" or a string representing the version of the browser in detail, e.g. "<code title="">1.0 (VMS; en-US) Mellblomenator/9000</code>".</dd>
   62120 
   62121    <!-- buildID: Mozilla only -->
   62122 
   62123    <!-- oscpu: Mozilla only -->
   62124 
   62125    <dt><dfn id=dom-navigator-platform title=dom-navigator-platform><code>platform</code></dfn></dt>
   62126    <dd><p>Must return either the empty string or a string representing the platform on which the browser is executing, e.g. "<code title="">MacIntel</code>", "<code title="">Win32</code>", "<code title="">FreeBSD i386</code>", "<code title="">WebTV OS</code>".</dd>
   62127 
   62128    <!-- product: Mozilla and Safari only; always returns "Gecko" -->
   62129 
   62130    <!-- productSub: Mozilla and Safari only; returns same as buildID in Mozilla, and returns the fixed string "20030107" in Safari -->
   62131 
   62132    <!-- securityPolicy: Mozilla only; always returns "" -->
   62133 
   62134    <!-- taintEnabled(): Opera, IE and Mozilla have this function as one that always returns false -->
   62135 
   62136    <dt><dfn id=dom-navigator-useragent title=dom-navigator-userAgent><code>userAgent</code></dfn></dt>
   62137    <dd><p>Must return the string used for the value of the "<code title="">User-Agent</code>" header in HTTP requests, or the empty string if no such header is ever sent.</dd>
   62138 
   62139    <!-- vendor: Mozilla and Safari only; always returns "" in Mozilla, and returns the fixed string "Apple Computer, Inc." in Safari -->
   62140 
   62141    <!-- vendorSub: Mozilla and Safari only; always returns "" -->
   62142 
   62143   </dl></div>
   62144 
   62145 
   62146   <h4 id=custom-handlers><span class=secno>7.4.2 </span>Custom scheme and content handlers</h4>
   62147 
   62148   <p>The <dfn id=dom-navigator-registerprotocolhandler title=dom-navigator-registerProtocolHandler><code>registerProtocolHandler()</code></dfn>
   62149   method allows Web sites to register themselves as possible handlers
   62150   for particular schemes. For example, an online telephone messaging
   62151   service could register itself as a handler of the <code>sms:</code>
   62152   scheme (<a href=#refsRFC5724>[RFC5724]</a>), so that if the user
   62153   clicks on such a link, he is given the opportunity to use that Web
   62154   site. Analogously, the <dfn id=dom-navigator-registercontenthandler title=dom-navigator-registerContentHandler><code>registerContentHandler()</code></dfn>
   62155   method allows Web sites to register themselves as possible handlers
   62156   for content in a particular <a href=#mime-type>MIME type</a>. For example, the
   62157   same online telephone messaging service could register itself as a
   62158   handler for <code>text/directory</code> files (<a href=#refsRFC2425>[RFC2425]</a>), so that if the user has no
   62159   native application capable of handling vCards (<a href=#refsRFC2426>[RFC2426]</a>), his Web browser can instead
   62160   suggest he use that site to view contact information stored on
   62161   vCards that he opens.</p>
   62162 
   62163   <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt>
   62164    <dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>, <var title="">title</var>)</dt>
   62165 
   62166    <dd>
   62167 
   62168     <p>Registers a handler for the given scheme or content type, at
   62169     the given URL, with the given title.</p>
   62170 
   62171     <p>The string "<code title="">%s</code>" in the URL is used as a
   62172     placeholder for where to put the URL of the content to be
   62173     handled.</p>
   62174 
   62175     <p>Throws a <code><a href=#security_err>SECURITY_ERR</a></code> exception if the user agent
   62176     blocks the registration (this might happen if trying to register
   62177     as a handler for "http", for instance).</p>
   62178 
   62179     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p>
   62180 
   62181    </dd>
   62182 
   62183   </dl><div class=impl>
   62184 
   62185   <p>User agents may, within the constraints described in this
   62186   section, do whatever they like when the methods are called. A UA
   62187   could, for instance, prompt the user and offer the user the
   62188   opportunity to add the site to a shortlist of handlers, or make the
   62189   handlers his default, or cancel the request. UAs could provide such
   62190   a UI through modal UI or through a non-modal transient notification
   62191   interface. UAs could also simply silently collect the information,
   62192   providing it only when relevant to the user.</p>
   62193 
   62194   <p>User agents should keep track of which sites have registered
   62195   handlers (even if the user has declined such registrations) so that
   62196   the user is not repeatedly prompted with the same request.</p>
   62197 
   62198   <p>The arguments to the methods have the following meanings and
   62199   corresponding implementation requirements:</p>
   62200 
   62201   <dl><dt><var title="">protocol</var> (<code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code> only)</dt>
   62202 
   62203    <dd>
   62204 
   62205     <p>A scheme, such as <code>ftp</code> or <code>sms</code>. The
   62206     scheme must be compared in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a>
   62207     manner by user agents for the purposes of comparing with the
   62208     scheme part of URLs that they consider against the list of
   62209     registered handlers.</p>
   62210 
   62211     <p>The <var title="">scheme</var> value, if it contains a colon
   62212     (as in "<code>ftp:</code>"), will never match anything, since
   62213     schemes don't contain colons.</p>
   62214 
   62215     <p class=note>This feature is not intended to be used with
   62216     non-standard protocols.</p>
   62217 
   62218    </dd>
   62219 
   62220    <dt><var title="">mimeType</var> (<code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code> only)</dt>
   62221 
   62222    <dd>
   62223 
   62224     <p>A <a href=#mime-type>MIME type</a>, such as
   62225     <code>model/vnd.flatland.3dml</code> or
   62226     <code>application/vnd.google-earth.kml+xml</code>. The <a href=#mime-type>MIME
   62227     type</a> must be compared in an <a href=#ascii-case-insensitive>ASCII
   62228     case-insensitive</a> manner by user agents for the purposes of
   62229     comparing with MIME types of documents that they consider against
   62230     the list of registered handlers.</p>
   62231 
   62232     <p>User agents must compare the given values only to the MIME
   62233     type/subtype parts of content types, not to the complete type
   62234     including parameters. Thus, if <var title="">mimeType</var> values
   62235     passed to this method include characters such as commas or
   62236     whitespace, or include MIME parameters, then the handler being
   62237     registered will never be used.</p>
   62238 
   62239     <p class=note>The type is compared to the <a href=#mime-type>MIME type</a>
   62240     used by the user agent <em>after</em> the sniffing algorithms have
   62241     been applied.</p>
   62242 
   62243    </dd>
   62244 
   62245 
   62246    <dt><var title="">url</var></dt>
   62247 
   62248    <dd>
   62249 
   62250     <p>A string used to build the <a href=#url>URL</a> of the page that
   62251     will handle the requests.</p>
   62252 
   62253     <p>When the user agent uses this URL, it must replace the first
   62254     occurrence of the exact literal string "<code title="">%s</code>"
   62255     with an escaped version of the <a href=#absolute-url>absolute URL</a> of the
   62256     content in question (as defined below), then <a href=#resolve-a-url title="resolve
   62257     a url">resolve</a> the resulting URL, relative to the <a href="#script's-base-url" title="script's base URL">base URL</a> of the <a href=#entry-script>entry
   62258     script</a> at the time the <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
   62259     or <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code>
   62260     methods were invoked, and then <a href=#navigate>navigate</a> an
   62261     appropriate <a href=#browsing-context>browsing context</a> to the resulting URL
   62262     using the GET method (<a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   62263     equivalent</a> for non-HTTP URLs).</p>
   62264 
   62265     <p>To get the escaped version of the <a href=#absolute-url>absolute URL</a> of
   62266     the content in question, the user agent must replace every
   62267     character in that <a href=#absolute-url>absolute URL</a> that doesn't match the
   62268     &lt;query&gt; production defined in RFC 3986 by the
   62269     percent-encoded form of that character. <a href=#refsRFC3986>[RFC3986]</a></p>
   62270 
   62271     <div class=example>
   62272 
   62273      <p>If the user had visited a site at <code title="">http://example.com/</code> that made the following
   62274      call:</p>
   62275 
   62276      <pre>navigator.registerContentHandler('application/x-soup', 'soup?url=%s', 'SoupWeb&trade;')</pre>
   62277 
   62278      <p>...and then, much later, while visiting <code title="">http://www.example.net/</code>, clicked on a link such
   62279      as:</p>
   62280 
   62281      <pre>&lt;a href="chickenk&iuml;wi.soup"&gt;Download our Chicken K&iuml;wi soup!&lt;/a&gt;</pre>
   62282 
   62283      <p>...then, assuming this <code>chickenk&iuml;wi.soup</code> file
   62284      was served with the <a href=#mime-type>MIME type</a>
   62285      <code>application/x-soup</code>, the UA might navigate to the
   62286      following URL:</p>
   62287 
   62288      <pre>http://example.com/soup?url=http://www.example.net/chickenk%C3%AFwi.soup</pre>
   62289 
   62290      <p>This site could then fetch the <code>chickenk&iuml;wi.soup</code>
   62291      file and do whatever it is that it does with soup (synthesize it
   62292      and ship it to the user, or whatever).</p>
   62293 
   62294     </div>
   62295 
   62296    </dd>
   62297 
   62298    <dt><var title="">title</var></dt>
   62299 
   62300    <dd>
   62301 
   62302     <p>A descriptive title of the handler, which the UA might use to
   62303     remind the user what the site in question is.</p>
   62304 
   62305    </dd>
   62306 
   62307   </dl><p>User agents should raise <code><a href=#security_err>SECURITY_ERR</a></code> exceptions if
   62308   the methods are called with <var title="">scheme</var> or <var title="">mimeType</var> values that the UA deems to be
   62309   "privileged". For example, a site attempting to register a handler
   62310   for <code>http</code> URLs or <code><a href=#text/html>text/html</a></code> content in a
   62311   Web browser would likely cause an exception to be raised.</p>
   62312 
   62313   <p>User agents must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the
   62314   <var title="">url</var> argument passed to one of these methods does
   62315   not contain the exact literal string "<code>%s</code>", or if <a href=#resolve-a-url title="resolve a url">resolving</a> the <var title="">url</var>
   62316   argument with the first occurrence of the string "<code title="">%s</code>" removed, relative to the <a href=#entry-script>entry
   62317   script</a>'s <a href="#script's-base-url" title="script's base URL">base URL</a>, is
   62318   not successful.</p>
   62319 
   62320   <p>User agents must not raise any other exceptions (other than
   62321   binding-specific exceptions, such as for an incorrect number of
   62322   arguments in an JavaScript implementation).</p>
   62323 
   62324   <p>This section does not define how the pages registered by these
   62325   methods are used, beyond the requirements on how to process the <var title="">url</var> value (see above). To some extent, the <a href=#navigate title=navigate>processing model for navigating across
   62326   documents</a> defines some cases where these methods are
   62327   relevant, but in general UAs may use this information wherever they
   62328   would otherwise consider handing content to native plugins or helper
   62329   applications.</p>
   62330 
   62331   <p>UAs must not use registered content handlers to handle content
   62332   that was returned as part of a non-GET transaction (or rather, as
   62333   part of any non-idempotent transaction), as the remote site would
   62334   not be able to fetch the same data.</p>
   62335 
   62336   </div>
   62337 
   62338 
   62339   <div class=impl>
   62340 
   62341   <h5 id=security-and-privacy><span class=secno>7.4.2.1 </span>Security and privacy</h5>
   62342 
   62343   <p>These mechanisms can introduce a number of concerns, in
   62344   particular privacy concerns.</p>
   62345 
   62346   <p><strong>Hijacking all Web usage.</strong> User agents should not
   62347   allow schemes that are key to its normal operation, such as
   62348   <code>http</code> or <code>https</code>, to be rerouted through
   62349   third-party sites. This would allow a user's activities to be
   62350   trivially tracked, and would allow user information, even in secure
   62351   connections, to be collected.</p>
   62352 
   62353   <p><strong>Hijacking defaults.</strong> It is strongly recommended
   62354   that user agents do not automatically change any defaults, as this
   62355   could lead the user to send data to remote hosts that the user is
   62356   not expecting. New handlers registering themselves should never
   62357   automatically cause those sites to be used.</p>
   62358 
   62359   <p><strong>Registration spamming.</strong> User agents should
   62360   consider the possibility that a site will attempt to register a
   62361   large number of handlers, possibly from multiple domains (e.g. by
   62362   redirecting through a series of pages each on a different domain,
   62363   and each registering a handler for <code>video/mpeg</code> &mdash;
   62364   analogous practices abusing other Web browser features have been
   62365   used by pornography Web sites for many years). User agents should
   62366   gracefully handle such hostile attempts, protecting the user.</p>
   62367 
   62368   <p><strong>Misleading titles.</strong> User agents should not rely
   62369   wholly on the <var title="">title</var> argument to the methods when
   62370   presenting the registered handlers to the user, since sites could
   62371   easily lie. For example, a site <code>hostile.example.net</code>
   62372   could claim that it was registering the "Cuddly Bear Happy Content
   62373   Handler". User agents should therefore use the handler's domain in
   62374   any UI along with any title.</p>
   62375 
   62376   <p><strong>Hostile handler metadata.</strong> User agents should
   62377   protect against typical attacks against strings embedded in their
   62378   interface, for example ensuring that markup or escape characters in
   62379   such strings are not executed, that null bytes are properly handled,
   62380   that over-long strings do not cause crashes or buffer overruns, and
   62381   so forth.</p>
   62382 
   62383   <p><strong>Leaking Intranet URLs.</strong> The mechanism described
   62384   in this section can result in secret Intranet URLs being leaked, in
   62385   the following manner:</p>
   62386 
   62387   <ol><li>The user registers a third-party content handler as the default
   62388    handler for a content type.</li>
   62389 
   62390    <li>The user then browses his corporate Intranet site and accesses
   62391    a document that uses that content type.</li>
   62392 
   62393    <li>The user agent contacts the third party and hands the third
   62394    party the URL to the Intranet content.</li>
   62395 
   62396   </ol><p>No actual confidential file data is leaked in this manner, but
   62397   the URLs themselves could contain confidential information. For
   62398   example, the URL could be
   62399   <code>http://www.corp.example.com/upcoming-aquisitions/the-sample-company.egf</code>,
   62400   which might tell the third party that Example Corporation is
   62401   intending to merge with The Sample Company. Implementors might wish
   62402   to consider allowing administrators to disable this feature for
   62403   certain subdomains, content types, or schemes.</p>
   62404 
   62405   <p><strong>Leaking secure URLs.</strong> User agents should not send
   62406   HTTPS URLs to third-party sites registered as content handlers, in
   62407   the same way that user agents do not send <code title=http-referer>Referer</code> (sic) HTTP headers from secure
   62408   sites to third-party sites.</p>
   62409 
   62410   <p><strong>Leaking credentials.</strong> User agents must never send
   62411   username or password information in the URLs that are escaped and
   62412   included sent to the handler sites. User agents may even avoid
   62413   attempting to pass to Web-based handlers the URLs of resources
   62414   that are known to require authentication to access, as such sites
   62415   would be unable to access the resources in question without
   62416   prompting the user for credentials themselves (a practice that would
   62417   require the user to know whether to trust the third-party handler, a
   62418   decision many users are unable to make or even understand).</p>
   62419 
   62420   </div>
   62421 
   62422 
   62423   <div class=impl>
   62424 
   62425   <h5 id=sample-handler-impl><span class=secno>7.4.2.2 </span>Sample user interface</h5>
   62426 
   62427   <p><i>This section is non-normative.</i></p>
   62428 
   62429   <p>A simple implementation of this feature for a desktop Web browser
   62430   might work as follows.</p>
   62431 
   62432   <p>The <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
   62433   method could display a modal dialog box:</p>
   62434 
   62435   <p><img alt="The modal dialog box could have the title 'Content Handler Registration', and could say 'This Web page: Kittens at work http://kittens.example.org/ ...would like permission to handle files of type: application/x-meowmeow using the following Web-based application: Kittens-at-work displayer http://kittens.example.org/?show=%s Do you trust the administrators of the &quot;kittens.example.org&quot; domain?' with two buttons, 'Trust kittens.example.org' and 'Cancel'." src=images/sample-content-handler-registration.png></p>
   62436 
   62437   <p>In this dialog box, "Kittens at work" is the title of the page
   62438   that invoked the method, "http://kittens.example.org/" is the URL of
   62439   that page, "application/x-meowmeow" is the string that was passed to
   62440   the <code title=dom-navigator-registerContentHandler><a href=#dom-navigator-registercontenthandler>registerContentHandler()</a></code>
   62441   method as its first argument (<var title="">mimeType</var>),
   62442   "http://kittens.example.org/?show=%s" was the second argument (<var title="">url</var>), and "Kittens-at-work displayer" was the third
   62443   argument (<var title="">title</var>).</p>
   62444 
   62445   <p>If the user clicks the Cancel button, then nothing further
   62446   happens. If the user clicks the "Trust" button, then the handler is
   62447   remembered.</p>
   62448 
   62449   <p>When the user then attempts to fetch a URL that uses the
   62450   "application/x-meowmeow" <a href=#mime-type>MIME type</a>, then it might
   62451   display a dialog as follows:</p>
   62452 
   62453   <p><img alt="The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the &quot;Kittens-at-work displayer&quot; application at &quot;kittens.example.org&quot;', with a checkbox labeld 'Always do this for resources using the &quot;application/x-meowmeow&quot; type in future.', and with two buttons, 'Ok' and 'Cancel'." src=images/sample-content-handler.png></p>
   62454 
   62455   <p>In this dialog, the third option is the one that was primed by
   62456   the site registering itself earlier.</p>
   62457 
   62458   <p>If the user does select that option, then the browser, in
   62459   accordance with the requirements described in the previous two
   62460   sections, will redirect the user to
   62461   "http://kittens.example.org/?show=data%3Aapplication/x-meowmeow;base64,S2l0dGVucyBhcmUgdGhlIGN1dGVzdCE%253D".</p>
   62462 
   62463   <p>The <code title=dom-navigator-registerProtocolHandler><a href=#dom-navigator-registerprotocolhandler>registerProtocolHandler()</a></code>
   62464   method would work equivalently, but for schemes instead of unknown
   62465   content types.</p>
   62466 
   62467   </div>
   62468 
   62469 
   62470 
   62471   <h4 id=manually-releasing-the-storage-mutex><span class=secno>7.4.3 </span>Manually releasing the storage mutex</h4>
   62472 
   62473   <dl class=domintro><dt><var title="">window</var> . <code title=dom-navigator><a href=#dom-navigator>navigator</a></code> . <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>yieldForStorageUpdates</a></code>()</dt>
   62474 
   62475    <dd>
   62476 
   62477     <p>If a script uses the <code title=dom-document-cookie><a href=#dom-document-cookie>document.cookie</a></code> API, or the
   62478     <code title=dom-localStorage>localStorage</code> API, the
   62479     browser will block other scripts from accessing cookies or storage
   62480     until the first script finishes.
   62481     
   62482     <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
   62483     
   62484     </p>
   62485 
   62486     <p>Calling the <code title=dom-navigator-yieldForStorageUpdates><a href=#dom-navigator-yieldforstorageupdates>navigator.yieldForStorageUpdates()</a></code>
   62487     method tells the user agent to unblock any other scripts that may
   62488     be blocked, even though the script hasn't returned.</p>
   62489 
   62490     <p>Values of cookies and items in the <code>Storage</code> objects
   62491     of <code title=dom-localStorage>localStorage</code> attributes
   62492     can change after calling this method, whence its name.
   62493     
   62494     <a href=#refsWEBSTORAGE>[WEBSTORAGE]</a>
   62495     
   62496     </p>
   62497 
   62498    </dd>
   62499 
   62500   </dl><div class=impl>
   62501 
   62502    <p>The <dfn id=dom-navigator-yieldforstorageupdates title=dom-navigator-yieldForStorageUpdates><code>yieldForStorageUpdates()</code></dfn>
   62503    method, when invoked, must, if the <a href=#storage-mutex>storage mutex</a> is
   62504    owned by the <a href=#event-loop>event loop</a> of the <a href=#concept-task title=concept-task>task</a> that resulted in the method being
   62505    called, release the <a href=#storage-mutex>storage mutex</a> so that it is once
   62506    again free. Otherwise, it must do nothing.</p>
   62507 
   62508   </div>
   62509 
   62510 
   62511 
   62512 
   62513   <h2 id=editing><span class=secno>8 </span><dfn>User interaction</dfn></h2>
   62514 
   62515 
   62516   <h3 id=the-hidden-attribute><span class=secno>8.1 </span>The <dfn title=attr-hidden><code>hidden</code></dfn> attribute</h3>
   62517 
   62518   <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> content attribute set. The <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute is a <a href=#boolean-attribute>boolean
   62519   attribute</a>. When specified on an element, it indicates that
   62520   the element is not yet, or is no longer, relevant. <span class=impl>User agents should not render elements that have the
   62521   <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute
   62522   specified.</span></p>
   62523 
   62524   <div class=example>
   62525 
   62526    <p>In the following skeletal example, the attribute is used to hide
   62527    the Web game's main screen until the user logs in:</p>
   62528 
   62529    <pre>  &lt;h1&gt;The Example Game&lt;/h1&gt;
   62530   &lt;section id="login"&gt;
   62531    &lt;h2&gt;Login&lt;/h2&gt;
   62532    &lt;form&gt;
   62533     ...
   62534     &lt;!-- calls login() once the user's credentials have been checked --&gt;
   62535    &lt;/form&gt;
   62536    &lt;script&gt;
   62537     function login() {
   62538       // switch screens
   62539       document.getElementById('login').hidden = true;
   62540       document.getElementById('game').hidden = false;
   62541     }
   62542    &lt;/script&gt;
   62543   &lt;/section&gt;
   62544   &lt;section id="game" hidden&gt;
   62545    ...
   62546   &lt;/section&gt;</pre>
   62547 
   62548   </div>
   62549 
   62550   <p>The <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute must not be
   62551   used to hide content that could legitimately be shown in another
   62552   presentation. For example, it is incorrect to use <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> to hide panels in a tabbed dialog,
   62553   because the tabbed interface is merely a kind of overflow
   62554   presentation &mdash; one could equally well just show all the form
   62555   controls in one big page with a scrollbar. It is similarly incorrect
   62556   to use this attribute to hide content just from one presentation
   62557   &mdash; if something is marked <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>, it is hidden from all
   62558   presentations, including, for instance, screen readers.</p>
   62559 
   62560   <!-- for example, "<a hidden href=#content>Skip to content</a>" would be inappropriate. -->
   62561   <!-- (but only add that example if you first add some more good valid examples -->
   62562 
   62563   <p>Elements that are not <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
   62564   should not link to or refer to elements that are <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>.</p>
   62565 
   62566   <div class=example>
   62567 
   62568    <p>For example, it would be incorrect to use the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to link to a
   62569    section marked with the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
   62570    attribute. If the content is not applicable or relevant, then there
   62571    is no reason to link to it.</p>
   62572 
   62573    <p>It would similarly be incorrect to use the ARIA <code title=attr-aria-describedby>aria-describedby</code> attribute to
   62574    refer to descriptions that are themselves <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>. Hiding a section means that it
   62575    is not applicable or relevant to anyone at the current time, so
   62576    clearly it cannot be a valid description of content the user can
   62577    interact with.</p>
   62578 
   62579   </div>
   62580 
   62581   <p>Elements in a section hidden by the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute are still active,
   62582   e.g. scripts and form controls in such sections still execute
   62583   and submit respectively. Only their presentation to the user
   62584   changes.</p>
   62585 
   62586   <div class=impl>
   62587 
   62588   <p>The <dfn id=dom-hidden title=dom-hidden><code>hidden</code></dfn> IDL
   62589   attribute must <a href=#reflect>reflect</a> the content attribute of the
   62590   same name.</p>
   62591 
   62592   </div>
   62593 
   62594 
   62595 
   62596   <h3 id=activation><span class=secno>8.2 </span>Activation</h3>
   62597 
   62598   <!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
   62599        click() can't be done in IE; can this be emulated in IE by
   62600        posting a synthetic mouse click event with those X and Y
   62601        coords? (ack Csaba Gabor)
   62602   -->
   62603 
   62604   <dl class=domintro><dt><var title="">element</var> . <code title=dom-click><a href=#dom-click>click</a></code>()</dt>
   62605 
   62606    <dd>
   62607 
   62608     <p>Acts as if the element was clicked.</p>
   62609 
   62610    </dd>
   62611 
   62612   </dl><div class=impl>
   62613 
   62614   <p>Each element has a <var title="">click in progress</var> flag,
   62615   initially set to false.</p>
   62616 
   62617   <p>The <dfn id=dom-click title=dom-click><code>click()</code></dfn> method must
   62618   run these steps:</p>
   62619 
   62620   <ol><li><p>If the element's <var title="">click in progress</var> flag
   62621    is set to true, then abort these steps.</li>
   62622 
   62623    <li><p>Set the <var title="">click in progress</var> flag on the
   62624    element to true.</li>
   62625 
   62626    <li><p>If the element has a defined <a href=#activation-behavior>activation behavior</a>,
   62627    <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on the
   62628    element. Otherwise, <a href=#fire-a-click-event>fire a <code>click</code> event</a> at
   62629    the element.</li>
   62630 
   62631    <li><p>Set the <var title="">click in progress</var> flag on the
   62632    element to false.</li>
   62633 
   62634   </ol></div>
   62635 
   62636 
   62637   <h3 id=scrolling-elements-into-view><span class=secno>8.3 </span>Scrolling elements into view</h3> <!-- maybe this should move to [CSSOM] -->
   62638 
   62639   <dl class=domintro><dt><var title="">element</var> . <code title=dom-scrollIntoView><a href=#dom-scrollintoview>scrollIntoView</a></code>( [ <var title="">top</var> ] )</dt>
   62640 
   62641    <dd>
   62642 
   62643     <p>Scrolls the element into view. If the <var title="">top</var>
   62644     argument is true, then the element will be scrolled to the top of
   62645     the viewport, otherwise it'll be scrolled to the bottom. The
   62646     default is the top.</p>
   62647 
   62648    </dd>
   62649 
   62650   </dl><div class=impl>
   62651 
   62652   <p>The <dfn id=dom-scrollintoview title=dom-scrollIntoView><code>scrollIntoView([<var title="">top</var>])</code></dfn> method, when called, must cause
   62653   the element on which the method was called to have the attention of
   62654   the user called to it.</p>
   62655 
   62656   <p class=note>In a speech browser, this could happen by having the
   62657   current playback position move to the start of the given
   62658   element.</p>
   62659 
   62660   <p>If the element in question cannot be brought to the user's
   62661   attention, e.g. because it is <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>, or is not <a href=#being-rendered>being
   62662   rendered</a>, then the user agent must do nothing instead.</p>
   62663 
   62664   <p>In visual user agents, if the argument is present and has the
   62665   value false, the user agent should scroll the element into view such
   62666   that both the bottom and the top of the element are in the viewport,
   62667   with the bottom of the element aligned with the bottom of the
   62668   viewport. If it isn't possible to show the entire element in that
   62669   way, or if the argument is omitted or is true, then the user agent
   62670   should instead align the top of the element with the top of the
   62671   viewport. If the entire scrollable part of the content is visible
   62672   all at once (e.g. if a page is shorter than the viewport), then the
   62673   user agent should not scroll anything. Visual user agents should
   62674   further scroll horizontally as necessary to bring the element to the
   62675   attention of the user.</p>
   62676 
   62677   <p>Non-visual user agents may ignore the argument, or may treat it
   62678   in some media-specific manner most useful to the user.</p>
   62679 
   62680   </div>
   62681 
   62682 
   62683   <h3 id=focus><span class=secno>8.4 </span>Focus</h3>
   62684 
   62685   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%20%0A...%3Cform%3E%3Cinput%20name%3Da%20onfocus%3D%22value%2B%3D1%3Bd.name%3D%27a%27%3Bname%3D%27d%27%3Bb.focus()%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22value%2B%3D1%3Bc.focus()%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22value%2B%3D1%3Bd.focus()%22%3E%0A%3Cinput%20name%3Dd%20onfocus%3D%22value%2B%3D1%3Ba.focus()%22%3E -->
   62686 
   62687   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af1%20%27%3Bb.focus()%3Balert(document.activeElement.name)%3Bt.value%2B%3D%27af2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22t.value%2B%3D%27cf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27cf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27cb%20%27%3B%22%3E%0A -->
   62688 
   62689   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%20onload%3D%22document.forms%5B0%5D.a.focus()%22%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onblur%3D%22t.value%2B%3D'ab%20'%3B%20b.focus()%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D'bf1%20'%3Ba.focus()%3Bt.value%2B%3D'bf2%20'%3B%22%20onblur%3D%22t.value%2B%3D'bb%20'%3B%22%3E -->
   62690 
   62691   <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%3E...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab1%20%27%3Bb.focus()%3Bt.value%2B%3D%27ab2%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Ba.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E -->
   62692 
   62693   <!-- v2: more things to define, if no other specs define them:
   62694    - define onfocus/onblur behaviour for Window
   62695    - Other things to look at are IE's focus APIs (HTMLElement.setActive(),
   62696      onBeforeActivate, onActivate, onBeforeDeactivate, onDeactivate):
   62697        https://bugzilla.mozilla.org/show_bug.cgi?id=296471
   62698        https://bugzilla.mozilla.org/show_bug.cgi?id=296469
   62699        http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setactive.asp
   62700        http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
   62701   -->
   62702 
   62703   <div class=impl>
   62704 
   62705   <p>When an element is <i>focused</i>, key events received by the
   62706   document must be targeted at that element. There may be no element
   62707   focused; when no element is focused, key events received by the
   62708   document must be targeted at <a href=#the-body-element>the body element</a>.</p>
   62709 
   62710   <p>User agents may track focus for each <a href=#browsing-context>browsing
   62711   context</a> or <code><a href=#document>Document</a></code> individually, or may support
   62712   only one focused element per <a href=#top-level-browsing-context>top-level browsing context</a>
   62713   &mdash; user agents should follow platform conventions in this
   62714   regard.</p>
   62715 
   62716   <p>Which elements within a <a href=#top-level-browsing-context>top-level browsing context</a>
   62717   currently have focus must be independent of whether or not the
   62718   <a href=#top-level-browsing-context>top-level browsing context</a> itself has the <i>system
   62719   focus</i>.</p>
   62720 
   62721   <p class=note>When an element is focused, the element matches the
   62722   CSS <code>:focus</code> pseudo-class.</p>
   62723 
   62724   </div>
   62725 
   62726 
   62727   <h4 id=sequential-focus-navigation><span class=secno>8.4.1 </span>Sequential focus navigation</h4>
   62728 
   62729   <p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn>
   62730   content attribute specifies whether the element is focusable,
   62731   whether it can be reached using sequential focus navigation, and the
   62732   relative order of the element for the purposes of sequential focus
   62733   navigation. The name "tab index" comes from the common use of the
   62734   "tab" key to navigate through the focusable elements. The term
   62735   "tabbing" refers to moving forward through the focusable elements
   62736   that can be reached using sequential focus navigation.</p>
   62737 
   62738   <p>The <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute, if
   62739   specified, must have a value that is a <a href=#valid-integer>valid
   62740   integer</a>.</p>
   62741 
   62742   <div class=impl>
   62743 
   62744   <p>If the attribute is specified, it must be parsed using the
   62745   <a href=#rules-for-parsing-integers>rules for parsing integers</a>. The attribute's values have
   62746   the following meanings:</p>
   62747 
   62748   <dl><dt>If the attribute is omitted or parsing the value returns an
   62749    error</dt>
   62750 
   62751    <dd>
   62752 
   62753     <p>The user agent should follow platform conventions to determine if
   62754     the element is to be focusable and, if so, whether the element can
   62755     be reached using sequential focus navigation, and if so, what its
   62756     relative order should be.</p>
   62757 
   62758    </dd>
   62759 
   62760    <dt id=negative-tabindex>If the value is a negative integer</dt>
   62761 
   62762    <dd>
   62763 
   62764     <p>The user agent must allow the element to be focused, but should
   62765     not allow the element to be reached using sequential focus
   62766     navigation.</p>
   62767 
   62768    </dd>
   62769 
   62770    <dt>If the value is a zero</dt>
   62771 
   62772    <dd>
   62773 
   62774     <p>The user agent must allow the element to be focused, should
   62775     allow the element to be reached using sequential focus navigation,
   62776     and should follow platform conventions to determine the element's
   62777     relative order.</p>
   62778 
   62779    </dd>
   62780 
   62781    <dt>If the value is greater than zero</dt>
   62782 
   62783    <dd>
   62784 
   62785     <p>The user agent must allow the element to be focused, should
   62786     allow the element to be reached using sequential focus navigation,
   62787     and should place the element in the sequential focus navigation
   62788     order so that it is:</p>
   62789 
   62790     <ul><li>before any focusable element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has been
   62791      omitted or whose value, when parsed, returns an error,</li>
   62792 
   62793      <li>before any focusable element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
   62794      to or less than zero,</li>
   62795 
   62796      <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
   62797      greater than zero but less than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
   62798      element,</li>
   62799 
   62800      <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
   62801      to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
   62802      attribute on the element but that is earlier in the document in
   62803      <a href=#tree-order>tree order</a> than the element,</li>
   62804 
   62805      <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value equal
   62806      to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
   62807      attribute on the element but that is later in the document in
   62808      <a href=#tree-order>tree order</a> than the element, and</li>
   62809 
   62810      <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
   62811      greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
   62812      element.</li>
   62813 
   62814     </ul></dd>
   62815 
   62816   </dl><p>An element is <dfn id=specially-focusable>specially focusable</dfn> if the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute's definition above
   62817   defines the element to be focusable.</p>
   62818 
   62819   <p>An element that is <a href=#specially-focusable>specially focusable</a> but does not
   62820   otherwise have an <a href=#activation-behavior>activation behavior</a> defined has an
   62821   <a href=#activation-behavior>activation behavior</a> that does nothing.</p>
   62822 
   62823   <p class=note>This means that an element that is only focusable
   62824   because of its <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute
   62825   will fire a <code title=event-click><a href=#event-click>click</a></code> event in response
   62826   to a non-mouse activation (e.g. hitting the "enter" key while the
   62827   element is focused).</p>
   62828 
   62829   <p>The <dfn id=dom-tabindex title=dom-tabIndex><code>tabIndex</code></dfn> IDL
   62830   attribute must <a href=#reflect>reflect</a> the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> content attribute. If the
   62831   attribute is not present, or parsing its value returns an error,
   62832   then the IDL attribute must return 0 for elements that are focusable
   62833   and &minus;1 for elements that are not focusable.</p>
   62834 
   62835   </div>
   62836 
   62837 
   62838 
   62839   <div class=impl>
   62840 
   62841   <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
   62842 
   62843   <p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
   62844   behavior allows it to be focusable or if the element is
   62845   <a href=#specially-focusable>specially focusable</a>, but only if the element is either
   62846   <a href=#being-rendered>being rendered</a> or <!-- CANVAS-FOCUS-FALLBACK --> is a
   62847   descendant of a <code><a href=#the-canvas-element>canvas</a></code> element that
   62848   <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a>.</p>
   62849 
   62850   <p>User agents should make the following elements
   62851   <a href=#focusable>focusable</a>, unless platform conventions dictate
   62852   otherwise:</p>
   62853 
   62854   <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
   62855 
   62856    <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
   62857 
   62858    <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   62859 
   62860    <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
   62861    <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state and that
   62862    are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   62863 
   62864    <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   62865 
   62866    <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
   62867 
   62868    <li><code><a href=#the-command>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
   62869 
   62870    <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
   62871    attribute set, if that would enable the user agent to allow the
   62872    user to begin a drag operations for those elements without the use
   62873    of a pointing device</li>
   62874 
   62875   </ul><p>In addition, each shape that is generated for an
   62876   <code><a href=#the-area-element>area</a></code> element should be <a href=#focusable>focusable</a>, unless
   62877   platform conventions dictate otherwise. (A single <code><a href=#the-area-element>area</a></code>
   62878   element can correspond to multiple shapes, since image maps can be
   62879   reused with multiple images on a page.)</p>
   62880 
   62881   <hr><p>The <dfn id=focusing-steps>focusing steps</dfn> are as follows:</p>
   62882 
   62883   <ol><li><p>If focusing the element will remove the focus from another
   62884    element, then run the <a href=#unfocusing-steps>unfocusing steps</a> for that
   62885    element.</li>
   62886 
   62887    <li>
   62888 
   62889     <p>Make the element the currently focused element in its
   62890     <a href=#top-level-browsing-context>top-level browsing context</a>.</p>
   62891 
   62892     <p>Some elements, most notably <code><a href=#the-area-element>area</a></code>, can correspond
   62893     to more than one distinct focusable area. If a particular area was
   62894     indicated when the element was focused, then that is the area that
   62895     must get focus; otherwise, e.g. when using the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method, the first such region in
   62896     tree order is the one that must be focused.</p>
   62897 
   62898    </li>
   62899 
   62900    <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-focus>focus</code> at the element.</li>
   62901 
   62902   </ol><p>User agents must synchronously run the <a href=#focusing-steps>focusing
   62903   steps</a> for an element whenever the user moves the focus to a
   62904   <a href=#focusable>focusable</a> element.</p>
   62905 
   62906   <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> are as follows:</p>
   62907 
   62908   <ol><li><p>If the element is an <code><a href=#the-input-element>input</a></code> element, and the
   62909    <code title=event-input-change><a href=#event-input-change>change</a></code> event applies to the
   62910    element, and the element does not have a defined <a href=#activation-behavior>activation
   62911    behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
   62912    while the control was focused without committing that change, then
   62913    <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change>change</code> at the element, then
   62914    <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
   62915    events</a> at the element's <a href=#form-owner>form owner</a>.</p>
   62916 
   62917    <li><p>Unfocus the element.</li>
   62918 
   62919    <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-blur>blur</code> at the element.</li>
   62920 
   62921   </ol><p>When an element that is focused stops being a
   62922   <a href=#focusable>focusable</a> element, or stops being focused without
   62923   another element being explicitly focused in its stead, the user
   62924   agent should synchronously run the <a href=#focusing-steps>focusing steps</a> for
   62925   <a href=#the-body-element>the body element</a>, if there is one; if there is not,
   62926   then the user agent should synchronously run the <a href=#unfocusing-steps>unfocusing
   62927   steps</a> for the affected element only.</p>
   62928 
   62929   <p class=example>For example, this might happen because the
   62930   element is removed from its <code><a href=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It would also
   62931   happen to an <code><a href=#the-input-element>input</a></code> element when the element gets <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>
   62932 
   62933   </div>
   62934 
   62935 
   62936   <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>
   62937 
   62938   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
   62939 
   62940    <dd>
   62941 
   62942     <p>Returns the currently focused element.</p>
   62943 
   62944    </dd>
   62945 
   62946    <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>
   62947 
   62948    <dd>
   62949 
   62950     <p>Returns true if the document has focus; otherwise, returns false.</p>
   62951 
   62952    </dd>
   62953 
   62954    <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>
   62955 
   62956    <dd>
   62957 
   62958     <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>
   62959 
   62960    </dd>
   62961 
   62962    <dt><var title="">window</var> . <code title=dom-window-blur><a href=#dom-window-blur>blur</a></code>()</dt>
   62963 
   62964    <dd>
   62965 
   62966     <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>
   62967 
   62968    </dd>
   62969 
   62970   </dl><div class=impl>
   62971 
   62972   <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn>
   62973   attribute on <code><a href=#htmldocument>HTMLDocument</a></code> objects must return the
   62974   element in the document that is focused. If no element in the
   62975   <code><a href=#document>Document</a></code> is focused, this must return <a href=#the-body-element>the body
   62976   element</a>.</p>
   62977 
   62978   <p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method
   62979   on <code><a href=#htmldocument>HTMLDocument</a></code> objects must return true if the
   62980   document's <a href=#browsing-context>browsing context</a> is focused, and all its
   62981   <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
   62982   contexts</a> are also focused, and the <a href=#top-level-browsing-context>top-level browsing
   62983   context</a> has the <i>system focus</i>.</p>
   62984 
   62985   <p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn>
   62986   method on the <code><a href=#window>Window</a></code> object, when invoked, provides a
   62987   hint to the user agent that the script believes the user might be
   62988   interested in the contents of the <a href=#browsing-context>browsing context</a> of
   62989   the <code><a href=#window>Window</a></code> object on which the method was invoked.</p>
   62990 
   62991   <p>User agents are encouraged to have this <code title=dom-window-focus><a href=#dom-window-focus>focus()</a></code> method trigger some kind of
   62992   notification.</p>
   62993 
   62994   <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method
   62995   on the <code><a href=#window>Window</a></code> object, when invoked, provides a hint to
   62996   the user agent that the script believes the user probably is not
   62997   currently interested in the contents of the <a href=#browsing-context>browsing
   62998   context</a> of the <code><a href=#window>Window</a></code> object on which the method
   62999   was invoked, but that the contents might become interesting again in
   63000   the future.</p>
   63001 
   63002   <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> method entirely.</p>
   63003 
   63004   <p class=note>Historically the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the
   63005   system focus, but hostile sites widely abuse this behavior to the
   63006   user's detriment.</p>
   63007 
   63008   </div>
   63009 
   63010 
   63011   <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>
   63012 
   63013   <dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
   63014 
   63015    <dd>
   63016 
   63017     <p>Focuses the element.</p>
   63018 
   63019    </dd>
   63020 
   63021    <dt><var title="">element</var> . <code title=dom-blur><a href=#dom-blur>blur</a></code>()</dt>
   63022 
   63023    <dd>
   63024 
   63025     <p>Unfocuses the element. Use of this method is discouraged. Focus
   63026     another element instead.</p>
   63027 
   63028     <p>Do not use this method to hide the focus ring if you find the
   63029     focus ring unsightly. Instead, use a CSS rule to override the
   63030     'outline' property.</p>
   63031 
   63032     <div class=example>
   63033 
   63034      <p>For example, to hide the outline from links, you could use:</p>
   63035 
   63036      <pre>:link:focus, :visited:focus { outline: none; }</pre>
   63037 
   63038     </div>
   63039 
   63040    </dd>
   63041 
   63042   </dl><div class=impl>
   63043 
   63044   <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method,
   63045   when invoked, must run the following algorithm:</p>
   63046 
   63047   <ol><li><p>If the element is marked as <i><a href=#locked-for-focus>locked for focus</a></i>, then abort
   63048    these steps.</li>
   63049 
   63050    <li><p>If the element is not <a href=#focusable>focusable</a>, then abort these
   63051    steps.</li>
   63052 
   63053    <li><p>Mark the element as <dfn id=locked-for-focus>locked for focus</dfn>.</li>
   63054 
   63055    <li><p>If the element is not already focused, run the <a href=#focusing-steps>focusing
   63056    steps</a> for the element.</li>
   63057 
   63058    <li><p>Unmark the element as <i><a href=#locked-for-focus>locked for focus</a></i>.</li>
   63059 
   63060   </ol><p>The <dfn id=dom-blur title=dom-blur><code>blur()</code></dfn> method, when
   63061   invoked, should run the <a href=#focusing-steps>focusing steps</a> for <a href=#the-body-element>the
   63062   body element</a>, if there is one; if there is not, then it
   63063   should run the <a href=#unfocusing-steps>unfocusing steps</a> for the element on
   63064   which the method was called instead. User agents may selectively or
   63065   uniformly ignore calls to this method for usability reasons.</p>
   63066 
   63067   <p class=example>For example, if the <code title=dom-blur><a href=#dom-blur>blur()</a></code> method is unwisely being used to
   63068   remove the focus ring for aesthetics reasons, the page would become
   63069   unusable by keyboard users. Ignoring calls to this method would thus
   63070   allow keyboard users to interact with the page.</p>
   63071 
   63072   </div>
   63073 
   63074 
   63075 
   63076 
   63077   <h3 id=the-accesskey-attribute><span class=secno>8.5 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h3>
   63078 
   63079   <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute set. The
   63080   <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute's value is
   63081   used by the user agent as a guide for creating a keyboard shortcut
   63082   that activates or focuses the element.</p>
   63083 
   63084   <p>If specified, the value must be an <a href=#ordered-set-of-unique-space-separated-tokens>ordered set of unique
   63085   space-separated tokens</a>, each of which must be exactly one
   63086   Unicode code point in length.</p>
   63087 
   63088   <div class=impl>
   63089 
   63090   <p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination
   63091   derived from the element's <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute as
   63092   follows:</p>
   63093 
   63094   <ol><li><p>If the element has no <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute, then skip to the
   63095    <i>fallback</i> step below.</li>
   63096 
   63097    <li><p>Otherwise, the user agent must <a href=#split-a-string-on-spaces title="split a string
   63098    on spaces">split the attribute's value on spaces</a>, and let
   63099    <var title="">keys</var> be the resulting tokens.</li>
   63100 
   63101    <li>
   63102 
   63103     <p>For each value in <var title="">keys</var> in turn, in the
   63104     order the tokens appeared in the attribute's value, run the
   63105     following substeps:</p>
   63106 
   63107     <ol><li><p>If the value is not a string exactly one Unicode code
   63108      point in length, then skip the remainder of these steps for this
   63109      value.</li>
   63110 
   63111      <li><p>If the value does not correspond to a key on the system's
   63112      keyboard, then skip the remainder of these steps for this
   63113      value.</li>
   63114 
   63115      <li><p>If the user agent can find a combination of modifier keys
   63116      that, with the key that corresponds to the value given in the
   63117      attribute, can be used as a shortcut key, then the user agent may
   63118      assign that combination of keys as the element's <a href=#assigned-access-key>assigned
   63119      access key</a> and abort these steps.</li>
   63120 
   63121     </ol></li>
   63122 
   63123    <li><p><i>Fallback</i>: Optionally, the user agent may assign a key
   63124    combination of its choosing as the element's <a href=#assigned-access-key>assigned access
   63125    key</a> and then abort these steps.</li>
   63126 
   63127    <li><p>If this step is reached, the element has no <a href=#assigned-access-key>assigned
   63128    access key</a>.</li>
   63129 
   63130   </ol><p>Once a user agent has selected and assigned an access key for an
   63131   element, the user agent should not change the element's
   63132   <a href=#assigned-access-key>assigned access key</a> unless the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute is changed
   63133   or the element is moved to another <code><a href=#document>Document</a></code>.</p>
   63134 
   63135   <p>When the user presses the key combination corresponding to the
   63136   <a href=#assigned-access-key>assigned access key</a> for an element, if the element
   63137   <a href=#concept-command title=concept-command>defines a command</a>, and the
   63138   command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
   63139   State</a> facet is false (visible), and the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is
   63140   also false (enabled), then the user agent must trigger the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
   63141 
   63142   <p>User agents may expose elements that have an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as
   63143   well, e.g. in a menu displayed in response to a specific key
   63144   combination.</p>
   63145 
   63146   </div>
   63147 
   63148   <div class=impl>
   63149 
   63150   <p>The <dfn id=dom-accesskey title=dom-accessKey><code>accessKey</code></dfn> IDL
   63151   attribute must <a href=#reflect>reflect</a> the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.</p>
   63152 
   63153   <p>The <dfn id=dom-accesskeylabel title=dom-accessKeyLabel><code>accessKeyLabel</code></dfn> IDL
   63154   attribute must return a string that represents the element's
   63155   <a href=#assigned-access-key>assigned access key</a>, if any. If the element does not
   63156   have one, then the IDL attribute must return the empty string.</p>
   63157 
   63158   </div>
   63159 
   63160   <div class=example>
   63161 
   63162    <p>In the following example, a variety of links are given with
   63163    access keys so that keyboard users familiar with the site can
   63164    more quickly navigate to the relevant pages:</p>
   63165 
   63166    <pre>&lt;nav&gt;
   63167  &lt;p&gt;
   63168   &lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities"&gt;Activities&lt;/a&gt; |
   63169   &lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/"&gt;Technical Reports&lt;/a&gt; |
   63170   &lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex"&gt;Site Index&lt;/a&gt; |
   63171   &lt;a title="About This Site" accesskey="B" href="/Consortium/"&gt;About Consortium&lt;/a&gt; |
   63172   &lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact"&gt;Contact&lt;/a&gt;
   63173  &lt;/p&gt;
   63174 &lt;/nav&gt;</pre>
   63175 
   63176   </div>
   63177 
   63178   <div class=example>
   63179 
   63180    <p>In the following example, the search field is given two possible
   63181    access keys, "s" and "0" (in that order). A user agent on a device
   63182    with a full keyboard might pick
   63183    <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
   63184    shortcut key, while a user agent on a small device with just a
   63185    numeric keypad might pick just the plain unadorned key
   63186    <kbd><kbd>0</kbd></kbd>:</p>
   63187 
   63188    <pre>&lt;form action="/search"&gt;
   63189  &lt;label&gt;Search: &lt;input type="search" name="q" accesskey="s 0"&gt;&lt;/label&gt;
   63190  &lt;input type="submit"&gt;
   63191 &lt;/form&gt;</pre>
   63192 
   63193   </div>
   63194 
   63195   <div class=example>
   63196 
   63197    <p>In the following example, a button has possible access keys
   63198    described. A script then tries to update the button's label to
   63199    advertise the key combination the user agent selected.</p>
   63200 
   63201    <pre>&lt;input type=submit accesskey="N @ 1" value="Compose"&gt;
   63202 ...
   63203 &lt;script&gt;
   63204  function labelButton(button) {
   63205    if (button.accessKeyLabel)
   63206      button.value += ' (' + button.accessKeyLabel + ')';
   63207  }
   63208  var inputs = document.getElementsByTagName('input');
   63209  for (var i = 0; i &lt; inputs.length; i += 1) {
   63210    if (inputs[i].type == "submit")
   63211      labelButton(inputs[i]);
   63212  }
   63213 &lt;/script&gt;</pre>
   63214 
   63215    <p>On one user agent, the button's label might become
   63216    "<samp>Compose (&#8984;N)</samp>". On another, it might become
   63217    "<samp>Compose (Alt+&#8679;+1)</samp>". If the user agent doesn't
   63218    assign a key, it will be just "<samp>Compose</samp>". The exact
   63219    string depends on what the <a href=#assigned-access-key>assigned access key</a> is, and
   63220    on how the user agent represents that key combination.</p>
   63221 
   63222   </div>
   63223 
   63224 
   63225 
   63226   <h3 id=selection><span class=secno>8.6 </span>The text selection APIs</h3>
   63227 
   63228   <p>Every <a href=#browsing-context>browsing context</a> has <dfn id=the-selection title="the
   63229   selection">a selection</dfn>. The selection can be empty, and the
   63230   selection can have more than one range (a disjointed selection). The
   63231   user agent should allow the user to change the selection. User
   63232   agents are not required to let the user select more than one range,
   63233   and may collapse multiple ranges in the selection to a single range
   63234   when the user interacts with the selection. (But, of course, the
   63235   user agent may let the user create selections with multiple
   63236   ranges.)</p>
   63237 
   63238   <p>This one selection must be shared by all the content of the
   63239   browsing context (though not by nested <a href=#browsing-context title="browsing
   63240   context">browsing contexts</a>), including any editing hosts in
   63241   the document. (Editing hosts that are not inside a document cannot
   63242   have a selection.)</p>
   63243 
   63244   <div class=impl>
   63245 
   63246   <p>If the selection is empty (collapsed, so that it has only one
   63247   segment and that segment's start and end points are the same) then
   63248   the selection's position should equal the caret position. When the
   63249   selection is not empty, this specification does not define the caret
   63250   position; user agents should follow platform conventions in deciding
   63251   whether the caret is at the start of the selection, the end of the
   63252   selection, or somewhere else.</p>
   63253 
   63254   <p>On some platforms (such as those using Wordstar editing
   63255   conventions), the caret position is totally independent of the start
   63256   and end of the selection, even when the selection is empty. On such
   63257   platforms, user agents may ignore the requirement that the cursor
   63258   position be linked to the position of the selection altogether.</p>
   63259 
   63260   </div>
   63261 
   63262   <p>Mostly for historical reasons, in addition to the <a href=#browsing-context>browsing
   63263   context</a>'s <a href=#the-selection title="the selection">selection</a>, each
   63264   <code><a href=#the-textarea-element>textarea</a></code> and <code><a href=#the-input-element>input</a></code> element has an
   63265   independent selection. These are the <dfn id=text-field-selection title="text field
   63266   selection">text field selections</dfn>.</p>
   63267 
   63268   <div class=impl>
   63269 
   63270   <p>User agents may selectively ignore attempts to use the API to
   63271   adjust the selection made after the user has modified the
   63272   selection. For example, if the user has just selected part of a
   63273   word, the user agent could ignore attempts to use the API call to
   63274   immediately unselect the selection altogether, but could allow
   63275   attempts to change the selection to select the entire word.</p>
   63276 
   63277   <p>User agents may also allow the user to create selections that are
   63278   not exposed to the API.</p>
   63279 
   63280   </div>
   63281 
   63282   <!-- v2DATAGRID v2DGS:
   63283   <p>The <code>datagrid</code> and <code>select</code> elements also
   63284   have selections, indicating which items have been picked by the
   63285   user. These are not discussed in this section.</p>
   63286   -->
   63287   <p>The <code><a href=#the-select-element>select</a></code> element also has a selection, indicating
   63288   which items have been picked by the user. This is not discussed in
   63289   this section.</p>
   63290 
   63291   <p class=note>This specification does not specify how selections
   63292   are presented to the user. <!-- The Selectors specification, in
   63293   conjunction with CSS, can be used to style text selections using the
   63294   <code title="selector-selection">::selection</code>
   63295   pseudo-element. <a href="#refsSELECTORS">[SELECTORS]</a> <a
   63296   href="#refsCSS">[CSS]</a> --></p>
   63297 
   63298 
   63299 
   63300   <h4 id=documentSelection><span class=secno>8.6.1 </span>APIs for the browsing context selection</h4>
   63301 
   63302   <dl class=domintro><dt><var title="">window</var> . <code title=dom-getSelection><a href=#dom-getselection>getSelection</a></code>()</dt>
   63303    <dt><var title="">document</var> . <code title=dom-document-getSelection><a href=#dom-document-getselection>getSelection</a></code>()</dt>
   63304 
   63305    <dd>
   63306 
   63307     <p>Returns the <code><a href=#selection-0>Selection</a></code> object for the window, which
   63308     stringifies to the text of the current selection.</p>
   63309 
   63310    </dd>
   63311 
   63312   </dl><div class=impl>
   63313 
   63314   <p>The <dfn id=dom-getselection title=dom-getSelection><code>getSelection()</code></dfn> method on
   63315   the <code><a href=#window>Window</a></code> interface must return the
   63316   <code><a href=#selection-0>Selection</a></code> object representing <a href=#the-selection>the
   63317   selection</a> of that <code><a href=#window>Window</a></code> object's
   63318   <a href=#browsing-context>browsing context</a>.
   63319 
   63320   <p>For historical reasons, the <dfn id=dom-document-getselection title=dom-document-getSelection><code>getSelection()</code></dfn>
   63321   method on the <code><a href=#htmldocument>HTMLDocument</a></code> interface must return the
   63322   same <code><a href=#selection-0>Selection</a></code> object.</p>
   63323 
   63324   </div>
   63325 
   63326   <pre class=idl>interface <dfn id=selection-0>Selection</dfn> {
   63327   readonly attribute Node <a href=#dom-selection-anchornode title=dom-selection-anchorNode>anchorNode</a>;
   63328   readonly attribute long <a href=#dom-selection-anchoroffset title=dom-selection-anchorOffset>anchorOffset</a>;
   63329   readonly attribute Node <a href=#dom-selection-focusnode title=dom-selection-focusNode>focusNode</a>;
   63330   readonly attribute long <a href=#dom-selection-focusoffset title=dom-selection-focusOffset>focusOffset</a>;
   63331   readonly attribute boolean <a href=#dom-selection-iscollapsed title=dom-selection-isCollapsed>isCollapsed</a>;
   63332   void <a href=#dom-selection-collapse title=dom-selection-collapse>collapse</a>(in Node parentNode, in long offset);
   63333   void <a href=#dom-selection-collapsetostart title=dom-selection-collapseToStart>collapseToStart</a>();
   63334   void <a href=#dom-selection-collapsetoend title=dom-selection-collapseToEnd>collapseToEnd</a>();
   63335   void <a href=#dom-selection-selectallchildren title=dom-selection-selectAllChildren>selectAllChildren</a>(in Node parentNode);
   63336   void <a href=#dom-selection-deletefromdocument title=dom-selection-deleteFromDocument>deleteFromDocument</a>();
   63337   readonly attribute long <a href=#dom-selection-rangecount title=dom-selection-rangeCount>rangeCount</a>;
   63338   Range <a href=#dom-selection-getrangeat title=dom-selection-getRangeAt>getRangeAt</a>(in long index);
   63339   void <a href=#dom-selection-addrange title=dom-selection-addRange>addRange</a>(in Range range);
   63340   void <a href=#dom-selection-removerange title=dom-selection-removeRange>removeRange</a>(in Range range);
   63341   void <a href=#dom-selection-removeallranges title=dom-selection-removeAllRanges>removeAllRanges</a>();
   63342   <a href=#dom-selection-tostring title=dom-selection-toString>stringifier</a> DOMString ();
   63343 };</pre>
   63344 <!--
   63345   See also:
   63346     http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl
   63347   This spec doesn't have everything from there yet, in particular
   63348   selectionLanguageChange() and containsNode() are missing. They are missing
   63349   because I couldn't work out how to define them in terms of Ranges.
   63350 
   63351   I also haven't included extend():
   63352 
   63353     void <span title="dom-selection-extend">extend</span>(in Node parentNode, in long offset);
   63354     // raise if no range
   63355     // raise WRONG_DOCUMENT_ERR if parentNode not in document
   63356     // do something
   63357 
   63358   ...mostly because I can't work out how to describe what it does quickly.
   63359 -->
   63360 
   63361   <p>The <code><a href=#selection-0>Selection</a></code> interface represents a list of
   63362   <code><a href=#range>Range</a></code> objects. The first item in the list has index 0,
   63363   and the last item has index <var title="">count</var>-1, where <var title="">count</var> is the number of ranges in the list. <a href=#refsDOMRANGE>[DOMRANGE]</a></p>
   63364 
   63365   <p>All of the members of the <code><a href=#selection-0>Selection</a></code> interface are
   63366   defined in terms of operations on the <code><a href=#range>Range</a></code> objects
   63367   represented by this object. These operations can raise exceptions,
   63368   as defined for the <code><a href=#range>Range</a></code> interface; this can therefore
   63369   result in the members of the <code><a href=#selection-0>Selection</a></code> interface
   63370   raising exceptions as well, in addition to any explicitly called out
   63371   below.</p>
   63372 
   63373   <dl class=domintro><dt><var title="">selection</var> . <code title=dom-selection-anchorNode><a href=#dom-selection-anchornode>anchorNode</a></code></dt>
   63374 
   63375    <dd>
   63376 
   63377     <p>Returns the element that contains the start of the selection.</p>
   63378 
   63379     <p>Returns null if there's no selection.</p>
   63380 
   63381    </dd>
   63382 
   63383    <dt><var title="">selection</var> . <code title=dom-selection-anchorOffset><a href=#dom-selection-anchoroffset>anchorOffset</a></code></dt>
   63384 
   63385    <dd>
   63386 
   63387     <p>Returns the offset of the start of the selection relative to the element that contains the start of the selection.</p>
   63388 
   63389     <p>Returns 0 if there's no selection.</p>
   63390 
   63391    </dd>
   63392 
   63393    <dt><var title="">selection</var> . <code title=dom-selection-focusNode><a href=#dom-selection-focusnode>focusNode</a></code></dt>
   63394 
   63395    <dd>
   63396 
   63397     <p>Returns the element that contains the end of the selection.</p>
   63398 
   63399     <p>Returns null if there's no selection.</p>
   63400 
   63401    </dd>
   63402 
   63403    <dt><var title="">selection</var> . <code title=dom-selection-focusOffset><a href=#dom-selection-focusoffset>focusOffset</a></code></dt>
   63404 
   63405    <dd>
   63406 
   63407     <p>Returns the offset of the end of the selection relative to the element that contains the end of the selection.</p>
   63408 
   63409     <p>Returns 0 if there's no selection.</p>
   63410 
   63411    </dd>
   63412 
   63413    <dt><var title="">collapsed</var> = <var title="">selection</var> . <code title=dom-selection-isCollapsed><a href=#dom-selection-iscollapsed>isCollapsed</a></code>()</dt>
   63414 
   63415    <dd>
   63416 
   63417     <p>Returns true if there's no selection or if the selection is empty. Otherwise, returns false.</p>
   63418 
   63419    </dd>
   63420 
   63421    <dt><var title="">selection</var> . <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse</a></code>(<var title="">parentNode</var>, <var title="">offset</var>)</dt>
   63422 
   63423    <dd>
   63424 
   63425     <p>Replaces the selection with an empty one at the given position.</p>
   63426 
   63427     <p>Throws a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p>
   63428 
   63429    </dd>
   63430 
   63431    <dt><var title="">selection</var> . <code title=dom-selection-collapseToStart><a href=#dom-selection-collapsetostart>collapseToStart</a></code>()</dt>
   63432 
   63433    <dd>
   63434 
   63435     <p>Replaces the selection with an empty one at the position of the start of the current selection.</p>
   63436 
   63437     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no selection.</p>
   63438 
   63439    </dd>
   63440 
   63441    <dt><var title="">selection</var> . <code title=dom-selection-collapseToEnd><a href=#dom-selection-collapsetoend>collapseToEnd</a></code>()</dt>
   63442 
   63443    <dd>
   63444 
   63445     <p>Replaces the selection with an empty one at the position of the end of the current selection.</p>
   63446 
   63447     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception if there is no selection.</p>
   63448 
   63449    </dd>
   63450 
   63451    <dt><var title="">selection</var> . <code title=dom-selection-selectAllChildren><a href=#dom-selection-selectallchildren>selectAllChildren</a></code>(<var title="">parentNode</var>)</dt>
   63452 
   63453    <dd>
   63454 
   63455     <p>Replaces the selection with one that contains all the contents of the given element.</p>
   63456 
   63457     <p>Throws a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p>
   63458 
   63459    </dd>
   63460 
   63461    <dt><var title="">selection</var> . <code title=dom-selection-deleteFromDocument><a href=#dom-selection-deletefromdocument>deleteFromDocument</a></code>()</dt>
   63462 
   63463    <dd>
   63464 
   63465     <p>Deletes the selection.</p>
   63466 
   63467    </dd>
   63468 
   63469    <dt><var title="">selection</var> . <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code></dt>
   63470 
   63471    <dd>
   63472 
   63473     <p>Returns the number of ranges in the selection.</p>
   63474 
   63475    </dd>
   63476 
   63477    <dt><var title="">selection</var> . <code title=dom-selection-getRangeAt><a href=#dom-selection-getrangeat>getRangeAt</a></code>(<var title="">index</var>)</dt>
   63478 
   63479    <dd>
   63480 
   63481     <p>Returns the given range.</p>
   63482 
   63483     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the value is out of range.</p>
   63484 
   63485    </dd>
   63486 
   63487    <dt><var title="">selection</var> . <code title=dom-selection-addRange><a href=#dom-selection-addrange>addRange</a></code>(<var title="">range</var>)</dt>
   63488 
   63489    <dd>
   63490 
   63491     <p>Adds the given range to the selection.</p>
   63492 
   63493    </dd>
   63494 
   63495    <dt><var title="">selection</var> . <code title=dom-selection-removeRange><a href=#dom-selection-removerange>removeRange</a></code>(<var title="">range</var>)</dt>
   63496 
   63497    <dd>
   63498 
   63499     <p>Removes the given range from the selection, if the range was one of the ones in the selection.</p>
   63500 
   63501    </dd>
   63502 
   63503    <dt><var title="">selection</var> . <code title=dom-selection-removeAllRanges><a href=#dom-selection-removeallranges>removeAllRanges</a></code>()</dt>
   63504 
   63505    <dd>
   63506 
   63507     <p>Removes all the ranges in the selection.</p>
   63508 
   63509    </dd>
   63510 
   63511   </dl><div class=impl>
   63512 
   63513   <p>The <dfn id=dom-selection-anchornode title=dom-selection-anchorNode><code>anchorNode</code></dfn>
   63514   attribute must return the value returned by the <code title=dom-Range-startContainer><a href=#dom-range-startcontainer>startContainer</a></code> attribute of the last
   63515   <code><a href=#range>Range</a></code> object in the list, or null if the list is
   63516   empty.</p>
   63517 
   63518   <p>The <dfn id=dom-selection-anchoroffset title=dom-selection-anchorOffset><code>anchorOffset</code></dfn>
   63519   attribute must return the value returned by the <code title=dom-Range-startOffset><a href=#dom-range-startoffset>startOffset</a></code> attribute of the last <code><a href=#range>Range</a></code>
   63520   object in the list, or 0 if the list is empty.</p>
   63521 
   63522   <p>The <dfn id=dom-selection-focusnode title=dom-selection-focusNode><code>focusNode</code></dfn>
   63523   attribute must return the value returned by the <code title=dom-Range-endContainer><a href=#dom-range-endcontainer>endContainer</a></code> attribute of the last
   63524   <code><a href=#range>Range</a></code> object in the list, or null if the list is
   63525   empty.</p>
   63526 
   63527   <p>The <dfn id=dom-selection-focusoffset title=dom-selection-focusOffset><code>focusOffset</code></dfn>
   63528   attribute must return the value returned by the <code title=dom-Range-endOffset><a href=#dom-range-endoffset>endOffset</a></code> attribute of the last <code><a href=#range>Range</a></code>
   63529   object in the list, or 0 if the list is empty.</p>
   63530 
   63531   <p>The <dfn id=dom-selection-iscollapsed title=dom-selection-isCollapsed><code>isCollapsed</code></dfn>
   63532   attribute must return true if there are zero ranges, or if there is
   63533   exactly one range and its <code title=dom-Range-collapsed><a href=#dom-range-collapsed>collapsed</a></code> attribute
   63534   is itself true. Otherwise it must return false.</p>
   63535 
   63536   <p>The <dfn id=dom-selection-collapse title=dom-selection-collapse><code>collapse(<var title="">parentNode</var>, <var title="">offset</var>)</code></dfn>
   63537   method must raise a <code><a href=#wrong_document_err>WRONG_DOCUMENT_ERR</a></code> DOM exception if
   63538   <var title="">parentNode</var>'s <code><a href=#document>Document</a></code> is not the
   63539   <code><a href=#htmldocument>HTMLDocument</a></code> object with which the
   63540   <code><a href=#selection-0>Selection</a></code> object is associated. Otherwise it is, and
   63541   the method must remove all the ranges in the <code><a href=#selection-0>Selection</a></code>
   63542   list, then create a new <code><a href=#range>Range</a></code> object, add it to the
   63543   list, and invoke its <code title=dom-Range-setStart()>setStart()</code> and <code title=dom-Range-setEnd()>setEnd()</code> methods with the <var title="">parentNode</var> and <var title="">offset</var> values as
   63544   their arguments.</p>
   63545 
   63546   <p>The <dfn id=dom-selection-collapsetostart title=dom-selection-collapseToStart><code>collapseToStart()</code></dfn>
   63547   method must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> DOM exception if
   63548   there are no ranges in the list. Otherwise, it must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
   63549   <code title=dom-Range-startContainer><a href=#dom-range-startcontainer>startContainer</a></code> and <code title=dom-Range-startOffset><a href=#dom-range-startoffset>startOffset</a></code> values of the first <code><a href=#range>Range</a></code>
   63550   object in the list as the arguments.</p>
   63551 
   63552   <p>The <dfn id=dom-selection-collapsetoend title=dom-selection-collapseToEnd><code>collapseToEnd()</code></dfn>
   63553   method must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> DOM exception if
   63554   there are no ranges in the list. Otherwise, it must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
   63555   <code title=dom-Range-endContainer><a href=#dom-range-endcontainer>endContainer</a></code> and <code title=dom-Range-endOffset><a href=#dom-range-endoffset>endOffset</a></code> values of the last <code><a href=#range>Range</a></code>
   63556   object in the list as the arguments.</p>
   63557 
   63558   <p>The <dfn id=dom-selection-selectallchildren title=dom-selection-selectAllChildren><code>selectAllChildren(<var title="">parentNode</var>)</code></dfn>
   63559   method must invoke the <code title=dom-selection-collapse><a href=#dom-selection-collapse>collapse()</a></code> method with the
   63560   <var title="">parentNode</var> value as the first argument and 0 as the
   63561   second argument, and must then invoke the <code title=dom-Range-selectNodeContents()>selectNodeContents()</code> method on the first (and only)
   63562   range in the list with the <var title="">parentNode</var> value as the
   63563   argument.</p>
   63564 
   63565   <p>The <dfn id=dom-selection-deletefromdocument title=dom-selection-deleteFromDocument><code>deleteFromDocument()</code></dfn>
   63566   method must invoke the <code title=dom-Range-deleteContents()>deleteContents()</code> method
   63567   on each range in the list, if any, from first to last.</p>
   63568 
   63569   <p>The <dfn id=dom-selection-rangecount title=dom-selection-rangeCount><code>rangeCount</code></dfn>
   63570   attribute must return the number of ranges in the list.</p>
   63571 
   63572   <p>The <dfn id=dom-selection-getrangeat title=dom-selection-getRangeAt><code>getRangeAt(<var title="">index</var>)</code></dfn>
   63573   method must return the <var title="">index</var>th range in the list. If
   63574   <var title="">index</var> is less than zero or greater or equal to the value
   63575   returned by the <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code> attribute, then
   63576   the method must raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> DOM
   63577   exception.</p>
   63578 
   63579   <p>The <dfn id=dom-selection-addrange title=dom-selection-addRange><code>addRange(<var title="">range</var>)</code></dfn>
   63580   method must add the given <var title="">range</var> Range object to the list
   63581   of selections, at the end (so the newly added range is the new last
   63582   range). Duplicates are not prevented; a range may be added more than
   63583   once in which case it appears in the list more than once, which (for
   63584   example) will cause <a href=#dom-selection-tostring title=dom-selection-toString>stringification</a> to return the
   63585   range's text twice.</p>
   63586 
   63587   <p>The <dfn id=dom-selection-removerange title=dom-selection-removeRange><code>removeRange(<var title="">range</var>)</code></dfn>
   63588   method must remove the first occurrence of <var title="">range</var> in the
   63589   list of ranges, if it appears at all.</p>
   63590 
   63591   <p>The <dfn id=dom-selection-removeallranges title=dom-selection-removeAllRanges><code>removeAllRanges()</code></dfn>
   63592   method must remove all the ranges from the list of ranges, such that
   63593   the <code title=dom-selection-rangeCount><a href=#dom-selection-rangecount>rangeCount</a></code>
   63594   attribute returns 0 after the <code title=dom-selection-removeAllRanges><a href=#dom-selection-removeallranges>removeAllRanges()</a></code>
   63595   method is invoked (and until a new range is added to the list,
   63596   either through this interface or via user interaction).</p>
   63597 
   63598   <p>Objects implementing this interface must <dfn id=dom-selection-tostring title=dom-selection-toString>stringify</dfn> to a concatenation
   63599   of the results of invoking the <code title="">toString()</code>
   63600   method of the <code><a href=#range>Range</a></code> object on each of the ranges of the
   63601   selection, in the order they appear in the list (first to last).</p>
   63602 
   63603   </div>
   63604 
   63605   <div class=example>
   63606    <p>In the following document fragment, the emphasized parts
   63607    indicate the selection.</p>
   63608    <pre>&lt;p&gt;The cute girl likes <em>the </em>&lt;cite&gt;<em>Oxford English</em> Dictionary&lt;/cite&gt;.&lt;/p&gt;</pre>
   63609    <p>If a script invoked <code title="">window.getSelection().toString()</code>, the return value
   63610    would be "<code>the Oxford English</code>".</p>
   63611   </div>
   63612 
   63613   <!-- v2DATAGRID v2DGS:
   63614   <p class="note">The <code>Selection</code> interface has no relation
   63615   to the <code>DataGridSelection</code> interface.</p>
   63616   -->
   63617 
   63618 
   63619   <h4 id=textFieldSelection><span class=secno>8.6.2 </span>APIs for the text field selections</h4>
   63620 
   63621   <!-- v2 idea: DOM Range APIs to expose the textarea/input edited
   63622   value (ack martijnw) -->
   63623 
   63624   <p>The <code><a href=#the-input-element>input</a></code> and <code><a href=#the-textarea-element>textarea</a></code> elements define
   63625   the following members in their DOM interfaces for handling their
   63626   text selection:</p>
   63627 
   63628   <pre class="idl extract">  void <a href=#dom-textarea/input-select title=dom-textarea/input-select>select</a>();
   63629            attribute unsigned long <a href=#dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart>selectionStart</a>;
   63630            attribute unsigned long <a href=#dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd>selectionEnd</a>;
   63631   void <a href=#dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange>setSelectionRange</a>(in unsigned long start, in unsigned long end);</pre>
   63632   <!-- v2: also add textLength? it seems to be widely used -->
   63633 
   63634   <p>These methods and attributes expose and control the selection of
   63635   <code><a href=#the-input-element>input</a></code> and <code><a href=#the-textarea-element>textarea</a></code> text fields.</p>
   63636 
   63637   <dl class=domintro><dt><var title="">element</var> . <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select</a></code>()</dt>
   63638 
   63639    <dd>
   63640 
   63641     <p>Selects everything in the text field.</p>
   63642 
   63643    </dd>
   63644 
   63645    <dt><var title="">element</var> . <code title=dom-textarea/input-selecionStart>selectionStart</code> [ = <var title="">value</var> ]</dt>
   63646 
   63647    <dd>
   63648 
   63649     <p>Returns the offset to the start of the selection.</p>
   63650 
   63651     <p>Can be set, to change the start of the selection.</p>
   63652 
   63653    </dd>
   63654 
   63655    <dt><var title="">element</var> . <code title=dom-textarea/input-selecionEnd>selectionEnd</code> [ = <var title="">value</var> ]</dt>
   63656 
   63657    <dd>
   63658 
   63659     <p>Returns the offset to the end of the selection.</p>
   63660 
   63661     <p>Can be set, to change the end of the selection.</p>
   63662 
   63663    </dd>
   63664 
   63665    <dt><var title="">element</var> . <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var>)</dt>
   63666 
   63667    <dd>
   63668 
   63669     <p>Changes the selection to cover the given substring.</p>
   63670 
   63671    </dd>
   63672 
   63673   </dl><div class=impl>
   63674 
   63675   <p>When these methods and attributes are used with
   63676   <code><a href=#the-input-element>input</a></code> elements while they don't apply, they must raise
   63677   an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception. Otherwise, they must
   63678   act as described below.</p>
   63679 
   63680   <p>The <dfn id=dom-textarea/input-select title=dom-textarea/input-select><code>select()</code></dfn> method
   63681   must cause the contents of the text field to be fully selected.</p>
   63682 
   63683   <p>The <dfn id=dom-textarea/input-selectionstart title=dom-textarea/input-selectionStart><code>selectionStart</code></dfn>
   63684   attribute must, on getting, return the offset (in logical order) to
   63685   the character that immediately follows the start of the
   63686   selection. If there is no selection, then it must return the offset
   63687   (in logical order) to the character that immediately follows the
   63688   text entry cursor.</p>
   63689 
   63690   <p>On setting, it must act as if the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   63691   method had been called, with the new value as the first argument,
   63692   and the current value of the <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>
   63693   attribute as the second argument, unless the current value of the
   63694   <code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> is
   63695   less than the new value, in which case the second argument must also
   63696   be the new value.</p>
   63697 
   63698   <p>The <dfn id=dom-textarea/input-selectionend title=dom-textarea/input-selectionEnd><code>selectionEnd</code></dfn>
   63699   attribute must, on getting, return the offset (in logical order) to
   63700   the character that immediately follows the end of the selection. If
   63701   there is no selection, then it must return the offset (in logical
   63702   order) to the character that immediately follows the text entry
   63703   cursor.</p>
   63704 
   63705   <p>On setting, it must act as if the <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
   63706   method had been called, with the current value of the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>
   63707   attribute as the first argument, and new value as the second
   63708   argument.</p>
   63709 
   63710   <p>The <dfn id=dom-textarea/input-setselectionrange title=dom-textarea/input-setSelectionRange><code>setSelectionRange(<var title="">start</var>, <var title="">end</var>)</code></dfn> method
   63711   must set the selection of the text field to the sequence of
   63712   characters starting with the character at the <var title="">start</var>th position (in logical order) and ending with
   63713   the character at the <span title="">(<var title="">end</var>-1)</span>th position. Arguments greater than the
   63714   length of the value in the text field must be treated as pointing at
   63715   the end of the text field. If <var title="">end</var> is less than
   63716   or equal to <var title="">start</var> then the start of the
   63717   selection and the end of the selection must both be placed
   63718   immediately before the character with offset <var title="">end</var>. In UAs where there is no concept of an empty
   63719   selection, this must set the cursor to be just before the character
   63720   with offset <var title="">end</var>.</p>
   63721 
   63722   </div>
   63723 
   63724   <div class=example>
   63725 
   63726    <p>To obtain the currently selected text, the following JavaScript
   63727    suffices:</p>
   63728 
   63729    <pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre>
   63730 
   63731    <p>...where <var title="">control</var> is the <code><a href=#the-input-element>input</a></code>
   63732    or <code><a href=#the-textarea-element>textarea</a></code> element.</p>
   63733 
   63734   </div>
   63735 
   63736   <p>Characters with no visible rendering, such as U+200D ZERO WIDTH
   63737   JOINER, still count as characters. Thus, for instance, the selection
   63738   can include just an invisible character, and the text insertion
   63739   cursor can be placed to one side or another of such a character.</p>
   63740 
   63741 
   63742 
   63743   <h3 id=contenteditable><span class=secno>8.7 </span>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute</h3>
   63744 
   63745   <p>The <dfn id=attr-contenteditable title=attr-contenteditable><code>contenteditable</code></dfn>
   63746   attribute is an <a href=#enumerated-attribute>enumerated attribute</a> whose keywords are
   63747   the empty string, <code title="">true</code>, and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
   63748   addition, there is a third state, the <i>inherit</i> state, which is
   63749   the <i>missing value default</i> (and the <i>invalid value
   63750   default</i>).</p>
   63751 
   63752   <p>The <i>true</i> state indicates that the element is editable. The
   63753   <i>inherit</i> state indicates that the element is editable if its
   63754   parent is. The <i>false</i> state indicates that the element is not
   63755   editable.</p>
   63756 
   63757   <div class=impl>
   63758 
   63759   <p>Specifically, if an <a href=#html-elements title="HTML elements">HTML
   63760   element</a> has a <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63761   the true state, or it has its <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63762   the inherit state and if its nearest ancestor <a href=#html-elements title="HTML
   63763   elements">HTML element</a> with the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63764   a state other than the inherit state has its attribute set to the
   63765   true state, or if it and its ancestors all have their <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63766   the inherit state but the <code><a href=#document>Document</a></code> has <code title=dom-document-designMode><a href=#designMode>designMode</a></code> enabled, then the
   63767   UA must treat the element as <dfn id=editable>editable</dfn> (as described
   63768   below).</p>
   63769 
   63770   <p>Otherwise, either the <a href=#html-elements title="HTML elements">HTML
   63771   element</a> has a <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63772   the false state, or its <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute is set
   63773   to the inherit state and its nearest ancestor <a href=#html-elements title="HTML
   63774   elements">HTML element</a> with the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63775   a state other than the inherit state has its attribute set to the
   63776   false state, or all its ancestors have their <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute set to
   63777   the inherit state and the <code><a href=#document>Document</a></code> itself has <code title=dom-document-designMode><a href=#designMode>designMode</a></code> disabled; either
   63778   way, the element is not editable.</p>
   63779 
   63780   </div>
   63781 
   63782   <dl class=domintro><dt><var title="">element</var> . <code title=dom-contentEditable><a href=#dom-contenteditable>contentEditable</a></code> [ = <var title="">value</var> ]</dt>
   63783 
   63784    <dd>
   63785 
   63786     <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">inherit</code>", based
   63787     on the state of the <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute.</p>
   63788 
   63789     <p>Can be set, to change that state.</p>
   63790 
   63791     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the new value
   63792     isn't one of those strings.</p>
   63793 
   63794    </dd>
   63795 
   63796    <dt><var title="">element</var> . <code title=dom-isContentEditable><a href=#dom-iscontenteditable>isContentEditable</a></code></dt>
   63797 
   63798    <dd>
   63799 
   63800     <p>Returns true if the element is editable; otherwise, returns false.</p>
   63801 
   63802    </dd>
   63803 
   63804   </dl><div class=impl>
   63805 
   63806   <p>The <dfn id=dom-contenteditable title=dom-contentEditable><code>contentEditable</code></dfn> IDL
   63807   attribute, on getting, must return the string "<code title="">true</code>" if the content attribute is set to the true
   63808   state, <code title="">false</code>" if the content attribute is set
   63809   to the false state, and "<code title="">inherit</code>"
   63810   otherwise. On setting, if the new value is an <a href=#ascii-case-insensitive>ASCII
   63811   case-insensitive</a> match for the string "<code title="">inherit</code>" then the content attribute must be removed,
   63812   if the new value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   63813   the string "<code title="">true</code>" then the content attribute
   63814   must be set to the string "<code title="">true</code>", if the new
   63815   value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   63816   "<code title="">false</code>" then the content attribute must be set
   63817   to the string "<code title="">false</code>", and otherwise the
   63818   attribute setter must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>
   63819 
   63820   <p>The <dfn id=dom-iscontenteditable title=dom-isContentEditable><code>isContentEditable</code></dfn>
   63821   IDL attribute, on getting, must return true if the element is
   63822   <a href=#editable>editable</a>, and false otherwise.</p>
   63823 
   63824   <p>If an element is <a href=#editable>editable</a> and its parent element is
   63825   not, or if an element is <a href=#editable>editable</a> and it has no parent
   63826   element, then the element is an <dfn id=editing-host>editing host</dfn>. Editable
   63827   elements can be nested. User agents must make editing hosts
   63828   focusable (which typically means they enter the <a href=#attr-tabindex title=attr-tabindex>tab order</a>). An editing host can contain
   63829   non-editable sections, these are handled as described below. An
   63830   editing host can contain non-editable sections that contain further
   63831   editing hosts.</p>
   63832 
   63833   <p>When an editing host has focus, it must have a <dfn id=caret-position>caret
   63834   position</dfn> that specifies where the current editing position
   63835   is. It may also have a <a href=#the-selection title="the
   63836   selection">selection</a>.</p>
   63837 
   63838   <p class=note>How the caret and selection are represented depends
   63839   entirely on the UA.</p>
   63840 
   63841   <!-- v2: would be useful to have a way to mark an element as
   63842   unremovable. -->
   63843 
   63844   </div>
   63845 
   63846 
   63847   <div class=impl>
   63848 
   63849   <h4 id=user-editing-actions><span class=secno>8.7.1 </span>User editing actions</h4>
   63850 
   63851   <p>There are several actions that the user agent should allow the
   63852   user to perform while the user is interacting with an editing
   63853   host. How exactly each action is triggered is not defined for every
   63854   action, but when it is not defined, suggested key bindings are
   63855   provided to guide implementors.</p>
   63856 
   63857   <dl><dt>Move the caret</dt>
   63858 
   63859    <dd><p>User agents must allow users to move the caret to any
   63860    position within an editing host, even into nested editable
   63861    elements. This could be triggered as the default action of <code title=event-keydown>keydown</code> events with various key
   63862    identifiers and as the default action of <code title=event-mousedown>mousedown</code> events.</dd>
   63863 
   63864 
   63865    <dt>Change the selection</dt>
   63866 
   63867    <dd><p>User agents must allow users to change <a href=#the-selection>the
   63868    selection</a> within an editing host, even into nested editable
   63869    elements. User agents may prevent selections from being made in
   63870    ways that cross from editable elements into non-editable elements
   63871    (e.g. by making each non-editable descendant atomically selectable,
   63872    but not allowing text selection within them). This could be
   63873    triggered as the default action of <code title=event-keydown>keydown</code> events with various key
   63874    identifiers and as the default action of <code title=event-mousedown>mousedown</code> events.</dd>
   63875 
   63876 
   63877    <dt id=contenteditable-insertText>Insert text</dt>
   63878 
   63879    <dd><p>This action must be triggered as the default action of a
   63880    <code title=event-textInput>textInput</code> event, and may be
   63881    triggered by other commands as well. It must cause the user agent
   63882    to insert the specified text (given by the event object's <code title="">data</code> attribute in the case of the <code title=event-textInput>textInput</code> event) at the caret.</p>
   63883 
   63884    <p>If the caret is positioned somewhere where <a href=#phrasing-content>phrasing
   63885    content</a> is not allowed (e.g. inside an empty <code><a href=#the-ol-element>ol</a></code>
   63886    element), then the user agent must not insert the text directly at
   63887    the caret position. In such cases the behavior is UA-dependent,
   63888    but user agents must not, in response to a request to insert text,
   63889    generate a DOM that is less conformant than the DOM prior to the
   63890    request.</p>
   63891 
   63892    <p>User agents should allow users to insert new paragraphs into
   63893    elements that contains only content other than paragraphs.</p>
   63894 
   63895    <div class=example>
   63896     <p>For example, given the markup:</p>
   63897     <pre>&lt;section&gt;
   63898  &lt;dl&gt;
   63899   &lt;dt&gt; Ben &lt;/dt&gt;
   63900   &lt;dd&gt; Goat &lt;/dd&gt;
   63901  &lt;/dl&gt;
   63902 &lt;/section&gt;</pre>
   63903     <p>...the user agent should allow the user to insert
   63904     <code><a href=#the-p-element>p</a></code> elements before and after the <code><a href=#the-dl-element>dl</a></code>
   63905     element, as children of the <code><a href=#the-section-element>section</a></code> element.</p>
   63906    </div>
   63907 
   63908    </dd>
   63909 
   63910 
   63911    <dt id=contenteditable-breakBlock>Break block</dt>
   63912 
   63913    <dd><p>UAs should offer a way for the user to request that the
   63914    current paragraph be broken at the caret, e.g. as the default
   63915    action of a <code title=event-keydown>keydown</code> event whose
   63916    identifier is the "Enter" key and that has no modifiers set.</p>
   63917 
   63918    <p>The exact behavior is UA-dependent, but user agents must not,
   63919    in response to a request to break a paragraph, generate a DOM that
   63920    is less conformant than the DOM prior to the request.</dd>
   63921 
   63922 
   63923    <dt id=contenteditable-br>Insert a line separator</dt>
   63924 
   63925    <dd><p>UAs should offer a way for the user to request an explicit
   63926    line break at the caret position without breaking the paragraph,
   63927    e.g. as the default action of a <code title=event-keydown>keydown</code> event whose identifier is the
   63928    "Enter" key and that has a shift modifier set. Line separators are
   63929    typically found within a poem verse or an address. To insert a line
   63930    break, the user agent must insert a <code><a href=#the-br-element>br</a></code> element.</p>
   63931 
   63932    <p>If the caret is positioned somewhere where <a href=#phrasing-content>phrasing
   63933    content</a> is not allowed (e.g. in an empty <code><a href=#the-ol-element>ol</a></code>
   63934    element), then the user agent must not insert the <code><a href=#the-br-element>br</a></code>
   63935    element directly at the caret position. In such cases the behavior
   63936    is UA-dependent, but user agents must not, in response to a request
   63937    to insert a line separator, generate a DOM that is less conformant
   63938    than the DOM prior to the request.</dd>
   63939 
   63940 
   63941    <dt id=contenteditable-delete>Delete</dt>
   63942 
   63943    <dd><p>UAs should offer a way for the user to delete text and
   63944    elements, including non-editable descendants, e.g. as the default
   63945    action of <code title=event-keydown>keydown</code> events whose
   63946    identifiers are "U+0008" or "U+007F".</p>
   63947 
   63948    <p>Five edge cases in particular need to be considered carefully
   63949    when implementing this feature: backspacing at the start of an
   63950    element, backspacing when the caret is immediately after an
   63951    element, forward-deleting at the end of an element,
   63952    forward-deleting when the caret is immediately before an element,
   63953    and deleting a <a href=#the-selection title="the selection">selection</a> whose
   63954    start and end points do not share a common parent node.</p>
   63955 
   63956    <p>In any case, the exact behavior is UA-dependent, but user
   63957    agents must not, in response to a request to delete text or an
   63958    element, generate a DOM that is less conformant than the DOM prior
   63959    to the request.</dd>
   63960 
   63961 
   63962    <dt id=contenteditable-wrapSemantic>Insert, and wrap text in,
   63963    semantic elements</dt>
   63964 
   63965    <dd><p>UAs should offer the user the ability to mark text and
   63966    paragraphs with semantics that HTML can express.</p>
   63967 
   63968    <p>UAs should similarly offer a way for the user to insert empty
   63969    semantic elements to subsequently fill by entering text
   63970    manually.</p>
   63971 
   63972    <p>UAs should also offer a way to remove those semantics from
   63973    marked up text, and to remove empty semantic element that have been
   63974    inserted.</p>
   63975 
   63976    <p>In response to a request from a user to mark text up in italics,
   63977    user agents should use the <code><a href=#the-i-element>i</a></code> element to represent the
   63978    semantic. The <code><a href=#the-em-element>em</a></code> element should be used only if the
   63979    user agent is sure that the user means to indicate stress
   63980    emphasis.</p>
   63981 
   63982    <p>In response to a request from a user to mark text up in bold,
   63983    user agents should use the <code><a href=#the-b-element>b</a></code> element to represent the
   63984    semantic. The <code><a href=#the-strong-element>strong</a></code> element should be used only if
   63985    the user agent is sure that the user means to indicate
   63986    importance.</p>
   63987 
   63988    <p>The exact behavior is UA-dependent, but user agents must not,
   63989    in response to a request to wrap semantics around some text or to
   63990    insert or remove a semantic element, generate a DOM that is less
   63991    conformant than the DOM prior to the request.</dd>
   63992 
   63993 
   63994    <dt>Select and move non-editable elements nested inside editing hosts</dt>
   63995 
   63996    <dd><p>UAs should offer a way for the user to move images and other
   63997    non-editable parts around the content within an editing host. This
   63998    may be done using the <a href=#dnd>drag and drop</a> mechanism. User
   63999    agents must not, in response to a request to move non-editable
   64000    elements nested inside editing hosts, generate a DOM that is less
   64001    conformant than the DOM prior to the request.</dd>
   64002 
   64003 
   64004    <dt>Edit form controls nested inside editing hosts</dt>
   64005 
   64006    <dd><p>When an <a href=#editable>editable</a> form control is edited, the
   64007    changes must be reflected in both its current value <em>and</em>
   64008    its default value. For <code><a href=#the-input-element>input</a></code> elements this means
   64009    updating the <code title=dom-input-defaultValue><a href=#dom-input-defaultvalue>defaultValue</a></code> IDL attribute as
   64010    well as the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL
   64011    attribute; for <code><a href=#the-select-element>select</a></code> elements it means updating the
   64012    <code><a href=#the-option-element>option</a></code> elements' <code title=dom-option-defaultSelected><a href=#dom-option-defaultselected>defaultSelected</a></code> IDL
   64013    attribute as well as the <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code> IDL attribute; for
   64014    <code><a href=#the-textarea-element>textarea</a></code> elements this means updating the <code title=dom-textarea-defaultValue><a href=#dom-textarea-defaultvalue>defaultValue</a></code> IDL attribute
   64015    as well as the <code title=dom-textarea-value><a href=#dom-textarea-value>value</a></code> IDL
   64016    attribute. (Updating the <code title="">default*</code> IDL
   64017    attributes causes content attributes to be updated as well.)</dd>
   64018 
   64019   </dl><p>User agents may perform several commands per user request; for
   64020   example if the user selects a block of text and hits
   64021   <kbd><kbd>Enter</kbd></kbd>, the UA might interpret that as a
   64022   request to delete the content of <a href=#the-selection>the selection</a> followed
   64023   by a request to break the paragraph at that position.</p>
   64024 
   64025   <p>User agents may add <a href=#dom-changes>DOM changes</a> entries to the
   64026   <a href=#undo-transaction-history>undo transaction history</a> of the <a href=#editing-host>editing
   64027   host</a>'s <code><a href=#document>Document</a></code> object each time an action is
   64028   triggered.</p>
   64029 
   64030   <p>All of the actions defined above, whether triggered by the user
   64031   or programmatically (e.g. by <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> commands),
   64032   must fire mutation events as appropriate.</p>
   64033 
   64034   </div>
   64035 
   64036 
   64037 
   64038   <h4 id=making-entire-documents-editable><span class=secno>8.7.2 </span>Making entire documents editable</h4>
   64039 
   64040   <div class=impl>
   64041 
   64042   <p>Documents have a <dfn id=designMode title=dom-document-designMode><code>designMode</code></dfn>, which
   64043   can be either enabled or disabled.</p>
   64044 
   64045   </div>
   64046 
   64047   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-designMode><a href=#designMode>designMode</a></code> [ = <var title="">value</var> ]</dt>
   64048 
   64049    <dd>
   64050 
   64051     <p>Returns "<code title="">on</code>" if the document is editable,
   64052     and "<code title="">off</code>" if it isn't.</p>
   64053 
   64054     <p>Can be set, to change the document's current state.</p>
   64055 
   64056    </dd>
   64057 
   64058   </dl><div class=impl>
   64059 
   64060   <p>The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL
   64061   attribute on the <code><a href=#document>Document</a></code> object takes two values,
   64062   "<code title="">on</code>" and "<code title="">off</code>". When it
   64063   is set, the new value must be compared in an <a href=#ascii-case-insensitive>ASCII
   64064   case-insensitive</a> manner to these two values. If it matches
   64065   the "<code title="">on</code>" value, then <code title=dom-document-designMode><a href=#designMode>designMode</a></code> must be enabled,
   64066   and if it matches the "<code title="">off</code>" value, then <code title=dom-document-designMode><a href=#designMode>designMode</a></code> must be
   64067   disabled. Other values must be ignored.</p>
   64068 
   64069   <p>When <code title=dom-document-designMode><a href=#designMode>designMode</a></code> is
   64070   enabled, the IDL attribute must return the value "<code title="">on</code>", and when it is disabled, it must return the
   64071   value "<code title="">off</code>".</p>
   64072 
   64073   <p>The last state set must persist until the document is destroyed
   64074   or the state is changed. Initially, documents must have their <code title=dom-document-designMode><a href=#designMode>designMode</a></code> disabled.</p>
   64075 
   64076   </div>
   64077 
   64078 
   64079 
   64080   <h3 id=spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</h3>
   64081 
   64082   <div class=impl>
   64083 
   64084   <p>User agents can support the checking of spelling and grammar of
   64085   editable text, either in form controls (such as the value of
   64086   <code><a href=#the-textarea-element>textarea</a></code> elements), or in elements in an <a href=#editing-host>editing
   64087   host</a> (using <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code>).</p>
   64088 
   64089   <p>For each element, user agents must establish a <dfn id=concept-spellcheck-default title=concept-spellcheck-default>default behavior</dfn>, either
   64090   through defaults or through preferences expressed by the user. There
   64091   are three possible default behaviors for each element:</p>
   64092 
   64093   <dl><dt><dfn id=concept-spellcheck-default-true title=concept-spellcheck-default-true>true-by-default</dfn>
   64094 
   64095    <dd>The element will be checked for spelling and grammar if its
   64096    contents are editable.
   64097 
   64098    <dt><dfn id=concept-spellcheck-default-false title=concept-spellcheck-default-false>false-by-default</dfn>
   64099 
   64100    <dd>The element will never be checked for spelling and grammar.
   64101 
   64102    <dt><dfn id=concept-spellcheck-default-inherit title=concept-spellcheck-default-inherit>inherit-by-default</dfn>
   64103 
   64104    <dd>The element's default behavior is the same as its parent
   64105    element's. Elements that have no parent element cannot have this as
   64106    their default behavior.
   64107 
   64108   </dl><hr></div>
   64109 
   64110   <p>The <dfn id=attr-spellcheck title=attr-spellcheck><code>spellcheck</code></dfn>
   64111   attribute is an <a href=#enumerated-attribute>enumerated attribute</a> whose keywords are
   64112   the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
   64113   addition, there is a third state, the <i>default</i> state, which is
   64114   the <i>missing value default</i> (and the <i>invalid value
   64115   default</i>).</p>
   64116 
   64117   <p>The <i>true</i> state indicates that the element is to have its
   64118   spelling and grammar checked. The <i>default</i> state indicates
   64119   that the element is to act according to a default behavior, possibly
   64120   based on the parent element's own <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> state. The <i>false</i>
   64121   state indicates that the element is not to be checked.</p>
   64122 
   64123   <div class=impl>
   64124 
   64125   <hr></div>
   64126 
   64127   <dl class=domintro><dt><var title="">element</var> . <code title=dom-spellcheck><a href=#dom-spellcheck>spellcheck</a></code> [ = <var title="">value</var> ]</dt>
   64128 
   64129    <dd>
   64130 
   64131     <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">default</code>", based
   64132     on the state of the <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> attribute.</p>
   64133 
   64134     <p>Can be set, to change that state.</p>
   64135 
   64136     <p>Throws a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception if the new value
   64137     isn't one of those strings.</p>
   64138 
   64139    </dd>
   64140 
   64141   </dl><div class=impl>
   64142 
   64143   <p>The <dfn id=dom-spellcheck title=dom-spellcheck><code>spellcheck</code></dfn> IDL
   64144   attribute, on getting, must return the string "<code title="">true</code>" if the content attribute is set to the true
   64145   state, <code title="">false</code>" if the content attribute is set
   64146   to the false state, and "<code title="">default</code>"
   64147   otherwise. On setting, if the new value is an <a href=#ascii-case-insensitive>ASCII
   64148   case-insensitive</a> match for the string "<code title="">default</code>" then the content attribute must be removed,
   64149   if the new value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   64150   the string "<code title="">true</code>" then the content attribute
   64151   must be set to the string "<code title="">true</code>", if the new
   64152   value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   64153   "<code title="">false</code>" then the content attribute must be set
   64154   to the string "<code title="">false</code>", and otherwise the
   64155   attribute setter must raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception.</p>
   64156 
   64157   <p class=note>The <code title=dom-spellcheck><a href=#dom-spellcheck>spellcheck</a></code>
   64158   IDL attribute is not affected by user preferences that override the
   64159   <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute,
   64160   and therefore might not reflect the actual spellchecking state.</p>
   64161 
   64162   <p>On setting, if the new value is true, then the element's <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute must be
   64163   set to the literal string "<code title="">true</code>", otherwise it
   64164   must be set to the literal string "<code title="">false</code>".
   64165 
   64166   <hr><p>User agents must only consider the following pieces of text as
   64167   checkable for the purposes of this feature:</p>
   64168 
   64169   <ul><li>The value of <code><a href=#the-input-element>input</a></code> elements to which the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute applies,
   64170    whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attributes are not
   64171    in the <a href=#password-state title=attr-input-type-password>Password</a>
   64172    state, and that are not <i title=concept-input-immutable><a href=#concept-input-immutable>immutable</a></i> (i.e. that do not
   64173    have the <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>
   64174    attribute specified and that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>).</li>
   64175 
   64176    <li>The value of <code><a href=#the-textarea-element>textarea</a></code> elements that do not have a
   64177    <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> attribute and
   64178    that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</li>
   64179 
   64180    <li>Text in <a href=#text-node title="text node">text nodes</a> that are
   64181    children of <a href=#editable>editable</a> elements.</li>
   64182 
   64183    <li>Text in attributes of <a href=#editable>editable</a> elements.</li>
   64184 
   64185   </ul><p>For text that is part of a <a href=#text-node>text node</a>, the element
   64186   with which the text is associated is the element that is the
   64187   immediate parent of the first character of the word, sentence, or
   64188   other piece of text. For text in attributes, it is the attribute's
   64189   element. For the values of <code><a href=#the-input-element>input</a></code> and
   64190   <code><a href=#the-textarea-element>textarea</a></code> elements, it is the element itself.</p>
   64191 
   64192   <p>To determine if a word, sentence, or other piece of text in an
   64193   applicable element (as defined above) is to have spelling- and/or
   64194   grammar-checking enabled, the UA must use the following
   64195   algorithm:</p>
   64196 
   64197   <ol><!-- user override --><li>If the user has disabled the checking for this text, then the
   64198    checking is disabled.</li>
   64199 
   64200    <li>Otherwise, if the user has forced the checking for this text to
   64201    always be enabled, then the checking is enabled.</li>
   64202 
   64203    <!-- content attribute: on, off -->
   64204 
   64205    <li>Otherwise, if the element with which the text is associated has
   64206    a <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content
   64207    attribute, then: if that attribute is in the <i>true</i> state,
   64208    then checking is enabled; otherwise, if that attribute is in the
   64209    <i>false</i> state, then checking is disabled.</li>
   64210 
   64211    <!-- inherit, if there is one to inherit from -->
   64212 
   64213    <li>Otherwise, if there is an ancestor element with a <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content attribute that is
   64214    not in the <i>default</i> state, then: if the nearest such
   64215    ancestor's <code title=attr-spellcheck><a href=#attr-spellcheck>spellcheck</a></code> content
   64216    attribute is in the <i>true</i> state, then checking is enabled;
   64217    otherwise, checking is disabled.</li>
   64218 
   64219    <!-- default -->
   64220 
   64221    <li>Otherwise, if the element's <a href=#concept-spellcheck-default title=concept-spellcheck-default>default behavior</a> is <a href=#concept-spellcheck-default-true title=concept-spellcheck-default-true>true-by-default</a>,
   64222    then checking is enabled.</li>
   64223 
   64224    <li>Otherwise, if the element's <a href=#concept-spellcheck-default title=concept-spellcheck-default>default behavior</a> is <a href=#concept-spellcheck-default-false title=concept-spellcheck-default-false>false-by-default</a>,
   64225    then checking is disabled.</li>
   64226 
   64227    <!-- default inheritance -->
   64228 
   64229    <li>Otherwise, if the element's parent element has <em>its</em>
   64230    checking enabled, then checking is enabled.</li>
   64231 
   64232    <li>Otherwise, checking is disabled.</li>
   64233 
   64234   </ol><p>If the checking is enabled for a word/sentence/text, the user
   64235   agent should indicate spelling and/or grammar errors in that
   64236   text. User agents should take into account the other semantics given
   64237   in the document when suggesting spelling and grammar
   64238   corrections. User agents may use the language of the element to
   64239   determine what spelling and grammar rules to use, or may use the
   64240   user's preferred language settings. UAs should use
   64241   <code><a href=#the-input-element>input</a></code> element attributes such as <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> to ensure that the
   64242   resulting value is valid, where possible.</p>
   64243 
   64244   <p>If checking is disabled, the user agent should not indicate
   64245   spelling or grammar errors for that text.</p>
   64246 
   64247   <div class=example>
   64248 
   64249    <p>The element with ID "a" in the following example would be the
   64250    one used to determine if the word "Hello" is checked for spelling
   64251    errors. In this example, it would not be.</p>
   64252 
   64253    <pre>&lt;div contenteditable="true"&gt;
   64254  &lt;span spellcheck="false" id="a"&gt;Hell&lt;/span&gt;&lt;em&gt;o!&lt;/em&gt;
   64255 &lt;/div&gt;</pre>
   64256 
   64257    <p>The element with ID "b" in the following example would have
   64258    checking enabled (the leading space character in the attribute's
   64259    value on the <code><a href=#the-input-element>input</a></code> element causes the attribute to be
   64260    ignored, so the ancestor's value is used instead, regardless of the
   64261    default).</p>
   64262 
   64263    <pre>&lt;p spellcheck="true"&gt;
   64264  &lt;label&gt;Name: &lt;input spellcheck=" false" id="b"&gt;&lt;/label&gt;
   64265 &lt;/p&gt;</pre>
   64266 
   64267   </div>
   64268 
   64269   </div>
   64270 
   64271   <p class=note>This specification does not define the user
   64272   interface for spelling and grammar checkers. A user agent could
   64273   offer on-demand checking, could perform continuous checking while
   64274   the checking is enabled, or could use other interfaces.</p>
   64275 
   64276 
   64277   <h3 id=dnd><span class=secno>8.9 </span><dfn>Drag and drop</dfn></h3>
   64278 
   64279 <!-- v2 ideas for drag and drop:
   64280 
   64281      * being able to animate a drop target:
   64282 
   64283        > To implement this with simple interface I've proposed, events
   64284        > should be handled either by existing elements (like list
   64285        > items that compare their size and position of dragged element
   64286        > to decide whether element should be dropped before or after)
   64287        > or handled by container that would probably need to calculate
   64288        > positions of it's children and create new element to show
   64289        > drop target. Smooth Mac-like drag'n'drop can be implemented
   64290        > by animating drop target's padding/margin. So that's quite a
   64291        > bit of code that's going to be reinvented each time someone
   64292        > implements reordering.
   64293 
   64294        <hyatt> :droptarget
   64295        <hyatt> or something
   64296        <hyatt> we don't support a pseudo-class for the drop target but that's a great idea
   64297        <Hixie_> yeah, thinking about that too
   64298        <Hixie_> :drop-target, :drop-target(above), :drop-target(below) and having ondragover be able to say "not on me, but next to me maybe"
   64299 
   64300      * We should let drop targets communicate back to drag sources if
   64301        they want to communicate. (e.g. expose Window, and thus
   64302        postMessage(), on the dataTransfer object on drop.)
   64303 
   64304        We should let drag sources provide a set of options via a
   64305        context menu when the drop happens. (So that, e.g., the source
   64306        can know whether a capabilities URI that it is passing along is
   64307        supposed to be read-write access or read-only access to the
   64308        object being dragged.)
   64309 
   64310        We should let potential drop targets see the types (but not the
   64311        contents!) of dragged data so they can establish if they care
   64312        or not. (dataTransfer.hasType())
   64313 
   64314        Ack: Ben Laurie (@g)
   64315 
   64316      * Promises. Should be able to say "if you accept this drop, then
   64317        I can provide the File object that corresponds to it
   64318        eventually".
   64319 
   64320      * Exposing more information about each item. Best idea (from
   64321        Eduard Pascual) is to have a new attribute on dataTransfer
   64322        that's a list of items, each of which has:
   64323 
   64324         dataTransfer.items = DataTransferItems
   64325 
   64326          DataTransferItems.length
   64327                           .getItem(n) = DataTransferItem
   64328                           .add(stringData, type)
   64329                           .add(blobData)
   64330                           .add(fileData)
   64331                           .add(dataTransferItem)
   64332                           .clear()
   64333 
   64334          DataTransferItem.kind = 'string', 'file', 'blob', ...
   64335                          .type = MIME type
   64336                          .binary = boolean
   64337                          .getTextData(function callback (data)) - throws if binary is true
   64338                          .getBlob() - returns File or Blob
   64339 
   64340 -->
   64341 
   64342   <p>This section defines an event-based drag-and-drop mechanism.</p>
   64343 
   64344   <p>This specification does not define exactly what a
   64345   <em>drag-and-drop operation</em> actually is.</p>
   64346 
   64347   <p>On a visual medium with a pointing device, a drag operation could
   64348   be the default action of a <code title=event-mousedown>mousedown</code> event that is followed by a
   64349   series of <code title=event-mousemove>mousemove</code> events, and
   64350   the drop could be triggered by the mouse being released.</p>
   64351 
   64352   <p>On media without a pointing device, the user would probably have
   64353   to explicitly indicate his intention to perform a drag-and-drop
   64354   operation, stating what he wishes to drag and what he wishes to
   64355   drop, respectively.</p>
   64356 
   64357   <div class=impl>
   64358 
   64359   <p>However it is implemented, drag-and-drop operations must have a
   64360   starting point (e.g. where the mouse was clicked, or the start of
   64361   <a href=#the-selection>the selection</a> or element that was selected for the
   64362   drag), may have any number of intermediate steps (elements that the
   64363   mouse moves over during a drag, or elements that the user picks as
   64364   possible drop points as he cycles through possibilities), and must
   64365   either have an end point (the element above which the mouse button
   64366   was released, or the element that was finally selected), or be
   64367   canceled. The end point must be the last element selected as a
   64368   possible drop point before the drop occurs (so if the operation is
   64369   not canceled, there must be at least one element in the middle
   64370   step).</p>
   64371 
   64372   </div>
   64373 
   64374 
   64375   <h4 id=introduction-5><span class=secno>8.9.1 </span>Introduction</h4>
   64376 
   64377   <p><i>This section is non-normative.</i></p>
   64378 
   64379   <p>To make an element draggable is simple: give the element a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute, and set an event
   64380   listener for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> that
   64381   stores the data being dragged.</p>
   64382 
   64383   <p>The event handler typically needs to check that it's not a text
   64384   selection that is being dragged, and then needs to store data into
   64385   the <code><a href=#datatransfer>DataTransfer</a></code> object and set the allowed effects
   64386   (copy, move, link, or some combination).</p>
   64387 
   64388   <p>For example:</p>
   64389 
   64390   <pre>&lt;p&gt;What fruits do you like?&lt;/p&gt;
   64391 &lt;ol ondragstart="dragStartHandler(event)"&gt;
   64392  &lt;li draggable data-value="fruit-apple"&gt;Apples&lt;/li&gt;
   64393  &lt;li draggable data-value="fruit-orange"&gt;Oranges&lt;/li&gt;
   64394  &lt;li draggable data-value="fruit-pear"&gt;Pears&lt;/li&gt;
   64395 &lt;/ol&gt;
   64396 &lt;script&gt;
   64397   var internalDNDType = 'text/x-example'; // set this to something specific to your site
   64398   function dragStartHandler(event) {
   64399     if (event.target instanceof HTMLLIElement) {
   64400       // use the element's data-value="" attribute as the value to be moving:
   64401       event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
   64402       event.effectAllowed = 'move'; // only allow moves
   64403     } else {
   64404       event.preventDefault(); // don't allow selection to be dragged
   64405     }
   64406   }
   64407 &lt;/script&gt;</pre>
   64408 
   64409   <hr><p>To accept a drop, the drop target has to listen to at least three
   64410   events. First, the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
   64411   event, which is used to determine whether or not the drop target is
   64412   to accept the drop. If the drop is to be accepted, then this event
   64413   has to be canceled. Second, the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event, which is used to
   64414   determine what feedback is to be shown to the user. If the event is
   64415   canceled, then the feedback (typically the cursor) is updated based
   64416   on the <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
   64417   attribute's value, as set by the event handler; otherwise, the
   64418   default behavior (typically to do nothing) is used instead. Finally,
   64419   the <code title=event-drop><a href=#event-drop>drop</a></code> event, which allows the
   64420   actual drop to be performed. This event also needs to be canceled,
   64421   so that the <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute's
   64422   value can be used by the source (otherwise it's reset).</p>
   64423 
   64424   <p>For example:</p>
   64425 
   64426   <pre>&lt;p&gt;Drop your favorite fruits below:&lt;/p&gt;
   64427 &lt;ol class="dropzone"
   64428     ondragenter="dragEnterHandler(event)"
   64429     ondragover="dragOverHandler(event)"
   64430     ondrop="dropHandler(event)"&gt;
   64431 &lt;/ol&gt;
   64432 &lt;script&gt;
   64433   var internalDNDType = 'text/x-example'; // set this to something specific to your site
   64434   function dragEnterHandler(event) {
   64435     // cancel the event if the drag contains data of our type
   64436     if (event.dataTransfer.types.contains(internalDNDType))
   64437       event.preventDefault();
   64438   }
   64439   function dragOverHandler(event) {
   64440     event.dataTransfer.dropEffect = 'move';
   64441     event.preventDefault();
   64442   }
   64443   function dropHandler(event) {
   64444     // drop the data
   64445     var li = document.createElement('li');
   64446     var data = event.dataTransfer.getData(internalDNDType);
   64447     if (data == 'fruit-apple') {
   64448       li.textContent = 'Apples';
   64449     } else if (data == 'fruit-orange') {
   64450       li.textContent = 'Oranges';
   64451     } else if (data == 'fruit-pear') {
   64452       li.textContent = 'Pears';
   64453     } else {
   64454       li.textContent = 'Unknown Fruit';
   64455     }
   64456     event.target.appendChild(li);
   64457   }
   64458 &lt;/script&gt;</pre>
   64459 
   64460   <hr><p>To remove the original element (the one that was dragged) from
   64461   the display, the <code title=event-dragend><a href=#event-dragend>dragend</a></code> event
   64462   can be used.</p>
   64463 
   64464   <p>For our example here, that means updating the original markup to
   64465   handle that event:</p>
   64466 
   64467 
   64468   <pre>&lt;p&gt;What fruits do you like?&lt;/p&gt;
   64469 &lt;ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)"&gt;
   64470  <em>...as before...</em>
   64471 &lt;/ol&gt;
   64472 &lt;script&gt;
   64473   function dragStartHandler(event) {
   64474     // <em>...as before...</em>
   64475   }
   64476   function dragEndHandler(event) {
   64477     // remove the dragged element
   64478     event.target.parentNode.removeChild(event.target);
   64479   }
   64480 &lt;/script&gt;</pre>
   64481 
   64482 
   64483 
   64484 
   64485   <h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4>
   64486 
   64487   <p>The drag-and-drop processing model involves several events. They
   64488   all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
   64489 
   64490   <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
   64491   readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;
   64492 
   64493   void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in <a href=#datatransfer>DataTransfer</a> dataTransferArg);
   64494 };</pre>
   64495 
   64496   <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>
   64497 
   64498    <dd>
   64499 
   64500     <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>
   64501 
   64502    </dd>
   64503 
   64504   </dl><div class=impl>
   64505 
   64506   <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
   64507   method must initialize the event in a manner analogous to the
   64508   similarly-named method in the DOM Events interfaces, except that the
   64509   <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   64510 
   64511   <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
   64512   attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
   64513   context information for the event.</p>
   64514 
   64515   </div>
   64516 
   64517   <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
   64518            attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
   64519            attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;
   64520 
   64521   readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
   64522   void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
   64523   void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
   64524   DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
   64525   readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;
   64526 
   64527   void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
   64528   void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
   64529 };</pre>
   64530 
   64531   <p><code><a href=#datatransfer>DataTransfer</a></code> objects can hold pieces of data, each
   64532   associated with a unique format. Formats are generally given by
   64533   <a href=#mime-type title="MIME type">MIME types</a>, with some values
   64534   special-cased for legacy reasons. However, the API does not enforce
   64535   this; non-MIME-type values can be added as well. All formats are
   64536   identified by strings that are <a href=#converted-to-ascii-lowercase>converted to ASCII
   64537   lowercase</a> by the API.</p>
   64538 
   64539   <dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>
   64540 
   64541    <dd>
   64542 
   64543     <p>Returns the kind of operation that is currently selected. If
   64544     the kind of operation isn't one of those that is allowed by the
   64545     <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
   64546     attribute, then the operation will fail.</p>
   64547 
   64548     <p>Can be set, to change the selected operation.</p>
   64549 
   64550     <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>.</p>
   64551 
   64552    </dd>
   64553 
   64554    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> [ = <var title="">value</var> ]</dt>
   64555 
   64556    <dd>
   64557 
   64558     <p>Returns the kinds of operations that are to be allowed.</p>
   64559 
   64560     <p>Can be set, to change the allowed operations.</p>
   64561 
   64562     <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>,</p>
   64563 
   64564    </dd>
   64565 
   64566    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code></dt>
   64567 
   64568    <dd>
   64569 
   64570     <p>Returns a <code>DOMStringList</code> listing the formats that
   64571     were set in the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>
   64572     event. In addition, if any files are being dragged, then one of
   64573     the types will be the string "<code title="">Files</code>".</p>
   64574 
   64575    </dd>
   64576 
   64577    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData</a></code>( [ <var title="">format</var> ] )</dt>
   64578 
   64579    <dd>
   64580 
   64581     <p>Removes the data of the specified formats. Removes all data if
   64582     the argument is omitted.</p>
   64583 
   64584    </dd>
   64585 
   64586    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-setData><a href=#dom-datatransfer-setdata>setData</a></code>(<var title="">format</var>, <var title="">data</var>)</dt>
   64587 
   64588    <dd>
   64589 
   64590     <p>Adds the specified data.</p>
   64591 
   64592    </dd>
   64593 
   64594    <dt><var title="">data</var> = <var title="">dataTransfer</var> . <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData</a></code>(<var title="">format</var>)</dt>
   64595 
   64596    <dd>
   64597 
   64598     <p>Returns the specified data. If there is no such data, returns the empty string.</p>
   64599 
   64600    </dd>
   64601 
   64602    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-files><a href=#dom-datatransfer-files>files</a></code></dt>
   64603 
   64604    <dd>
   64605 
   64606     <p>Returns a <code>FileList</code> of the files being dragged, if any.</p>
   64607 
   64608    </dd>
   64609 
   64610    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</dt>
   64611 
   64612    <dd>
   64613 
   64614     <p>Uses the given element to update the drag feedback, replacing any previously specified feedback.</p>
   64615 
   64616    </dd>
   64617 
   64618    <dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement</a></code>(<var title="">element</var>)</dt>
   64619 
   64620    <dd>
   64621 
   64622     <p>Adds the given element to the list of elements used to render the drag feedback.</p>
   64623 
   64624    </dd>
   64625 
   64626   </dl><div class=impl>
   64627 
   64628   <p>When a <code><a href=#datatransfer>DataTransfer</a></code> object is created, it must be
   64629   initialized as follows:</p>
   64630 
   64631   <ul><li>The <code><a href=#datatransfer>DataTransfer</a></code> object must initially contain no
   64632    data, no elements, and have no associated image.</li>
   64633 
   64634    <li>The <code><a href=#datatransfer>DataTransfer</a></code> object's <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
   64635    attribute must be set to "<code title="">uninitialized</code>".</li>
   64636 
   64637    <li>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
   64638    attribute must be set to "<code title="">none</code>".</li>
   64639 
   64640   </ul><p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
   64641   attribute controls the drag-and-drop feedback that the user is given
   64642   during a drag-and-drop operation.</p>
   64643 
   64644   <p>The attribute must ignore any attempts to set it to a value other
   64645   than <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>. On getting,
   64646   the attribute must return the last of those four values that it was
   64647   set to.</p>
   64648 
   64649   <p>The <dfn id=dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed><code>effectAllowed</code></dfn>
   64650   attribute is used in the drag-and-drop processing model to
   64651   initialize the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
   64652   during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events.</p>
   64653 
   64654   <p>The attribute must ignore any attempts to set it to a value other
   64655   than <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>. On getting, the attribute must return
   64656   the last of those values that it was set to.</p>
   64657 
   64658   <p>The <dfn id=dom-datatransfer-types title=dom-DataTransfer-types><code>types</code></dfn>
   64659   attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
   64660   that contains the list of formats that were added to the
   64661   <code><a href=#datatransfer>DataTransfer</a></code> object in the corresponding <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event. The same object must
   64662   be returned each time. If any files were included in the drag, then
   64663   the <code>DOMStringList</code> object must in addition include the
   64664   string "<code title="">Files</code>". (This value can be
   64665   distinguished from the other values because it is not
   64666   lowercase.)</p>
   64667 
   64668   <p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
   64669   method, when called with no arguments, must clear the
   64670   <code><a href=#datatransfer>DataTransfer</a></code> object of all data (for all formats).</p>
   64671 
   64672   <p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
   64673   not affect whether any files were included in the drag, so the <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code> attribute's list might
   64674   still not be empty after calling <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> (it would
   64675   still contain the "<code title="">Files</code>" string if any files
   64676   were included in the drag).</p>
   64677 
   64678   <p>When called with an argument, the <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData(<var title="">format</var>)</a></code> method must clear the
   64679   <code><a href=#datatransfer>DataTransfer</a></code> object of any data associated with the
   64680   given <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
   64681   lowercase</a>. If <var title="">format</var> (after conversion to
   64682   lowercase) is the value "<code title="">text</code>", then it must
   64683   be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
   64684 
   64685   <p>The <dfn id=dom-datatransfer-setdata title=dom-DataTransfer-setData><code>setData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
   64686   must add <var title="">data</var> to the data stored in the
   64687   <code><a href=#datatransfer>DataTransfer</a></code> object, labeled as being of the type <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
   64688   lowercase</a>. This must replace any previous data that had been
   64689   set for that format. If <var title="">format</var> (after conversion
   64690   to lowercase) is the value "<code title="">text</code>", then it
   64691   must be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
   64692 
   64693   <p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>)</code></dfn> method must return the data that
   64694   is associated with the type <var title="">format</var>
   64695   <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, if any, and must return
   64696   the empty string otherwise. If <var title="">format</var> (after
   64697   conversion to lowercase) is the value "<code title="">text</code>",
   64698   then it must be treated as "<code title="">text/plain</code>". If
   64699   the <var title="">format</var> (after conversion to lowercase) is
   64700   "<code title="">url</code>", then the data associated with the
   64701   "<code title="">text/uri-list</code>" format must be parsed as
   64702   appropriate for <code title="">text/uri-list</code> data, and the
   64703   first URL from the list must be returned. If there is no data with
   64704   that format, or if there is but it has no URLs, then the method must
   64705   return the empty string. <a href=#refsRFC2483>[RFC2483]</a></p>
   64706 
   64707   <p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
   64708   attribute must return the <code>FileList</code> object that contains
   64709   the files that are stored in the <code><a href=#datatransfer>DataTransfer</a></code>
   64710   object. There is one such object per <code><a href=#datatransfer>DataTransfer</a></code>
   64711   object.</p>
   64712 
   64713   <p class=note>This version of the API does not expose the types of
   64714   the files during the drag.</p>
   64715 
   64716   <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method sets which element to use <a href=#base-dnd-feedback>to generate the drag feedback</a>. The
   64717   <var title="">element</var> argument can be any
   64718   <code><a href=#element>Element</a></code>; if it is an <code><a href=#the-img-element>img</a></code> element, then the
   64719   user agent should use the element's image (at its intrinsic size) to
   64720   generate the feedback, otherwise the user agent should base the
   64721   feedback on the given element (but the exact mechanism for doing so
   64722   is not specified).</p>
   64723 
   64724   <p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
   64725   specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. It adds an
   64726   element to the <code><a href=#datatransfer>DataTransfer</a></code> object.</p>
   64727 
   64728   <p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
   64729   <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> is
   64730   that the latter automatically generates the image based on the
   64731   current rendering of the elements added, whereas the former uses the
   64732   exact specified image.</p>
   64733 
   64734   </div>
   64735 
   64736 
   64737   <h4 id=dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</h4>
   64738 
   64739   <p>The following events are involved in the drag-and-drop
   64740   model.</p>
   64741 
   64742   <div class=impl>
   64743 
   64744   <p>Whenever the processing model described below causes one of these
   64745   events to be fired, the event fired must use the
   64746   <code><a href=#dragevent>DragEvent</a></code> interface defined above, must have the
   64747   bubbling and cancelable behaviors given in the table below, and must
   64748   have the context information set up as described after the table,
   64749   with the <code title=dom-UIEvent-detail>detail</code> attribute
   64750   set to zero, the mouse and key attributes set according to the state
   64751   of the input devices as they would be for user interaction events,
   64752   and the <code title="">relatedTarget</code> attribute set to
   64753   null.</p>
   64754 
   64755   <p>If there is no relevant pointing device, the object must have its
   64756   <code title="">screenX</code>, <code title="">screenY</code>, <code title="">clientX</code>, <code title="">clientY</code>, and <code title="">button</code> attributes set to 0.</p>
   64757 
   64758   <!-- interaction event spec point -->
   64759 
   64760   </div>
   64761 
   64762   <table><thead><tr><th> Event Name </th>
   64763      <th> Target </th>
   64764      <th> Bubbles? </th>
   64765      <th> Cancelable? </th>
   64766      <th> <code title=dom-DataTransfer-dataTransfer>dataTransfer</code> </th>
   64767      <th> <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> </th>
   64768      <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
   64769      <th> Default Action </th>
   64770     <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
   64771      <td><a href=#source-node>Source node</a></td>
   64772      <td>&#10003; Bubbles</td>
   64773      <td>&#10003; Cancelable</td>
   64774      <td>Contains <a href=#source-node>source node</a> unless a selection is being dragged, in which case it is empty; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
   64775      <td><code title="">uninitialized</code></td>
   64776      <td><code title="">none</code></td>
   64777      <td>Initiate the drag-and-drop operation</td>
   64778     <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
   64779      <td><a href=#source-node>Source node</a></td>
   64780      <td>&#10003; Bubbles</td>
   64781      <td>&#10003; Cancelable</td>
   64782      <td>Empty</td>
   64783      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64784      <td><code title="">none</code></td>
   64785      <td>Continue the drag-and-drop operation</td>
   64786     <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
   64787      <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
   64788      <td>&#10003; Bubbles</td>
   64789      <td>&#10003; Cancelable</td>
   64790      <td>Empty</td>
   64791      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64792      <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
   64793      <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
   64794     <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
   64795      <td><a href=#current-target-element title="current target element">Previous target element</a></td>
   64796      <td>&#10003; Bubbles</td>
   64797      <td>&mdash;</td>
   64798      <td>Empty</td>
   64799      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64800      <td><code title="">none</code></td>
   64801      <td>None</td>
   64802     <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
   64803      <td><a href=#current-target-element>Current target element</a></td>
   64804      <td>&#10003; Bubbles</td>
   64805      <td>&#10003; Cancelable</td>
   64806      <td>Empty</td>
   64807      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64808      <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
   64809      <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
   64810     <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
   64811      <td><a href=#current-target-element>Current target element</a></td>
   64812      <td>&#10003; Bubbles</td>
   64813      <td>&#10003; Cancelable</td>
   64814      <td><code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> returns data set in <code title=dom-dragstart>dragstart</code> event; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
   64815      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64816      <td><a href=#current-drag-operation>Current drag operation</a></td>
   64817      <td>Varies</td>
   64818     <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
   64819      <td><a href=#source-node>Source node</a></td>
   64820      <td>&#10003; Bubbles</td>
   64821      <td>&mdash;</td>
   64822      <td>Empty</td>
   64823      <td><a href=#effectAllowed-initialization>Same as last event</a></td>
   64824      <td><a href=#current-drag-operation>Current drag operation</a></td>
   64825      <td>Varies</td>
   64826     </table><p class=note>"Empty" in the table above means that the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
   64827   there is no data being dragged.</p>
   64828 
   64829   <div class=impl>
   64830 
   64831   <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
   64832   object's contents are empty (the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
   64833   there is no data being dragged) except for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events and <code title=event-drop><a href=#event-drop>drop</a></code> events, for which the contents are
   64834   set as described in the processing model, below.</p>
   64835 
   64836   <p id=effectAllowed-initialization>The <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
   64837   attribute must be set to "<code title="">uninitialized</code>" for
   64838   <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events, and to
   64839   whatever value the field had after the last drag-and-drop event was
   64840   fired for all other events (only counting events fired by the user
   64841   agent for the purposes of the drag-and-drop model described
   64842   below).</p>
   64843 
   64844   <p id=dropEffect-initialization>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute must
   64845   be set to "<code title="">none</code>" for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, and <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> events (except when stated
   64846   otherwise in the algorithms given in the sections below), to the
   64847   value corresponding to the <a href=#current-drag-operation>current drag operation</a> for
   64848   <code title=event-drop><a href=#event-drop>drop</a></code> and <code title=event-dragend><a href=#event-dragend>dragend</a></code> events, and to a value based on
   64849   the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
   64850   attribute's value and to the drag-and-drop source, as given by the
   64851   following table, for the remaining events (<code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>
   64852 
   64853   <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
   64854      <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
   64855     </thead><tr><td><code title="">none</code></td>
   64856     <td><code title="">none</code></td>
   64857    <tr><td><code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">all</code></td>
   64858     <td><code title="">copy</code></td>
   64859    <tr><td><code title="">link</code>, <code title="">linkMove</code></td>
   64860     <td><code title="">link</code></td>
   64861    <tr><td><code title="">move</code></td>
   64862     <td><code title="">move</code></td>
   64863    <tr><td><code title="">uninitialized</code> when what is being dragged is a selection from a text field</td>
   64864     <td><code title="">move</code></td>
   64865    <tr><td><code title="">uninitialized</code> when what is being dragged is a selection</td>
   64866     <td><code title="">copy</code></td>
   64867    <tr><td><code title="">uninitialized</code> when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
   64868     <td><code title="">link</code></td>
   64869    <tr><td>Any other case</td>
   64870     <td><code title="">copy</code></td>
   64871    </table></div>
   64872 
   64873 
   64874   <div class=impl>
   64875 
   64876   <h4 id=drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</h4>
   64877 
   64878   <p>When the user attempts to begin a drag operation, the user agent
   64879   must first determine what is being dragged. If the drag operation
   64880   was invoked on a selection, then it is the selection that is being
   64881   dragged. Otherwise, it is the first element, going up the ancestor
   64882   chain, starting at the node that the user tried to drag, that has
   64883   the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set
   64884   to true. If there is no such element, then nothing is being dragged,
   64885   the drag-and-drop operation is never started, and the user agent
   64886   must not continue with this algorithm.</p>
   64887 
   64888   <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
   64889   elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   64890   attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
   64891   attribute set to true by default.</p>
   64892 
   64893   <p>If the user agent determines that something can be dragged, a
   64894   <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event must then be
   64895   fired at the <a href=#source-node>source node</a>.</p>
   64896 
   64897   <p>The <dfn id=source-node>source node</dfn> depends on the kind of drag and how it
   64898   was initiated. If it is a selection that is being dragged, then the
   64899   <a href=#source-node>source node</a> is the text node that the user started the
   64900   drag on (typically the text node that the user originally
   64901   clicked). If the user did not specify a particular node, for example
   64902   if the user just told the user agent to begin a drag of "the
   64903   selection", then the <a href=#source-node>source node</a> is the first text node
   64904   containing a part of the selection. If it is not a selection that is
   64905   being dragged, then the <a href=#source-node>source node</a> is the element that
   64906   is being dragged.</p>
   64907 
   64908   <p>Multiple events are fired on the <a href=#source-node>source node</a> during
   64909   the course of the drag-and-drop operation.</p>
   64910 
   64911   <hr><p>The <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn> also depends on the kind of
   64912   drag. If it is a selection that is being dragged, then the
   64913   <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains, in <a href=#tree-order>tree
   64914   order</a>, every node that is partially or completely included in
   64915   the selection (including all their ancestors). Otherwise, the
   64916   <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only the <a href=#source-node>source
   64917   node</a>.</p>
   64918 
   64919   <hr><p>If it is a selection that is being dragged, the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member of the
   64920   event must be created with no nodes. Otherwise, it must be created
   64921   containing just the <a href=#source-node>source node</a>. Script can use the
   64922   <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method
   64923   to add further elements to the list of what is being dragged. (This
   64924   list is only used for rendering the drag feedback.)</p>
   64925 
   64926   <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
   64927   member of the event also has data added to it, as follows:</p>
   64928 
   64929   <ul><li>
   64930 
   64931     <p>If it is a selection that is being dragged, then the user agent
   64932     must add the text of the selection to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
   64933     associated with the <code title="">text/plain</code> format.</p>
   64934 
   64935    </li>
   64936 
   64937    <li>
   64938 
   64939     <p>If files are being dragged, then the user agent must add the
   64940     files to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member's
   64941     <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute's
   64942     <code>FileList</code> object. (Dragging files can only happen from
   64943     outside a <a href=#browsing-context>browsing context</a>, for example from a file
   64944     system manager application, and thus the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event is actually implied
   64945     in this case.)</p>
   64946 
   64947    </li>
   64948 
   64949 
   64950 
   64951    <li>
   64952 
   64953     <p>The user agent must take the <a href=#list-of-dragged-nodes>list of dragged nodes</a>
   64954     and <a href=#extracting-json title="extracting JSON">extract the microdata from those
   64955     nodes into a JSON form</a>, and then must add the resulting
   64956     string to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
   64957     associated with the <code title="">application/microdata+json</code> format.</p>
   64958 
   64959    </li>
   64960 
   64961 
   64962 <!-- v2: deal with multiple vCards -->
   64963 <!--
   64964    <li>
   64965 
   64966     <p>The user agent must take the <span>list of dragged nodes</span>
   64967     and <span title="extracting a vCard">extract the vCard data from
   64968     those nodes</span>, and then must add the resulting string to the
   64969     <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
   64970     member, associated with the <code
   64971     title="">text/directory;profile=vcard</code> format.</p>
   64972 
   64973    </li>
   64974 
   64975    <li>
   64976 
   64977     <p>The user agent must take the <span>list of dragged nodes</span>
   64978     and <span title="extracting vEvent data">extract the vEvent data
   64979     from those nodes</span>, and then must add the resulting string to
   64980     the <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
   64981     member, associated with the <code
   64982     title="">text/calendar;component=vevent</code> format.</p>
   64983 
   64984    </li>
   64985 -->
   64986 
   64987    <!-- v2: text/html -->
   64988 
   64989    <li>
   64990 
   64991     <p>The user agent must run the following steps:</p>
   64992 
   64993     <ol><li><p>Let <var title="">urls</var> be an empty list of <a href=#absolute-url title="absolute URL">absolute URLs</a>.</li>
   64994 
   64995      <li>
   64996 
   64997       <p>For each <var title="">node</var> in <var title="">nodes</var>:</p>
   64998 
   64999       <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>
   65000 
   65001        <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
   65002        the element.</dd>
   65003 
   65004        <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>
   65005 
   65006        <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to the
   65007        element.</dd>
   65008 
   65009        <!-- v2: more -->
   65010 
   65011       </dl></li>
   65012 
   65013      <li><p>If <var title="">urls</var> is still empty, abort these
   65014      steps.</li>
   65015 
   65016      <li><p>Let <var title="">url string</var> be the result of
   65017      concatenating the strings in <var title="">urls</var>, in the
   65018      order they were added, separated by a U+000D CARRIAGE RETURN
   65019      U+000A LINE FEED character pair (CRLF).</li>
   65020 
   65021      <li><p>Add <var title="">url string</var> to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
   65022      associated with the <code title="">text/uri-list</code>
   65023      format.</li>
   65024 
   65025     </ol></li>
   65026 
   65027   </ul><hr><p>If the event is canceled, then the drag-and-drop operation must
   65028   not occur; the user agent must not continue with this algorithm.</p>
   65029 
   65030   <p>If it is not canceled, then the drag-and-drop operation must be
   65031   initiated.</p>
   65032 
   65033   <p class=note>Since events with no event listeners registered are,
   65034   almost by definition, never canceled, drag-and-drop is always
   65035   available to the user if the author does not specifically prevent
   65036   it.</p>
   65037 
   65038   <p id=base-dnd-feedback>The drag-and-drop feedback must be
   65039   generated from the first of the following sources that is
   65040   available:</p>
   65041 
   65042   <ol><li>The element specified in the last call to the <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> method
   65043    of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
   65044    object of the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event,
   65045    if the method was called. In visual media, if this is used, the
   65046    <var title="">x</var> and <var title="">y</var> arguments that were
   65047    passed to that method should be used as hints for where to put the
   65048    cursor relative to the resulting image. The values are expressed as
   65049    distances in CSS pixels from the left side and from the top side of
   65050    the image respectively. <a href=#refsCSS>[CSS]</a></li>
   65051 
   65052    <li>The elements that were added to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object, both
   65053    before the event was fired, and during the handling of the event
   65054    using the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code>
   65055    method, if any such elements were indeed added.</li>
   65056 
   65057    <li>The selection that the user is dragging.</li>
   65058 
   65059   </ol><p>The user agent must take a note of <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>the data that was placed</a> in
   65060   the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
   65061   object. This data will be made available again when the <code title=event-drop><a href=#event-drop>drop</a></code> event is fired.</p>
   65062 
   65063   <p>From this point until the end of the drag-and-drop operation,
   65064   device input events (e.g. mouse and keyboard events) must be
   65065   suppressed. In addition, the user agent must track all DOM changes
   65066   made during the drag-and-drop operation, and add them to its <a href=#undo>undo history</a> as one atomic operation once the
   65067   drag-and-drop operation has ended.</p>
   65068 
   65069   <p>During the drag operation, the element directly indicated by the
   65070   user as the drop target is called the <dfn id=immediate-user-selection>immediate user
   65071   selection</dfn>. (Only elements can be selected by the user; other
   65072   nodes must not be made available as drop targets.)
   65073 
   65074   However, the <a href=#immediate-user-selection>immediate user selection</a> is not
   65075   necessarily the <dfn id=current-target-element>current target element</dfn>, which is the
   65076   element currently selected for the drop part of the drag-and-drop
   65077   operation.
   65078 
   65079   The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
   65080   selects different elements (either by pointing at them with a
   65081   pointing device, or by selecting them in some other way). The
   65082   <a href=#current-target-element>current target element</a> changes when the <a href=#immediate-user-selection>immediate
   65083   user selection</a> changes, based on the results of event
   65084   listeners in the document, as described below.</p>
   65085 
   65086   <p>Both the <a href=#current-target-element>current target element</a> and the
   65087   <a href=#immediate-user-selection>immediate user selection</a> can be null, which means no
   65088   target element is selected. They can also both be elements in other
   65089   (DOM-based) documents, or other (non-Web) programs altogether. (For
   65090   example, a user could drag text to a word-processor.) The
   65091   <a href=#current-target-element>current target element</a> is initially null.</p>
   65092 
   65093   <p>In addition, there is also a <dfn id=current-drag-operation>current drag operation</dfn>,
   65094   which can take on the values "none", "copy", "link", and "move".
   65095   Initially, it has the value "none". It is updated by the user agent
   65096   as described in the steps below.</p>
   65097 
   65098   <p>User agents must, as soon as the drag operation is initiated and
   65099   every 350ms (&plusmn;200ms) thereafter for as long as the drag
   65100   operation is ongoing, <a href=#queue-a-task>queue a task</a> to perform the
   65101   following steps in sequence:</p>
   65102 
   65103   <ol><li>
   65104 
   65105     <p>If the user agent is still performing the previous iteration of
   65106     the sequence (if any) when the next iteration becomes due, the
   65107     user agent must not execute the overdue iteration, effectively
   65108     "skipping missed frames" of the drag-and-drop operation.</p>
   65109 
   65110    </li>
   65111 
   65112    <li>
   65113 
   65114     <p>The user agent must fire a <code title=event-drag><a href=#event-drag>drag</a></code>
   65115     event at the <a href=#source-node>source node</a>. If this event is canceled,
   65116     the user agent must set the <a href=#current-drag-operation>current drag operation</a> to
   65117     none (no drag operation).</p>
   65118 
   65119    </li>
   65120 
   65121    <li>
   65122 
   65123     <p>Next, if the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
   65124     canceled and the user has not ended the drag-and-drop operation,
   65125     the user agent must check the state of the drag-and-drop
   65126     operation, as follows:</p>
   65127 
   65128     <ol><li>
   65129 
   65130       <p>First, if the user is indicating a different <a href=#immediate-user-selection>immediate
   65131       user selection</a> than during the last iteration (or if this
   65132       is the first iteration), and if this <a href=#immediate-user-selection>immediate user
   65133       selection</a> is not the same as the <a href=#current-target-element>current target
   65134       element</a>, then the <a href=#current-target-element>current target element</a> must
   65135       be updated, as follows:</p>
   65136 
   65137       <dl class=switch><dt>If the new <a href=#immediate-user-selection>immediate user selection</a> is null, or
   65138        is in a non-DOM document or application</dt>
   65139 
   65140        <dd><p>The user agent must set the <a href=#current-target-element>current target
   65141        element</a> to the same value.</dd>
   65142 
   65143        <dt>Otherwise</dt>
   65144 
   65145        <dd>
   65146 
   65147         <p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at the
   65148         <a href=#immediate-user-selection>immediate user selection</a>.</p>
   65149 
   65150         <p>If the event is canceled, then the <a href=#current-target-element>current target
   65151         element</a> must be set to the <a href=#immediate-user-selection>immediate user
   65152         selection</a>.</p>
   65153 
   65154         <p>Otherwise, the user agent must act as follows:</p>
   65155 
   65156         <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text
   65157          field (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code>
   65158          element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
   65159          attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
   65160          <a href=#editable>editable</a> element</dt>
   65161 
   65162          <dd><p>The <a href=#current-target-element>current target element</a> must be set to
   65163          the <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>
   65164 
   65165          <dt>If the <a href=#current-target-element>current target element</a> is
   65166          <a href=#the-body-element>the body element</a></dt>
   65167 
   65168          <dd><p>The <a href=#current-target-element>current target element</a> is left
   65169          unchanged.</dd>
   65170 
   65171          <dt>Otherwise</dt>
   65172 
   65173          <dd><p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at <a href=#the-body-element>the
   65174          body element</a>, and the <a href=#current-target-element>current target
   65175          element</a> must be set to <a href=#the-body-element>the body element</a>,
   65176          regardless of whether that event was canceled or not. (If
   65177          <a href=#the-body-element>the body element</a> is null, then the <a href=#current-target-element>current
   65178          target element</a> would be set to null too in this case,
   65179          it wouldn't be set to the <code><a href=#document>Document</a></code>
   65180          object.)</dd>
   65181 
   65182         </dl></dd>
   65183 
   65184       </dl></li>
   65185 
   65186      <li>
   65187 
   65188       <p>If the previous step caused the <a href=#current-target-element>current target
   65189       element</a> to change, and if the previous target element was
   65190       not null or a part of a non-DOM document, the user agent must fire
   65191       a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at the
   65192       previous target element.</p>
   65193 
   65194      </li>
   65195 
   65196      <li>
   65197 
   65198       <p>If the <a href=#current-target-element>current target element</a> is a DOM element,
   65199       the user agent must fire a <code title=event-dragover><a href=#event-dragover>dragover</a></code> event at this <a href=#current-target-element>current
   65200       target element</a>.</p>
   65201 
   65202       <p>If the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event is
   65203       not canceled, the user agent must act as follows:</p>
   65204 
   65205       <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
   65206        (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
   65207        whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   65208        the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
   65209        <a href=#editable>editable</a> element</dt>
   65210 
   65211        <dd><p>The user agent must set the <a href=#current-drag-operation>current drag
   65212        operation</a> to either "copy" or "move", as appropriate
   65213        given the platform conventions.</dd>
   65214 
   65215        <dt>Otherwise</dt>
   65216 
   65217        <dd><p>The user agent must reset the <a href=#current-drag-operation>current drag
   65218        operation</a> to "none".</dd>
   65219 
   65220       </dl><p>Otherwise (if the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event <em>is</em>
   65221       canceled), the <a href=#current-drag-operation>current drag operation</a> must be set
   65222       based on the values the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
   65223       <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
   65224       attributes of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
   65225       had after the event was handled, as per the following table:</p>
   65226 
   65227       <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
   65228          <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
   65229          <th>Drag operation</th>
   65230         </thead><tr><td><code title="">uninitialized</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, or <code title="">all</code></td>
   65231         <td><code title="">copy</code></td>
   65232         <td>"copy"</td>
   65233        <tr><td><code title="">uninitialized</code>, <code title="">link</code>, <code title="">copyLink</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
   65234         <td><code title="">link</code></td>
   65235         <td>"link"</td>
   65236        <tr><td><code title="">uninitialized</code>, <code title="">move</code>, <code title="">copyMove</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
   65237         <td><code title="">move</code></td>
   65238         <td>"move"</td>
   65239        <tr><td colspan=2>Any other case</td>
   65240         <td>"none"</td>
   65241        </table><p>Then, regardless of whether the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event was canceled or
   65242       not, the drag feedback (e.g. the mouse cursor) must be updated
   65243       to match the <a href=#current-drag-operation>current drag operation</a>, as
   65244       follows:</p>
   65245 
   65246       <table><thead><tr><th>Drag operation</th>
   65247          <th>Feedback</th>
   65248         </thead><tr><td>"copy"</td>
   65249         <td>Data will be copied if dropped here.</td>
   65250        <tr><td>"link"</td>
   65251         <td>Data will be linked if dropped here.</td>
   65252        <tr><td>"move"</td>
   65253         <td>Data will be moved if dropped here.</td>
   65254        <tr><td>"none"</td>
   65255         <td>No operation allowed, dropping here will cancel the drag-and-drop operation.</td>
   65256        </table></li>
   65257 
   65258      <li>
   65259 
   65260       <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not a
   65261       DOM element, the user agent must use platform-specific mechanisms
   65262       to determine what drag operation is being performed (none, copy,
   65263       link, or move). This sets the <em>current drag operation</em>.</p>
   65264 
   65265      </li>
   65266 
   65267     </ol></li>
   65268 
   65269    <li>
   65270 
   65271     <p>Otherwise, if the user ended the drag-and-drop operation (e.g.
   65272     by releasing the mouse button in a mouse-driven drag-and-drop
   65273     interface), or if the <code title=event-drag><a href=#event-drag>drag</a></code> event
   65274     was canceled, then this will be the last iteration. The user agent
   65275     must execute the following steps, then stop looping.</p>
   65276 
   65277     <ol><li>
   65278 
   65279       <p>If the <a href=#current-drag-operation>current drag operation</a> is none (no drag
   65280       operation), or, if the user ended the drag-and-drop operation by
   65281       canceling it (e.g. by hitting the <kbd>Escape</kbd> key), or if
   65282       the <a href=#current-target-element>current target element</a> is null, then the drag
   65283       operation failed. If the <a href=#current-target-element>current target element</a> is
   65284       a DOM element, the user agent must fire a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at it; otherwise,
   65285       if it is not null, it must use platform-specific conventions for
   65286       drag cancellation.</p>
   65287 
   65288      </li>
   65289 
   65290      <li>
   65291 
   65292       <p>Otherwise, the drag operation was as success. If the
   65293       <a href=#current-target-element>current target element</a> is a DOM element, the user
   65294       agent must fire a <code title=event-drop><a href=#event-drop>drop</a></code> event at
   65295       it; otherwise, it must use platform-specific conventions for
   65296       indicating a drop.</p>
   65297 
   65298       <p>When the target is a DOM element, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
   65299       of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
   65300       must be given the value representing the <a href=#current-drag-operation>current drag
   65301       operation</a> (<code title="">copy</code>, <code title="">link</code>, or <code title="">move</code>), and the
   65302       object must be set up so that the <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData()</a></code> method will
   65303       return the data that was added during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event, and the <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute will
   65304       return a <code>FileList</code> object with any files that were
   65305       dragged.</p>
   65306 
   65307       <p>If the event is canceled, the <a href=#current-drag-operation>current drag
   65308       operation</a> must be set to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
   65309       of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
   65310       it stood after the event was handled.</p>
   65311 
   65312       <p>Otherwise, the event is not canceled, and the user agent must
   65313       perform the event's default action, which depends on the exact
   65314       target as follows:</p>
   65315 
   65316       <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
   65317        (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
   65318        whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   65319        the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
   65320        <a href=#editable>editable</a> element</dt>
   65321 
   65322        <dd>The user agent must insert the data associated with the
   65323        <code>text/plain</code> format, if any, into the text field or
   65324        <a href=#editable>editable</a> element in a manner consistent with
   65325        platform-specific conventions (e.g. inserting it at the current
   65326        mouse cursor position, or inserting it at the end of the
   65327        field).</dd>
   65328 
   65329        <dt>Otherwise</dt>
   65330 
   65331        <dd>Reset the <a href=#current-drag-operation>current drag operation</a> to
   65332        "none".</dd>
   65333 
   65334       </dl></li>
   65335 
   65336      <li>
   65337 
   65338       <p>Finally, the user agent must fire a <code title=event-dragend><a href=#event-dragend>dragend</a></code> event at the <a href=#source-node>source
   65339       node</a>, with the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
   65340       of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
   65341       being set to the value corresponding to the <a href=#current-drag-operation>current drag
   65342       operation</a>.</p>
   65343 
   65344       <p class=note>The <a href=#current-drag-operation>current drag operation</a> can
   65345       change during the processing of the <code title=event-drop><a href=#event-drop>drop</a></code> event, if one was fired.</p>
   65346 
   65347       <p>The event is not cancelable. After the event has been
   65348       handled, the user agent must act as follows:</p>
   65349 
   65350       <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
   65351        (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
   65352        whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   65353        the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
   65354        a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
   65355        previous step, and the <a href=#current-drag-operation>current drag operation</a> is
   65356        "move", and the source of the drag-and-drop operation is a
   65357        selection in the DOM</dt>
   65358 
   65359        <dd>The user agent should delete the range representing the
   65360        dragged selection from the DOM.</dd>
   65361 
   65362        <dt>If the <a href=#current-target-element>current target element</a> is a text field
   65363        (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
   65364        whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   65365        the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
   65366        a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
   65367        previous step, and the <a href=#current-drag-operation>current drag operation</a> is
   65368        "move", and the source of the drag-and-drop operation is a
   65369        selection in a text field</dt>
   65370 
   65371        <dd>The user agent should delete the dragged selection from the
   65372        relevant text field.</dd>
   65373 
   65374        <dt>Otherwise</dt>
   65375 
   65376        <dd>The event has no default action.</dd>
   65377 
   65378       </dl></li>
   65379 
   65380     </ol></li>
   65381 
   65382   </ol></div>
   65383 
   65384 
   65385   <div class=impl>
   65386 
   65387   <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.9.4.1 </span>When the drag-and-drop operation starts or ends in another
   65388   document</h5>
   65389 
   65390   <p>The model described above is independent of which
   65391   <code><a href=#document>Document</a></code> object the nodes involved are from; the events
   65392   must be fired as described above and the rest of the processing
   65393   model must be followed as described above, irrespective of how many
   65394   documents are involved in the operation.</p>
   65395 
   65396   </div>
   65397 
   65398 
   65399 
   65400   <div class=impl>
   65401 
   65402   <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.9.4.2 </span>When the drag-and-drop operation starts or ends in another
   65403   application</h5>
   65404 
   65405   <p>If the drag is initiated in another application, the <a href=#source-node>source
   65406   node</a> is not a DOM node, and the user agent must use
   65407   platform-specific conventions instead when the requirements above
   65408   involve the source node. User agents in this situation must act as
   65409   if the dragged data had been added to the <code><a href=#datatransfer>DataTransfer</a></code>
   65410   object when the drag started, even though no <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event was actually fired;
   65411   user agents must similarly use platform-specific conventions when
   65412   deciding on what drag feedback to use.</p>
   65413 
   65414   <p>All the format strings must be <a href=#converted-to-ascii-lowercase>converted to ASCII
   65415   lowercase</a>. If the platform conventions do not use <a href=#mime-type title="MIME type">MIME types</a> to label the dragged data, the
   65416   user agent must map the types to MIME types first.</p>
   65417 
   65418   <p>If a drag is started in a document but ends in another
   65419   application, then the user agent must instead replace the parts of
   65420   the processing model relating to handling the <em>target</em>
   65421   according to platform-specific conventions.</p>
   65422 
   65423   <p>In any case, scripts running in the context of the document must
   65424   not be able to distinguish the case of a drag-and-drop operation
   65425   being started or ended in another application from the case of a
   65426   drag-and-drop operation being started or ended in another document
   65427   from another domain.</p>
   65428 
   65429   </div>
   65430 
   65431 
   65432   <h4 id=the-draggable-attribute><span class=secno>8.9.5 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
   65433 
   65434   <p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
   65435   <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
   65436   <a href=#enumerated-attribute>enumerated attribute</a>. It has three states. The first
   65437   state is <i>true</i> and it has the keyword <code title="">true</code>. The second state is <i>false</i> and it has
   65438   the keyword <code title="">false</code>. The third state is
   65439   <i>auto</i>; it has no keywords but it is the <i>missing value
   65440   default</i>.</p>
   65441 
   65442   <p>The <i>true</i> state means the element is draggable; the
   65443   <i>false</i> state means that it is not. The <i>auto</i> state
   65444   uses the default behavior of the user agent.</p>
   65445 
   65446   <dl class=domintro><dt><var title="">element</var> . <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> [ = <var title="">value</var> ]</dt>
   65447 
   65448    <dd>
   65449 
   65450     <p>Returns true if the element is draggable; otherwise, returns
   65451     false.</p>
   65452 
   65453     <p>Can be set, to override the default and set the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute.</p>
   65454 
   65455    </dd>
   65456 
   65457   </dl><div class=impl>
   65458 
   65459   <p>The <dfn id=dom-draggable title=dom-draggable><code>draggable</code></dfn> IDL
   65460   attribute, whose value depends on the content attribute's in the way
   65461   described below, controls whether or not the element is
   65462   draggable. Generally, only text selections are draggable, but
   65463   elements whose <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL
   65464   attribute is true become draggable as well.</p>
   65465 
   65466   <p>If an element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
   65467   content attribute has the state <i>true</i>, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
   65468   true.</p>
   65469 
   65470   <p>Otherwise, if the element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute has the
   65471   state <i>false</i>, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
   65472   false.</p>
   65473 
   65474   <p>Otherwise, the element's <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute has the
   65475   state <i>auto</i>. If the element is an <code><a href=#the-img-element>img</a></code> element,
   65476   or, if the element is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute must return
   65477   true.</p>
   65478 
   65479   <p>Otherwise, the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> DOM
   65480   must return false.</p>
   65481 
   65482   <p>If the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute
   65483   is set to the value false, the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute must be
   65484   set to the literal value <code title="">false</code>. If the <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> IDL attribute is set to the
   65485   value true, the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
   65486   content attribute must be set to the literal value <code title="">true</code>.</p>
   65487 
   65488   </div>
   65489 
   65490 
   65491 <!--
   65492   <h4>Copy and paste</h4>
   65493 
   65494   <p>Copy-and-paste is a form of drag-and-drop: the "copy" part is
   65495   equivalent to dragging content to another application (the
   65496   "clipboard"), and the "paste" part is equivalent to dragging content
   65497   <em>from</em> another application.</p>
   65498 
   65499   <p>Select-and-paste (a model used by mouse operations in the X
   65500   Window System) is equivalent to a drag-and-drop operation where the
   65501   source is the selection.</p>
   65502 
   65503 
   65504   <div class="impl">
   65505 
   65506   <h5>Copy to clipboard</h5>
   65507 
   65508   <p>When the user invokes a copy operation, the user agent must act
   65509   as if the user had invoked a drag on the current selection. If the
   65510   drag-and-drop operation initiates, then the user agent must act as
   65511   if the user had indicated (as the <span>immediate user
   65512   selection</span>) a hypothetical application representing the
   65513   clipboard. Then, the user agent must act as if the user had ended
   65514   the drag-and-drop operation without canceling it. If the
   65515   drag-and-drop operation didn't get canceled, the user agent should
   65516   then follow the relevant platform-specific conventions for copy
   65517   operations (e.g. updating the clipboard).</p>
   65518 
   65519   <p>The events involved in this process are the <code
   65520   title="event-dragstart">dragstart</code>, <code
   65521   title="event-drag">drag</code>, and <code
   65522   title="event-dragend">dragend</code> events.</p>
   65523 
   65524 
   65525   <h5>Cut to clipboard</h5>
   65526 
   65527   <p>When the user invokes a cut operation, the user agent must act as
   65528   if the user had invoked a copy operation (see the previous section),
   65529   followed, if the copy was completed successfully, by <a
   65530   href="#contenteditable-delete">a selection delete operation</a>.</p>
   65531 
   65532   <p>The events involved in this process are the <code
   65533   title="event-dragstart">dragstart</code>, <code
   65534   title="event-drag">drag</code>, and <code
   65535   title="event-dragend">dragend</code> events.</p>
   65536 
   65537 
   65538   <h5>Paste from clipboard</h5>
   65539 
   65540   <p>When the user invokes a clipboard paste operation, the user agent
   65541   must act as if the user had invoked a drag on a hypothetical
   65542   application representing the clipboard, setting the data associated
   65543   with the drag as the content on the clipboard (in whatever formats
   65544   are available).</p>
   65545 
   65546   <p>Then, the user agent must act as if the user had indicated (as
   65547   the <span>immediate user selection</span>) the element with the
   65548   keyboard focus, and then ended the drag-and-drop operation without
   65549   canceling it.</p>
   65550 
   65551   <p>The events involved in this process are the <code
   65552   title="event-dragenter">dragenter</code>, <code
   65553   title="event-dragover">dragover</code>, <code
   65554   title="event-dragleave">dragleave</code>, and <code
   65555   title="event-drop">drop</code> events.</p>
   65556 
   65557 
   65558   <h5>Paste from selection</h5>
   65559 
   65560   <p>When the user invokes a selection paste operation, the user agent
   65561   must act as if the user had invoked a drag on the current selection,
   65562   then indicated (as the <span>immediate user selection</span>) the
   65563   element with the keyboard focus, and then ended the drag-and-drop
   65564   operation without canceling it.</p>
   65565 
   65566   <p>All the drag-and-drop events can be involved in this process.</p>
   65567 
   65568   </div>
   65569 -->
   65570 
   65571 
   65572   <div class=impl>
   65573 
   65574   <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.9.6 </span>Security risks in the drag-and-drop model</h4>
   65575 
   65576   <p>User agents must not make the data added to the
   65577   <code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
   65578   until the <code title=event-drop><a href=#event-drop>drop</a></code> event, because
   65579   otherwise, if a user were to drag sensitive information from one
   65580   document to a second document, crossing a hostile third document in
   65581   the process, the hostile document could intercept the data.</p>
   65582 
   65583   <p>For the same reason, user agents must consider a drop to be
   65584   successful only if the user specifically ended the drag operation
   65585   &mdash; if any scripts end the drag operation, it must be considered
   65586   unsuccessful (canceled) and the <code title=event-drop><a href=#event-drop>drop</a></code>
   65587   event must not be fired.</p>
   65588 
   65589   <p>User agents should take care to not start drag-and-drop
   65590   operations in response to script actions. For example, in a
   65591   mouse-and-window environment, if a script moves a window while the
   65592   user has his mouse button depressed, the UA would not consider that
   65593   to start a drag. This is important because otherwise UAs could cause
   65594   data to be dragged from sensitive sources and dropped into hostile
   65595   documents without the user's consent.</p>
   65596 
   65597   </div>
   65598 
   65599 
   65600   <h3 id=undo><span class=secno>8.10 </span><dfn>Undo history</dfn></h3>
   65601 
   65602   <div class=impl>
   65603 
   65604   <h4 id=definitions-2><span class=secno>8.10.1 </span>Definitions</h4>
   65605 
   65606   <p>The user agent must associate an <dfn id=undo-transaction-history>undo transaction
   65607   history</dfn> with each <code><a href=#htmldocument>HTMLDocument</a></code> object.</p>
   65608 
   65609   <p>The <a href=#undo-transaction-history>undo transaction history</a> is a list of
   65610   entries. The entries are of two types: <a href=#dom-changes>DOM changes</a> and
   65611   <a href=#undo-object title="undo object">undo objects</a>.</p>
   65612 
   65613   <p>Each <dfn id=dom-changes>DOM changes</dfn> entry in the <a href=#undo-transaction-history>undo transaction
   65614   history</a> consists of batches of one or more of the
   65615   following:</p>
   65616 
   65617   <ul><li>Changes to the content attributes of an <code><a href=#element>Element</a></code>
   65618    node.</li>
   65619 
   65620    <li>Changes to the DOM hierarchy of nodes that are descendants of
   65621    the <code><a href=#htmldocument>HTMLDocument</a></code> object (<code title=dom-Node-parentNode><a href=#dom-node-parentnode>parentNode</a></code>, <code title=dom-Node-childNodes><a href=#dom-node-childnodes>childNodes</a></code>).</li>
   65622 
   65623    <li>Changes to internal state, such as a form control's <a href=#concept-fe-value title=concept-fe-value>value</a> or <a href=#concept-input-checked-dirty-flag title=concept-input-checked-dirty-flag>dirty checkedness
   65624    flag</a>.</li>
   65625 
   65626   </ul><p><dfn id=undo-object>Undo object</dfn> entries consist of objects representing
   65627   state that scripts running in the document are managing. For
   65628   example, a Web mail application could use an <a href=#undo-object>undo
   65629   object</a> to keep track of the fact that a user has moved an
   65630   e-mail to a particular folder, so that the user can undo the
   65631   action and have the e-mail return to its former location.</p>
   65632 
   65633   <p>Broadly speaking, <a href=#dom-changes>DOM changes</a> entries are handled by
   65634   the UA in response to user edits of form controls and <a href=#editing-host title="editing host">editing hosts</a> on the page, and
   65635   <a href=#undo-object>undo object</a> entries are handled by script in response
   65636   to higher-level user actions (such as interactions with server-side
   65637   state, or in the implementation of a drawing tool).</p>
   65638 
   65639   </div>
   65640 
   65641 
   65642   <h4 id=the-undomanager-interface><span class=secno>8.10.2 </span>The <code><a href=#undomanager>UndoManager</a></code> interface</h4>
   65643 
   65644   <p>To manage <a href=#undo-object>undo object</a> entries in the <a href=#undo-transaction-history>undo
   65645   transaction history</a>, the <code><a href=#undomanager>UndoManager</a></code>
   65646   interface can be used:</p>
   65647 
   65648   <pre class=idl>interface <dfn id=undomanager>UndoManager</dfn> {
   65649   readonly attribute unsigned long <a href=#dom-undomanager-length title=dom-UndoManager-length>length</a>;
   65650   getter any <a href=#dom-undomanager-item title=dom-UndoManager-item>item</a>(in unsigned long index);
   65651   readonly attribute unsigned long <a href=#dom-undomanager-position title=dom-UndoManager-position>position</a>;
   65652   unsigned long <a href=#dom-undomanager-add title=dom-UndoManager-add>add</a>(in any data, in DOMString title);
   65653   void <a href=#dom-undomanager-remove title=dom-UndoManager-remove>remove</a>(in unsigned long index);
   65654   void <a href=#dom-undomanager-clearundo title=dom-UndoManager-clearUndo>clearUndo</a>();
   65655   void <a href=#dom-undomanager-clearredo title=dom-UndoManager-clearRedo>clearRedo</a>();
   65656 };</pre>
   65657 
   65658   <dl class=domintro><dt><var title="">window</var> . <code title=dom-undoManager><a href=#dom-undomanager>undoManager</a></code></dt>
   65659 
   65660    <dd>
   65661 
   65662     <p>Returns the <code><a href=#undomanager>UndoManager</a></code> object.</p>
   65663 
   65664    </dd>
   65665 
   65666    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code></dt>
   65667    <dd>
   65668 
   65669     <p>Returns the number of entries in the undo history.</p>
   65670 
   65671    </dd>
   65672 
   65673    <dt><var title="">data</var> = <var title="">undoManager</var> . <code title=dom-UndoManager-item><a href=#dom-undomanager-item>item</a></code>(<var title="">index</var>)</dt>
   65674    <dt><var title="">undoManager</var>[<var title="">index</var>]</dt>
   65675    <dd>
   65676 
   65677     <p>Returns the entry with index <var title="">index</var> in the undo history.</p>
   65678 
   65679     <p>Returns null if <var title="">index</var> is out of range.</p>
   65680 
   65681    </dd>
   65682 
   65683    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code></dt>
   65684    <dd>
   65685 
   65686     <p>Returns the number of the current entry in the undo history. (Entries at and past this point are <em>redo</em> entries.)</p>
   65687 
   65688    </dd>
   65689 
   65690    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-add><a href=#dom-undomanager-add>add</a></code>(<var title="">data</var>, <var title="">title</var>)</dt>
   65691    <dd>
   65692 
   65693     <p>Adds the specified entry to the undo history.</p>
   65694 
   65695    </dd>
   65696 
   65697    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-remove><a href=#dom-undomanager-remove>remove</a></code>(<var title="">index</var>)</dt>
   65698    <dd>
   65699 
   65700     <p>Removes the specified entry to the undo history.</p>
   65701 
   65702     <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if the given index is out of range.</p>
   65703 
   65704    </dd>
   65705 
   65706    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-clearUndo><a href=#dom-undomanager-clearundo>clearUndo</a></code>()</dt>
   65707    <dd>
   65708 
   65709     <p>Removes all entries before the current position in the undo history.</p>
   65710 
   65711    </dd>
   65712 
   65713    <dt><var title="">undoManager</var> . <code title=dom-UndoManager-clearRedo><a href=#dom-undomanager-clearredo>clearRedo</a></code>()</dt>
   65714    <dd>
   65715 
   65716     <p>Removes all entries at and after the current position in the undo history.</p>
   65717 
   65718    </dd>
   65719 
   65720   </dl><div class=impl>
   65721 
   65722   <p>The <dfn id=dom-undomanager title=dom-undoManager><code>undoManager</code></dfn>
   65723   attribute of the <code><a href=#window>Window</a></code> interface must return the
   65724   object implementing the <code><a href=#undomanager>UndoManager</a></code> interface for that
   65725   <code><a href=#window>Window</a></code> object's associated
   65726   <code><a href=#htmldocument>HTMLDocument</a></code> object.</p>
   65727 
   65728   <p><code><a href=#undomanager>UndoManager</a></code> objects represent their document's
   65729   <a href=#undo-transaction-history>undo transaction history</a>. Only <a href=#undo-object>undo object</a>
   65730   entries are visible with this API, but this does not mean that
   65731   <a href=#dom-changes>DOM changes</a> entries are absent from the <a href=#undo-transaction-history>undo
   65732   transaction history</a>.</p>
   65733 
   65734   <p>The <dfn id=dom-undomanager-length title=dom-UndoManager-length><code>length</code></dfn>
   65735   attribute must return the number of <a href=#undo-object>undo object</a> entries
   65736   in the <a href=#undo-transaction-history>undo transaction history</a>. This is the <var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var>.</p>
   65737 
   65738   <p>The object's <span>indices of the supported indexed
   65739   properties</span> are the numbers in the range zero to <span title=""><var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var>-1</span>, unless the
   65740   <var title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></var> is zero, in which
   65741   case there are no <span>supported indexed properties</span>.</p>
   65742 
   65743   <p>The <dfn id=dom-undomanager-item title=dom-UndoManager-item><code>item(<var title="">n</var>)</code></dfn> method must return the <var title="">n</var>th <a href=#undo-object>undo object</a> entry in the <a href=#undo-transaction-history>undo
   65744   transaction history</a>, if there is one, or null otherwise.</p>
   65745 
   65746   <p>The <a href=#undo-transaction-history>undo transaction history</a> has a <dfn id=undo-position title="undo
   65747   position">current position</dfn>. This is the position between two
   65748   entries in the <a href=#undo-transaction-history>undo transaction history</a>'s list where
   65749   the previous entry represents what needs to happen if the user
   65750   invokes the "undo" command (the "undo" side, lower numbers), and the
   65751   next entry represents what needs to happen if the user invokes the
   65752   "redo" command (the "redo" side, higher numbers).</p>
   65753 
   65754   <p>The <dfn id=dom-undomanager-position title=dom-UndoManager-position><code>position</code></dfn>
   65755   attribute must return the index of the <a href=#undo-object>undo object</a>
   65756   entry nearest to the <a href=#undo-position>undo position</a>, on the "redo"
   65757   side. If there are no <a href=#undo-object>undo object</a> entries on the "redo"
   65758   side, then the attribute must return the same as the <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code> attribute. If there are
   65759   no <a href=#undo-object>undo object</a> entries on the "undo" side of the
   65760   <a href=#undo-position>undo position</a>, the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute returns
   65761   zero.</p>
   65762 
   65763   <p class=note>Since the <a href=#undo-transaction-history>undo transaction history</a>
   65764   contains both <a href=#undo-object>undo object</a> entries and <a href=#dom-changes>DOM
   65765   changes</a> entries, but the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute only
   65766   returns indices relative to <a href=#undo-object>undo object</a> entries, it is
   65767   possible for several "undo" or "redo" actions to be performed
   65768   without the value of the <code title=dom-UndoManager-position><a href=#dom-undomanager-position>position</a></code> attribute
   65769   changing.</p>
   65770 
   65771   <p>The <dfn id=dom-undomanager-add title=dom-UndoManager-add><code>add(<var title="">data</var>,
   65772   <var title="">title</var>)</code></dfn> method's behavior depends on the
   65773   current state. Normally, it must insert the <var title="">data</var> object
   65774   passed as an argument into the <a href=#undo-transaction-history>undo transaction history</a>
   65775   immediately before the <a href=#undo-position>undo position</a>, optionally
   65776   remembering the given <var title="">title</var> to use in the UI. If the
   65777   method is called <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>during an undo
   65778   operation</a>, however, the object must instead be added
   65779   immediately <em>after</em> the <a href=#undo-position>undo position</a>.</p>
   65780 
   65781   <p>If the method is called and there is neither <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>an undo operation in progress</a> nor <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>a redo operation in progress</a> then any entries
   65782   in the <a href=#undo-transaction-history>undo transaction history</a> after the <a href=#undo-position>undo
   65783   position</a> must be removed (as if <code title=dom-UndoManager-clearRedo><a href=#dom-undomanager-clearredo>clearRedo()</a></code> had been
   65784   called).</p>
   65785 
   65786   <p>The <dfn id=dom-undomanager-remove title=dom-UndoManager-remove><code>remove(<var title="">index</var>)</code></dfn> method must remove the <a href=#undo-object>undo
   65787   object</a> entry with the specified <var title="">index</var>. If
   65788   the index is less than zero or greater than or equal to <code title=dom-UndoManager-length><a href=#dom-undomanager-length>length</a></code> then the method must
   65789   raise an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. <a href=#dom-changes>DOM
   65790   changes</a> entries are unaffected by this method.</p>
   65791 
   65792   <p>The <dfn id=dom-undomanager-clearundo title=dom-UndoManager-clearUndo><code>clearUndo()</code></dfn>
   65793   method must remove all entries in the <a href=#undo-transaction-history>undo transaction
   65794   history</a> before the <a href=#undo-position>undo position</a>, be they
   65795   <a href=#dom-changes>DOM changes</a> entries or <a href=#undo-object>undo object</a>
   65796   entries.</p>
   65797 
   65798   <p>The <dfn id=dom-undomanager-clearredo title=dom-UndoManager-clearRedo><code>clearRedo()</code></dfn>
   65799   method must remove all entries in the <a href=#undo-transaction-history>undo transaction
   65800   history</a> after the <a href=#undo-position>undo position</a>, be they
   65801   <a href=#dom-changes>DOM changes</a> entries or <a href=#undo-object>undo object</a>
   65802   entries.</p>
   65803 
   65804   </div>
   65805 
   65806 
   65807   <div class=impl>
   65808 
   65809   <h4 id=undo:-moving-back-in-the-undo-transaction-history><span class=secno>8.10.3 </span><dfn title=do-undo>Undo: moving back in the undo transaction history</dfn></h4>
   65810 
   65811   <p>When the user invokes an undo operation, or when the <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> method is
   65812   called with the <code title=command-undo><a href=#command-undo>undo</a></code> command, the
   65813   user agent must perform an undo operation.</p>
   65814 
   65815   <p>If the <a href=#undo-position>undo position</a> is at the start of the
   65816   <a href=#undo-transaction-history>undo transaction history</a>, then the user agent must do
   65817   nothing.</p>
   65818 
   65819   <p>If the entry immediately before the <a href=#undo-position>undo position</a> is
   65820   a <a href=#dom-changes>DOM changes</a> entry, then the user agent must remove
   65821   that <a href=#dom-changes>DOM changes</a> entry, reverse the DOM changes that
   65822   were listed in that entry, and, if the changes were reversed with no
   65823   problems, add a new <a href=#dom-changes>DOM changes</a> entry (consisting of
   65824   the opposite of those DOM changes) to the <a href=#undo-transaction-history>undo transaction
   65825   history</a> on the other side of the <a href=#undo-position>undo
   65826   position</a>.</p>
   65827 
   65828   <p>If the DOM changes cannot be undone (e.g. because the DOM state
   65829   is no longer consistent with the changes represented in the entry),
   65830   then the user agent must simply remove the <a href=#dom-changes>DOM changes</a>
   65831   entry, without doing anything else.</p>
   65832 
   65833   <p>If the entry immediately before the <a href=#undo-position>undo position</a> is
   65834   an <a href=#undo-object>undo object</a> entry, then the user agent must first
   65835   remove that <a href=#undo-object>undo object</a> entry from the <a href=#undo-transaction-history>undo
   65836   transaction history</a>, and then must fire an <code title=event-undo><a href=#event-undo>undo</a></code> event at the <code><a href=#window>Window</a></code>
   65837   object, using the <a href=#undo-object>undo object</a> entry's associated undo
   65838   object as the event's data.</p>
   65839 
   65840   <p>Any calls to <code title=dom-undoManager-add><a href=#dom-undomanager-add>add()</a></code> while
   65841   the event is being handled will be used to populate the redo
   65842   history, and will then be used if the user invokes the "redo"
   65843   command to undo his undo.</p>
   65844 
   65845 
   65846   <h4 id=redo:-moving-forward-in-the-undo-transaction-history><span class=secno>8.10.4 </span><dfn title=do-redo>Redo: moving forward in the undo transaction history</dfn></h4>
   65847 
   65848   <p>When the user invokes a redo operation, or when the <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code> method is
   65849   called with the <code title=command-redo><a href=#command-redo>redo</a></code> command, the
   65850   user agent must perform a redo operation.</p>
   65851 
   65852   <p>This is mostly the opposite of an <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>undo
   65853   operation</a>, but the full definition is included here for
   65854   completeness.</p>
   65855 
   65856   <p>If the <a href=#undo-position>undo position</a> is at the end of the <a href=#undo-transaction-history>undo
   65857   transaction history</a>, then the user agent must do nothing.</p>
   65858 
   65859   <p>If the entry immediately after the <a href=#undo-position>undo position</a> is
   65860   a <a href=#dom-changes>DOM changes</a> entry, then the user agent must remove
   65861   that <a href=#dom-changes>DOM changes</a> entry, reverse the DOM changes that
   65862   were listed in that entry, and, if the changes were reversed with no
   65863   problems, add a new <a href=#dom-changes>DOM changes</a> entry (consisting of
   65864   the opposite of those DOM changes) to the <a href=#undo-transaction-history>undo transaction
   65865   history</a> on the other side of the <a href=#undo-position>undo
   65866   position</a>.</p>
   65867 
   65868   <p>If the DOM changes cannot be redone (e.g. because the DOM state
   65869   is no longer consistent with the changes represented in the entry),
   65870   then the user agent must simply remove the <a href=#dom-changes>DOM changes</a>
   65871   entry, without doing anything else.</p>
   65872 
   65873   <p>If the entry immediately after the <a href=#undo-position>undo position</a> is
   65874   an <a href=#undo-object>undo object</a> entry, then the user agent must first
   65875   remove that <a href=#undo-object>undo object</a> entry from the <a href=#undo-transaction-history>undo
   65876   transaction history</a>, and then must fire a <code title=event-redo><a href=#event-redo>redo</a></code> event at the <code><a href=#window>Window</a></code>
   65877   object, using the <a href=#undo-object>undo object</a> entry's associated undo
   65878   object as the event's data.</p>
   65879 
   65880   </div>
   65881 
   65882 
   65883   <h4 id=the-undomanagerevent-interface-and-the-undo-and-redo-events><span class=secno>8.10.5 </span>The <code><a href=#undomanagerevent>UndoManagerEvent</a></code> interface and the <code title=event-undo><a href=#event-undo>undo</a></code> and <code title=event-redo><a href=#event-redo>redo</a></code> events</h4>
   65884 
   65885   <pre class=idl>interface <dfn id=undomanagerevent>UndoManagerEvent</dfn> : <a href=#event>Event</a> {
   65886   readonly attribute any <a href=#dom-undomanagerevent-data title=dom-UndoManagerEvent-data>data</a>;
   65887   void <a href=#dom-undomanagerevent-initundomanagerevent title=dom-UndoManagerEvent-initUndoManagerEvent>initUndoManagerEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg);
   65888 };</pre>
   65889 
   65890   <dl class=domintro><dt><var title="">event</var>  . <code title=dom-UndoManagerEvent-data><a href=#dom-undomanagerevent-data>data</a></code></dt>
   65891 
   65892    <dd>
   65893 
   65894     <p>Returns the data that was passed to the <code title=dom-undomanager-add><a href=#dom-undomanager-add>add()</a></code> method.</p>
   65895 
   65896    </dd>
   65897 
   65898   </dl><div class=impl>
   65899 
   65900   <p>The <dfn id=dom-undomanagerevent-initundomanagerevent title=dom-UndoManagerEvent-initUndoManagerEvent><code>initUndoManagerEvent()</code></dfn>
   65901   method must initialize the event in a manner analogous to the
   65902   similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   65903 
   65904   <p>The <dfn id=dom-undomanagerevent-data title=dom-UndoManagerEvent-data><code>data</code></dfn>
   65905   attribute represents the <a href=#undo-object>undo object</a> for the event.</p>
   65906 
   65907   <p>The <dfn id=event-undo title=event-undo><code>undo</code></dfn> and <dfn id=event-redo title=event-redo><code>redo</code></dfn> events do not bubble,
   65908   cannot be canceled, and have no default action. When the user agent
   65909   fires one of these events it must use the
   65910   <code><a href=#undomanagerevent>UndoManagerEvent</a></code> interface, with the <code title=dom-UndoManagerEvent-data><a href=#dom-undomanagerevent-data>data</a></code> field containing the
   65911   relevant <a href=#undo-object>undo object</a>.</p>
   65912 
   65913   </div>
   65914 
   65915 
   65916   <div class=impl>
   65917 
   65918   <h4 id=implementation-notes><span class=secno>8.10.6 </span>Implementation notes</h4>
   65919 
   65920   <p>How user agents present the above conceptual model to the user is
   65921   not defined. The undo interface could be a filtered view of the
   65922   <a href=#undo-transaction-history>undo transaction history</a>, it could manipulate the
   65923   <a href=#undo-transaction-history>undo transaction history</a> in ways not described above,
   65924   and so forth. For example, it is possible to design a UA that
   65925   appears to have separate <a href=#undo-transaction-history title="undo transaction history">undo
   65926   transaction histories</a> for each form control; similarly, it is
   65927   possible to design systems where the user has access to more undo
   65928   information than is present in the official (as described above)
   65929   <a href=#undo-transaction-history>undo transaction history</a> (such as providing a
   65930   tree-based approach to document state). Such UI models should be
   65931   based upon the single <a href=#undo-transaction-history>undo transaction history</a>
   65932   described in this section, however, such that to a script there is
   65933   no detectable difference.</p>
   65934 
   65935   </div>
   65936 
   65937 
   65938 
   65939 
   65940 
   65941   <h3 id=editing-apis><span class=secno>8.11 </span>Editing APIs</h3>
   65942 
   65943   <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-execCommand><a href=#execCommand>execCommand</a></code>(<var title="">commandId</var> [, <var title="">showUI</var> [, <var title="">value</var> ] ] )</dt>
   65944 
   65945    <dd>
   65946 
   65947     <p>Runs the action specified by the first argument, as described
   65948     in the list below. The second and third arguments sometimes affect
   65949     the action. (If they don't they are ignored.)</p>
   65950 
   65951    </dd>
   65952 
   65953    <dt><var title="">document</var> . <code title=dom-document-queryCommandEnabled><a href=#dom-document-querycommandenabled>queryCommandEnabled</a></code>(<var title="">commandId</var>)</dt>
   65954 
   65955    <dd>
   65956 
   65957     <p>Returns whether the given command is enabled, as described in the list below.</p>
   65958 
   65959    </dd>
   65960 
   65961    <dt><var title="">document</var> . <code title=dom-document-queryCommandIndeterm><a href=#dom-document-querycommandindeterm>queryCommandIndeterm</a></code>(<var title="">commandId</var>)</dt>
   65962 
   65963    <dd>
   65964 
   65965     <p>Returns whether the given command is indeterminate, as described in the list below.</p>
   65966 
   65967    </dd>
   65968 
   65969    <dt><var title="">document</var> . <code title=dom-document-queryCommandState><a href=#dom-document-querycommandstate>queryCommandState</a></code>(<var title="">commandId</var>)</dt>
   65970 
   65971    <dd>
   65972 
   65973     <p>Returns the state of the command, as described in the list below.</p>
   65974 
   65975    </dd>
   65976 
   65977    <dt><var title="">document</var> . <code title=dom-document-queryCommandSupported><a href=#dom-document-querycommandsupported>queryCommandSupported</a></code>(<var title="">commandId</var>)</dt>
   65978 
   65979    <dd>
   65980 
   65981     <p>Returns true if the command is supported; otherwise, returns false.</p>
   65982 
   65983    </dd>
   65984 
   65985    <dt><var title="">document</var> . <code title=dom-document-queryCommandValue><a href=#dom-document-querycommandvalue>queryCommandValue</a></code>(<var title="">commandId</var>)</dt>
   65986 
   65987    <dd>
   65988 
   65989     <p>Returns the value of the command, as described in the list below.</p>
   65990 
   65991    </dd>
   65992 
   65993   </dl><div class=impl>
   65994 
   65995   <p>The <dfn id=execCommand title=dom-document-execCommand><code>execCommand(<var title="">commandId</var>, <var title="">showUI</var>, <var title="">value</var>)</code></dfn> method on the
   65996   <code><a href=#htmldocument>HTMLDocument</a></code> interface allows scripts to perform
   65997   actions on the <a href=#the-selection title="the selection">current selection</a>
   65998   or at the current caret position. Generally, these commands would be
   65999   used to implement editor UI, for example having a "delete" button on
   66000   a toolbar.</p>
   66001 
   66002   <p>There are three variants to this method, with one, two, and three
   66003   arguments respectively. The <var title="">showUI</var> and <var title="">value</var> parameters, even if specified, are ignored
   66004   except where otherwise stated.</p>
   66005 
   66006   <p>When <code title=dom-document-execCommand><a href=#execCommand>execCommand()</a></code>
   66007   is invoked, the user agent must follow the following steps:</p>
   66008 
   66009   <ol><li>If the given <var title="">commandId</var> maps to an entry in
   66010    the list below whose "Enabled When" entry has a condition that is
   66011    currently false, do nothing; abort these steps.</li>
   66012 
   66013    <li>Otherwise, execute the "Action" listed below for the given <var title="">commandId</var>.</li>
   66014 
   66015   </ol></div>
   66016 
   66017   <p>A document is <dfn id=ready-for-editing-host-commands>ready for editing host commands</dfn> if it
   66018   has a selection that is entirely within an <a href=#editing-host>editing
   66019   host</a>, or if it has no selection but its caret is inside an
   66020   <a href=#editing-host>editing host</a>.</p>
   66021 
   66022   <div class=impl>
   66023 
   66024   <p>The <dfn id=dom-document-querycommandenabled title=dom-document-queryCommandEnabled><code>queryCommandEnabled(<var title="">commandId</var>)</code></dfn> method, when invoked, must
   66025   return true if the condition listed below under "Enabled When" for
   66026   the given <var title="">commandId</var> is true, and false
   66027   otherwise.</p>
   66028 
   66029   <p>The <dfn id=dom-document-querycommandindeterm title=dom-document-queryCommandIndeterm><code>queryCommandIndeterm(<var title="">commandId</var>)</code></dfn> method, when invoked, must
   66030   return true if the condition listed below under "Indeterminate When"
   66031   for the given <var title="">commandId</var> is true, and false
   66032   otherwise.</p>
   66033 
   66034   <p>The <dfn id=dom-document-querycommandstate title=dom-document-queryCommandState><code>queryCommandState(<var title="">commandId</var>)</code></dfn> method, when invoked, must
   66035   return the value expressed below under "State" for the given <var title="">commandId</var>.</p>
   66036 
   66037   <p>The <dfn id=dom-document-querycommandsupported title=dom-document-queryCommandSupported><code>queryCommandSupported(<var title="">commandId</var>)</code></dfn> method, when invoked, must
   66038   return true if the given <var title="">commandId</var> is in the
   66039   list below, and false otherwise.</p>
   66040 
   66041   <p>The <dfn id=dom-document-querycommandvalue title=dom-document-queryCommandValue><code>queryCommandValue(<var title="">commandId</var>)</code></dfn> method, when invoked, must
   66042   return the value expressed below under "Value" for the given <var title="">commandId</var>.</p>
   66043 
   66044   </div>
   66045 
   66046   <p>The possible values for <var title="">commandId</var>, and their
   66047   corresponding meanings, are as follows. <span class=impl>These
   66048   values must be compared to the argument in an <a href=#ascii-case-insensitive>ASCII
   66049   case-insensitive</a> manner.</span></p>
   66050 
   66051   <dl><dt><dfn id=command-bold title=command-bold><code>bold</code></dfn></dt>
   66052    <dd><strong>Summary</strong>: Toggles whether the selection is bold.</dd>
   66053    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66054    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66055    semantics</a> of the <em><code><a href=#the-b-element>b</a></code></em> element (or, again,
   66056    unwrapped, or have that semantic inserted or removed, as defined by
   66057    the UA).</dd>
   66058    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66059    editing host commands</a>.</dd>
   66060    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66061    <dd><strong>State</strong>: True if the selection, or the caret, if
   66062    there is no selection, is, or is contained within, a
   66063    <code><a href=#the-b-element>b</a></code> element. False otherwise.</dd>
   66064    <dd><strong>Value</strong>: The string "<code title="">true</code>"
   66065    if the expression given for the "State" above is true, the string
   66066    "<code title="">false</code>" otherwise.</dd>
   66067 
   66068    <dt><dfn id=command-createlink title=command-createLink><code>createLink</code></dfn></dt>
   66069    <dd><strong>Summary</strong>: Toggles whether the selection is a
   66070    link or not. If the second argument is true, and a link is to be
   66071    added, the user agent will ask the user for the address. Otherwise,
   66072    the third argument will be used as the address.</dd>
   66073    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66074    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66075    semantics</a> of the <em><code><a href=#the-a-element>a</a></code></em> element (or, again,
   66076    unwrapped, or have that semantic inserted or removed, as defined by
   66077    the UA). If the user agent creates an <code><a href=#the-a-element>a</a></code> element or
   66078    modifies an existing <code><a href=#the-a-element>a</a></code> element, then if the <var title="">showUI</var> argument is present and has the value false,
   66079    then the value of the <var title="">value</var> argument must be
   66080    used as the <a href=#url>URL</a> of the link. Otherwise, the user agent
   66081    should prompt the user for the URL of the link.</dd>
   66082    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66083    editing host commands</a>.</dd>
   66084    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66085    <dd><strong>State</strong>: Always false.</dd>
   66086    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66087 
   66088    <dt><dfn id=command-delete title=command-delete><code>delete</code></dfn></dt>
   66089    <dd><strong>Summary</strong>: Deletes the selection or the
   66090    character before the cursor.</dd>
   66091    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66092    had performed <a href=#contenteditable-delete>a backspace
   66093    operation</a>.</dd>
   66094    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66095    editing host commands</a>.</dd>
   66096    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66097    <dd><strong>State</strong>: Always false.</dd>
   66098    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66099 
   66100    <dt><dfn id=command-formatblock title=command-formatBlock><code>formatBlock</code></dfn></dt>
   66101    <dd><strong>Summary</strong>: Wraps the selection in the element
   66102    given by the second argument. If the second argument doesn't
   66103    specify an element that is a <dfn id=formatblock-candidate><code title="">formatBlock</code>
   66104    candidate</dfn>, does nothing.</dd>
   66105    <dd class=impl>
   66106     <p><strong>Action</strong>: The user agent must run the following
   66107     steps:</p>
   66108     <ol><li><p>If the <var title="">value</var> argument wasn't
   66109      specified, abort these steps without doing anything.</li>
   66110      <li><p>If the <var title="">value</var> argument has a leading
   66111      U+003C LESS-THAN SIGN character (&lt;) and a trailing U+003E
   66112      GREATER-THAN SIGN character (&gt;), then remove the first and last
   66113      characters from <var title="">value</var>.</li>
   66114      <li>
   66115       <p>If <var title="">value</var> is (now) an <a href=#ascii-case-insensitive>ASCII
   66116       case-insensitive</a> match for the tag name of an element
   66117       defined by this specification that is defined to be a
   66118       <a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>, then,
   66119       for every position in the selection, take the nearest
   66120       <a href=#formatblock-candidate><code title="">formatBlock</code> candidate</a>
   66121       ancestor element of that position that contains only
   66122       <a href=#phrasing-content>phrasing content</a>, and, if that element is
   66123       <a href=#editable>editable</a>, is not an <a href=#editing-host>editing host</a>, and
   66124       has a parent element whose content model allows that parent to
   66125       contain any <a href=#flow-content>flow content</a>, replace it with an
   66126       element in the HTML namespace whose name is <var title="">value</var>, and move all the children that were in it
   66127       to the new element, and copy all the attributes that were on it
   66128       to the new element.</p>
   66129       <p>If there is no selection, then, where in the description
   66130       above refers to the selection, the user agent must act as if the
   66131       selection was an empty range (with just one position) at the
   66132       caret position.</p>
   66133      </li>
   66134     </ol></dd>
   66135    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66136    editing host commands</a>.</dd>
   66137    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66138    <dd><strong>State</strong>: Always false.</dd>
   66139    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66140 
   66141    <dt><dfn id=command-forwarddelete title=command-forwardDelete><code>forwardDelete</code></dfn></dt>
   66142    <dd><strong>Summary</strong>: Deletes the selection or the
   66143    character after the cursor.</dd>
   66144    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66145    had performed <a href=#contenteditable-delete>a forward delete
   66146    operation</a>.</dd>
   66147    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66148    editing host commands</a>.</dd>
   66149    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66150    <dd><strong>State</strong>: Always false.</dd>
   66151    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66152 
   66153    <dt><dfn id=command-insertimage title=command-insertImage><code>insertImage</code></dfn></dt>
   66154    <dd><strong>Summary</strong>: Toggles whether the selection is an
   66155    image or not. If the second argument is true, and an image is to be
   66156    added, the user agent will ask the user for the address. Otherwise,
   66157    the third argument will be used as the address.</dd>
   66158    <dd class=impl><strong>Action</strong>: The user agent must act
   66159    as if the user had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66160    semantics</a> of the <em><code><a href=#the-img-element>img</a></code></em> element (or, again,
   66161    unwrapped, or have that semantic inserted or removed, as defined by
   66162    the UA). If the user agent creates an <code><a href=#the-img-element>img</a></code> element or
   66163    modifies an existing <code><a href=#the-img-element>img</a></code> element, then if the <var title="">showUI</var> argument is present and has the value false,
   66164    then the value of the <var title="">value</var> argument must be
   66165    used as the <a href=#url>URL</a> of the image. Otherwise, the user
   66166    agent should prompt the user for the URL of the image.</dd>
   66167    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66168    editing host commands</a>.</dd>
   66169    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66170    <dd><strong>State</strong>: Always false.</dd>
   66171    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66172 
   66173    <dt><dfn id=command-inserthtml title=command-insertHTML><code>insertHTML</code></dfn></dt>
   66174    <dd><strong>Summary</strong>: Replaces the selection with the value
   66175    of the third argument parsed as HTML.</dd>
   66176    <dd class=impl>
   66177     <p><strong>Action</strong>: The user agent must run the following
   66178     steps:</p>
   66179     <ol><li><p>If the document is an <a href=#xml-documents title="XML documents">XML
   66180      document</a>, then throw an <code><a href=#invalid_access_err>INVALID_ACCESS_ERR</a></code>
   66181      exception and abort these steps.</li><!-- v2 support XML? -->
   66182      <li><p>If the <var title="">value</var> argument wasn't
   66183      specified, abort these steps without doing anything.</li>
   66184      <li><p>If there is a selection, act as if the user had requested
   66185      that <a href=#contenteditable-delete>the selection be
   66186      deleted</a>.</li>
   66187      <li><p>Invoke the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>
   66188      with an arbitrary orphan <code><a href=#the-body-element-0>body</a></code> element owned by the
   66189      same <code><a href=#document>Document</a></code> as the <i><a href=#context>context</a></i> element and with
   66190      the <var title="">value</var> argument as <i><a href=#the-input-element>input</a></i>.</li>
   66191      <li><p>Insert the nodes returned by the previous step into the
   66192      document at the location of the caret, firing any mutation events
   66193      as appropriate.</li>
   66194     </ol></dd>
   66195    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66196    editing host commands</a>.</dd>
   66197    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66198    <dd><strong>State</strong>: Always false.</dd>
   66199    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66200 
   66201    <dt><dfn id=command-insertlinebreak title=command-insertLineBreak><code>insertLineBreak</code></dfn></dt>
   66202    <dd><strong>Summary</strong>: Inserts a line break.</dd>
   66203    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66204    had <a href=#contenteditable-br>requested a line
   66205    separator</a>.</dd>
   66206    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66207    editing host commands</a>.</dd>
   66208    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66209    <dd><strong>State</strong>: Always false.</dd>
   66210    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66211 
   66212    <dt><dfn id=command-insertorderedlist title=command-insertOrderedList><code>insertOrderedList</code></dfn></dt>
   66213    <dd><strong>Summary</strong>: Toggles whether the selection is an ordered list.</dd>
   66214    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66215    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66216    semantics</a> of the <code><a href=#the-ol-element>ol</a></code> element (or unwrapped, or, if
   66217    there is no selection, have that semantic inserted or removed
   66218    &mdash; the exact behavior is UA-defined).</dd>
   66219    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66220    editing host commands</a>.</dd>
   66221    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66222    <dd><strong>State</strong>: Always false.</dd>
   66223    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66224 
   66225    <dt><dfn id=command-insertunorderedlist title=command-insertUnorderedList><code>insertUnorderedList</code></dfn></dt>
   66226    <dd><strong>Summary</strong>: Toggles whether the selection is an unordered list.</dd>
   66227    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66228    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66229    semantics</a> of the <code><a href=#the-ul-element>ul</a></code> element (or unwrapped, or, if
   66230    there is no selection, have that semantic inserted or removed
   66231    &mdash; the exact behavior is UA-defined).</dd>
   66232    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66233    editing host commands</a>.</dd>
   66234    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66235    <dd><strong>State</strong>: Always false.</dd>
   66236    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66237 
   66238    <dt><dfn id=command-insertparagraph title=command-insertParagraph><code>insertParagraph</code></dfn></dt>
   66239    <dd><strong>Summary</strong>: Inserts a paragraph break.</dd>
   66240    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66241    had performed a <a href=#contenteditable-breakBlock>break
   66242    block</a> editing action.</dd>
   66243    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66244    editing host commands</a>.</dd>
   66245    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66246    <dd><strong>State</strong>: Always false.</dd>
   66247    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66248 
   66249    <dt><dfn id=command-inserttext title=command-insertText><code>insertText</code></dfn></dt>
   66250    <dd><strong>Summary</strong>: Inserts the text given in the third parameter.</dd>
   66251    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66252    had <a href=#contenteditable-insertText>inserted text</a>
   66253    corresponding to the <var title="">value</var> parameter.</dd>
   66254    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66255    editing host commands</a>.</dd>
   66256    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66257    <dd><strong>State</strong>: Always false.</dd>
   66258    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66259 
   66260    <dt><dfn id=command-italic title=command-italic><code>italic</code></dfn></dt>
   66261    <dd><strong>Summary</strong>: Toggles whether the selection is italic.</dd>
   66262    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66263    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66264    semantics</a> of the <em><code><a href=#the-i-element>i</a></code></em> element (or, again,
   66265    unwrapped, or have that semantic inserted or removed, as defined by
   66266    the UA).</dd>
   66267    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66268    editing host commands</a>.</dd>
   66269    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66270    <dd><strong>State</strong>: True if the selection, or the caret, if
   66271    there is no selection, is, or is contained within, a
   66272    <code><a href=#the-i-element>i</a></code> element. False otherwise.</dd>
   66273    <dd><strong>Value</strong>: The string "<code title="">true</code>"
   66274    if the expression given for the "State" above is true, the string
   66275    "<code title="">false</code>" otherwise.</dd>
   66276 
   66277    <dt><dfn id=command-redo title=command-redo><code>redo</code></dfn></dt>
   66278    <dd><strong>Summary</strong>: Acts as if the user had requested a redo.</dd>
   66279    <dd class=impl><strong>Action</strong>: The user agent must <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>move forward one step</a> in its <a href=#undo-transaction-history>undo
   66280    transaction history</a>, restoring the associated state. If the
   66281    <a href=#undo-position>undo position</a> is at the end of the <a href=#undo-transaction-history>undo
   66282    transaction history</a>, the user agent must do nothing. See the
   66283    <a href=#undo>undo history</a>.</dd>
   66284    <dd><strong>Enabled When</strong>: The <a href=#undo-position>undo position</a>
   66285    is not at the end of the <a href=#undo-transaction-history>undo transaction
   66286    history</a>.</dd>
   66287    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66288    <dd><strong>State</strong>: Always false.</dd>
   66289    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66290 
   66291    <dt><dfn id=command-selectall title=command-selectAll><code>selectAll</code></dfn></dt>
   66292    <dd><strong>Summary</strong>: Selects all the editable content.</dd>
   66293    <dd class=impl><strong>Action</strong>: The user agent must change the
   66294    selection so that all the content in the currently focused
   66295    <a href=#editing-host>editing host</a> is selected. If no <a href=#editing-host>editing
   66296    host</a> is focused, then the content of the entire document
   66297    must be selected.</dd>
   66298    <dd><strong>Enabled When</strong>: Always.</dd>
   66299    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66300    <dd><strong>State</strong>: Always false.</dd>
   66301    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66302 
   66303    <dt><dfn id=command-subscript title=command-subscript><code>subscript</code></dfn></dt>
   66304    <dd><strong>Summary</strong>: Toggles whether the selection is subscripted.</dd>
   66305    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66306    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66307    semantics</a> of the <em><code><a href=#the-sub-and-sup-elements>sub</a></code></em> element (or, again,
   66308    unwrapped, or have that semantic inserted or removed, as defined by
   66309    the UA).</dd>
   66310    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66311    editing host commands</a>.</dd>
   66312    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66313    <dd><strong>State</strong>: True if the selection, or the caret, if
   66314    there is no selection, is, or is contained within, a
   66315    <code><a href=#the-sub-and-sup-elements>sub</a></code> element. False otherwise.</dd>
   66316    <dd><strong>Value</strong>: The string "<code title="">true</code>"
   66317    if the expression given for the "State" above is true, the string
   66318    "<code title="">false</code>" otherwise.</dd>
   66319 
   66320    <dt><dfn id=command-superscript title=command-superscript><code>superscript</code></dfn></dt>
   66321    <dd><strong>Summary</strong>: Toggles whether the selection is superscripted.</dd>
   66322    <dd class=impl><strong>Action</strong>: The user agent must act as if the user
   66323    had requested that the selection <a href=#contenteditable-wrapSemantic>be wrapped in the
   66324    semantics</a> of the <code><a href=#the-sub-and-sup-elements>sup</a></code> element (or unwrapped, or, if
   66325    there is no selection, have that semantic inserted or removed
   66326    &mdash; the exact behavior is UA-defined).</dd>
   66327    <dd><strong>Enabled When</strong>: The document is <a href=#ready-for-editing-host-commands>ready for
   66328    editing host commands</a>.</dd>
   66329    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66330    <dd><strong>State</strong>: True if the selection, or the caret, if
   66331    there is no selection, is, or is contained within, a
   66332    <code><a href=#the-sub-and-sup-elements>sup</a></code> element. False otherwise.</dd>
   66333    <dd><strong>Value</strong>: The string "<code title="">true</code>"
   66334    if the expression given for the "State" above is true, the string
   66335    "<code title="">false</code>" otherwise.</dd>
   66336 
   66337    <dt><dfn id=command-undo title=command-undo><code>undo</code></dfn></dt>
   66338    <dd><strong>Summary</strong>: Acts as if the user had requested an undo.</dd>
   66339    <dd class=impl><strong>Action</strong>: The user agent must <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>move back one step</a> in its <a href=#undo-transaction-history>undo
   66340    transaction history</a>, restoring the associated state. If the
   66341    <a href=#undo-position>undo position</a> is at the start of the <a href=#undo-transaction-history>undo
   66342    transaction history</a>, the user agent must do nothing. See the
   66343    <a href=#undo>undo history</a>.</dd>
   66344    <dd><strong>Enabled When</strong>: The <a href=#undo-position>undo position</a>
   66345    is not at the start of the <a href=#undo-transaction-history>undo transaction
   66346    history</a>.</dd>
   66347    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66348    <dd><strong>State</strong>: Always false.</dd>
   66349    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66350 
   66351    <dt><dfn id=command-unlink title=command-unlink><code>unlink</code></dfn></dt>
   66352    <dd><strong>Summary</strong>: Removes all links from the selection.</dd>
   66353    <dd class=impl><strong>Action</strong>: The user agent must remove all
   66354    <code><a href=#the-a-element>a</a></code> elements that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes and that are partially
   66355    or completely included in the current selection.</dd>
   66356    <dd><strong>Enabled When</strong>: The document has a selection
   66357    that is entirely within an <a href=#editing-host>editing host</a> and that
   66358    contains (either partially or completely) at least one
   66359    <code><a href=#the-a-element>a</a></code> element that has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</dd>
   66360    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66361    <dd><strong>State</strong>: Always false.</dd>
   66362    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66363 
   66364    <dt><dfn id=command-unselect title=command-unselect><code>unselect</code></dfn></dt>
   66365    <dd><strong>Summary</strong>: Unselects everything.</dd>
   66366    <dd class=impl><strong>Action</strong>: The user agent must change the
   66367    selection so that nothing is selected.</dd>
   66368    <dd><strong>Enabled When</strong>: Always.</dd>
   66369    <dd><strong>Indeterminate When</strong>: Never.</dd>
   66370    <dd><strong>State</strong>: Always false.</dd>
   66371    <dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66372 
   66373    <dt class=impl><code><var title="">vendorID</var>-<var title="">customCommandID</var></code></dt>
   66374    <dd class=impl><strong>Action</strong>: User agents may implement
   66375    vendor-specific extensions to this API. Vendor-specific extensions
   66376    to the list of commands should use the syntax <code><var title="">vendorID</var>-<var title="">customCommandID</var></code>
   66377    so as to prevent clashes between extensions from different vendors
   66378    and future additions to this specification.</dd>
   66379    <dd class=impl><strong>Enabled When</strong>: UA-defined.</dd>
   66380    <dd class=impl><strong>Indeterminate When</strong>: UA-defined.</dd>
   66381    <dd class=impl><strong>State</strong>: UA-defined.</dd>
   66382    <dd class=impl><strong>Value</strong>: UA-defined.</dd>
   66383 
   66384    <dt class=impl>Anything else</dt>
   66385    <dd class=impl><strong>Action</strong>: User agents must do nothing.</dd>
   66386    <dd class=impl><strong>Enabled When</strong>: Never.</dd>
   66387    <dd class=impl><strong>Indeterminate When</strong>: Never.</dd>
   66388    <dd class=impl><strong>State</strong>: Always false.</dd>
   66389    <dd class=impl><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
   66390 
   66391   </dl><!--
   66392 v2 (well, really v0):
   66393  "forecolor", "hilitecolor", "fontname", "fontsize", "justifyleft",
   66394  "justifycenter", "justifyright", "justifyfull", "indent", "outdent"
   66395 --><h2 id=comms><span class=secno>9 </span>Communication</h2>
   66396 
   66397   <div data-component="Web Messaging (editor: Ian Hickson)">
   66398 
   66399 
   66400 
   66401   <h3 id=event-definitions-0><span class=secno>9.1 </span>Event definitions</h3>
   66402 
   66403   <p>Messages in <span>server-sent events</span>, <span>Web
   66404   sockets</span>, <a href=#web-messaging>cross-document messaging</a>, and
   66405   <a href=#channel-messaging>channel messaging</a> use the <dfn id=event-message title=event-message><code>message</code></dfn> event.
   66406   
   66407   <a href=#refsEVENTSOURCE>[EVENTSOURCE]</a>
   66408   <a href=#refsWEBSOCKET>[WEBSOCKET]</a>
   66409   
   66410   </p>
   66411 
   66412   <p>The following interface is defined for this event:</p>
   66413 
   66414   <pre class=idl>interface <dfn id=messageevent>MessageEvent</dfn> : <a href=#event>Event</a> {
   66415   readonly attribute any <a href=#dom-messageevent-data title=dom-MessageEvent-data>data</a>;
   66416   readonly attribute DOMString <a href=#dom-messageevent-origin title=dom-MessageEvent-origin>origin</a>;
   66417   readonly attribute DOMString <a href=#dom-messageevent-lasteventid title=dom-MessageEvent-lastEventId>lastEventId</a>;
   66418   readonly attribute <a href=#windowproxy>WindowProxy</a> <a href=#dom-messageevent-source title=dom-MessageEvent-source>source</a>;
   66419   readonly attribute <a href=#messageportarray>MessagePortArray</a> <a href=#dom-messageevent-ports title=dom-MessageEvent-ports>ports</a>;
   66420   void <a href=#dom-messageevent-initmessageevent title=dom-MessageEvent-initMessageEvent>initMessageEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg, in DOMString originArg, in DOMString lastEventIdArg, in <a href=#windowproxy>WindowProxy</a> sourceArg, in <a href=#messageportarray>MessagePortArray</a> portsArg);
   66421 };</pre>
   66422 
   66423   <dl class=domintro><dt><var title="">event</var> . <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code></dt>
   66424 
   66425    <dd>
   66426 
   66427     <p>Returns the data of the message.</p>
   66428 
   66429    </dd>
   66430 
   66431    <dt><var title="">event</var> . <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code></dt>
   66432 
   66433    <dd>
   66434 
   66435     <p>Returns the origin of the message, for <span>server-sent
   66436     events</span> and <a href=#web-messaging>cross-document messaging</a>.</p>
   66437 
   66438    </dd>
   66439 
   66440    <dt><var title="">event</var> . <code title=dom-MessageEvent-lastEventId><a href=#dom-messageevent-lasteventid>lastEventId</a></code></dt>
   66441 
   66442    <dd>
   66443 
   66444     <p>Returns the last event ID, for <span>server-sent
   66445     events</span>.</p>
   66446 
   66447    </dd>
   66448 
   66449    <dt><var title="">event</var> . <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code></dt>
   66450 
   66451    <dd>
   66452 
   66453     <p>Returns the <code><a href=#windowproxy>WindowProxy</a></code> of the source window, for
   66454     <a href=#web-messaging>cross-document messaging</a>.</p>
   66455 
   66456    </dd>
   66457 
   66458    <dt><var title="">event</var> . <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code></dt>
   66459 
   66460    <dd>
   66461 
   66462     <p>Returns the <code><a href=#messageportarray>MessagePortArray</a></code> sent with the
   66463     message, for <a href=#web-messaging>cross-document messaging</a> and
   66464     <a href=#channel-messaging>channel messaging</a>.</p>
   66465 
   66466    </dd>
   66467 
   66468   </dl><div class=impl>
   66469 
   66470   <p>The <dfn id=dom-messageevent-initmessageevent title=dom-MessageEvent-initMessageEvent><code>initMessageEvent()</code></dfn>
   66471   method must initialize the event in a manner analogous to the
   66472   similarly-named method in the DOM Events interfaces. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   66473 
   66474   <p>The <dfn id=dom-messageevent-data title=dom-MessageEvent-data><code>data</code></dfn>
   66475   attribute represents the message being sent.</p>
   66476 
   66477   <p>The <dfn id=dom-messageevent-origin title=dom-MessageEvent-origin><code>origin</code></dfn> attribute
   66478   represents, in <span>server-sent events</span> and
   66479   <a href=#web-messaging>cross-document messaging</a>, the <a href=#origin>origin</a> of
   66480   the document that sent the message (typically the scheme, hostname,
   66481   and port of the document, but not its path or fragment
   66482   identifier).</p>
   66483 
   66484   <p>The <dfn id=dom-messageevent-lasteventid title=dom-MessageEvent-lastEventId><code>lastEventId</code></dfn>
   66485   attribute represents, in <span>server-sent events</span>, the <span title=concept-event-stream-last-event-id>last event ID
   66486   string</span> of the event source.</p>
   66487 
   66488   <p>The <dfn id=dom-messageevent-source title=dom-MessageEvent-source><code>source</code></dfn> attribute
   66489   represents, in <a href=#web-messaging>cross-document messaging</a>, the
   66490   <code><a href=#windowproxy>WindowProxy</a></code> of the <a href=#browsing-context>browsing context</a> of the
   66491   <code><a href=#window>Window</a></code> object from which the message came.</p>
   66492 
   66493   <p>The <dfn id=dom-messageevent-ports title=dom-MessageEvent-ports><code>ports</code></dfn>
   66494   attribute represents, in <a href=#web-messaging>cross-document messaging</a> and
   66495   <a href=#channel-messaging>channel messaging</a> the <code><a href=#messageportarray>MessagePortArray</a></code>
   66496   being sent, if any.</p>
   66497 
   66498   <p>Except where otherwise specified, when the user agent creates and
   66499   dispatches a <code title=event-message><a href=#event-message>message</a></code> event in the
   66500   algorithms described in the following sections, the <code title=dom-MessageEvent-lastEventId><a href=#dom-messageevent-lasteventid>lastEventId</a></code> attribute
   66501   must be the empty string, the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute must be the
   66502   empty string, the <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code> attribute must be
   66503   null, and the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code>
   66504   attribute must be null.</p>
   66505 
   66506   </div>
   66507 
   66508 
   66509   </div><!--data-component-->
   66510 
   66511 
   66512 
   66513 
   66514   <div data-component="Web Messaging (editor: Ian Hickson)">
   66515 
   66516   
   66517 
   66518   <h3 id=web-messaging><span class=secno>9.2 </span><dfn id=crossDocumentMessages>Cross-document messaging</dfn></h3>
   66519 
   66520   <p>Web browsers, for security and privacy reasons, prevent documents
   66521   in different domains from affecting each other; that is, cross-site
   66522   scripting is disallowed.</p>
   66523 
   66524   <p>While this is an important security feature, it prevents pages
   66525   from different domains from communicating even when those pages are
   66526   not hostile. This section introduces a messaging system that allows
   66527   documents to communicate with each other regardless of their source
   66528   domain, in a way designed to not enable cross-site scripting
   66529   attacks.</p>
   66530 
   66531   <div class=impl>
   66532 
   66533   <p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> in <a href=#web-messaging>cross-document
   66534   messaging</a> is the <dfn id=posted-message-task-source>posted message task source</dfn>.</p>
   66535 
   66536   </div>
   66537 
   66538 
   66539   <h4 id=introduction-6><span class=secno>9.2.1 </span>Introduction</h4>
   66540 
   66541   <p><i>This section is non-normative.</i></p>
   66542 
   66543   <div class=example>
   66544 
   66545    <p>For example, if document A contains an <code><a href=#the-iframe-element>iframe</a></code>
   66546    element that contains document B, and script in document A calls
   66547    <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> on the
   66548    <code><a href=#window>Window</a></code> object of document B, then a message event will
   66549    be fired on that object, marked as originating from the
   66550    <code><a href=#window>Window</a></code> of document A. The script in document A might
   66551    look like:</p>
   66552 
   66553    <pre>var o = document.getElementsByTagName('iframe')[0];
   66554 o.contentWindow.postMessage('Hello world', 'http://b.example.org/');</pre>
   66555 
   66556    <p>To register an event handler for incoming events, the script
   66557    would use <code title="">addEventListener()</code> (or similar
   66558    mechanisms). For example, the script in document B might look
   66559    like:</p>
   66560 
   66561    <pre>window.addEventListener('message', receiver, false);
   66562 function receiver(e) {
   66563   if (e.origin == 'http://example.com') {
   66564     if (e.data == 'Hello world') {
   66565       e.source.postMessage('Hello', e.origin);
   66566     } else {
   66567       alert(e.data);
   66568     }
   66569   }
   66570 }</pre>
   66571 
   66572    <p>This script first checks the domain is the expected domain, and
   66573    then looks at the message, which it either displays to the user, or
   66574    responds to by sending a message back to the document which sent
   66575    the message in the first place.</p>
   66576 
   66577   </div>
   66578 
   66579 
   66580   <h4 id=security-postmsg><span class=secno>9.2.2 </span>Security</h4>
   66581 
   66582   <div class=impl>
   66583 
   66584   <h5 id=authors><span class=secno>9.2.2.1 </span>Authors</h5>
   66585 
   66586   </div>
   66587 
   66588   <p class=warning id=security-4>Use of this API requires extra
   66589   care to protect users from hostile entities abusing a site for their
   66590   own purposes.</p>
   66591 
   66592   <p>Authors should check the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute to ensure
   66593   that messages are only accepted from domains that they expect to
   66594   receive messages from. Otherwise, bugs in the author's message
   66595   handling code could be exploited by hostile sites.</p>
   66596 
   66597   <p>Furthermore, even after checking the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute, authors
   66598   should also check that the data in question is of the expected
   66599   format. Otherwise, if the source of the event has been attacked
   66600   using a cross-site scripting flaw, further unchecked processing of
   66601   information sent using the <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method could
   66602   result in the attack being propagated into the receiver.</p>
   66603 
   66604   <p>Authors should not use the wildcard keyword (*) in the <var title="">targetOrigin</var> argument in messages that contain any
   66605   confidential information, as otherwise there is no way to guarantee
   66606   that the message is only delivered to the recipient to which it was
   66607   intended.</p>
   66608 
   66609 
   66610   <div class=impl>
   66611 
   66612   <h5 id=user-agents><span class=secno>9.2.2.2 </span>User agents</h5>
   66613 
   66614   <p>The integrity of this API is based on the inability for scripts
   66615   of one <a href=#origin>origin</a> to post arbitrary events (using <code title="">dispatchEvent()</code> or otherwise) to objects in other
   66616   origins (those that are not the <a href=#same-origin title="same
   66617   origin">same</a>).</p>
   66618 
   66619   <p class=note>Implementors are urged to take extra care in the
   66620   implementation of this feature. It allows authors to transmit
   66621   information from one domain to another domain, which is normally
   66622   disallowed for security reasons. It also requires that UAs be
   66623   careful to allow access to certain properties but not others.</p>
   66624 
   66625   </div>
   66626 
   66627 
   66628   <h4 id=posting-messages><span class=secno>9.2.3 </span>Posting messages</h4>
   66629 
   66630   <dl class=domintro><dt><var title="">window</var> . <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage</a></code>(<var title="">message</var>, <var title="">targetOrigin</var> [, <var title="">ports</var> ])</dt>
   66631 
   66632    <dd>
   66633 
   66634     <p>Posts a message, optionally with an array of ports, to the
   66635     given window.</p>
   66636 
   66637     <p>If the origin of the target window doesn't match the given
   66638     origin, the message is discarded, to avoid information leakage. To
   66639     send the message to the target regardless of origin, set the
   66640     target origin to "<code title="">*</code>". To restrict the
   66641     message to same-origin targets only, without needing to explicitly
   66642     state the origin, set the target origin to "<code title="">/</code>".</p>
   66643 
   66644     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null
   66645     entries or duplicate ports.</p>
   66646 
   66647    </dd>
   66648 
   66649   </dl><div class=impl>
   66650 
   66651   <p>When a script invokes the <dfn id=dom-window-postmessage title=dom-window-postMessage><code>postMessage(<var title="">message</var>, <var title="">targetOrigin</var>, <var title="">ports</var>)</code></dfn> method (with two or three
   66652   arguments) on a <code><a href=#window>Window</a></code> object, the user agent must
   66653   follow these steps:
   66654 
   66655   <ol><li>
   66656 
   66657     <p>If the value of the <var title="">targetOrigin</var> argument
   66658     is neither a single U+002A ASTERISK character (*), a single U+002F
   66659     SOLIDUS character (/), nor an <a href=#absolute-url>absolute URL</a> with a
   66660     <code title=url-host-specific><a href=#url-host-specific>&lt;host-specific&gt;</a></code>
   66661     component that is either empty or a single U+002F SOLIDUS
   66662     character (/), then throw a <code><a href=#syntax_err>SYNTAX_ERR</a></code> exception and
   66663     abort the overall set of steps.</p>
   66664 
   66665    </li>
   66666 
   66667    <li>
   66668 
   66669     <p>Let <var title="">message clone</var> be the result of
   66670     obtaining a <a href=#structured-clone>structured clone</a> of the <var title="">message</var> argument. If this throws an exception, then
   66671     throw that exception and abort these steps.</p>
   66672 
   66673    </li>
   66674 
   66675    <li>
   66676 
   66677     <p>If the <var title="">ports</var> argument is present but either
   66678     any of the entries in <var title="">ports</var> are null, or any
   66679     <code><a href=#messageport>MessagePort</a></code> object is listed in <var title="">ports</var> more than once, or any of the
   66680     <code><a href=#messageport>MessagePort</a></code> objects listed in <var title="">ports</var> have already been cloned once before, then
   66681     throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception and abort these
   66682     steps.</p>
   66683 
   66684    </li>
   66685 
   66686    <li>
   66687 
   66688     <p>Let <var title="">new ports</var> be an empty array.</p>
   66689 
   66690     <p>If the <var title="">ports</var> argument is present, then for
   66691     each port in <var title="">ports</var> in turn, obtain a new port
   66692     by <a href=#clone-a-port title="clone a port">cloning</a> the port with the
   66693     <code><a href=#window>Window</a></code> object on which the method was invoked as the
   66694     owner of the clone, and append the clone to the <var title="">new
   66695     ports</var> array.</p>
   66696 
   66697     <p class=note>If the original <var title="">ports</var> argument
   66698     was omitted or empty, then the <var title="">new ports</var> array
   66699     will be empty.</p>
   66700 
   66701    </li>
   66702 
   66703    <li>
   66704 
   66705     <p>Return from the <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code> method, but
   66706     asynchronously continue running these steps.</p>
   66707 
   66708    </li>
   66709 
   66710    <li>
   66711 
   66712     <p>If the <var title="">targetOrigin</var> argument is a single
   66713     literal U+002F SOLIDUS character (/), and the
   66714     <code><a href=#document>Document</a></code> of the <code><a href=#window>Window</a></code> object on which
   66715     the method was invoked does not have the <a href=#same-origin>same origin</a>
   66716     as the <a href=#entry-script>entry script</a>'s <a href="#script's-document" title="script's
   66717     document">document</a>, then abort these steps silently.</p>
   66718 
   66719     <p>Otherwise, if the <var title="">targetOrigin</var> argument is
   66720     an <a href=#absolute-url>absolute URL</a>, and the <code><a href=#document>Document</a></code> of the
   66721     <code><a href=#window>Window</a></code> object on which the method was invoked does
   66722     not have the <a href=#same-origin>same origin</a> as <var title="">targetOrigin</var>, then abort these steps silently.</p>
   66723 
   66724     <p>Otherwise, the <var title="">targetOrigin</var> argument is a
   66725     single literal U+002A ASTERISK character (*), and no origin check
   66726     is made.</p>
   66727 
   66728    </li>
   66729 
   66730    <li>
   66731 
   66732     <p>Create an event that uses the <code><a href=#messageevent>MessageEvent</a></code>
   66733     interface, with the event name <code title=event-message><a href=#event-message>message</a></code>, which does not bubble, is
   66734     not cancelable, and has no default action. The <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code> attribute must be set to
   66735     the value of <var title="">message clone</var>, the <code title=dom-MessageEvent-origin><a href=#dom-messageevent-origin>origin</a></code> attribute must be
   66736     set to the <a href=#unicode-serialization-of-an-origin title="Unicode serialization of an
   66737     origin">Unicode serialization</a> of the <a href=#origin>origin</a> of
   66738     the script that invoked the method, the <code title=dom-MessageEvent-source><a href=#dom-messageevent-source>source</a></code> attribute must be
   66739     set to the <a href="#script's-global-object">script's global object</a>'s
   66740     <code><a href=#windowproxy>WindowProxy</a></code> object, and the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code> attribute must be set
   66741     to the <var title="">new ports</var> array.</p> <!-- invariant:
   66742     the global object is always a Window if the script can see this
   66743     method -->
   66744 
   66745    </li>
   66746 
   66747    <li>
   66748 
   66749     <p><a href=#queue-a-task>Queue a task</a> to dispatch the event created in the
   66750     previous step at the <code><a href=#window>Window</a></code> object on which the
   66751     method was invoked. The <a href=#task-source>task source</a> for this <a href=#concept-task title=concept-task>task</a> is the <a href=#posted-message-task-source>posted message task
   66752     source</a>.</p>
   66753 
   66754    </li>
   66755 
   66756   </ol></div>
   66757 
   66758 
   66759 
   66760   <h3 id=channel-messaging><span class=secno>9.3 </span><dfn>Channel messaging</dfn></h3>
   66761 
   66762   <h4 id=introduction-7><span class=secno>9.3.1 </span>Introduction</h4>
   66763 
   66764   <p><i>This section is non-normative.</i></p>
   66765 
   66766   <p>To enable independent pieces of code (e.g. running in different
   66767   <a href=#browsing-context title="browsing context">browsing contexts</a>) to
   66768   communicate directly, authors can use <a href=#channel-messaging>channel
   66769   messaging</a>.</p>
   66770 
   66771   <p>Communication channels in this mechanisms are implemented as
   66772   two-ways pipes, with a port at each end. Messages sent in one port
   66773   are delivered at the other port, and vice-versa. Messages are
   66774   asynchronous, and delivered as DOM events.</p>
   66775 
   66776   <p>To create a connection (two "entangled" ports), the <code title="">MessageChannel()</code> constructor is called:</p>
   66777 
   66778   <pre>var channel = new MessageChannel();</pre>
   66779 
   66780   <p>One of the ports is kept as the local port, and the other port is
   66781   sent to the remote code, e.g. using <code title=dom-window-postMessage><a href=#dom-window-postmessage>postMessage()</a></code>:</p>
   66782 
   66783   <pre>otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);</pre>
   66784 
   66785   <p>To send messages, the <code title=dom-MessagePort-postMessage><a href=#dom-messageport-postmessage>postMessage()</a></code> method on
   66786   the port is used:</p>
   66787 
   66788   <pre>channel.port1.postMessage('hello');</pre>
   66789 
   66790   <p>To receive messages, one listens to <code title=event-message><a href=#event-message>message</a></code> events:</p>
   66791 
   66792   <pre>channel.port1.onmessage = handleMessage;
   66793 function handleMessage(event) {
   66794   // message is in event.data
   66795   // ...
   66796 }</pre>
   66797 
   66798 
   66799   <h4 id=message-channels><span class=secno>9.3.2 </span>Message channels</h4>
   66800 
   66801   <pre class=idl>[<a href=#dom-messagechannel title=dom-MessageChannel>Constructor</a>]
   66802 interface <dfn id=messagechannel>MessageChannel</dfn> {
   66803   readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port1 title=dom-channel-port1>port1</a>;
   66804   readonly attribute <a href=#messageport>MessagePort</a> <a href=#dom-channel-port2 title=dom-channel-port2>port2</a>;
   66805 };</pre>
   66806 
   66807   <dl class=domintro><dt><var title="">channel</var> = new <code title=dom-MessageChannel><a href=#dom-messagechannel>MessageChannel</a></code>()</dt>
   66808 
   66809    <dd>
   66810 
   66811     <p>Returns a new <code><a href=#messagechannel>MessageChannel</a></code> object with two new <code><a href=#messageport>MessagePort</a></code> objects.</p>
   66812 
   66813    </dd>
   66814 
   66815    <dt><var title="">channel</var> . <code title=dom-MessageChannel-port1>port1</code></dt>
   66816 
   66817    <dd>
   66818 
   66819     <p>Returns the first <code><a href=#messageport>MessagePort</a></code> object.</p>
   66820 
   66821    </dd>
   66822 
   66823    <dt><var title="">channel</var> . <code title=dom-MessageChannel-port2>port2</code></dt>
   66824 
   66825    <dd>
   66826 
   66827     <p>Returns the second <code><a href=#messageport>MessagePort</a></code> object.</p>
   66828 
   66829    </dd>
   66830 
   66831   </dl><div class=impl>
   66832 
   66833   <p>When the <dfn id=dom-messagechannel title=dom-MessageChannel><code>MessageChannel()</code></dfn>
   66834   constructor is called, it must run the following algorithm:</p>
   66835 
   66836   <ol><li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   66837    owned by the <a href="#script's-global-object">script's global object</a>, and let <var title="">port1</var> be that object.</li>
   66838 
   66839    <li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   66840    owned by the <a href="#script's-global-object">script's global object</a>, and let <var title="">port2</var> be that object.</li>
   66841 
   66842    <li><p><a href=#entangle>Entangle</a> the <var title="">port1</var> and <var title="">port2</var> objects.</li>
   66843 
   66844    <li><p>Instantiate a new <code><a href=#messagechannel>MessageChannel</a></code> object, and
   66845    let <var title="">channel</var> be that object.</li>
   66846 
   66847    <li><p>Let the <code title=dom-channel-port1><a href=#dom-channel-port1>port1</a></code>
   66848    attribute of the <var title="">channel</var> object be <var title="">port1</var>.</p>
   66849 
   66850    <li><p>Let the <code title=dom-channel-port2><a href=#dom-channel-port2>port2</a></code>
   66851    attribute of the <var title="">channel</var> object be <var title="">port2</var>.</p>
   66852 
   66853    <li><p>Return <var title="">channel</var>.</li>
   66854 
   66855   </ol><p>This constructor must be visible when the <a href="#script's-global-object">script's global
   66856   object</a> is either a <code><a href=#window>Window</a></code> object or an object
   66857   implementing the <code>WorkerUtils</code> interface.</p>
   66858 
   66859   <p>The <dfn id=dom-channel-port1 title=dom-channel-port1><code>port1</code></dfn> and
   66860   <dfn id=dom-channel-port2 title=dom-channel-port2><code>port2</code></dfn> attributes
   66861   must return the values they were assigned when the
   66862   <code><a href=#messagechannel>MessageChannel</a></code> object was created.</p>
   66863 
   66864   </div>
   66865 
   66866 
   66867 
   66868   <h4 id=message-ports><span class=secno>9.3.3 </span>Message ports</h4>
   66869 
   66870   <p>Each channel has two message ports. Data sent through one port is
   66871   received by the other port, and vice versa.</p>
   66872 
   66873   <pre class=idl>typedef sequence&lt;MessagePort&gt; <dfn id=messageportarray>MessagePortArray</dfn>;
   66874 
   66875 interface <dfn id=messageport>MessagePort</dfn> {
   66876 <!-- v2-onclose  readonly attribute boolean <span title="dom-MessagePort-active">active</span>;
   66877 -->  void <a href=#dom-messageport-postmessage title=dom-MessagePort-postMessage>postMessage</a>(in any message, in optional <a href=#messageportarray>MessagePortArray</a> ports);<!--
   66878   <span>MessagePort</span> <span title="dom-MessagePort-startConversation">startConversation</span>(in any message);-->
   66879   void <a href=#dom-messageport-start title=dom-MessagePort-start>start</a>();
   66880   void <a href=#dom-messageport-close title=dom-MessagePort-close>close</a>();
   66881 
   66882   // event handlers
   66883            attribute <a href=#function>Function</a> <a href=#handler-messageport-onmessage title=handler-MessagePort-onmessage>onmessage</a>;
   66884 };
   66885 <a href=#messageport>MessagePort</a> implements <a href=#eventtarget>EventTarget</a>;</pre>
   66886 
   66887   <dl class=domintro><!-- v2-onclose
   66888    <dt><var title="">port</var> . <code title="dom-MessagePort-active">active</code></dt>
   66889 
   66890    <dd>
   66891 
   66892     <p>Returns true if the port is still active; otherwise, returns false.</p>
   66893 
   66894    </dd>
   66895 --><dt><var title="">port</var> . <code title=dom-MessagePort-poseMessage>postMessage</code>(<var title="">message</var> [, <var title="">ports</var>] )</dt>
   66896 
   66897    <dd>
   66898 
   66899     <p>Posts a message through the channel, optionally with the given
   66900     ports.</p>
   66901 
   66902     <p>Throws an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null
   66903     entries, duplicate ports, or the source or target port.</p>
   66904 
   66905    </dd>
   66906 
   66907    <dt><var title="">port</var> . <code title=dom-MessagePort-start><a href=#dom-messageport-start>start</a></code>()</dt>
   66908 
   66909    <dd>
   66910 
   66911     <p>Begins dispatching messages received on the port.</p>
   66912 
   66913    </dd>
   66914 
   66915    <dt><var title="">port</var> . <code title=dom-MessagePort-close><a href=#dom-messageport-close>close</a></code>()</dt>
   66916 
   66917    <dd>
   66918 
   66919     <p>Disconnects the port, so that it is no longer active.</p>
   66920 
   66921    </dd>
   66922 
   66923   </dl><div class=impl>
   66924 
   66925   <p>Each <code><a href=#messageport>MessagePort</a></code> object can be entangled with
   66926   another (a symmetric relationship). Each <code><a href=#messageport>MessagePort</a></code>
   66927   object also has a <a href=#task-source>task source</a> called the <dfn id=port-message-queue>port
   66928   message queue</dfn>, initial empty. A <a href=#port-message-queue>port message
   66929   queue</a> can be enabled or disabled, and is initially
   66930   disabled. Once enabled, a port can never be disabled again (though
   66931   messages in the queue can get moved to another queue or removed
   66932   altogether, which has much the same effect).</p>
   66933 
   66934   <p>When the user agent is to <dfn id=create-a-new-messageport-object>create a new
   66935   <code>MessagePort</code> object</dfn> owned by a <a href="#script's-global-object">script's
   66936   global object</a> object <var title="">owner</var>, it must
   66937   instantiate a new <code><a href=#messageport>MessagePort</a></code> object, and let its owner
   66938   be <var title="">owner</var>.</p>
   66939 
   66940   <hr><p>When the user agent is to <dfn id=entangle>entangle</dfn> two
   66941   <code><a href=#messageport>MessagePort</a></code> objects, it must run the following
   66942   steps:</p>
   66943 
   66944   <ol><li>
   66945 
   66946     <p>If one of the ports is already entangled, then disentangle it
   66947     and the port that it was entangled with.</p>
   66948 
   66949     <p class=note>If those two previously entangled ports were the
   66950     two ports of a <code><a href=#messagechannel>MessageChannel</a></code> object, then that
   66951     <code><a href=#messagechannel>MessageChannel</a></code> object no longer represents an actual
   66952     channel: the two ports in that object are no longer entangled.</p>
   66953 
   66954    </li>
   66955 
   66956    <li><p>Associate the two ports to be entangled, so that they form
   66957    the two parts of a new channel. (There is no
   66958    <code><a href=#messagechannel>MessageChannel</a></code> object that represents this
   66959    channel.)</li>
   66960 
   66961   </ol><hr><p>When the user agent is to <dfn id=clone-a-port>clone a port</dfn> <var title="">original port</var>, with the clone being owned by <var title="">owner</var>, it must run the following steps, which return
   66962   a new <code><a href=#messageport>MessagePort</a></code> object. These steps must be run
   66963   atomically.</p>
   66964 
   66965   <ol><li><p><a href=#create-a-new-messageport-object>Create a new <code>MessagePort</code> object</a>
   66966    owned by <var title="">owner</var>, and let <var title="">new
   66967    port</var> be that object.</li>
   66968 
   66969    <li><p>Move all the events in the <a href=#port-message-queue>port message queue</a>
   66970    of <var title="">original port</var> to the <a href=#port-message-queue>port message
   66971    queue</a> of <var title="">new port</var>, if any, leaving the
   66972    <var title="">new port</var>'s <a href=#port-message-queue>port message queue</a> in
   66973    its initial disabled state.</li>
   66974 
   66975    <li>
   66976 
   66977     <p>If the <var title="">original port</var> is entangled with
   66978     another port, then run these substeps:</p>
   66979 
   66980     <ol><li><p>Let the <var title="">remote port</var> be the port with
   66981      which the <var title="">original port</var> is entangled.</li>
   66982 
   66983      <li><p><a href=#entangle>Entangle</a> the <var title="">remote port</var>
   66984      and <var title="">new port</var> objects. The <var title="">original port</var> object will be disentangled by this
   66985      process.</li>
   66986 
   66987     </ol></li>
   66988 
   66989    <li><p>Return <var title="">new port</var>. It is the
   66990    clone.</li>
   66991 
   66992   </ol><hr><!-- v2-onclose
   66993   <p>The <dfn title="dom-MessagePort-active"><code>active</code></dfn>
   66994   attribute must return true if the port is entangled, and false
   66995   otherwise.</p>
   66996 
   66997   <hr>
   66998 --><p>The <dfn id=dom-messageport-postmessage title=dom-MessagePort-postMessage><code>postMessage()</code></dfn>
   66999   method, when called on a port <var title="">source port</var>, must
   67000   cause the user agent to run the following steps:</p>
   67001 
   67002   <ol><li><p>Let <var title="">target port</var> be the port with which
   67003    <var title="">source port</var> is entangled, if any.</li>
   67004 
   67005    <li><p>If the method was called with a second argument <var title="">ports</var> and that argument isn't null, then, if any of
   67006    the entries in <var title="">ports</var> are null, if any
   67007    <code><a href=#messageport>MessagePort</a></code> object is listed in <var title="">ports</var> more than once, if any of the
   67008    <code><a href=#messageport>MessagePort</a></code> objects listed in <var title="">ports</var> have already been cloned once before, or if
   67009    any of the entries in <var title="">ports</var> are either the <var title="">source port</var> or the <var title="">target port</var>
   67010    (if any), then throw an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
   67011    exception.</li>
   67012 
   67013    <li><p>If there is no <var title="">target port</var> (i.e. if <var title="">source port</var> is not entangled), then abort these
   67014    steps.</li>
   67015    <!-- we don't raise an exception if there is no target port because
   67016    this can happen at a moment's notice. we don't return false because
   67017    if the port is _about_ to be closed, the message might not be
   67018    listened for anyway. -->
   67019 
   67020    <li><p>Create an event that uses the <code><a href=#messageevent>MessageEvent</a></code>
   67021    interface, with the name <code title=event-message><a href=#event-message>message</a></code>, which does not bubble, is not
   67022    cancelable, and has no default action.</li>
   67023 
   67024    <li><p>Let <var title="">message</var> be the method's first
   67025    argument.</li>
   67026 
   67027    <li><p>Let <var title="">message clone</var> be the result of
   67028    obtaining a <a href=#structured-clone>structured clone</a> of <var title="">message</var>. If this throws an exception, then throw
   67029    that exception and abort these steps.</li>
   67030 
   67031    <li><p>Let the <code title=dom-MessageEvent-data><a href=#dom-messageevent-data>data</a></code>
   67032    attribute of the event have the value of <var title="">message
   67033    clone</var>.</li>
   67034 
   67035    <li><p>If the method was called with a second argument <var title="">ports</var> and that argument isn't null, then run the
   67036    following substeps:</p>
   67037 
   67038     <ol><li>
   67039 
   67040       <p>Let <var title="">new ports</var> be an empty array.</p>
   67041 
   67042       <p>For each port in <var title="">ports</var> in turn,
   67043       obtain a new port by <a href=#clone-a-port title="clone a port">cloning</a>
   67044       the port with the owner of the <var title="">target port</var>
   67045       as the owner of the clone, and append the clone to the <var title="">new ports</var> array.</p>
   67046 
   67047       <p class=note>If the original <var title="">ports</var>
   67048       array was empty, then the <var title="">new ports</var> array will
   67049       also be empty.</p>
   67050 
   67051      </li>
   67052 
   67053      <li><p>Let the <code title=dom-MessageEvent-ports><a href=#dom-messageevent-ports>ports</a></code>
   67054      attribute of the event be the <var title="">new ports</var>
   67055      array.</li>
   67056 
   67057     </ol></li>
   67058 
   67059    <li><p>Add the event to the <a href=#port-message-queue>port message queue</a> of <var title="">target port</var>.</li>
   67060 
   67061   </ol><!--
   67062   <hr>
   67063 
   67064   <p>The <dfn
   67065   title="dom-MessagePort-startConversation"><code>startConversation(<var
   67066   title="">message</var>)</code></dfn> method is a convenience method
   67067   that simplifies create a new <code>MessageChannel</code> and
   67068   invoking <code
   67069   title="dom-MessagePort-postMessage">postMessage()</code> with one of
   67070   the new ports. When invoked on a port <var title="">source
   67071   port</var>, it must run the following steps:</p>
   67072 
   67073   <ol>
   67074 
   67075    <li><p>Let <var title="">message</var> be the method's first
   67076    argument.</p></li>
   67077 
   67078    <li><p><span>Create a new <code>MessagePort</code> object</span>
   67079    owned by the <span>script's global object</span>, and let <var
   67080    title="">port1</var> be that object.</p></li>
   67081 
   67082    <li><p>If the <var title="">source port</var> is not entangled with
   67083    another port, then return <var title="">port1</var> and abort these
   67084    steps.</p></li>
   67085    <!- - we don't raise an exception because this can happen moment's
   67086    notice. we don't return null because then we'd end up with
   67087    null derefs. better to just let the likely next postMessage call
   67088    fall on the floor. - ->
   67089 
   67090    <li><p>Let <var title="">target port</var> be the port with which
   67091    <var title="">source port</var> is entangled.</p></li>
   67092 
   67093    <li><p><span>Create a new <code>MessagePort</code> object</span>
   67094    owned by the owner of the <var title="">target port</var>, and let
   67095    <var title="">port2</var> be that object.</p></li>
   67096 
   67097    <li><p><span>Entangle</span> the <var title="">port1</var> and <var
   67098    title="">port2</var> objects.</p></li>
   67099 
   67100    <li><p>Create an event that uses the <code>MessageEvent</code>
   67101    interface, with the name <code
   67102    title="event-message">message</code>, which does not bubble, is not
   67103    cancelable, and has no default action.</p></li>
   67104 
   67105    <li><p>Let the <code title="dom-MessageEvent-data">data</code>
   67106    attribute of the event have the value of <var
   67107    title="">message</var>, the method's first argument.</p></li>
   67108 
   67109    <li><p>Let the <code
   67110    title="dom-MessageEvent-ports">ports</code> attribute
   67111    of the event be an array containing only <var
   67112    title="">port2</var>.</p></li>
   67113 
   67114    <li><p>Return <var title="">port1</var> from the method, but
   67115    continue with these steps.</p></li>
   67116 
   67117    <li><p>Add the event to the <span>port message queue</span> of <var
   67118    title="">target port</var>.</p></li>
   67119 
   67120   </ol>
   67121 --><hr><p>The <dfn id=dom-messageport-start title=dom-MessagePort-start><code>start()</code></dfn>
   67122   method must enable its port's <a href=#port-message-queue>port message queue</a>, if it
   67123   is not already enabled.</p>
   67124 
   67125   <p>When a port's <a href=#port-message-queue>port message queue</a> is enabled, the
   67126   <a href=#event-loop>event loop</a> must use it as one of its <a href=#task-source title="task
   67127   source">task sources</a>.</p>
   67128 
   67129   <p class=note>If the <code><a href=#document>Document</a></code> of the port's event
   67130   listeners' <a href="#script's-global-object" title="script's global object">global object</a>
   67131   is not <a href=#fully-active>fully active</a>, then the messages are lost.</p>
   67132   <!-- because of the jump-to-entry-point algorithm first step -->
   67133 
   67134   <hr><p>The <dfn id=dom-messageport-close title=dom-MessagePort-close><code>close()</code></dfn>
   67135   method, when called on a port <var title="">local port</var> that is
   67136   entangled with another port, must cause the user agents to
   67137   disentangle the two ports. If the method is called on a port that is
   67138   not entangled, then the method must do nothing.</p>
   67139 
   67140   <hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
   67141   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   67142   event types</a>) that must be supported, as IDL attributes, by
   67143   all objects implementing the <code><a href=#messageport>MessagePort</a></code> interface:</p>
   67144 
   67145   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   67146    <tbody><tr><td><dfn id=handler-messageport-onmessage title=handler-MessagePort-onmessage><code>onmessage</code></dfn> <td> <code title=event-message><a href=#event-message>message</a></code>
   67147   </table><p>The first time a <code><a href=#messageport>MessagePort</a></code> object's <code title=handler-MessagePort-onmessage><a href=#handler-messageport-onmessage>onmessage</a></code> IDL attribute
   67148   is set, the port's <a href=#port-message-queue>port message queue</a> must be enabled,
   67149   as if the <code title=dom-MessagePort-start><a href=#dom-messageport-start>start()</a></code> method
   67150   had been called.</p>
   67151 
   67152   </div>
   67153 
   67154 
   67155   <h5 id=ports-and-garbage-collection><span class=secno>9.3.3.1 </span>Ports and garbage collection</h5>
   67156 
   67157   <div class=impl>
   67158 
   67159   <p>When a <code><a href=#messageport>MessagePort</a></code> object <var title="">o</var> is
   67160   entangled, user agents must either act as if <var title="">o</var>'s
   67161   entangled <code><a href=#messageport>MessagePort</a></code> object has a strong reference to
   67162   <var title="">o</var>, or as if <var title="">o</var>'s owner has a
   67163   strong reference to <var title="">o</var>.</p>
   67164 
   67165   <div class=note>
   67166 
   67167    <p>Thus, a message port can be received, given an event listener,
   67168    and then forgotten, and so long as that event listener could
   67169    receive a message, the channel will be maintained.</p>
   67170 
   67171    <p>Of course, if this was to occur on both sides of the channel,
   67172    then both ports could be garbage collected, since they would not be
   67173    reachable from live code, despite having a strong reference to each
   67174    other.</p>
   67175 
   67176   </div>
   67177 
   67178   <p>Furthermore, a <code><a href=#messageport>MessagePort</a></code> object must not be
   67179   garbage collected while there exists a message in a <a href=#task-queue>task
   67180   queue</a> that is to be dispatched on that
   67181   <code><a href=#messageport>MessagePort</a></code> object, or while the
   67182   <code><a href=#messageport>MessagePort</a></code> object's <a href=#port-message-queue>port message queue</a> is
   67183   open and there exists a <code title=event-message><a href=#event-message>message</a></code>
   67184   event in that queue.</p>
   67185   <!-- we might not need to explicitly say the first part if DOM
   67186   Events is fixed to say that events on a task queue prevent GC -->
   67187 
   67188   <!-- ports in the ports attribute of a MessageEvent that isn't
   67189   dispatched yet are safe because the MessageEvent is safe -->
   67190 
   67191   </div>
   67192 
   67193   <p class=note>Authors are strongly encouraged to explicitly close
   67194   <code><a href=#messageport>MessagePort</a></code> objects to disentangle them, so that their
   67195   resources can be recollected. Creating many <code><a href=#messageport>MessagePort</a></code>
   67196   objects and discarding them without closing them can lead to high
   67197   memory usage.</p>
   67198 
   67199 
   67200 
   67201   </div><!--data-component-->
   67202 
   67203 
   67204 
   67205 
   67206   <h2 id=syntax><span class=secno>10 </span><dfn>The HTML syntax</dfn></h2>
   67207 
   67208   <p class=note>This section only describes the rules for resources
   67209   labeled with an <a href=#html-mime-type>HTML MIME type</a>. Rules for XML resources
   67210   are discussed in the section below entitled "<a href=#the-xhtml-syntax>The XHTML
   67211   syntax</a>".</p>
   67212 
   67213 
   67214   <h3 id=writing><span class=secno>10.1 </span>Writing HTML documents</h3>
   67215 
   67216   <div class=impl>
   67217 
   67218   <p><i>This section only applies to documents, authoring tools, and
   67219   markup generators. In particular, it does not apply to conformance
   67220   checkers; conformance checkers must use the requirements given in
   67221   the next section ("parsing HTML documents").</i></p>
   67222 
   67223   </div>
   67224 
   67225   <p>Documents must consist of the following parts, in the given
   67226   order:</p>
   67227 
   67228   <ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.</li>
   67229 
   67230    <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   67231    <a href=#space-character title="space character">space characters</a>.</li>
   67232 
   67233    <li>A <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a>.
   67234 
   67235    <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   67236    <a href=#space-character title="space character">space characters</a>.</li>
   67237 
   67238    <li>The root element, in the form of an <code><a href=#the-html-element-0>html</a></code> <a href=#syntax-elements title=syntax-elements>element</a>.</li>
   67239 
   67240    <li>Any number of <a href=#syntax-comments title=syntax-comments>comments</a> and
   67241    <a href=#space-character title="space character">space characters</a>.</li>
   67242 
   67243   </ol><p>The various types of content mentioned above are described in the
   67244   next few sections.</p>
   67245 
   67246   <p>In addition, there are some restrictions on how <a href=#character-encoding-declaration title="character encoding declaration">character encoding
   67247   declarations</a> are to be serialized, as discussed in the
   67248   section on that topic.</p>
   67249 
   67250   <div class=note>
   67251 
   67252    <p>Space characters before the root <code><a href=#the-html-element-0>html</a></code> element, and
   67253    space characters at the start of the <code><a href=#the-html-element-0>html</a></code> element and
   67254    before the <code><a href=#the-head-element-0>head</a></code> element, will be dropped when the
   67255    document is parsed; space characters <em>after</em> the root
   67256    <code><a href=#the-html-element-0>html</a></code> element will be parsed as if they were at the end
   67257    of the <code><a href=#the-body-element-0>body</a></code> element. Thus, space characters around the
   67258    root element do not round-trip.</p>
   67259 
   67260    <p>It is suggested that newlines be inserted after the DOCTYPE,
   67261    after any comments that are before the root element, after the
   67262    <code><a href=#the-html-element-0>html</a></code> element's start tag (if it is not <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>), and after any comments
   67263    that are inside the <code><a href=#the-html-element-0>html</a></code> element but before the
   67264    <code><a href=#the-head-element-0>head</a></code> element.</p>
   67265 
   67266   </div>
   67267 
   67268   <p>Many strings in the HTML syntax (e.g. the names of elements and
   67269   their attributes) are case-insensitive, but only for characters in
   67270   the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL
   67271   LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL
   67272   LETTER Z). For convenience, in this section this is just referred to
   67273   as "case-insensitive".</p>
   67274 
   67275 
   67276   <h4 id=the-doctype><span class=secno>10.1.1 </span>The DOCTYPE</h4>
   67277 
   67278   <p>A <dfn id=syntax-doctype title=syntax-doctype>DOCTYPE</dfn> is a <!-- mostly
   67279   useless but nonetheless --> required preamble.</p>
   67280 
   67281   <p class=note>DOCTYPEs are required for legacy reasons. When
   67282   omitted, browsers tend to use a different rendering mode that is
   67283   incompatible with some specifications. Including the DOCTYPE in a
   67284   document ensures that the browser makes a best-effort attempt at
   67285   following the relevant specifications.</p>
   67286 
   67287   <p>A DOCTYPE must consist of the following characters, in this
   67288   order:</p>
   67289 
   67290   <ol class=brief><li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">&lt;!DOCTYPE</code>".</li>
   67291    <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   67292    <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">HTML</code>".</li>
   67293    <li>Optionally, a <a href=#doctype-legacy-string>DOCTYPE legacy string</a> or an <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a> (defined below).</li>
   67294    <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
   67295    <li>A U+003E GREATER-THAN SIGN character (&gt;).</li>
   67296   </ol><p class=note>In other words, <code>&lt;!DOCTYPE HTML&gt;</code>,
   67297   case-insensitively.</p>
   67298 
   67299   <hr><p>For the purposes of HTML generators that cannot output HTML
   67300   markup with the short DOCTYPE "<code title="">&lt;!DOCTYPE
   67301   HTML&gt;</code>", a <dfn id=doctype-legacy-string>DOCTYPE legacy string</dfn> may be inserted
   67302   into the DOCTYPE (in the position defined above). This string must
   67303   consist of:</p>
   67304 
   67305   <ol class=brief><li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   67306    <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">SYSTEM</code>".</li>
   67307    <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   67308    <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li>
   67309    <li>The literal string "<code><a href=#about:legacy-compat>about:legacy-compat</a></code>".</li>
   67310    <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>quote mark</i>).</li>
   67311   </ol><p class=note>In other words, <code>&lt;!DOCTYPE HTML SYSTEM
   67312   "about:legacy-compat"&gt;</code> or <code>&lt;!DOCTYPE HTML SYSTEM
   67313   'about:legacy-compat'&gt;</code>, case-insensitively except for the bit
   67314   in single or double quotes.</p>
   67315 
   67316   <p>The <a href=#doctype-legacy-string>DOCTYPE legacy string</a> should not be used unless
   67317   the document is generated from a system that cannot output the
   67318   shorter string.</p>
   67319 
   67320   <hr><!-- see the parser section before changing this bit --><p>To help authors transition from HTML4 and XHTML1, an
   67321   <dfn id=obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</dfn> can be inserted into
   67322   the DOCTYPE (in the position defined above). This string must
   67323   consist of:</p>
   67324 
   67325   <ol class=brief><li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   67326    <li>A string that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">PUBLIC</code>".</li>
   67327    <li>One or more <a href=#space-character title="space character">space characters</a>.</li>
   67328    <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li>
   67329    <li>The string from one of the cells in the first column of the table below. The row to which this cell belongs is the <i>selected row</i>.</li>
   67330    <li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>first quote mark</i>).</li>
   67331    <li>If the cell in the second column of the <i>selected row</i> is not blank, one or more <a href=#space-character title="space character">space characters</a>.</li>
   67332    <li>If the cell in the second column of the <i>selected row</i> is not blank, a U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>third quote mark</i>).</li>
   67333    <li>If the cell in the second column of the <i>selected row</i> is not blank, the string from the cell in the second column of the <i>selected row</i>.</li>
   67334    <li>If the cell in the second column of the <i>selected row</i> is not blank, a matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>third quote mark</i>).</li>
   67335   </ol><table><caption>
   67336     Allowed values for public and system identifiers in an <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a>.
   67337    </caption>
   67338    <thead><tr><th> Public identifier
   67339      <th> System identifier
   67340    <tbody><tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>
   67341      <td>
   67342     <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>
   67343      <td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>
   67344     <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>
   67345      <td>
   67346     <tr><td> <code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>
   67347      <td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code>
   67348     <tr><td> <code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code>
   67349      <td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>
   67350     <tr><td> <code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code>
   67351      <td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>
   67352   </table><p>A <a href=#syntax-doctype title=syntax-doctype>DOCTYPE</a> containing an
   67353   <a href=#obsolete-permitted-doctype-string>obsolete permitted DOCTYPE string</a> is an <dfn id=obsolete-permitted-doctype>obsolete
   67354   permitted DOCTYPE</dfn>. Authors should not use <a href=#obsolete-permitted-doctype title="obsolete permitted DOCTYPE">obsolete permitted
   67355   DOCTYPEs</a>, as they are unnecessarily long.</p>
   67356 
   67357 
   67358 
   67359 
   67360   <h4 id=elements-0><span class=secno>10.1.2 </span>Elements</h4>
   67361 
   67362   <p>There are five different kinds of <dfn id=syntax-elements title=syntax-elements>elements</dfn>: <a href=#void-elements>void elements</a>,
   67363   <a href=#raw-text-elements>raw text elements</a>, <a href=#rcdata-elements>RCDATA elements</a>,
   67364   <a href=#foreign-elements>foreign elements</a>, and <a href=#normal-elements>normal elements</a>.</p>
   67365 
   67366   <dl><dt><dfn id=void-elements>Void elements</dfn></dt>
   67367 
   67368    <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>,
   67369    <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   67370    <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
   67371    <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>,
   67372    <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
   67373    <code><a href=#the-wbr-element>wbr</a></code></dd>
   67374 
   67375    <dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>
   67376 
   67377    <dd><code><a href=#script>script</a></code>, <code><a href=#the-style-element>style</a></code></dd> <!-- iframe and
   67378    noscript don't count as raw text for syntax purposes -->
   67379 
   67380    <dt><dfn id=rcdata-elements>RCDATA elements</dfn></dt>
   67381 
   67382    <dd><code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-title-element-0>title</a></code></dd>
   67383 
   67384    <dt><dfn id=foreign-elements>Foreign elements</dfn></dt>
   67385 
   67386    <dd>Elements from the <a href=#mathml-namespace>MathML namespace</a>
   67387    and the <a href=#svg-namespace>SVG namespace</a>.</dd>
   67388 
   67389    <dt><dfn id=normal-elements>Normal elements</dfn></dt>
   67390 
   67391    <dd>All other allowed <a href=#html-elements>HTML elements</a> are normal
   67392    elements.</dd>
   67393 
   67394   </dl><p><dfn id=syntax-tags title=syntax-tags>Tags</dfn> are used to delimit the start
   67395   and end of elements in the markup. <a href=#raw-text-elements title="raw text
   67396   elements">Raw text</a>, <a href=#rcdata-elements title="RCDATA
   67397   elements">RCDATA</a>, and <a href=#normal-elements title="normal
   67398   elements">normal</a> elements have a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> to indicate where they
   67399   begin, and an <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> to
   67400   indicate where they end. The start and end tags of certain
   67401   <a href=#normal-elements>normal elements</a> can be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>, as described
   67402   later. Those that cannot be omitted must not be omitted. <a href=#void-elements>Void
   67403   elements</a> only have a start tag; end tags must not be
   67404   specified for <a href=#void-elements>void elements</a>. <a href=#foreign-elements>Foreign
   67405   elements</a> must either have a start tag and an end tag, or a
   67406   start tag that is marked as self-closing, in which case they must
   67407   not have an end tag.</p>
   67408 
   67409   <p>The contents of the element must be placed between just after the
   67410   start tag (which <a href=#syntax-tag-omission title=syntax-tag-omission>might be implied,
   67411   in certain cases</a>) and just before the end tag (which again,
   67412   <a href=#syntax-tag-omission title=syntax-tag-omission>might be implied in certain
   67413   cases</a>). The exact allowed contents of each individual element
   67414   depends on the content model of that element, as described earlier
   67415   in this specification. Elements must not contain content that their
   67416   content model disallows. In addition to the restrictions placed on
   67417   the contents by those content models, however, the five types of
   67418   elements have additional <em>syntactic</em> requirements.</p>
   67419 
   67420   <p><a href=#void-elements>Void elements</a> can't have any contents (since there's
   67421   no end tag, no content can be put between the start tag and the end
   67422   tag).</p>
   67423 
   67424   <p><a href=#raw-text-elements>Raw text elements</a> can have <a href=#syntax-text title=syntax-text>text</a>, though it has <a href=#cdata-rcdata-restrictions>restrictions</a> described
   67425   below.</p>
   67426 
   67427   <p><a href=#rcdata-elements>RCDATA elements</a> can have <a href=#syntax-text title=syntax-text>text</a> and <a href=#syntax-charref title=syntax-charref>character references</a>, but the text
   67428   must not contain an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.
   67429   There are also <a href=#cdata-rcdata-restrictions>further
   67430   restrictions</a> described below.</p>
   67431 
   67432   <p><a href=#foreign-elements>Foreign elements</a> whose start tag is marked as
   67433   self-closing can't have any contents (since, again, as there's no
   67434   end tag, no content can be put between the start tag and the end
   67435   tag). <a href=#foreign-elements>Foreign elements</a> whose start tag is <em>not</em>
   67436   marked as self-closing can have <a href=#syntax-text title=syntax-text>text</a>, <a href=#syntax-charref title=syntax-charref>character references</a>, <a href=#syntax-cdata title=syntax-cdata>CDATA sections</a>, other <a href=#syntax-elements title=syntax-elements>elements</a>, and <a href=#syntax-comments title=syntax-comments>comments</a>, but the text must not
   67437   contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>
   67438 
   67439   <div class=note>
   67440 
   67441    <p>The HTML syntax does not support namespace
   67442    declarations, even in <a href=#foreign-elements>foreign elements</a>.</p>
   67443 
   67444    <p>For instance, consider the following HTML fragment:</p>
   67445 
   67446    <pre>&lt;p&gt;
   67447  &lt;svg&gt;
   67448   &lt;metadata&gt;
   67449    &lt;!-- this is invalid --&gt;
   67450    &lt;cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/&gt;
   67451   &lt;/metadata&gt;
   67452  &lt;/svg&gt;
   67453 &lt;/p&gt;</pre>
   67454 
   67455    <p>The innermost element, <code title="">cdr:license</code>, is
   67456    actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in
   67457    XML). In fact, as the comment in the fragment above says, the
   67458    fragment is actually non-conforming. This is because the SVG
   67459    specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p>
   67460 
   67461   </div>
   67462 
   67463   <p><a href=#normal-elements>Normal elements</a> can have <a href=#syntax-text title=syntax-text>text</a>, <a href=#syntax-charref title=syntax-charref>character references</a>, other <a href=#syntax-elements title=syntax-elements>elements</a>, and <a href=#syntax-comments title=syntax-comments>comments</a>, but the text must not
   67464   contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>. Some
   67465   <a href=#normal-elements>normal elements</a> also have <a href=#element-restrictions>yet more restrictions</a> on what
   67466   content they are allowed to hold, beyond the restrictions imposed by
   67467   the content model and those described in this paragraph. Those
   67468   restrictions are described below.</p>
   67469 
   67470   <p>Tags contain a <dfn id=syntax-tag-name title=syntax-tag-name>tag name</dfn>,
   67471   giving the element's name. HTML elements all have names that only
   67472   use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   67473   NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
   67474   Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER
   67475   Z. In the HTML syntax, tag names, even those for <a href=#foreign-elements>foreign
   67476   elements</a>, may be written with any mix of lower- and uppercase
   67477   letters that, when converted to all-lowercase, matches the element's
   67478   tag name; tag names are case-insensitive.</p>
   67479 
   67480 
   67481   <h5 id=start-tags><span class=secno>10.1.2.1 </span>Start tags</h5>
   67482 
   67483   <p><dfn id=syntax-start-tag title=syntax-start-tag>Start tags</dfn> must have the
   67484   following format:</p>
   67485 
   67486   <ol><li>The first character of a start tag must be a U+003C LESS-THAN
   67487    SIGN character (&lt;).</li>
   67488 
   67489    <li>The next few characters of a start tag must be the element's
   67490    <a href=#syntax-tag-name title=syntax-tag-name>tag name</a>.</li>
   67491 
   67492    <li>If there are to be any attributes in the next step, there must
   67493    first be one or more <a href=#space-character title="space character">space
   67494    characters</a>.</li>
   67495 
   67496    <li>Then, the start tag may have a number of attributes, the <a href=#syntax-attributes title=syntax-attributes>syntax for which</a> is described
   67497    below. Attributes may be separated from each other by one or more
   67498    <a href=#space-character title="space character">space characters</a>.</li>
   67499 
   67500    <li>After the attributes, or after the <a href=#syntax-tag-name title=syntax-tag-name>tag name</a> if there are no attributes,
   67501    there may be one or more <a href=#space-character title="space character">space
   67502    characters</a>. (Some attributes are required to be followed by
   67503    a space. See the <a href=#syntax-attributes title=syntax-attributes>attributes
   67504    section</a> below.)</li>
   67505 
   67506    <li>Then, if the element is one of the <a href=#void-elements>void elements</a>,
   67507    or if the element is a <a href=#foreign-elements title="foreign elements">foreign
   67508    element</a>, then there may be a single U+002F SOLIDUS character
   67509    (/). This character has no effect on <a href=#void-elements>void elements</a>,
   67510    but on <a href=#foreign-elements>foreign elements</a> it marks the start tag as
   67511    self-closing.</li>
   67512 
   67513    <li>Finally, start tags must be closed by a U+003E GREATER-THAN
   67514    SIGN character (&gt;).</li>
   67515 
   67516   </ol><h5 id=end-tags><span class=secno>10.1.2.2 </span>End tags</h5>
   67517 
   67518   <p><dfn id=syntax-end-tag title=syntax-end-tag>End tags</dfn> must have the
   67519   following format:</p>
   67520 
   67521   <ol><li>The first character of an end tag must be a U+003C LESS-THAN
   67522    SIGN character (&lt;).</li>
   67523 
   67524    <li>The second character of an end tag must be a U+002F SOLIDUS
   67525    character (/).</li>
   67526 
   67527    <li>The next few characters of an end tag must be the element's
   67528    <a href=#syntax-tag-name title=syntax-tag-name>tag name</a>.</li>
   67529 
   67530    <li>After the tag name, there may be one or more <a href=#space-character title="space
   67531    character">space characters</a>.</li>
   67532 
   67533    <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN
   67534    character (&gt;).</li>
   67535 
   67536   </ol><h5 id=attributes-0><span class=secno>10.1.2.3 </span>Attributes</h5>
   67537 
   67538   <p><dfn id=syntax-attributes title=syntax-attributes>Attributes</dfn> for an element
   67539   are expressed inside the element's start tag.</p>
   67540 
   67541   <p>Attributes have a name and a value. <dfn id=syntax-attribute-name title=syntax-attribute-name>Attribute names</dfn> must consist of
   67542   one or more characters other than the <a href=#space-character title="space
   67543   character">space characters</a>, U+0000 NULL, U+0022 QUOTATION
   67544   MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN
   67545   (&gt;), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters,
   67546   the control characters, and any characters that are not defined by
   67547   Unicode. In the HTML syntax, attribute names, even those for
   67548   <a href=#foreign-elements>foreign elements</a>, may be written with any mix of lower-
   67549   and uppercase letters that are an <a href=#ascii-case-insensitive>ASCII
   67550   case-insensitive</a> match for the attribute's name.</p>
   67551 
   67552   <p><dfn id=syntax-attribute-value title=syntax-attribute-value>Attribute values</dfn> are a
   67553   mixture of <a href=#syntax-text title=syntax-text>text</a> and <a href=#syntax-charref title=syntax-charref>character references</a>, except with the
   67554   additional restriction that the text cannot contain an <a href=#syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>
   67555 
   67556   <p>Attributes can be specified in four different ways:</p>
   67557 
   67558   <dl><dt>Empty attribute syntax</dt>
   67559 
   67560    <dd>
   67561 
   67562     <p>Just the <a href=#syntax-attribute-name title=syntax-attribute-name>attribute
   67563     name</a>. The value is implicitly the empty string.</p>
   67564 
   67565     <div class=example>
   67566 
   67567      <p>In the following example, the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is given with
   67568      the empty attribute syntax:</p>
   67569 
   67570      <pre>&lt;input <em>disabled</em>&gt;</pre>
   67571 
   67572     </div>
   67573 
   67574     <p>If an attribute using the empty attribute syntax is to be
   67575     followed by another attribute, then there must be a <a href=#space-character>space
   67576     character</a> separating the two.</p>
   67577 
   67578    </dd>
   67579 
   67580    <dt id=unquoted>Unquoted attribute value syntax</dt>
   67581 
   67582    <dd>
   67583 
   67584     <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
   67585     followed by zero or more <a href=#space-character title="space character">space
   67586     characters</a>, followed by a single U+003D EQUALS SIGN
   67587     character, followed by zero or more <a href=#space-character title="space
   67588     character">space characters</a>, followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
   67589     addition to the requirements given above for attribute values,
   67590     must not contain any literal <a href=#space-character title="space character">space
   67591     characters</a>, any U+0022 QUOTATION MARK characters ("),
   67592     U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN
   67593     characters (=), U+003C LESS-THAN SIGN characters (&lt;), U+003E
   67594     GREATER-THAN SIGN characters (&gt;), or U+0060 GRAVE ACCENT
   67595     characters (`), and must not be the empty string.</p>
   67596 
   67597     <!-- The ` character is in this list on a temporary basis, waiting
   67598          for IE to fix it's parsing bug whereby it treats ` as an
   67599          attribute value delimiter. Otherwise, escaping software that
   67600          tries to be clever and not use quotes when it doesn't need to
   67601          could be tricked by an attacker.
   67602 
   67603          Posit a site that allows the user to input text that is used
   67604          verbatim in two attributes, such that the user can set the
   67605          first attribute's value to:
   67606 
   67607             `
   67608 
   67609          ...and the second to:
   67610 
   67611             ` onload='...payload...' end=x
   67612 
   67613          ...with the assumption that the site is going to not quote
   67614          the first one, and quote the second one with double quotes:
   67615 
   67616             <body title=` class="` onload='...payload...' end=x">
   67617 
   67618          In IE, this is treated as:
   67619 
   67620             <body title=' class="'
   67621                   onload='...payload...'
   67622                   end='x"'>
   67623 
   67624     -->
   67625 
   67626 
   67627     <div class=example>
   67628 
   67629      <p>In the following example, the <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute is given
   67630      with the unquoted attribute value syntax:</p>
   67631 
   67632      <pre>&lt;input <em>value=yes</em>&gt;</pre>
   67633 
   67634     </div>
   67635 
   67636     <p>If an attribute using the unquoted attribute syntax is to be
   67637     followed by another attribute or by the optional U+002F SOLIDUS
   67638     character (/) allowed in step 6 of the <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> syntax above, then there
   67639     must be a <a href=#space-character>space character</a> separating the two.</p>
   67640 
   67641    </dd>
   67642 
   67643    <dt>Single-quoted attribute value syntax</dt>
   67644 
   67645    <dd>
   67646 
   67647     <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
   67648     followed by zero or more <a href=#space-character title="space character">space
   67649     characters</a>, followed by a single U+003D EQUALS SIGN
   67650     character, followed by zero or more <a href=#space-character title="space
   67651     character">space characters</a>, followed by a single U+0027
   67652     APOSTROPHE character ('), followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
   67653     addition to the requirements given above for attribute values,
   67654     must not contain any literal U+0027 APOSTROPHE characters ('), and
   67655     finally followed by a second single U+0027 APOSTROPHE character
   67656     (').</p>
   67657 
   67658     <div class=example>
   67659 
   67660      <p>In the following example, the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is given with the
   67661      single-quoted attribute value syntax:</p>
   67662 
   67663      <pre>&lt;input <em>type='checkbox'</em>&gt;</pre>
   67664 
   67665     </div>
   67666 
   67667     <p>If an attribute using the single-quoted attribute syntax is to
   67668     be followed by another attribute, then there must be a <a href=#space-character>space
   67669     character</a> separating the two.</p>
   67670 
   67671    </dd>
   67672 
   67673    <dt>Double-quoted attribute value syntax</dt>
   67674 
   67675    <dd>
   67676 
   67677     <p>The <a href=#syntax-attribute-name title=syntax-attribute-name>attribute name</a>,
   67678     followed by zero or more <a href=#space-character title="space character">space
   67679     characters</a>, followed by a single U+003D EQUALS SIGN
   67680     character, followed by zero or more <a href=#space-character title="space
   67681     character">space characters</a>, followed by a single U+0022
   67682     QUOTATION MARK character ("), followed by the <a href=#syntax-attribute-value title=syntax-attribute-value>attribute value</a>, which, in
   67683     addition to the requirements given above for attribute values,
   67684     must not contain any literal U+0022 QUOTATION MARK characters ("),
   67685     and finally followed by a second single U+0022 QUOTATION MARK
   67686     character (").</p>
   67687 
   67688     <div class=example>
   67689 
   67690      <p>In the following example, the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute is given with the
   67691      double-quoted attribute value syntax:</p>
   67692 
   67693      <pre>&lt;input <em>name="be evil"</em>&gt;</pre>
   67694 
   67695     </div>
   67696 
   67697     <p>If an attribute using the double-quoted attribute syntax is to
   67698     be followed by another attribute, then there must be a <a href=#space-character>space
   67699     character</a> separating the two.</p>
   67700 
   67701    </dd>
   67702 
   67703   </dl><p>There must never be two or more attributes on the same start tag
   67704   whose names are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   67705   each other.</p>
   67706 
   67707   <hr><p>When a <a href=#foreign-elements title="foreign elements">foreign element</a> has
   67708   one of the namespaced attributes given by the local name and
   67709   namespace of the first and second cells of a row from the following
   67710   table, it must be written using the name given by the third cell
   67711   from the same row.</p>
   67712 
   67713   <table><thead><tr><th> Local name <th> Namespace <th> Attribute name
   67714    <tbody><tr><td> <code title="">actuate</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:actuate</code>
   67715     <tr><td> <code title="">arcrole</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:arcrole</code>
   67716     <tr><td> <code title="">href</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:href</code>
   67717     <tr><td> <code title="">role</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:role</code>
   67718     <tr><td> <code title="">show</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:show</code>
   67719     <tr><td> <code title="">title</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:title</code>
   67720     <tr><td> <code title="">type</code> <td> <a href=#xlink-namespace>XLink namespace</a> <td> <code title="">xlink:type</code>
   67721     <tr><td> <code title="">base</code> <td> <a href=#xml-namespace>XML namespace</a> <!-- attr-xml-base --> <td> <code title="">xml:base</code>
   67722     <tr><td> <code title="">lang</code> <td> <a href=#xml-namespace>XML namespace</a> <td> <code title="">xml:lang</code>
   67723     <tr><td> <code title="">space</code> <td> <a href=#xml-namespace>XML namespace</a> <td> <code title="">xml:space</code>
   67724     <tr><td> <code title="">xmlns</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a> <td> <code title="">xmlns</code>
   67725     <tr><td> <code title="">xlink</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a> <td> <code title="">xmlns:xlink</code>
   67726   </table><p>No other namespaced attribute can be expressed in <a href=#syntax>the
   67727   HTML syntax</a>.</p>
   67728 
   67729 
   67730   <h5 id=optional-tags><span class=secno>10.1.2.4 </span>Optional tags</h5>
   67731 
   67732   <p>Certain tags can be <dfn id=syntax-tag-omission title=syntax-tag-omission>omitted</dfn>.</p>
   67733 
   67734   <p class=note>Omitting an element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> does not mean the element
   67735   is not present; it is implied, but it is still there. An HTML
   67736   document always has a root <code><a href=#the-html-element-0>html</a></code> element, even if the
   67737   string <code title="">&lt;html&gt;</code> doesn't appear anywhere in
   67738   the markup.</p>
   67739 
   67740   <!-- <html> -->
   67741   <p>An <code><a href=#the-html-element-0>html</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
   67742   first thing inside the <code><a href=#the-html-element-0>html</a></code> element is not a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
   67743 
   67744   <!-- </html> -->
   67745   <p>An <code><a href=#the-html-element-0>html</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67746   tag</a> may be omitted if the <code><a href=#the-html-element-0>html</a></code> element is not
   67747   immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
   67748 
   67749   <!-- <head> -->
   67750   <p>A <code><a href=#the-head-element-0>head</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
   67751   element is empty, or if the first thing inside the
   67752   <code><a href=#the-head-element-0>head</a></code> element is an element.</p>
   67753 
   67754   <!-- </head> -->
   67755   <p>A <code><a href=#the-head-element-0>head</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67756   tag</a> may be omitted if the <code><a href=#the-head-element-0>head</a></code> element is not
   67757   immediately followed by a <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
   67758 
   67759   <!-- <body> -->
   67760   <p>A <code><a href=#the-body-element-0>body</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
   67761   element is empty, or if the first thing inside the <code><a href=#the-body-element-0>body</a></code>
   67762   element is not a <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>, except if the first thing
   67763   inside the <code><a href=#the-body-element-0>body</a></code> element is a <code><a href=#script>script</a></code> or
   67764   <code><a href=#the-style-element>style</a></code> element. <!-- Note that even if the </head> end
   67765   tag is present, the parser makes <style> and <script> elements
   67766   between </head> and <body> end up in the <head> instead of implying
   67767   the <body> --></p>
   67768 
   67769   <!-- </body> -->
   67770   <p>A <code><a href=#the-body-element-0>body</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67771   tag</a> may be omitted if the <code><a href=#the-body-element-0>body</a></code> element is not
   67772   immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
   67773 
   67774   <!-- </li> -->
   67775   <p>A <code><a href=#the-li-element>li</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67776   tag</a> may be omitted if the <code><a href=#the-li-element>li</a></code> element is
   67777   immediately followed by another <code><a href=#the-li-element>li</a></code> element or if there
   67778   is no more content in the parent element.</p>
   67779 
   67780   <!-- </dt> -->
   67781   <p>A <code><a href=#the-dt-element>dt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67782   tag</a> may be omitted if the <code><a href=#the-dt-element>dt</a></code> element is
   67783   immediately followed by another <code><a href=#the-dt-element>dt</a></code> element or a
   67784   <code><a href=#the-dd-element>dd</a></code> element.</p>
   67785 
   67786   <!-- </dd> -->
   67787   <p>A <code><a href=#the-dd-element>dd</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67788   tag</a> may be omitted if the <code><a href=#the-dd-element>dd</a></code> element is
   67789   immediately followed by another <code><a href=#the-dd-element>dd</a></code> element or a
   67790   <code><a href=#the-dt-element>dt</a></code> element, or if there is no more content in the
   67791   parent element.</p>
   67792 
   67793   <!-- </p> -->
   67794   <p>A <code><a href=#the-p-element>p</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67795   tag</a> may be omitted if the <code><a href=#the-p-element>p</a></code> element is
   67796   immediately followed by an <code><a href=#the-address-element>address</a></code>,
   67797   <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-blockquote-element>blockquote</a></code>,
   67798   <!--v2DATAGRID <code>datagrid</code>,--> <code><a href=#dir>dir</a></code>,
   67799   <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
   67800   <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
   67801   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
   67802   <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>,
   67803   <code><a href=#the-hr-element>hr</a></code>, <code><a href=#menus>menu</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   67804   <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
   67805   <code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
   67806   element, or if there is no more content in the parent element and
   67807   the parent element is not an <code><a href=#the-a-element>a</a></code> element.</p>
   67808 
   67809   <!-- </rt> -->
   67810   <p>An <code><a href=#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67811   tag</a> may be omitted if the <code><a href=#the-rt-element>rt</a></code> element is
   67812   immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code>
   67813   element, or if there is no more content in the parent element.</p>
   67814 
   67815   <!-- </rp> -->
   67816   <p>An <code><a href=#the-rp-element>rp</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67817   tag</a> may be omitted if the <code><a href=#the-rp-element>rp</a></code> element is
   67818   immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code>
   67819   element, or if there is no more content in the parent element.</p>
   67820 
   67821   <!-- </optgroup> (the text assumes <optgroup> can only be inside a
   67822   <select>; commented out text below can handle the non-<select> case
   67823   if we ever allow it) -->
   67824   <p>An <code><a href=#the-optgroup-element>optgroup</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
   67825   <code><a href=#the-optgroup-element>optgroup</a></code> element <!--has an ancestor
   67826   <code>select</code> element and--> is immediately followed by
   67827   another <code><a href=#the-optgroup-element>optgroup</a></code> element, or if <!--all of the elements
   67828   that are ancestors of the <code>optgroup</code> element, up to and
   67829   including the first ancestor element that is not an
   67830   <code>optgroup</code> element, have no more content--> there is no
   67831   more content in the parent element.</p>
   67832   <!-- so e.g. the max number of </optgroup>s are omitted here:
   67833    <select><optgroup></select>
   67834    <p id=x><optgroup></optgroup>x</p>
   67835    <p id=x><optgroup><optgroup></optgroup></optgroup>x</p>
   67836    <p><optgroup id=x><optgroup></optgroup>x</p>
   67837    <p><optgroup><optgroup id=x>x</p>
   67838   -->
   67839 
   67840   <!-- </option> -->
   67841   <p>An <code><a href=#the-option-element>option</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67842   tag</a> may be omitted if the <code><a href=#the-option-element>option</a></code> element is
   67843   immediately followed by another <code><a href=#the-option-element>option</a></code> element, or if
   67844   it is immediately followed by an <code><a href=#the-optgroup-element>optgroup</a></code> element, or
   67845   if there is no more content in the parent element.</p>
   67846 
   67847   <!-- <colgroup> -->
   67848   <p>A <code><a href=#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
   67849   first thing inside the <code><a href=#the-colgroup-element>colgroup</a></code> element is a
   67850   <code><a href=#the-col-element>col</a></code> element, and if the element is not immediately
   67851   preceded by another <code><a href=#the-colgroup-element>colgroup</a></code> element whose <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> has been omitted. (It can't be
   67852   omitted if the element is empty.)</p>
   67853 
   67854   <!-- </colgroup> -->
   67855   <p>A <code><a href=#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
   67856   <code><a href=#the-colgroup-element>colgroup</a></code> element is not immediately followed by a
   67857   <a href=#space-character>space character</a> or a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
   67858 
   67859   <!-- </thead> -->
   67860   <p>A <code><a href=#the-thead-element>thead</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67861   tag</a> may be omitted if the <code><a href=#the-thead-element>thead</a></code> element is
   67862   immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> or <code><a href=#the-tfoot-element>tfoot</a></code>
   67863   element.</p>
   67864 
   67865   <!-- <tbody> -->
   67866   <p>A <code><a href=#the-tbody-element>tbody</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted if the
   67867   first thing inside the <code><a href=#the-tbody-element>tbody</a></code> element is a
   67868   <code><a href=#the-tr-element>tr</a></code> element, and if the element is not immediately
   67869   preceded by a <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
   67870   <code><a href=#the-tfoot-element>tfoot</a></code> element whose <a href=#syntax-end-tag title=syntax-end-tag>end
   67871   tag</a> has been omitted. (It can't be omitted if the element is
   67872   empty.)</p>
   67873 
   67874   <!-- </tbody> -->
   67875   <p>A <code><a href=#the-tbody-element>tbody</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67876   tag</a> may be omitted if the <code><a href=#the-tbody-element>tbody</a></code> element is
   67877   immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> or <code><a href=#the-tfoot-element>tfoot</a></code>
   67878   element, or if there is no more content in the parent element.</p>
   67879 
   67880   <!-- </tfoot> -->
   67881   <p>A <code><a href=#the-tfoot-element>tfoot</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67882   tag</a> may be omitted if the <code><a href=#the-tfoot-element>tfoot</a></code> element is
   67883   immediately followed by a <code><a href=#the-tbody-element>tbody</a></code> element, or if there is
   67884   no more content in the parent element.</p>
   67885 
   67886   <!-- </tr> -->
   67887   <p>A <code><a href=#the-tr-element>tr</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67888   tag</a> may be omitted if the <code><a href=#the-tr-element>tr</a></code> element is
   67889   immediately followed by another <code><a href=#the-tr-element>tr</a></code> element, or if there
   67890   is no more content in the parent element.</p>
   67891 
   67892   <!-- </td> -->
   67893   <p>A <code><a href=#the-td-element>td</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67894   tag</a> may be omitted if the <code><a href=#the-td-element>td</a></code> element is
   67895   immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code>
   67896   element, or if there is no more content in the parent element.</p>
   67897 
   67898   <!-- </th> -->
   67899   <p>A <code><a href=#the-th-element>th</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
   67900   tag</a> may be omitted if the <code><a href=#the-th-element>th</a></code> element is
   67901   immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code>
   67902   element, or if there is no more content in the parent element.</p>
   67903 
   67904   <p><strong>However</strong>, a <a href=#syntax-start-tag title=syntax-start-tag>start
   67905   tag</a> must never be omitted if it has any attributes.</p>
   67906 
   67907 
   67908   <h5 id=element-restrictions><span class=secno>10.1.2.5 </span>Restrictions on content models</h5>
   67909 
   67910   <p>For historical reasons, certain elements have extra restrictions
   67911   beyond even the restrictions given by their content model.</p>
   67912 
   67913   <p>A <code><a href=#the-table-element>table</a></code> element must not contain <code><a href=#the-tr-element>tr</a></code>
   67914   elements, even though these elements are technically allowed inside
   67915   <code><a href=#the-table-element>table</a></code> elements according to the content models
   67916   described in this specification. (If a <code><a href=#the-tr-element>tr</a></code> element is
   67917   put inside a <code><a href=#the-table-element>table</a></code> in the markup, it will in fact imply
   67918   a <code><a href=#the-tbody-element>tbody</a></code> start tag before it.)</p>
   67919 
   67920   <p>A single <a href=#syntax-newlines title=syntax-newlines>newline</a> may be
   67921   placed immediately after the <a href=#syntax-start-tag title=syntax-start-tag>start
   67922   tag</a> of <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-textarea-element>textarea</a></code>
   67923   elements. This does not affect the processing of the element. The
   67924   otherwise optional <a href=#syntax-newlines title=syntax-newlines>newline</a>
   67925   <em>must</em> be included if the element's contents themselves start
   67926   with a <a href=#syntax-newlines title=syntax-newlines>newline</a> (because
   67927   otherwise the leading newline in the contents would be treated like
   67928   the optional newline, and ignored).</p>
   67929 
   67930   <div class=example>
   67931    <p>The following two <code><a href=#the-pre-element>pre</a></code> blocks are equivalent:</p>
   67932    <pre>&lt;pre&gt;Hello&lt;/pre&gt;</pre>
   67933    <pre>&lt;pre&gt;<br>Hello&lt;/pre&gt;</pre>
   67934   </div>
   67935 
   67936 
   67937   <h5 id=cdata-rcdata-restrictions><span class=secno>10.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</h5>
   67938 
   67939   <p>The text in <a href=#raw-text-elements title="raw text elements">raw text</a> and
   67940   <a href=#rcdata-elements>RCDATA elements</a> must not contain any occurrences of the
   67941   string "<code title="">&lt;/</code>" (U+003C LESS-THAN SIGN, U+002F
   67942   SOLIDUS) followed by characters that case-insensitively match the
   67943   tag name of the element followed by one of U+0009 CHARACTER
   67944   TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D
   67945   CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (&gt;), or
   67946   U+002F SOLIDUS (/).</p>
   67947 
   67948 
   67949   <h4 id=text-1><span class=secno>10.1.3 </span>Text</h4>
   67950 
   67951   <p><dfn id=syntax-text title=syntax-text>Text</dfn> is allowed inside elements,
   67952   attributes, and comments. Text must consist of Unicode characters.
   67953   Text must not contain U+0000 characters. Text must not contain
   67954   permanently undefined Unicode characters (noncharacters). Text must
   67955   not contain control characters other than <a href=#space-character title="space
   67956   character">space characters</a>. Extra constraints are placed on
   67957   what is and what is not allowed in text based on where the text is
   67958   to be put, as described in the other sections.</p>
   67959 
   67960 
   67961   <h5 id=newlines><span class=secno>10.1.3.1 </span>Newlines</h5>
   67962 
   67963   <p><dfn id=syntax-newlines title=syntax-newlines>Newlines</dfn> in HTML may be
   67964   represented either as U+000D CARRIAGE RETURN (CR) characters, U+000A
   67965   LINE FEED (LF) characters, or pairs of U+000D CARRIAGE RETURN (CR),
   67966   U+000A LINE FEED (LF) characters in that order.</p>
   67967 
   67968   <p>Where <a href=#syntax-charref title=syntax-charref>character references</a>
   67969   are allowed, a character reference of a U+000A LINE FEED (LF)
   67970   character (but not a U+000D CARRIAGE RETURN (CR) character) also
   67971   represents a <a href=#syntax-newlines title=syntax-newlines>newline</a>.</p>
   67972 
   67973 
   67974   <h4 id=character-references><span class=secno>10.1.4 </span>Character references</h4>
   67975 
   67976   <p>In certain cases described in other sections, <a href=#syntax-text title=syntax-text>text</a> may be mixed with <dfn id=syntax-charref title=syntax-charref>character references</dfn>. These can be used
   67977   to escape characters that couldn't otherwise legally be included in
   67978   <a href=#syntax-text title=syntax-text>text</a>.</p>
   67979 
   67980   <p>Character references must start with a U+0026 AMPERSAND character
   67981   (&amp;). Following this, there are three possible kinds of character
   67982   references:</p>
   67983 
   67984   <dl><dt>Named character references</dt>
   67985 
   67986    <dd>The ampersand must be followed by one of the names given in the
   67987    <a href=#named-character-references>named character references</a> section, using the same
   67988    case. <span class=impl>The name must be one that is terminated by
   67989    a U+003B SEMICOLON character (;).</span></dd>
   67990 
   67991 
   67992    <dt>Decimal numeric character reference</dt>
   67993 
   67994    <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   67995    character (#), followed by one or more digits in the range U+0030
   67996    DIGIT ZERO (0) to U+0039 DIGIT NINE (9), representing a base-ten
   67997    integer that corresponds to a Unicode code point that is allowed
   67998    according to the definition below. The digits must then be followed
   67999    by a U+003B SEMICOLON character (;).</dd>
   68000 
   68001 
   68002    <dt>Hexadecimal numeric character reference</dt>
   68003 
   68004    <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
   68005    character (#), which must be followed by either a U+0078 LATIN
   68006    SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
   68007    character (X), which must then be followed by one or more digits in
   68008    the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061
   68009    LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041
   68010    LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F,
   68011    representing a base-sixteen integer that corresponds to a Unicode
   68012    code point that is allowed according to the definition below. The
   68013    digits must then be followed by a U+003B SEMICOLON character
   68014    (;).</dd>
   68015 
   68016   </dl><p>The numeric character reference forms described above are allowed
   68017   to reference any Unicode code point other than U+0000, U+000D,
   68018   permanently undefined Unicode characters (noncharacters), and
   68019   control characters other than <a href=#space-character title="space character">space
   68020   characters</a>.</p>
   68021 
   68022   <p>An <dfn id=syntax-ambiguous-ampersand title=syntax-ambiguous-ampersand>ambiguous
   68023   ampersand</dfn> is a U+0026 AMPERSAND character (&amp;) that is
   68024   followed by one or more characters in the range U+0030 DIGIT ZERO
   68025   (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A
   68026   LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A
   68027   LATIN CAPITAL LETTER Z, followed by a U+003B SEMICOLON character
   68028   (;), where these characters do not match any of the names given in
   68029   the <a href=#named-character-references>named character references</a> section.</p>
   68030 
   68031 
   68032   <h4 id=cdata-sections><span class=secno>10.1.5 </span>CDATA sections</h4>
   68033 
   68034   <p><dfn id=syntax-cdata title=syntax-cdata>CDATA sections</dfn> must start with
   68035   the character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
   68036   MARK, U+005B LEFT SQUARE BRACKET, U+0043 LATIN CAPITAL LETTER C,
   68037   U+0044 LATIN CAPITAL LETTER D, U+0041 LATIN CAPITAL LETTER A, U+0054
   68038   LATIN CAPITAL LETTER T, U+0041 LATIN CAPITAL LETTER A, U+005B LEFT
   68039   SQUARE BRACKET (<code title="">&lt;![CDATA[</code>). Following this
   68040   sequence, the CDATA section may have <a href=#syntax-text title=syntax-text>text</a>, with the additional restriction
   68041   that the text must not contain the three character sequence U+005D
   68042   RIGHT SQUARE BRACKET, U+005D RIGHT SQUARE BRACKET, U+003E
   68043   GREATER-THAN SIGN (<code title="">]]&gt;</code>). Finally, the CDATA
   68044   section must be ended by the three character sequence U+005D RIGHT
   68045   SQUARE BRACKET, U+005D RIGHT SQUARE BRACKET, U+003E GREATER-THAN
   68046   SIGN (<code title="">]]&gt;</code>).</p>
   68047 
   68048   <div class=example>
   68049 
   68050    <p>CDATA sections can only be used in foreign content (MathML or
   68051    SVG). In this example, a CDATA section is used to escape the
   68052    contents of an <code>ms</code> element:</p>
   68053 
   68054    <pre>&lt;p&gt;You can add a string to a number, but this stringifies the number:&lt;/p&gt;
   68055 &lt;math&gt;
   68056  &lt;ms&gt;&lt;![CDATA[x&lt;y]]&gt;&lt;/ms&gt;
   68057  &lt;mo&gt;+&lt;/mo&gt;
   68058  &lt;mn&gt;3&lt;/mn&gt;
   68059  &lt;mo&gt;=&lt;/mo&gt;
   68060  &lt;ms&gt;&lt;![CDATA[x&lt;y3]]&gt;&lt;/ms&gt;
   68061 &lt;/math&gt;</pre>
   68062 
   68063   </div>
   68064 
   68065 
   68066   <h4 id=comments><span class=secno>10.1.6 </span>Comments</h4>
   68067 
   68068   <p><dfn id=syntax-comments title=syntax-comments>Comments</dfn> must start with the
   68069   four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
   68070   MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code title="">&lt;!--</code>). Following this sequence, the comment may
   68071   have <a href=#syntax-text title=syntax-text>text</a>, with the additional
   68072   restriction that the text must not start with a single U+003E
   68073   GREATER-THAN SIGN character (&gt;), nor start with a U+002D
   68074   HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN
   68075   (&gt;) character, nor contain two consecutive U+002D HYPHEN-MINUS
   68076   characters (<code title="">--</code>), nor end with a U+002D
   68077   HYPHEN-MINUS character (-). Finally, the comment must be ended by
   68078   the three character sequence U+002D HYPHEN-MINUS, U+002D
   68079   HYPHEN-MINUS, U+003E GREATER-THAN SIGN (<code title="">--&gt;</code>).</p>
   68080 
   68081 
   68082   <div class=impl>
   68083 
   68084   <h3 id=parsing><span class=secno>10.2 </span>Parsing HTML documents</h3>
   68085 
   68086   <p><i>This section only applies to user agents, data mining tools,
   68087   and conformance checkers.</i></p>
   68088 
   68089   <p class=note>The rules for parsing XML documents into DOM trees
   68090   are covered by the next section, entitled "<a href=#the-xhtml-syntax>The XHTML
   68091   syntax</a>".</p>
   68092 
   68093   <p>For <a href=#html-documents>HTML documents</a>, user agents must use the parsing
   68094   rules described in this section to generate the DOM trees. Together,
   68095   these rules define what is referred to as the <dfn id=html-parser>HTML
   68096   parser</dfn>.</p>
   68097 
   68098   <div class=note>
   68099 
   68100    <p>While the HTML syntax described in this specification bears a
   68101    close resemblance to SGML and XML, it is a separate language with
   68102    its own parsing rules.</p>
   68103 
   68104    <p>Some earlier versions of HTML (in particular from HTML2 to
   68105    HTML4) were based on SGML and used SGML parsing rules. However, few
   68106    (if any) web browsers ever implemented true SGML parsing for HTML
   68107    documents; the only user agents to strictly handle HTML as an SGML
   68108    application have historically been validators. The resulting
   68109    confusion &mdash; with validators claiming documents to have one
   68110    representation while widely deployed Web browsers interoperably
   68111    implemented a different representation &mdash; has wasted decades
   68112    of productivity. This version of HTML thus returns to a non-SGML
   68113    basis.</p>
   68114 
   68115    <p>Authors interested in using SGML tools in their authoring
   68116    pipeline are encouraged to use XML tools and the XML serialization
   68117    of HTML.</p>
   68118 
   68119   </div>
   68120 
   68121   <p>This specification defines the parsing rules for HTML documents,
   68122   whether they are syntactically correct or not. Certain points in the
   68123   parsing algorithm are said to be <dfn id=parse-error title="parse error">parse
   68124   errors</dfn>. The error handling for parse errors is well-defined:
   68125   user agents must either act as described below when encountering
   68126   such problems, or must abort processing at the first error that they
   68127   encounter for which they do not wish to apply the rules described
   68128   below.</p>
   68129 
   68130   <p>Conformance checkers must report at least one parse error
   68131   condition to the user if one or more parse error conditions exist in
   68132   the document and must not report parse error conditions if none
   68133   exist in the document. Conformance checkers may report more than one
   68134   parse error condition if more than one parse error condition exists
   68135   in the document. Conformance checkers are not required to recover
   68136   from parse errors.</p>
   68137 
   68138   <p class=note>Parse errors are only errors with the
   68139   <em>syntax</em> of HTML. In addition to checking for parse errors,
   68140   conformance checkers will also verify that the document obeys all
   68141   the other conformance requirements described in this
   68142   specification.</p>
   68143 
   68144   <p>For the purposes of conformance checkers, if a resource is
   68145   determined to be in <a href=#syntax>the HTML syntax</a>, then it is an
   68146   <a href=#html-documents title="HTML documents">HTML document</a>.</p>
   68147 
   68148   </div>
   68149 
   68150 
   68151   <div class=impl>
   68152 
   68153   <h4 id=overview-of-the-parsing-model><span class=secno>10.2.1 </span>Overview of the parsing model</h4>
   68154 
   68155   <p>The input to the HTML parsing process consists of a stream of
   68156   Unicode characters, which is passed through a
   68157   <a href=#tokenization>tokenization</a> stage followed by a <a href=#tree-construction>tree
   68158   construction</a> stage. The output is a <code><a href=#document>Document</a></code>
   68159   object.</p>
   68160 
   68161   <p class=note>Implementations that <a href=#non-scripted>do not
   68162   support scripting</a> do not have to actually create a DOM
   68163   <code><a href=#document>Document</a></code> object, but the DOM tree in such cases is
   68164   still used as the model for the rest of the specification.</p>
   68165 
   68166   <p>In the common case, the data handled by the tokenization stage
   68167   comes from the network, but <a href=#dynamic-markup-insertion title="dynamic markup
   68168   insertion">it can also come from script</a>, e.g. using the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API.</p>
   68169 
   68170   <p><img alt="" src=images/parsing-model-overview.png></p>
   68171 
   68172   <p id=nestedParsing>There is only one set of states for the
   68173   tokenizer stage and the tree construction stage, but the tree
   68174   construction stage is reentrant, meaning that while the tree
   68175   construction stage is handling one token, the tokenizer might be
   68176   resumed, causing further tokens to be emitted and processed before
   68177   the first token's processing is complete.</p>
   68178 
   68179   <div class=example>
   68180 
   68181    <p>In the following example, the tree construction stage will be
   68182    called upon to handle a "p" start tag token while handling the
   68183    "script" start tag token:</p>
   68184 
   68185    <pre>...
   68186 &lt;script&gt;
   68187  document.write('&lt;p&gt;');
   68188 &lt;/script&gt;
   68189 ...</pre>
   68190 
   68191   </div>
   68192 
   68193   <p>To handle these cases, parsers have a <dfn id=script-nesting-level>script nesting
   68194   level</dfn>, which must be initially set to zero, and a <dfn id=parser-pause-flag>parser
   68195   pause flag</dfn>, which must be initially set to false.</p>
   68196 
   68197   </div>
   68198 
   68199 
   68200   <div class=impl>
   68201 
   68202   <h4 id=the-input-stream><span class=secno>10.2.2 </span>The <dfn>input stream</dfn></h4>
   68203 
   68204   <p>The stream of Unicode characters that comprises the input to the
   68205   tokenization stage will be initially seen by the user agent as a
   68206   stream of bytes (typically coming over the network or from the local
   68207   file system). The bytes encode the actual characters according to a
   68208   particular <em>character encoding</em>, which the user agent must
   68209   use to decode the bytes into characters.</p>
   68210 
   68211   <p class=note>For XML documents, the algorithm user agents must
   68212   use to determine the character encoding is given by the XML
   68213   specification. This section does not apply to XML documents. <a href=#refsXML>[XML]</a></p>
   68214 
   68215 
   68216   <h5 id=determining-the-character-encoding><span class=secno>10.2.2.1 </span>Determining the character encoding</h5>
   68217 
   68218   <p>In some cases, it might be impractical to unambiguously determine
   68219   the encoding before parsing the document. Because of this, this
   68220   specification provides for a two-pass mechanism with an optional
   68221   pre-scan. Implementations are allowed, as described below, to apply
   68222   a simplified parsing algorithm to whatever bytes they have available
   68223   before beginning to parse the document. Then, the real parser is
   68224   started, using a tentative encoding derived from this pre-parse and
   68225   other out-of-band metadata. If, while the document is being loaded,
   68226   the user agent discovers an encoding declaration that conflicts with
   68227   this information, then the parser can get reinvoked to perform a
   68228   parse of the document with the real encoding.</p>
   68229 
   68230   <p id=documentEncoding>User agents must use the following
   68231   algorithm (the <dfn id=encoding-sniffing-algorithm>encoding sniffing algorithm</dfn>) to determine
   68232   the character encoding to use when decoding a document in the first
   68233   pass. This algorithm takes as input any out-of-band metadata
   68234   available to the user agent (e.g. the <a href=#content-type title=Content-Type>Content-Type metadata</a> of the document)
   68235   and all the bytes available so far, and returns an encoding and a
   68236   <dfn id=concept-encoding-confidence title=concept-encoding-confidence>confidence</dfn>. The
   68237   confidence is either <i>tentative</i>, <i>certain</i>, or
   68238   <i>irrelevant</i>. The encoding used, and whether the confidence in
   68239   that encoding is <i>tentative</i> or <i>certain</i>, is <a href=#meta-charset-during-parse>used during the parsing</a> to
   68240   determine whether to <a href=#change-the-encoding>change the encoding</a>. If no
   68241   encoding is necessary, e.g. because the parser is operating on a
   68242   stream of Unicode characters and doesn't have to use an encoding at
   68243   all, then the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
   68244   <i>irrelevant</i>.</p>
   68245 
   68246   <ol><li><p>If the transport layer specifies an encoding, and it is
   68247    supported, return that encoding with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68248    <i>certain</i>, and abort these steps.</li>
   68249 
   68250    <li><p>The user agent may wait for more bytes of the resource to be
   68251    available, either in this step or at any later step in this
   68252    algorithm. For instance, a user agent might wait 500ms or 512
   68253    bytes, whichever came first. In general preparsing the source to
   68254    find the encoding improves performance, as it reduces the need to
   68255    throw away the data structures used when parsing upon finding the
   68256    encoding information. However, if the user agent delays too long to
   68257    obtain data to determine the encoding, then the cost of the delay
   68258    could outweigh any performance improvements from the
   68259    preparse.</li>
   68260 
   68261    <li><p>For each of the rows in the following table, starting with
   68262    the first one and going down, if there are as many or more bytes
   68263    available than the number of bytes in the first column, and the
   68264    first bytes of the file match the bytes given in the first column,
   68265    then return the encoding given in the cell in the second column of
   68266    that row, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68267    <i>certain</i>, and abort these steps:</p>
   68268 
   68269     <!-- this table is present in several forms in this file; keep them in sync -->
   68270     <table><thead><tr><th>Bytes in Hexadecimal
   68271        <th>Encoding
   68272      <tbody><!-- nobody uses this
   68273       <tr>
   68274        <td>00 00 FE FF
   68275        <td>UTF-32BE
   68276       <tr>
   68277        <td>FF FE 00 00
   68278        <td>UTF-32LE
   68279 --><tr><td>FE FF
   68280        <td>UTF-16BE
   68281       <tr><td>FF FE
   68282        <td>UTF-16LE
   68283       <tr><td>EF BB BF
   68284        <td>UTF-8
   68285 <!-- nobody uses this
   68286       <tr>
   68287        <td>DD 73 66 73
   68288        <td>UTF-EBCDIC
   68289 -->
   68290     </table><p class=note>This step looks for Unicode Byte Order Marks
   68291    (BOMs).</li>
   68292 
   68293    <li><p>Otherwise, the user agent will have to search for explicit
   68294    character encoding information in the file itself. This should
   68295    proceed as follows:
   68296 
   68297     <p>Let <var title="">position</var> be a pointer to a byte in the
   68298     input stream, initially pointing at the first byte. If at any
   68299     point during these substeps the user agent either runs out of
   68300     bytes or decides that scanning further bytes would not be
   68301     efficient, then skip to the next step of the overall character
   68302     encoding detection algorithm. User agents may decide that scanning
   68303     <em>any</em> bytes is not efficient, in which case these substeps
   68304     are entirely skipped.</p>
   68305 
   68306     <p>Now, repeat the following "two" steps until the algorithm
   68307     aborts (either because user agent aborts, as described above, or
   68308     because a character encoding is found):</p>
   68309 
   68310     <ol><li><p>If <var title="">position</var> points to:</p>
   68311 
   68312       <dl class=switch><dt>A sequence of bytes starting with: 0x3C 0x21 0x2D 0x2D (ASCII '&lt;!--')</dt>
   68313        <dd>
   68314 
   68315         <p>Advance the <var title="">position</var> pointer so that it
   68316         points at the first 0x3E byte which is preceded by two 0x2D
   68317         bytes (i.e. at the end of an ASCII '--&gt;' sequence) and comes
   68318         after the 0x3C byte that was found. (The two 0x2D bytes can be
   68319         the same as the those in the '&lt;!--' sequence.)</p>
   68320 
   68321        </dd>
   68322 
   68323        <dt>A sequence of bytes starting with: 0x3C, 0x4D or 0x6D, 0x45 or 0x65, 0x54 or 0x74, 0x41 or 0x61, and finally one of 0x09, 0x0A, 0x0C, 0x0D, 0x20, 0x2F (case-insensitive ASCII '&lt;meta' followed by a space or slash)</dt>
   68324        <dd>
   68325 
   68326         <ol><li><p>Advance the <var title="">position</var> pointer so
   68327          that it points at the next 0x09, 0x0A, 0x0C, 0x0D, 0x20, or
   68328          0x2F byte (the one in sequence of characters matched
   68329          above).</li>
   68330 
   68331          <li><p>Let <var title="">attribute list</var> be an empty
   68332          list of strings.</li> <!-- so long as we only care about
   68333          http-equiv, content, and charset, this can be a 3-bit
   68334          bitfield -->
   68335 
   68336          <li><p>Let <var title="">got pragma</var> be false.</li>
   68337 
   68338          <li><p>Let <var title="">mode</var> be null.</li>
   68339 
   68340          <li><p>Let <var title="">charset</var> be the null value
   68341          (which, for the purposes of this algorithm, is distinct from
   68342          an unrecognised encoding or the empty string).</li>
   68343 
   68344          <li><p><i>Attributes</i>: <a href=#concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>Get an
   68345          attribute</a> and its value. If no attribute was sniffed,
   68346          then jump to the <i>processing</i> step below.</li>
   68347 
   68348          <li><p>If the attribute's name is already in <var title="">attribute list</var>, then return to the step
   68349          labeled <i>attributes</i>.</p>
   68350 
   68351          <li>
   68352 
   68353           <p>Run the appropriate step from the following list, if one
   68354           applies:</p>
   68355 
   68356           <dl class=switch><dt>If the attribute's name is "<code title="">http-equiv</code>"</dt>
   68357 
   68358            <dd><p>If the attribute's value is "<code title="">content-type</code>", then set <var title="">got
   68359            pragma</var> to true.</dd>
   68360 
   68361            <dt>If the attribute's name is "<code title="">charset</code>"</dt>
   68362 
   68363            <dd><p>If <var title="">charset</var> is still set to null,
   68364            let <var title="">charset</var> be the encoding
   68365            corresponding to the attribute's value, and set <var title="">mode</var> to "charset".</dd>
   68366 
   68367            <dt>If the attribute's name is "<code title="">content</code>"</dt>
   68368 
   68369            <dd><p>Apply the <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding
   68370            from a Content-Type</a>, giving the attribute's value as
   68371            the string to parse. If an encoding is returned, and if
   68372            <var title="">charset</var> is still set to null, let <var title="">charset</var> be the encoding returned, and set
   68373            <var title="">mode</var> to "pragma".</dd>
   68374 
   68375           </dl></li>
   68376 
   68377          <li><p>Return to the step labeled <i>attributes</i>.</li>
   68378 
   68379          <li><p><i>Processing</i>: If <var title="">mode</var> is
   68380          null, then jump to the second step of the overall "two step"
   68381          algorithm.</li>
   68382 
   68383          <li><p>If <var title="">mode</var> is "pragma" but <var title="">got pragma</var> is false, then jump to the second
   68384          step of the overall "two step" algorithm.</li>
   68385 
   68386          <li><p>If <var title="">charset</var> is a UTF-16 encoding,
   68387          change the value of <var title="">charset</var> to
   68388          UTF-8.</li>
   68389 
   68390          <li><p>If <var title="">charset</var> is not a supported
   68391          character encoding, then jump to the second step of the
   68392          overall "two step" algorithm.</li>
   68393 
   68394          <li><p>Return the encoding given by <var title="">charset</var>, with <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68395          <i>tentative</i>, and abort all these steps.</li>
   68396 
   68397         </ol></dd>
   68398 
   68399        <dt>A sequence of bytes starting with a 0x3C byte (ASCII &lt;), optionally a 0x2F byte (ASCII /), and finally a byte in the range 0x41-0x5A or 0x61-0x7A (an ASCII letter)</dt>
   68400        <dd>
   68401 
   68402         <ol><li><p>Advance the <var title="">position</var> pointer so
   68403          that it points at the next 0x09 (ASCII TAB), 0x0A (ASCII LF),
   68404          0x0C (ASCII FF), 0x0D (ASCII CR), 0x20 (ASCII space), or 0x3E
   68405          (ASCII &gt;) byte.</li>
   68406 
   68407          <li><p>Repeatedly <a href=#concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>get an
   68408          attribute</a> until no further attributes can be found,
   68409          then jump to the second step in the overall "two step"
   68410          algorithm.</li>
   68411 
   68412         </ol></dd>
   68413 
   68414        <dt>A sequence of bytes starting with: 0x3C 0x21 (ASCII '&lt;!')</dt>
   68415        <dt>A sequence of bytes starting with: 0x3C 0x2F (ASCII '&lt;/')</dt>
   68416        <dt>A sequence of bytes starting with: 0x3C 0x3F (ASCII '&lt;?')</dt>
   68417        <dd>
   68418 
   68419         <p>Advance the <var title="">position</var> pointer so that it
   68420         points at the first 0x3E byte (ASCII &gt;) that comes after the
   68421         0x3C byte that was found.</p>
   68422 
   68423        </dd>
   68424 
   68425        <dt>Any other byte</dt>
   68426        <dd>
   68427 
   68428         <p>Do nothing with that byte.</p>
   68429 
   68430        </dd>
   68431 
   68432       </dl></li>
   68433 
   68434      <li>Move <var title="">position</var> so it points at the next
   68435      byte in the input stream, and return to the first step of this
   68436      "two step" algorithm.</li>
   68437 
   68438     </ol><p>When the above "two step" algorithm says to <dfn id=concept-get-attributes-when-sniffing title=concept-get-attributes-when-sniffing>get an
   68439     attribute</dfn>, it means doing this:</p>
   68440 
   68441     <ol><li><p>If the byte at <var title="">position</var> is one of 0x09
   68442      (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII FF), 0x0D (ASCII CR),
   68443      0x20 (ASCII space), or 0x2F (ASCII /) then advance <var title="">position</var> to the next byte and redo this
   68444      substep.</li>
   68445 
   68446      <li><p>If the byte at <var title="">position</var> is 0x3E (ASCII
   68447      &gt;), then abort the "get an attribute" algorithm. There isn't
   68448      one.</li>
   68449 
   68450      <li><p>Otherwise, the byte at <var title="">position</var> is the
   68451      start of the attribute name. Let <var title="">attribute
   68452      name</var> and <var title="">attribute value</var> be the empty
   68453      string.</li>
   68454 
   68455      <li><p><i>Attribute name</i>: Process the byte at <var title="">position</var> as follows:</p>
   68456 
   68457       <dl class=switch><dt>If it is 0x3D (ASCII =), and the <var title="">attribute
   68458        name</var> is longer than the empty string</dt>
   68459 
   68460        <dd>Advance <var title="">position</var> to the next byte and
   68461        jump to the step below labeled <i>value</i>.</dd>
   68462 
   68463        <dt>If it is 0x09 (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII
   68464        FF), 0x0D (ASCII CR), or 0x20 (ASCII space)</dt>
   68465 
   68466        <dd>Jump to the step below labeled <i>spaces</i>.</dd>
   68467 
   68468        <dt>If it is 0x2F (ASCII /) or 0x3E (ASCII &gt;)</dt>
   68469 
   68470        <dd>Abort the "get an attribute" algorithm. The attribute's
   68471        name is the value of <var title="">attribute name</var>, its
   68472        value is the empty string.</dd>
   68473 
   68474        <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
   68475        Z)</dt>
   68476 
   68477        <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
   68478        name</var> (where <var title="">b</var> is the value of the
   68479        byte at <var title="">position</var>).</dd>
   68480 
   68481        <dt>Anything else</dt>
   68482 
   68483        <dd>Append the Unicode character with the same code point as the
   68484        value of the byte at <var title="">position</var>) to <var title="">attribute name</var>. (It doesn't actually matter how
   68485        bytes outside the ASCII range are handled here, since only
   68486        ASCII characters can contribute to the detection of a character
   68487        encoding.)</dd>
   68488 
   68489       </dl></li>
   68490 
   68491      <li><p>Advance <var title="">position</var> to the next byte and
   68492      return to the previous step.</li>
   68493 
   68494      <li><p><i>Spaces</i>: If the byte at <var title="">position</var> is one of 0x09 (ASCII TAB), 0x0A (ASCII
   68495      LF), 0x0C (ASCII FF), 0x0D (ASCII CR), or 0x20 (ASCII space) then
   68496      advance <var title="">position</var> to the next byte, then,
   68497      repeat this step.</li>
   68498 
   68499      <li><p>If the byte at <var title="">position</var> is
   68500      <em>not</em> 0x3D (ASCII =), abort the "get an attribute"
   68501      algorithm. The attribute's name is the value of <var title="">attribute name</var>, its value is the empty
   68502      string.</li>
   68503 
   68504      <li><p>Advance <var title="">position</var> past the 0x3D (ASCII
   68505      =) byte.</li>
   68506 
   68507      <li><p><i>Value</i>: If the byte at <var title="">position</var> is one of 0x09 (ASCII TAB), 0x0A (ASCII
   68508      LF), 0x0C (ASCII FF), 0x0D (ASCII CR), or 0x20 (ASCII space) then
   68509      advance <var title="">position</var> to the next byte, then,
   68510      repeat this step.</li>
   68511 
   68512      <li><p>Process the byte at <var title="">position</var> as
   68513      follows:</p>
   68514 
   68515       <dl class=switch><dt>If it is 0x22 (ASCII ") or 0x27 (ASCII ')</dt>
   68516 
   68517        <dd>
   68518 
   68519         <ol><li>Let <var title="">b</var> be the value of the byte at
   68520          <var title="">position</var>.</li>
   68521 
   68522          <li>Advance <var title="">position</var> to the next
   68523          byte.</li>
   68524 
   68525          <li>If the value of the byte at <var title="">position</var>
   68526          is the value of <var title="">b</var>, then advance <var title="">position</var> to the next byte and abort the "get
   68527          an attribute" algorithm. The attribute's name is the value of
   68528          <var title="">attribute name</var>, and its value is the
   68529          value of <var title="">attribute value</var>.</li>
   68530 
   68531          <li>Otherwise, if the value of the byte at <var title="">position</var> is in the range 0x41 (ASCII A) to
   68532          0x5A (ASCII Z), then append a Unicode character to <var title="">attribute value</var> whose code point is 0x20 more
   68533          than the value of the byte at <var title="">position</var>.</li>
   68534 
   68535          <li>Otherwise, append a Unicode character to <var title="">attribute value</var> whose code point is the same as
   68536          the value of the byte at <var title="">position</var>.</li>
   68537 
   68538          <li>Return to the second step in these substeps.</li>
   68539 
   68540         </ol></dd>
   68541 
   68542        <dt>If it is 0x3E (ASCII &gt;)</dt>
   68543 
   68544        <dd>Abort the "get an attribute" algorithm. The attribute's
   68545        name is the value of <var title="">attribute name</var>, its
   68546        value is the empty string.</dd>
   68547 
   68548 
   68549        <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
   68550        Z)</dt>
   68551 
   68552        <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
   68553        value</var> (where <var title="">b</var> is the value of the
   68554        byte at <var title="">position</var>). Advance <var title="">position</var> to the next byte.</dd>
   68555 
   68556        <dt>Anything else</dt>
   68557 
   68558        <dd>Append the Unicode character with the same code point as the
   68559        value of the byte at <var title="">position</var>) to <var title="">attribute value</var>. Advance <var title="">position</var> to the next byte.</dd>
   68560 
   68561       </dl></li>
   68562 
   68563      <li><p>Process the byte at <var title="">position</var> as
   68564      follows:</p>
   68565 
   68566       <dl class=switch><dt>If it is 0x09 (ASCII TAB), 0x0A (ASCII LF), 0x0C (ASCII
   68567        FF), 0x0D (ASCII CR), 0x20 (ASCII space), or 0x3E (ASCII
   68568        &gt;)</dt>
   68569 
   68570        <dd>Abort the "get an attribute" algorithm. The attribute's
   68571        name is the value of <var title="">attribute name</var> and its
   68572        value is the value of <var title="">attribute value</var>.</dd>
   68573 
   68574        <dt>If it is in the range 0x41 (ASCII A) to 0x5A (ASCII
   68575        Z)</dt>
   68576 
   68577        <dd>Append the Unicode character with code point <span title=""><var title="">b</var>+0x20</span> to <var title="">attribute
   68578        value</var> (where <var title="">b</var> is the value of the
   68579        byte at <var title="">position</var>).</dd>
   68580 
   68581        <dt>Anything else</dt>
   68582 
   68583        <dd>Append the Unicode character with the same code point as the
   68584        value of the byte at <var title="">position</var>) to <var title="">attribute value</var>.</dd>
   68585 
   68586       </dl></li>
   68587 
   68588      <li><p>Advance <var title="">position</var> to the next byte and
   68589      return to the previous step.</li>
   68590 
   68591     </ol><p>For the sake of interoperability, user agents should not use a
   68592     pre-scan algorithm that returns different results than the one
   68593     described above. (But, if you do, please at least let us know, so
   68594     that we can improve this algorithm and benefit everyone...)</p>
   68595 
   68596    </li>
   68597 
   68598    <li><p>If the user agent has information on the likely encoding for
   68599    this page, e.g. based on the encoding of the page when it was last
   68600    visited, then return that encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68601    <i>tentative</i>, and abort these steps.</li>
   68602 
   68603    <li>
   68604 
   68605     <p>The user agent may attempt to autodetect the character encoding
   68606     from applying frequency analysis or other algorithms to the data
   68607     stream. Such algorithms may use information about the resource
   68608     other than the resource's contents, including the address of the
   68609     resource. If autodetection succeeds in determining a character
   68610     encoding, then return that encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68611     <i>tentative</i>, and abort these steps. <a href=#refsUNIVCHARDET>[UNIVCHARDET]</a></p>
   68612 
   68613     <p class=note>The UTF-8 encoding has a highly detectable bit
   68614     pattern. Documents that contain bytes with values greater than
   68615     0x7F which match the UTF-8 pattern are very likely to be UTF-8,
   68616     while documents with byte sequences that do not match it are very
   68617     likely not. User-agents are therefore encouraged to search for
   68618     this common encoding. <a href=#refsPPUTF8>[PPUTF8]</a> <a href=#refsUTF8DET>[UTF8DET]</a></p>
   68619 
   68620    </li>
   68621 
   68622    <li>
   68623 
   68624     <p>Otherwise, return an implementation-defined or user-specified
   68625     default character encoding, with the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a>
   68626     <i>tentative</i>.</p>
   68627 
   68628     <p>In controlled environments or in environments where the
   68629     encoding of documents can be prescribed (for example, for user
   68630     agents intended for dedicated use in new networks), the
   68631     comprehensive <code title="">UTF-8</code> encoding is
   68632     suggested.</p>
   68633 
   68634     <p>In other environments, the default encoding is typically
   68635     dependent on the user's locale (an approximation of the languages,
   68636     and thus often encodings, of the pages that the user is likely to
   68637     frequent). The following table gives suggested defaults based on
   68638     the user's locale, for compatibility with legacy content. Locales
   68639     are identified by BCP 47 language tags. <a href=#refsBCP47>[BCP47]</a></p>
   68640 
   68641     <!-- based on mozilla 1.9.1 localizations:
   68642          http://mxr.mozilla.org/l10n-mozilla1.9.1/find?string=global%2Fintl.properties&tree=l10n-mozilla1.9.1&hint= -->
   68643 
   68644     <table><thead><tr><th>Locale language
   68645        <th>Suggested default encoding
   68646      <tbody><tr><td>ar
   68647        <td>UTF-8
   68648 
   68649       <tr><td>be
   68650        <td>ISO-8859-5
   68651 
   68652       <tr><td>bg
   68653        <td>windows-1251
   68654 
   68655       <tr><td>cs<!-- -CZ -->
   68656        <td>ISO-8859-2
   68657 
   68658       <tr><td>cy
   68659        <td>UTF-8
   68660 
   68661       <tr><td>fa<!-- -IR -->
   68662        <td>UTF-8
   68663 
   68664       <tr><td>he<!-- -IL -->
   68665        <td>windows-1255
   68666 
   68667       <tr><td>hr
   68668        <td>UTF-8
   68669 
   68670       <tr><td>hu<!-- -HU -->
   68671        <td>ISO-8859-2
   68672 
   68673       <tr><td>ja <!-- and ja-JP-mac -->
   68674        <td>Windows-31J <!-- Shift_JIS -->
   68675 
   68676       <tr><td>kk
   68677        <td>UTF-8
   68678 
   68679       <tr><td>ko<!-- -KR -->
   68680        <td>windows-949 <!-- EUC-KR -->
   68681 
   68682       <tr><td>ku
   68683        <td>windows-1254 <!-- ISO-8859-9 -->
   68684 
   68685       <tr><td>lt
   68686        <td>windows-1257
   68687 
   68688       <tr><td>lv<!-- -LV -->
   68689        <td>ISO-8859-13
   68690 
   68691       <tr><td>mk<!-- -MK -->
   68692        <td>UTF-8
   68693 
   68694       <tr><td>or
   68695        <td>UTF-8
   68696 
   68697       <tr><td>pl<!-- -PL -->
   68698        <td>ISO-8859-2
   68699 
   68700       <tr><td>ro
   68701        <td>UTF-8
   68702 
   68703       <tr><td>ru
   68704        <td>windows-1251
   68705 
   68706       <tr><td>sk
   68707        <td>windows-1250
   68708 
   68709       <tr><td>sl
   68710        <td>ISO-8859-2
   68711 
   68712       <tr><td>sr
   68713        <td>UTF-8
   68714 
   68715       <tr><td>th
   68716        <td>windows-874 <!-- TIS-620 -->
   68717 
   68718       <tr><td>tr<!-- -TR -->
   68719        <td>windows-1254 <!-- ISO-8859-9 -->
   68720 
   68721       <tr><td>uk
   68722        <td>windows-1251
   68723 
   68724       <tr><td>vi
   68725        <td>UTF-8
   68726 
   68727       <tr><td>zh-CN
   68728        <td>GB18030
   68729 
   68730       <tr><td>zh-TW
   68731        <td>Big5
   68732 
   68733       <tr><td>All other locales
   68734        <td>windows-1252
   68735 
   68736     </table></li>
   68737 
   68738   </ol><p>The <a href="#document's-character-encoding">document's character encoding</a> must immediately
   68739   be set to the value returned from this algorithm, at the same time
   68740   as the user agent uses the returned value to select the decoder to
   68741   use for the input stream.</p>
   68742 
   68743   <p class=note>This algorithm is a <a href=#willful-violation>willful violation</a>
   68744   of the HTTP specification, which requires that the encoding be
   68745   assumed to be ISO-8859-1 in the absence of a <a href=#character-encoding-declaration>character
   68746   encoding declaration</a> to the contrary, and of RFC 2046,
   68747   which requires that the encoding be assumed to be US-ASCII in the
   68748   absence of a <a href=#character-encoding-declaration>character encoding declaration</a> to the
   68749   contrary. This specification's third approach is motivated by a
   68750   desire to be maximally compatible with legacy content. <a href=#refsHTTP>[HTTP]</a> <a href=#refsRFC2046>[RFC2046]</a></p>
   68751 
   68752 
   68753   <h5 id=character-encodings-0><span class=secno>10.2.2.2 </span>Character encodings</h5>
   68754 
   68755   <p>User agents must at a minimum support the UTF-8 and Windows-1252
   68756   encodings, but may support more.</p>
   68757 
   68758   <p class=note>It is not unusual for Web browsers to support dozens
   68759   if not upwards of a hundred distinct character encodings.</p>
   68760 
   68761   <p>User agents must support the <a href=#preferred-mime-name>preferred MIME name</a> of
   68762   every character encoding they support, and should support all the
   68763   IANA-registered names and aliases of every character encoding they
   68764   support. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   68765 
   68766   <p>When comparing a string specifying a character encoding with the
   68767   name or alias of a character encoding to determine if they are
   68768   equal, user agents must remove any leading or trailing <a href=#space-character title="space character">space characters</a> in both names, and
   68769   then perform the comparison in an <a href=#ascii-case-insensitive>ASCII
   68770   case-insensitive</a> manner.</p>
   68771 
   68772   <hr><p>When a user agent would otherwise use an encoding given in the
   68773   first column of the following table to either convert content to
   68774   Unicode characters or convert Unicode characters to bytes, it must
   68775   instead use the encoding given in the cell in the second column of
   68776   the same row. When a byte or sequence of bytes is treated
   68777   differently due to this encoding aliasing, it is said to have been
   68778   <dfn id=misinterpreted-for-compatibility>misinterpreted for compatibility</dfn>.</p>
   68779 
   68780   <table><caption>Character encoding overrides</caption>
   68781    <thead><tr><th> Input encoding <th> Replacement encoding <th> References
   68782    <tbody><!-- how about EUC-JP? --><tr><td> EUC-KR <td> windows-949 <td>
   68783          <a href=#refsEUCKR>[EUCKR]</a>
   68784          <a href=#refsWIN949>[WIN949]</a>
   68785     <tr><td> GB2312 <td> GBK <td>
   68786          <a href=#refsRFC1345>[RFC1345]</a>
   68787          <a href=#refsGBK>[GBK]</a>
   68788     <tr><td> GB_2312-80 <td> GBK <td>
   68789          <a href=#refsRFC1345>[RFC1345]</a>
   68790          <a href=#refsGBK>[GBK]</a>
   68791     <tr><td> ISO-8859-1 <td> windows-1252 <td>
   68792          <a href=#refsRFC1345>[RFC1345]</a>
   68793          <a href=#refsWIN1252>[WIN1252]</a>
   68794     <tr><td> ISO-8859-9 <td> windows-1254 <td>
   68795          <a href=#refsRFC1345>[RFC1345]</a>
   68796          <a href=#refsWIN1254>[WIN1254]</a>
   68797     <tr><td> ISO-8859-11 <td> windows-874 <td>
   68798          <a href=#refsISO885911>[ISO885911]</a>
   68799          <a href=#refsWIN874>[WIN874]</a>
   68800     <tr><td> KS_C_5601-1987 <td> windows-949 <td>
   68801          <a href=#refsRFC1345>[RFC1345]</a>
   68802          <a href=#refsWIN949>[WIN949]</a>
   68803     <tr><td> Shift_JIS <td> Windows-31J <td>
   68804          <a href=#refsSHIFTJIS>[SHIFTJIS]</a>
   68805          <a href=#refsWIN31J>[WIN31J]</a>
   68806     <tr><td> TIS-620 <td> windows-874 <td>
   68807          <a href=#refsTIS620>[TIS620]</a>
   68808          <a href=#refsWIN874>[WIN874]</a>
   68809     <tr><td> US-ASCII <td> windows-1252 <td>
   68810          <a href=#refsRFC1345>[RFC1345]</a>
   68811          <a href=#refsWIN1252>[WIN1252]</a>
   68812    </table><p class=note>The requirement to treat certain encodings as other
   68813   encodings according to the table above is a <a href=#willful-violation>willful
   68814   violation</a> of the W3C Character Model specification, motivated
   68815   by a desire for compatibility with legacy content. <a href=#refsCHARMOD>[CHARMOD]</a></p>
   68816 
   68817   <p>When a user agent is to use the UTF-16 encoding but no BOM has
   68818   been found, user agents must default to UTF-16LE.</p>
   68819 
   68820   <p class=note>The requirement to default UTF-16 to LE rather than
   68821   BE is a <a href=#willful-violation>willful violation</a> of RFC 2781, motivated by a
   68822   desire for compatibility with legacy content. <a href=#refsRFC2781>[RFC2781]</a></p>
   68823 
   68824   <hr><p>User agents must not support the CESU-8, UTF-7, BOCU-1 and SCSU
   68825   encodings. <a href=#refsCESU8>[CESU8]</a> <a href=#refsUTF7>[UTF7]</a> <a href=#refsBOCU1>[BOCU1]</a> <a href=#refsSCSU>[SCSU]</a></p>
   68826 
   68827   <p>Support for encodings based on EBCDIC is not recommended. This
   68828   encoding is rarely used for publicly-facing Web content.</p>
   68829 
   68830   <p>Support for UTF-32 is not recommended. This encoding is rarely
   68831   used, and frequently implemented incorrectly.</p>
   68832 
   68833   <p class=note>This specification does not make any attempt to
   68834   support EBCDIC-based encodings and UTF-32 in its algorithms; support
   68835   and use of these encodings can thus lead to unexpected behavior in
   68836   implementations of this specification.</p>
   68837 
   68838 
   68839 
   68840   <h5 id=preprocessing-the-input-stream><span class=secno>10.2.2.3 </span>Preprocessing the input stream</h5>
   68841 
   68842   <p>Given an encoding, the bytes in the input stream must be
   68843   converted to Unicode characters for the tokenizer, as described by
   68844   the rules for that encoding, except that the leading U+FEFF BYTE
   68845   ORDER MARK character, if any, must not be stripped by the encoding
   68846   layer (it is stripped by the rule below).</p> <!-- this is to
   68847   prevent two leading BOMs from being both stripped, once by the
   68848   decoder, and once by the parser -->
   68849 
   68850   <p>Bytes or sequences of bytes in the original byte stream that
   68851   could not be converted to Unicode code points must be converted to
   68852   U+FFFD REPLACEMENT CHARACTERs.</p>
   68853 
   68854   <p class=note>Bytes or sequences of bytes in the original byte
   68855   stream that did not conform to the encoding specification
   68856   (e.g. invalid UTF-8 byte sequences in a UTF-8 input stream) are
   68857   errors that conformance checkers are expected to report.</p>
   68858 
   68859   <p>Any byte or sequence of bytes in the original byte stream that is
   68860   <a href=#misinterpreted-for-compatibility>misinterpreted for compatibility</a> is a <a href=#parse-error>parse
   68861   error</a>.</p>
   68862 
   68863   <p>One leading U+FEFF BYTE ORDER MARK character must be ignored if
   68864   any are present.</p>
   68865 
   68866   <p class=note>The requirement to strip a U+FEFF BYTE ORDER MARK
   68867   character regardless of whether that character was used to determine
   68868   the byte order is a <a href=#willful-violation>willful violation</a> of Unicode,
   68869   motivated by a desire to increase the resilience of user agents in
   68870   the face of na&iuml;ve transcoders.</p>
   68871 
   68872   <p>All U+0000 NULL characters and code points in the range U+D800 to
   68873   U+DFFF<!-- surrogates not allowed e.g. in UTF-8, and we don't want
   68874   them to suddenly turn into codepoints when they go through a UTF-16
   68875   pipe --> in the input must be replaced by U+FFFD REPLACEMENT
   68876   CHARACTERs. Any occurrences of such characters and code points are
   68877   <a href=#parse-error title="parse error">parse errors</a>.</p>
   68878 
   68879   <p>Any occurrences of any characters in the ranges U+0001 to U+0008,
   68880   <!-- HT, LF allowed --> <!-- U+000B is in the next list --> <!-- FF,
   68881   CR allowed --> U+000E to U+001F, <!-- ASCII allowed --> U+007F
   68882   <!--to U+0084, (U+0085 NEL not allowed), U+0086--> to U+009F, U+FDD0
   68883   to U+FDEF, and characters U+000B, U+FFFE, U+FFFF, U+1FFFE, U+1FFFF,
   68884   U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE,
   68885   U+5FFFF, U+6FFFE, U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF,
   68886   U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE,
   68887   U+CFFFF, U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF,
   68888   U+10FFFE, and U+10FFFF are <a href=#parse-error title="parse error">parse
   68889   errors</a>. These are all control characters or permanently
   68890   undefined Unicode characters (noncharacters).</p>
   68891 
   68892   <p>U+000D CARRIAGE RETURN (CR) characters and U+000A LINE FEED (LF)
   68893   characters are treated specially. Any CR characters that are
   68894   followed by LF characters must be removed, and any CR characters not
   68895   followed by LF characters must be converted to LF characters. Thus,
   68896   newlines in HTML DOMs are represented by LF characters, and there
   68897   are never any CR characters in the input to the
   68898   <a href=#tokenization>tokenization</a> stage.</p>
   68899 
   68900   <p>The <dfn id=next-input-character>next input character</dfn> is the first character in the
   68901   input stream that has not yet been <dfn id=consumed>consumed</dfn>. Initially,
   68902   the <i><a href=#next-input-character>next input character</a></i> is the first character in the
   68903   input. The <dfn id=current-input-character>current input character</dfn> is the last character
   68904   to have been <i><a href=#consumed>consumed</a></i>.</p>
   68905 
   68906   <p>The <dfn id=insertion-point>insertion point</dfn> is the position (just before a
   68907   character or just before the end of the input stream) where content
   68908   inserted using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> is actually
   68909   inserted. The insertion point is relative to the position of the
   68910   character immediately after it, it is not an absolute offset into
   68911   the input stream. Initially, the insertion point is
   68912   undefined.</p>
   68913 
   68914   <p>The "EOF" character in the tables below is a conceptual character
   68915   representing the end of the <a href=#the-input-stream>input stream</a>. If the parser
   68916   is a <a href=#script-created-parser>script-created parser</a>, then the end of the
   68917   <a href=#the-input-stream>input stream</a> is reached when an <dfn id=explicit-eof-character>explicit "EOF"
   68918   character</dfn> (inserted by the <code title=dom-document-close><a href=#dom-document-close>document.close()</a></code> method) is
   68919   consumed. Otherwise, the "EOF" character is not a real character in
   68920   the stream, but rather the lack of any further characters.</p>
   68921 
   68922 
   68923   <h5 id=changing-the-encoding-while-parsing><span class=secno>10.2.2.4 </span>Changing the encoding while parsing</h5>
   68924 
   68925   <p>When the parser requires the user agent to <dfn id=change-the-encoding>change the
   68926   encoding</dfn>, it must run the following steps. This might happen
   68927   if the <a href=#encoding-sniffing-algorithm>encoding sniffing algorithm</a> described above
   68928   failed to find an encoding, or if it found an encoding that was not
   68929   the actual encoding of the file.</p>
   68930 
   68931   <ol><li>If the new encoding is identical or equivalent to the encoding
   68932    that is already being used to interpret the input stream, then set
   68933    the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   68934    <i>certain</i> and abort these steps. This happens when the
   68935    encoding information found in the file matches what the
   68936    <a href=#encoding-sniffing-algorithm>encoding sniffing algorithm</a> determined to be the
   68937    encoding, and in the second pass through the parser if the first
   68938    pass found that the encoding sniffing algorithm described in the
   68939    earlier section failed to find the right encoding.</li>
   68940 
   68941    <li>If the encoding that is already being used to interpret the
   68942    input stream is a UTF-16 encoding, then set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   68943    <i>certain</i> and abort these steps. The new encoding is ignored;
   68944    if it was anything but the same encoding, then it would be clearly
   68945    incorrect.</li>
   68946 
   68947    <li>If the new encoding is a UTF-16 encoding, change it to
   68948    UTF-8.</li>
   68949 
   68950    <li>If all the bytes up to the last byte converted by the current
   68951    decoder have the same Unicode interpretations in both the current
   68952    encoding and the new encoding, and if the user agent supports
   68953    changing the converter on the fly, then the user agent may change
   68954    to the new converter for the encoding on the fly. Set the
   68955    <a href="#document's-character-encoding">document's character encoding</a> and the encoding used to
   68956    convert the input stream to the new encoding, set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   68957    <i>certain</i>, and abort these steps.</li>
   68958 
   68959    <li>Otherwise, <a href=#navigate>navigate</a> to the document again, with
   68960    <a href=#replacement-enabled>replacement enabled</a>, and using the same <a href=#source-browsing-context>source
   68961    browsing context</a>, but this time skip the <a href=#encoding-sniffing-algorithm>encoding
   68962    sniffing algorithm</a> and instead just set the encoding to the
   68963    new encoding and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   68964    <i>certain</i>. Whenever possible, this should be done without
   68965    actually contacting the network layer (the bytes should be
   68966    re-parsed from memory), even if, e.g., the document is marked as
   68967    not being cacheable. If this is not possible and contacting the
   68968    network layer would involve repeating a request that uses a method
   68969    other than HTTP GET (<a href=#concept-http-equivalent-get title=concept-http-equivalent-get>or
   68970    equivalent</a> for non-HTTP URLs), then instead set the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> to
   68971    <i>certain</i> and ignore the new encoding. The resource will be
   68972    misinterpreted. User agents may notify the user of the situation,
   68973    to aid in application development.</li>
   68974 
   68975   </ol></div>
   68976 
   68977 
   68978   <div class=impl>
   68979 
   68980   <h4 id=parse-state><span class=secno>10.2.3 </span>Parse state</h4>
   68981 
   68982   <h5 id=the-insertion-mode><span class=secno>10.2.3.1 </span>The insertion mode</h5>
   68983 
   68984   <p>The <dfn id=insertion-mode>insertion mode</dfn> is a state variable that controls
   68985   the primary operation of the tree construction stage.</p>
   68986 
   68987   <p>Initially, the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-initial-insertion-mode title="insertion mode: initial">initial</a>". It can change to
   68988   "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>",
   68989   "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>",
   68990   "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>", "<a href=#parsing-main-inheadnoscript title="insertion mode: in head noscript">in head noscript</a>",
   68991   "<a href=#the-after-head-insertion-mode title="insertion mode: after head">after head</a>", "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>", "<a href=#parsing-main-incdata title="insertion mode: text">text</a>",
   68992   "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>", "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table text</a>", "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>", "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>",
   68993   "<a href=#parsing-main-intbody title="insertion mode: in table body">in table body</a>",
   68994   "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>", "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>", "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>", "<a href=#parsing-main-inselectintable title="insertion mode: in select in table">in select in
   68995   table</a>", "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in
   68996   foreign content</a>", "<a href=#parsing-main-afterbody title="insertion mode: after
   68997   body">after body</a>", "<a href=#parsing-main-inframeset title="insertion mode: in
   68998   frameset">in frameset</a>", "<a href=#parsing-main-afterframeset title="insertion mode: after
   68999   frameset">after frameset</a>", "<a href=#the-after-after-body-insertion-mode title="insertion mode:
   69000   after after body">after after body</a>", and "<a href=#the-after-after-frameset-insertion-mode title="insertion mode: after after frameset">after after
   69001   frameset</a>" during the course of the parsing, as described in
   69002   the <a href=#tree-construction>tree construction</a> stage. The insertion mode affects
   69003   how tokens are processed and whether CDATA sections are
   69004   supported.</p>
   69005 
   69006   <p>Seven of these modes, namely "<a href=#parsing-main-inhead title="insertion mode: in
   69007   head">in head</a>", "<a href=#parsing-main-inbody title="insertion mode: in body">in
   69008   body</a>", "<a href=#parsing-main-intable title="insertion mode: in table">in
   69009   table</a>", "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
   69010   body</a>", "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>",
   69011   "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>", and "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>", are special, in
   69012   that the other modes defer to them at various times. When the
   69013   algorithm below says that the user agent is to do something
   69014   "<dfn id=using-the-rules-for>using the rules for</dfn> the <var title="">m</var> insertion
   69015   mode", where <var title="">m</var> is one of these modes, the user
   69016   agent must use the rules described under the <var title="">m</var>
   69017   <a href=#insertion-mode>insertion mode</a>'s section, but must leave the
   69018   <a href=#insertion-mode>insertion mode</a> unchanged unless the rules in <var title="">m</var> themselves switch the <a href=#insertion-mode>insertion mode</a>
   69019   to a new value.</p>
   69020 
   69021   <p>When the insertion mode is switched to "<a href=#parsing-main-incdata title="insertion
   69022   mode: text">text</a>" or "<a href=#parsing-main-intabletext title="insertion mode: in table
   69023   text">in table text</a>", the <dfn id=original-insertion-mode>original insertion mode</dfn>
   69024   is also set. This is the insertion mode to which the tree
   69025   construction stage will return.</p>
   69026 
   69027   <p>When the insertion mode is switched to "<a href=#parsing-main-inforeign title="insertion
   69028   mode: in foreign content">in foreign content</a>", the
   69029   <dfn id=secondary-insertion-mode>secondary insertion mode</dfn> is also set. This secondary mode
   69030   is used within the rules for the "<a href=#parsing-main-inforeign title="insertion mode: in
   69031   foreign content">in foreign content</a>" mode to handle HTML
   69032   (i.e. not foreign) content.</p>
   69033 
   69034   <hr><p>When the steps below require the UA to <dfn id=reset-the-insertion-mode-appropriately>reset the insertion
   69035   mode appropriately</dfn>, it means the UA must follow these
   69036   steps:</p>
   69037 
   69038   <ol><li>Let <var title="">last</var> be false.</li>
   69039 
   69040    <li>Let <var title="">foreign</var> be false.</li>
   69041 
   69042    <li>Let <var title="">node</var> be the last node in the
   69043    <a href=#stack-of-open-elements>stack of open elements</a>.</li>
   69044 
   69045    <li><i>Loop</i>: If <var title="">node</var> is the first node in
   69046    the stack of open elements, then set <var title="">last</var> to
   69047    true and set <var title="">node</var> to the <var title="">context</var> element. (<a href=#fragment-case>fragment case</a>)</li>
   69048 
   69049    <li>If <var title="">node</var> is a <code><a href=#the-select-element>select</a></code> element,
   69050    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>" and jump to the
   69051    step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li>
   69052 
   69053    <li>If <var title="">node</var> is a <code><a href=#the-td-element>td</a></code> or
   69054    <code><a href=#the-th-element>th</a></code> element and <var title="">last</var> is false, then
   69055    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intd title="insertion
   69056    mode: in cell">in cell</a>" and jump to the step labeled <i title="">end</i>.</li>
   69057 
   69058    <li>If <var title="">node</var> is a <code><a href=#the-tr-element>tr</a></code> element, then
   69059    switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion
   69060    mode: in row">in row</a>" and jump to the step labeled <i title="">end</i>.</li>
   69061 
   69062    <li>If <var title="">node</var> is a <code><a href=#the-tbody-element>tbody</a></code>,
   69063    <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tfoot-element>tfoot</a></code> element, then switch the
   69064    <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intbody title="insertion mode: in
   69065    table body">in table body</a>" and jump to the step labeled <i title="">end</i>.</li>
   69066 
   69067    <li>If <var title="">node</var> is a <code><a href=#the-caption-element>caption</a></code> element,
   69068    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>" and jump to
   69069    the step labeled <i title="">end</i>.</li>
   69070 
   69071    <li>If <var title="">node</var> is a <code><a href=#the-colgroup-element>colgroup</a></code> element,
   69072    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>" and
   69073    jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   69074    case</a>)</li>
   69075 
   69076    <li>If <var title="">node</var> is a <code><a href=#the-table-element>table</a></code> element,
   69077    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" and jump to the
   69078    step labeled <i title="">end</i>.</li>
   69079 
   69080    <li>If <var title="">node</var> is a <code><a href=#the-head-element-0>head</a></code> element,
   69081    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" ("<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>"! <em> not "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>"</em>!) and jump to
   69082    the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   69083    case</a>)</li> <!-- This is only here for now in case people
   69084    think that the spec accidentally omitted it and try to "fix"
   69085    it. Note that noscript-in-head is also handled this way. This is
   69086    all intentional. The only thing it doesn't handle is the
   69087    scripting-disabled fragment parsing case for a <head> element
   69088    containing a <noscript> which itself contains something other than
   69089    a <link> or a <style> element; you'd expect that to break out of
   69090    the <noscript> but it doesn't. This is an edge case that doesn't
   69091    affect the spec, since the algorithm for fragment parsing is only
   69092    used for innerHTML/outerHTML/insertAdjacentHTML(), where we know
   69093    scripting is enabled. -->
   69094 
   69095    <li>If <var title="">node</var> is a <code><a href=#the-body-element-0>body</a></code> element,
   69096    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" and jump to the
   69097    step labeled <i title="">end</i>.</li>
   69098 
   69099    <li>If <var title="">node</var> is a <code><a href=#frameset>frameset</a></code> element,
   69100    then switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>" and jump to
   69101    the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment
   69102    case</a>)</li>
   69103 
   69104    <li>If <var title="">node</var> is an <code><a href=#the-html-element-0>html</a></code> element,
   69105    then <!--: if the <span><code title="">head</code> element
   69106    pointer</span> is null,--> switch the <a href=#insertion-mode>insertion mode</a>
   69107    to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before
   69108    head</a>"<!--, otherwise, switch the <span>insertion mode</span>
   69109    to "<span title="insertion mode: after head">after head</span>".-->
   69110    Then, <!-- in either case, --> jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li> <!-- if the
   69111    head element pointer can ever be non-null when we're going through
   69112    these steps, we'll need to uncomment out the commented-out bits -->
   69113 
   69114    <li>If <var title="">node</var> is an element from the <a href=#mathml-namespace>MathML
   69115    namespace</a> or the <a href=#svg-namespace>SVG namespace</a>, then set the
   69116    <var title="">foreign</var> flag to true.</li>
   69117 
   69118    <li>If <var title="">last</var> is true, then switch the
   69119    <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in
   69120    body">in body</a>" and jump to the step labeled <i title="">end</i>. (<a href=#fragment-case>fragment case</a>)</li>
   69121 
   69122    <li>Let <var title="">node</var> now be the node before <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
   69123    elements</a>.</li>
   69124 
   69125    <li>Return to the step labeled <i>loop</i>.</li>
   69126 
   69127    <li><i>End</i>: If <var title="">foreign</var> is true, switch the
   69128    <a href=#secondary-insertion-mode>secondary insertion mode</a> to whatever the
   69129    <a href=#insertion-mode>insertion mode</a> is set to, and switch the
   69130    <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
   69131    foreign content">in foreign content</a>".</li>
   69132 
   69133   </ol><h5 id=the-stack-of-open-elements><span class=secno>10.2.3.2 </span>The stack of open elements</h5>
   69134 
   69135   <p>Initially, the <dfn id=stack-of-open-elements>stack of open elements</dfn> is empty. The
   69136   stack grows downwards; the topmost node on the stack is the first
   69137   one added to the stack, and the bottommost node of the stack is the
   69138   most recently added node in the stack (notwithstanding when the
   69139   stack is manipulated in a random access fashion as part of <a href=#adoptionAgency>the handling for misnested tags</a>).</p>
   69140 
   69141   <p>The "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before
   69142   html</a>" <a href=#insertion-mode>insertion mode</a> creates the
   69143   <code><a href=#the-html-element-0>html</a></code> root element node, which is then added to the
   69144   stack.</p>
   69145 
   69146   <p>In the <a href=#fragment-case>fragment case</a>, the <a href=#stack-of-open-elements>stack of open
   69147   elements</a> is initialized to contain an <code><a href=#the-html-element-0>html</a></code>
   69148   element that is created as part of <a href=#html-fragment-parsing-algorithm title="html fragment
   69149   parsing algorithm">that algorithm</a>. (The <a href=#fragment-case>fragment
   69150   case</a> skips the "<a href=#the-before-html-insertion-mode title="insertion mode: before
   69151   html">before html</a>" <a href=#insertion-mode>insertion mode</a>.)</p>
   69152 
   69153   <p>The <code><a href=#the-html-element-0>html</a></code> node, however it is created, is the topmost
   69154   node of the stack. It only gets popped off the stack when the parser
   69155   <a href=#stop-parsing title="stop parsing">finishes</a>.</p>
   69156 
   69157   <p>The <dfn id=current-node>current node</dfn> is the bottommost node in this
   69158   stack.</p>
   69159 
   69160   <p>The <dfn id=current-table>current table</dfn> is the last <code><a href=#the-table-element>table</a></code>
   69161   element in the <a href=#stack-of-open-elements>stack of open elements</a>, if there is
   69162   one. If there is no <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of
   69163   open elements</a> (<a href=#fragment-case>fragment case</a>), then the
   69164   <a href=#current-table>current table</a> is the first element in the <a href=#stack-of-open-elements>stack
   69165   of open elements</a> (the <code><a href=#the-html-element-0>html</a></code> element).</p>
   69166 
   69167   <p>Elements in the stack fall into the following categories:</p>
   69168 
   69169   <dl><dt><dfn id=special>Special</dfn></dt>
   69170    <dd><p>The following HTML elements have varying levels of special
   69171    parsing rules: <code><a href=#the-address-element>address</a></code>, <code><a href=#the-area-element>area</a></code>,
   69172    <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-base-element>base</a></code>,
   69173    <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>,
   69174    <code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-br-element>br</a></code>,
   69175    <code><a href=#the-button-element>button</a></code>, <code><a href=#center>center</a></code>, <code><a href=#the-col-element>col</a></code>,
   69176    <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-command>command</a></code>, <!--v2DDATAGRID
   69177    <code>datagrid</code>-->, <code><a href=#the-dd-element>dd</a></code>, <code><a href=#the-details-element>details</a></code>,
   69178    <code><a href=#dir>dir</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>,
   69179    <code><a href=#the-dt-element>dt</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
   69180    <code><a href=#the-figure-element>figure</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
   69181    <code><a href=#frame>frame</a></code>, <code><a href=#frameset>frameset</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
   69182    <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
   69183    <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-head-element-0>head</a></code>, <code><a href=#the-header-element>header</a></code>,
   69184    <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <!--
   69185    <code>image</code>, (commented out because this isn't an element
   69186    that can end up on the stack, so it doesn't matter) -->
   69187    <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#isindex-0>isindex</a></code>,
   69188    <code><a href=#the-li-element>li</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#listing>listing</a></code>,
   69189    <code><a href=#menus>menu</a></code>, <code><a href=#meta>meta</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   69190    <code><a href=#noembed>noembed</a></code>, <code><a href=#noframes>noframes</a></code>, <code><a href=#the-noscript-element>noscript</a></code>,
   69191    <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-param-element>param</a></code>,
   69192    <code><a href=#plaintext>plaintext</a></code>, <code><a href=#the-pre-element>pre</a></code>, <code><a href=#script>script</a></code>,
   69193    <code><a href=#the-section-element>section</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-style-element>style</a></code>,
   69194    <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
   69195    <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-title-element-0>title</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   69196    <code><a href=#the-ul-element>ul</a></code>, <code><a href=#the-wbr-element>wbr</a></code>, and <code><a href=#xmp>xmp</a></code>.</dd>
   69197 
   69198    <dt><dfn id=scoping>Scoping</dfn></dt>
   69199    <dd><p>The following HTML elements introduce new <a href=#has-an-element-in-scope title="has
   69200    an element in scope">scopes</a> for various parts of the
   69201    parsing: <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-caption-element>caption</a></code>,
   69202    <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>,
   69203    <code><a href=#the-table-element>table</a></code>, <code><a href=#the-td-element>td</a></code>, <code><a href=#the-th-element>th</a></code>, and SVG's
   69204    <code>foreignObject</code>.</dd>
   69205 
   69206    <dt><dfn id=formatting>Formatting</dfn></dt>
   69207    <dd><p>The following HTML elements are those that end up in the
   69208    <a href=#list-of-active-formatting-elements>list of active formatting elements</a>: <code><a href=#the-a-element>a</a></code>,
   69209    <code><a href=#the-b-element>b</a></code>, <code><a href=#big>big</a></code>, <code><a href=#the-code-element>code</a></code>,
   69210    <code><a href=#the-em-element>em</a></code>, <code><a href=#font>font</a></code>, <code><a href=#the-i-element>i</a></code>,
   69211    <code><a href=#nobr>nobr</a></code>, <code><a href=#s>s</a></code>, <code><a href=#the-small-element>small</a></code>,
   69212    <code><a href=#strike>strike</a></code>, <code><a href=#the-strong-element>strong</a></code>, <code><a href=#tt>tt</a></code>, and
   69213    <code><a href=#u>u</a></code>.</dd>
   69214 
   69215    <dt><dfn id=phrasing>Phrasing</dfn></dt>
   69216    <dd><p>All other elements found while parsing an HTML
   69217    document.</dd>
   69218 
   69219   </dl><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-the-specific-scope title="has an element in the specific scope">have an element in a
   69220   specific scope</dfn> consisting of a list of element types <var title="">list</var> when the following algorithm terminates in a
   69221   match state:</p>
   69222 
   69223   <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   69224    node</a> (the bottommost node of the stack).</li>
   69225 
   69226    <li><p>If <var title="">node</var> is the target node, terminate in
   69227    a match state.</li>
   69228 
   69229    <li><p>Otherwise, if <var title="">node</var> is one of the element
   69230    types in <var title="">list</var>, terminate in a failure
   69231    state.</li>
   69232 
   69233    <li><p>Otherwise, set <var title="">node</var> to the previous
   69234    entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to step
   69235    2. (This will never fail, since the loop will always terminate in
   69236    the previous step if the top of the stack &mdash; an
   69237    <code><a href=#the-html-element-0>html</a></code> element &mdash; is reached.)</li>
   69238 
   69239   </ol><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-scope title="has an element in scope">have an element in scope</dfn> when
   69240   it <a href=#has-an-element-in-the-specific-scope>has an element in the specific scope</a> consisting
   69241   of the following element types:</p>
   69242 
   69243   <ul class=brief><li><code><a href=#the-applet-element>applet</a></code> in the HTML namespace</li>
   69244    <li><code><a href=#the-caption-element>caption</a></code> in the HTML namespace</li>
   69245    <li><code><a href=#the-html-element-0>html</a></code> in the HTML namespace</li> <!-- (This can only happen if the <var title="">node</var> is the topmost node of the <span>stack of open elements</span>, and prevents the next step from being invoked if there are no more elements in the stack.) -->
   69246    <li><code><a href=#the-table-element>table</a></code> in the HTML namespace</li>
   69247    <li><code><a href=#the-td-element>td</a></code> in the HTML namespace</li>
   69248    <li><code><a href=#the-th-element>th</a></code> in the HTML namespace</li>
   69249    <li><code><a href=#the-button-element>button</a></code> in the HTML namespace</li>
   69250    <li><code><a href=#the-marquee-element>marquee</a></code> in the HTML namespace</li>
   69251    <li><code><a href=#the-object-element>object</a></code> in the HTML namespace</li>
   69252    <li><code title="">foreignObject</code> in the SVG namespace</li>
   69253   </ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-list-item-scope title="has an element in list item scope">have an element in list
   69254   item scope</dfn> when it <a href=#has-an-element-in-the-specific-scope>has an element in the specific
   69255   scope</a> consisting of the following element types:</p>
   69256 
   69257   <ul class=brief><li>All the element types listed above for the <i><a href=#has-an-element-in-scope>has an element
   69258    in scope</a></i> algorithm.</li>
   69259    <li><code><a href=#the-ol-element>ol</a></code> in the HTML namespace</li>
   69260    <li><code><a href=#the-ul-element>ul</a></code> in the HTML namespace</li>
   69261   </ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> is said to <dfn id=has-an-element-in-table-scope title="has an element in table scope">have an element in <em>table
   69262   scope</em></dfn> when it <a href=#has-an-element-in-the-specific-scope>has an element in the specific
   69263   scope</a> consisting of the following element types:</p>
   69264 
   69265   <ul class=brief><li><code><a href=#the-html-element-0>html</a></code> in the HTML namespace</li> <!-- (This can only happen if the <var title="">node</var> is the topmost node of the <span>stack of open elements</span>, and prevents the next step from being invoked if there are no more elements in the stack.) -->
   69266    <li><code><a href=#the-table-element>table</a></code> in the HTML namespace</li>
   69267   </ul><p>Nothing happens if at any time any of the elements in the
   69268   <a href=#stack-of-open-elements>stack of open elements</a> are moved to a new location in,
   69269   or removed from, the <code><a href=#document>Document</a></code> tree. In particular, the
   69270   stack is not changed in this situation. This can cause, amongst
   69271   other strange effects, content to be appended to nodes that are no
   69272   longer in the DOM.</p>
   69273 
   69274   <p class=note>In some cases (namely, when <a href=#adoptionAgency>closing misnested formatting elements</a>),
   69275   the stack is manipulated in a random-access fashion.</p>
   69276 
   69277 
   69278   <h5 id=the-list-of-active-formatting-elements><span class=secno>10.2.3.3 </span>The list of active formatting elements</h5>
   69279 
   69280   <p>Initially, the <dfn id=list-of-active-formatting-elements>list of active formatting elements</dfn> is
   69281   empty. It is used to handle mis-nested <a href=#formatting title=formatting>formatting element tags</a>.</p>
   69282 
   69283   <p>The list contains elements in the <a href=#formatting>formatting</a>
   69284   category, and scope markers. The scope markers are inserted when
   69285   entering <code><a href=#the-applet-element>applet</a></code> elements, buttons, <code><a href=#the-object-element>object</a></code>
   69286   elements, marquees, table cells, and table captions, and are used to
   69287   prevent formatting from "leaking" <em>into</em> <code><a href=#the-applet-element>applet</a></code>
   69288   elements, buttons, <code><a href=#the-object-element>object</a></code> elements, marquees, and
   69289   tables.</p>
   69290 
   69291   <p class=note>The scope markers are unrelated to the concept of an
   69292   element being <a href=#has-an-element-in-scope title="has an element in scope">in
   69293   scope</a>.</p>
   69294 
   69295   <p>In addition, each element in the <a href=#list-of-active-formatting-elements>list of active formatting
   69296   elements</a> is associated with the token for which it was
   69297   created, so that further elements can be created for that token if
   69298   necessary.</p>
   69299 
   69300   <p>When the steps below require the UA to <dfn id=reconstruct-the-active-formatting-elements>reconstruct the
   69301   active formatting elements</dfn>, the UA must perform the following
   69302   steps:</p>
   69303 
   69304   <ol><li>If there are no entries in the <a href=#list-of-active-formatting-elements>list of active formatting
   69305    elements</a>, then there is nothing to reconstruct; stop this
   69306    algorithm.</li>
   69307 
   69308    <li>If the last (most recently added) entry in the <a href=#list-of-active-formatting-elements>list of
   69309    active formatting elements</a> is a marker, or if it is an
   69310    element that is in the <a href=#stack-of-open-elements>stack of open elements</a>, then
   69311    there is nothing to reconstruct; stop this algorithm.</li>
   69312 
   69313    <li>Let <var title="">entry</var> be the last (most recently added)
   69314    element in the <a href=#list-of-active-formatting-elements>list of active formatting
   69315    elements</a>.</li>
   69316 
   69317    <li>If there are no entries before <var title="">entry</var> in the
   69318    <a href=#list-of-active-formatting-elements>list of active formatting elements</a>, then jump to step
   69319    8.</li>
   69320 
   69321    <li>Let <var title="">entry</var> be the entry one earlier than
   69322    <var title="">entry</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
   69323    elements</a>.</li>
   69324 
   69325    <li>If <var title="">entry</var> is neither a marker nor an element
   69326    that is also in the <a href=#stack-of-open-elements>stack of open elements</a>, go to step
   69327    4.</li>
   69328 
   69329    <li>Let <var title="">entry</var> be the element one later than
   69330    <var title="">entry</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
   69331    elements</a>.</li>
   69332 
   69333    <li><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
   69334    element <var title="">entry</var> was created, to obtain <var title="">new element</var>.</li>
   69335 
   69336    <li>Append <var title="">new element</var> to the <a href=#current-node>current
   69337    node</a> and push it onto the <a href=#stack-of-open-elements>stack of open
   69338    elements</a> so that it is the new <a href=#current-node>current
   69339    node</a>.</li>
   69340 
   69341    <li>Replace the entry for <var title="">entry</var> in the list
   69342    with an entry for <var title="">new element</var>.</li>
   69343 
   69344    <li>If the entry for <var title="">new element</var> in the
   69345    <a href=#list-of-active-formatting-elements>list of active formatting elements</a> is not the last
   69346    entry in the list, return to step 7.</li>
   69347 
   69348   </ol><p>This has the effect of reopening all the formatting elements that
   69349   were opened in the current body, cell, or caption (whichever is
   69350   youngest) that haven't been explicitly closed.</p>
   69351 
   69352   <p class=note>The way this specification is written, the
   69353   <a href=#list-of-active-formatting-elements>list of active formatting elements</a> always consists of
   69354   elements in chronological order with the least recently added
   69355   element first and the most recently added element last (except for
   69356   while steps 8 to 11 of the above algorithm are being executed, of
   69357   course).</p>
   69358 
   69359   <p>When the steps below require the UA to <dfn id=clear-the-list-of-active-formatting-elements-up-to-the-last-marker>clear the list of
   69360   active formatting elements up to the last marker</dfn>, the UA must
   69361   perform the following steps:</p>
   69362 
   69363   <ol><li>Let <var title="">entry</var> be the last (most recently added)
   69364    entry in the <a href=#list-of-active-formatting-elements>list of active formatting elements</a>.</li>
   69365 
   69366    <li>Remove <var title="">entry</var> from the <a href=#list-of-active-formatting-elements>list of active
   69367    formatting elements</a>.</li>
   69368 
   69369    <li>If <var title="">entry</var> was a marker, then stop the
   69370    algorithm at this point. The list has been cleared up to the last
   69371    marker.</li>
   69372 
   69373    <li>Go to step 1.</li>
   69374 
   69375   </ol><h5 id=the-element-pointers><span class=secno>10.2.3.4 </span>The element pointers</h5>
   69376 
   69377   <p>Initially, the <dfn id=head-element-pointer><code title="">head</code> element
   69378   pointer</dfn> and the <dfn id=form-element-pointer><code title="">form</code> element
   69379   pointer</dfn> are both null.</p>
   69380 
   69381   <p>Once a <code><a href=#the-head-element-0>head</a></code> element has been parsed (whether
   69382   implicitly or explicitly) the <a href=#head-element-pointer><code title="">head</code>
   69383   element pointer</a> gets set to point to this node.</p>
   69384 
   69385   <p>The <a href=#form-element-pointer><code title="">form</code> element pointer</a>
   69386   points to the last <code><a href=#the-form-element>form</a></code> element that was opened and
   69387   whose end tag has not yet been seen. It is used to make form
   69388   controls associate with forms in the face of dramatically bad
   69389   markup, for historical reasons.</p>
   69390 
   69391 
   69392   <h5 id=other-parsing-state-flags><span class=secno>10.2.3.5 </span>Other parsing state flags</h5>
   69393 
   69394   <p>The <dfn id=scripting-flag>scripting flag</dfn> is set to "enabled" if <a href=#concept-n-script title=concept-n-script>scripting was enabled</a> for the
   69395   <code><a href=#document>Document</a></code> with which the parser is associated when the
   69396   parser was created, and "disabled" otherwise.</p>
   69397 
   69398   <p class=note>The <a href=#scripting-flag>scripting flag</a> can be enabled even
   69399   when the parser was originally created for the <a href=#html-fragment-parsing-algorithm>HTML fragment
   69400   parsing algorithm</a>, even though <code><a href=#script>script</a></code> elements
   69401   don't execute in that case.</p>
   69402 
   69403   <p>The <dfn id=frameset-ok-flag>frameset-ok flag</dfn> is set to "ok" when the parser is
   69404   created. It is set to "not ok" after certain tokens are seen.</p>
   69405 
   69406   </div>
   69407 
   69408 
   69409   <div class=impl>
   69410 
   69411   <h4 id=tokenization><span class=secno>10.2.4 </span><dfn>Tokenization</dfn></h4>
   69412 
   69413   <p>Implementations must act as if they used the following state
   69414   machine to tokenize HTML. The state machine must start in the
   69415   <a href=#data-state>data state</a>. Most states consume a single character,
   69416   which may have various side-effects, and either switches the state
   69417   machine to a new state to <em>reconsume</em> the same character, or
   69418   switches it to a new state (to consume the next character), or
   69419   repeats the same state (to consume the next character). Some states
   69420   have more complicated behavior and can consume several characters
   69421   before switching to another state. In some cases, the tokenizer
   69422   state is also changed by the tree construction stage.</p>
   69423 
   69424   <p>The exact behavior of certain states depends on the
   69425   <a href=#insertion-mode>insertion mode</a> and the <a href=#stack-of-open-elements>stack of open
   69426   elements</a>. Certain states also use a <dfn id=temporary-buffer><var>temporary
   69427   buffer</var></dfn> to track progress.</p>
   69428 
   69429   <p>The output of the tokenization step is a series of zero or more
   69430   of the following tokens: DOCTYPE, start tag, end tag, comment,
   69431   character, end-of-file. DOCTYPE tokens have a name, a public
   69432   identifier, a system identifier, and a <i>force-quirks
   69433   flag</i>. When a DOCTYPE token is created, its name, public
   69434   identifier, and system identifier must be marked as missing (which
   69435   is a distinct state from the empty string), and the <i>force-quirks
   69436   flag</i> must be set to <i>off</i> (its other state is
   69437   <i>on</i>). Start and end tag tokens have a tag name, a
   69438   <i>self-closing flag</i>, and a list of attributes, each of which
   69439   has a name and a value. When a start or end tag token is created,
   69440   its <i>self-closing flag</i> must be unset (its other state is that
   69441   it be set), and its attributes list must be empty. Comment and
   69442   character tokens have data.</p>
   69443 
   69444   <p>When a token is emitted, it must immediately be handled by the
   69445   <a href=#tree-construction>tree construction</a> stage. The tree construction stage
   69446   can affect the state of the tokenization stage, and can insert
   69447   additional characters into the stream. (For example, the
   69448   <code><a href=#script>script</a></code> element can result in scripts executing and
   69449   using the <a href=#dynamic-markup-insertion>dynamic markup insertion</a> APIs to insert
   69450   characters into the stream being tokenized.)</p>
   69451 
   69452   <p>When a start tag token is emitted with its <i>self-closing
   69453   flag</i> set, if the flag is not <dfn id=acknowledge-self-closing-flag title="acknowledge
   69454   self-closing flag">acknowledged</dfn> when it is processed by the
   69455   tree construction stage, that is a <a href=#parse-error>parse error</a>.</p>
   69456 
   69457   <p>When an end tag token is emitted with attributes, that is a
   69458   <a href=#parse-error>parse error</a>.</p>
   69459 
   69460   <p>When an end tag token is emitted with its <i>self-closing
   69461   flag</i> set, that is a <a href=#parse-error>parse error</a>.</p>
   69462 
   69463   <p>An <dfn id=appropriate-end-tag-token>appropriate end tag token</dfn> is an end tag token whose
   69464   tag name matches the tag name of the last start tag to have been
   69465   emitted from this tokenizer, if any. If no start tag has been
   69466   emitted from this tokenizer, then no end tag token is
   69467   appropriate.</p>
   69468 
   69469   <p>Before each step of the tokenizer, the user agent must first
   69470   check the <a href=#parser-pause-flag>parser pause flag</a>. If it is true, then the
   69471   tokenizer must abort the processing of any nested invocations of the
   69472   tokenizer, yielding control back to the caller.</p>
   69473 
   69474   <p>The tokenizer state machine consists of the states defined in the
   69475   following subsections.</p>
   69476 
   69477 
   69478   <!-- Order of the lists below is supposed to be non-error then
   69479   error, by unicode, then EOF, ending with "anything else" -->
   69480 
   69481 
   69482   <h5 id=data-state><span class=secno>10.2.4.1 </span><dfn>Data state</dfn></h5>
   69483 
   69484   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69485 
   69486   <dl class=switch><dt>U+0026 AMPERSAND (&amp;)</dt>
   69487    <dd>Switch to the <a href=#character-reference-in-data-state>character reference in data
   69488    state</a>.</dd>
   69489 
   69490    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69491    <dd>Switch to the <a href=#tag-open-state>tag open state</a>.</dd>
   69492 
   69493    <dt>EOF</dt>
   69494    <dd>Emit an end-of-file token.</dd>
   69495 
   69496    <dt>Anything else</dt>
   69497    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69498    token. Stay in the <a href=#data-state>data state</a>.</dd>
   69499 
   69500   </dl><h5 id=character-reference-in-data-state><span class=secno>10.2.4.2 </span><dfn>Character reference in data state</dfn></h5>
   69501 
   69502   <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>, with no
   69503   <a href=#additional-allowed-character>additional allowed character</a>.</p>
   69504 
   69505   <p>If nothing is returned, emit a U+0026 AMPERSAND character
   69506   token.</p>
   69507 
   69508   <p>Otherwise, emit the character token that was returned.</p>
   69509 
   69510   <p>Finally, switch to the <a href=#data-state>data state</a>.</p>
   69511 
   69512 
   69513   <h5 id=rcdata-state><span class=secno>10.2.4.3 </span><dfn>RCDATA state</dfn></h5>
   69514 
   69515   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69516 
   69517   <dl class=switch><dt>U+0026 AMPERSAND (&amp;)</dt>
   69518    <dd>Switch to the <a href=#character-reference-in-rcdata-state>character reference in RCDATA
   69519    state</a>.</dd>
   69520 
   69521    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69522    <dd>Switch to the <a href=#rcdata-less-than-sign-state>RCDATA less-than sign state</a>.</dd>
   69523 
   69524    <dt>EOF</dt>
   69525    <dd>Emit an end-of-file token.</dd>
   69526 
   69527    <dt>Anything else</dt>
   69528    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69529    token. Stay in the <a href=#rcdata-state>RCDATA state</a>.</dd>
   69530 
   69531   </dl><h5 id=character-reference-in-rcdata-state><span class=secno>10.2.4.4 </span><dfn>Character reference in RCDATA state</dfn></h5>
   69532 
   69533   <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>, with no
   69534   <a href=#additional-allowed-character>additional allowed character</a>.</p>
   69535 
   69536   <p>If nothing is returned, emit a U+0026 AMPERSAND character
   69537   token.</p>
   69538 
   69539   <p>Otherwise, emit the character token that was returned.</p>
   69540 
   69541   <p>Finally, switch to the <a href=#rcdata-state>RCDATA state</a>.</p>
   69542 
   69543 
   69544   <h5 id=rawtext-state><span class=secno>10.2.4.5 </span><dfn>RAWTEXT state</dfn></h5>
   69545 
   69546   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69547 
   69548   <dl class=switch><dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69549    <dd>Switch to the <a href=#rawtext-less-than-sign-state>RAWTEXT less-than sign state</a>.</dd>
   69550 
   69551    <dt>EOF</dt>
   69552    <dd>Emit an end-of-file token.</dd>
   69553 
   69554    <dt>Anything else</dt>
   69555    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69556    token. Stay in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>
   69557 
   69558   </dl><h5 id=script-data-state><span class=secno>10.2.4.6 </span><dfn>Script data state</dfn></h5>
   69559 
   69560   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69561 
   69562   <dl class=switch><dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69563    <dd>Switch to the <a href=#script-data-less-than-sign-state>script data less-than sign state</a>.</dd>
   69564 
   69565    <dt>EOF</dt>
   69566    <dd>Emit an end-of-file token.</dd>
   69567 
   69568    <dt>Anything else</dt>
   69569    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69570    token. Stay in the <a href=#script-data-state>script data state</a>.</dd>
   69571 
   69572   </dl><h5 id=plaintext-state><span class=secno>10.2.4.7 </span><dfn>PLAINTEXT state</dfn></h5>
   69573 
   69574   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69575 
   69576   <dl class=switch><dt>EOF</dt>
   69577    <dd>Emit an end-of-file token.</dd>
   69578 
   69579    <dt>Anything else</dt>
   69580    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69581    token. Stay in the <a href=#plaintext-state>PLAINTEXT state</a>.</dd>
   69582 
   69583   </dl><h5 id=tag-open-state><span class=secno>10.2.4.8 </span><dfn>Tag open state</dfn></h5>
   69584 
   69585   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69586 
   69587   <dl class=switch><dt>U+0021 EXCLAMATION MARK (!)</dt>
   69588    <dd>Switch to the <a href=#markup-declaration-open-state>markup declaration open state</a>.</dd>
   69589 
   69590    <dt>U+002F SOLIDUS (/)</dt>
   69591    <dd>Switch to the <a href=#end-tag-open-state>end tag open state</a>.</dd>
   69592 
   69593    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69594    <dd>Create a new start tag token, set its tag name to the
   69595    lowercase version of the <a href=#current-input-character>current input character</a> (add 0x0020 to the
   69596    character's code point), then switch to the <a href=#tag-name-state>tag name
   69597    state</a>. (Don't emit the token yet; further details will
   69598    be filled in before it is emitted.)</dd>
   69599 
   69600    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69601    <dd>Create a new start tag token, set its tag name to the
   69602    <a href=#current-input-character>current input character</a>, then switch to the <a href=#tag-name-state>tag
   69603    name state</a>. (Don't emit the token yet; further details will
   69604    be filled in before it is emitted.)</dd>
   69605 
   69606    <dt>U+003F QUESTION MARK (?)</dt>
   69607    <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-comment-state>bogus
   69608    comment state</a>.</dd>
   69609 
   69610    <dt>Anything else</dt>
   69611    <dd><a href=#parse-error>Parse error</a>. Emit a U+003C LESS-THAN SIGN
   69612    character token and reconsume the <a href=#current-input-character>current input
   69613    character</a> in the <a href=#data-state>data state</a>.</dd>
   69614 
   69615   </dl><h5 id=end-tag-open-state><span class=secno>10.2.4.9 </span><dfn>End tag open state</dfn></h5>
   69616 
   69617   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69618 
   69619   <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69620    <dd>Create a new end tag token, set its tag name to the lowercase
   69621    version of the <a href=#current-input-character>current input character</a> (add 0x0020 to
   69622    the character's code point), then switch to the <a href=#tag-name-state>tag name
   69623    state</a>. (Don't emit the token yet; further details will be
   69624    filled in before it is emitted.)</dd>
   69625 
   69626    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69627    <dd>Create a new end tag token, set its tag name to the
   69628    <a href=#current-input-character>current input character</a>, then switch to the <a href=#tag-name-state>tag
   69629    name state</a>. (Don't emit the token yet; further details will
   69630    be filled in before it is emitted.)</dd>
   69631 
   69632    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   69633    <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#data-state>data
   69634    state</a>.</dd>
   69635 
   69636    <dt>EOF</dt>
   69637    <dd><a href=#parse-error>Parse error</a>. Emit a U+003C LESS-THAN SIGN
   69638    character token and a U+002F SOLIDUS character token. Reconsume
   69639    the EOF character in the <a href=#data-state>data state</a>.</dd>
   69640 
   69641    <dt>Anything else</dt>
   69642    <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-comment-state>bogus
   69643    comment state</a>.</dd>
   69644 
   69645   </dl><h5 id=tag-name-state><span class=secno>10.2.4.10 </span><dfn>Tag name state</dfn></h5>
   69646 
   69647   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69648 
   69649   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   69650    <dt>U+000A LINE FEED (LF)</dt>
   69651    <dt>U+000C FORM FEED (FF)</dt>
   69652    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   69653    <dt>U+0020 SPACE</dt>
   69654    <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   69655 
   69656    <dt>U+002F SOLIDUS (/)</dt>
   69657    <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>
   69658 
   69659    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   69660    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   69661    state</a>.</dd>
   69662 
   69663    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69664    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   69665    character</a> (add 0x0020 to the character's code point) to the
   69666    current tag token's tag name. Stay in the <a href=#tag-name-state>tag name
   69667    state</a>.</dd>
   69668 
   69669    <dt>EOF</dt>
   69670    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   69671    <a href=#data-state>data state</a>.</dd>
   69672 
   69673    <dt>Anything else</dt>
   69674    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   69675    tag token's tag name. Stay in the <a href=#tag-name-state>tag name state</a>.</dd>
   69676 
   69677   </dl><h5 id=rcdata-less-than-sign-state><span class=secno>10.2.4.11 </span><dfn>RCDATA less-than sign state</dfn></h5>
   69678   <!-- identical to the RAWTEXT less-than sign state, except s/RAWTEXT/RCDATA/g -->
   69679 
   69680   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69681 
   69682   <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   69683    <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   69684    to the <a href=#rcdata-end-tag-open-state>RCDATA end tag open state</a>.</dd>
   69685 
   69686    <dt>Anything else</dt>
   69687    <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   69688    <a href=#current-input-character>current input character</a> in the <a href=#rcdata-state>RCDATA
   69689    state</a>.</dd>
   69690 
   69691   </dl><h5 id=rcdata-end-tag-open-state><span class=secno>10.2.4.12 </span><dfn>RCDATA end tag open state</dfn></h5>
   69692   <!-- identical to the RAWTEXT (and Script data) end tag open state, except s/RAWTEXT/RCDATA/g -->
   69693 
   69694   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69695 
   69696   <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69697    <dd>Create a new end tag token, and set its tag name to the
   69698    lowercase version of the <a href=#current-input-character>current input character</a> (add
   69699    0x0020 to the character's code point). Append the <a href=#current-input-character>current
   69700    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69701    switch to the <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>. (Don't emit
   69702    the token yet; further details will be filled in before it is
   69703    emitted.)</dd>
   69704 
   69705    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69706    <dd>Create a new end tag token, and set its tag name to the
   69707    <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   69708    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69709    switch to the <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>. (Don't emit
   69710    the token yet; further details will be filled in before it is
   69711    emitted.)</dd>
   69712 
   69713    <dt>Anything else</dt>
   69714    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69715    character token, and reconsume the <a href=#current-input-character>current input
   69716    character</a> in the <a href=#rcdata-state>RCDATA state</a>.</dd>
   69717 
   69718   </dl><h5 id=rcdata-end-tag-name-state><span class=secno>10.2.4.13 </span><dfn>RCDATA end tag name state</dfn></h5>
   69719   <!-- identical to the RAWTEXT (and Script data) end tag name state, except s/RAWTEXT/RCDATA/g -->
   69720 
   69721   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69722 
   69723   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   69724    <dt>U+000A LINE FEED (LF)</dt>
   69725    <dt>U+000C FORM FEED (FF)</dt>
   69726    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   69727    <dt>U+0020 SPACE</dt>
   69728    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69729    token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   69730    state</a>. Otherwise, treat it as per the "anything else" entry
   69731    below.</dd>
   69732 
   69733    <dt>U+002F SOLIDUS (/)</dt>
   69734    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69735    token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   69736    state</a>. Otherwise, treat it as per the "anything else" entry
   69737    below.</dd>
   69738 
   69739    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   69740    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69741    token</a>, then emit the current tag token and switch to the
   69742    <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   69743    else" entry below.</dd>
   69744 
   69745    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69746    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   69747    character</a> (add 0x0020 to the character's code point) to the
   69748    current tag token's tag name. Append the <a href=#current-input-character>current input
   69749    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69750    <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>.</dd>
   69751 
   69752    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69753    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   69754    tag token's tag name. Append the <a href=#current-input-character>current input
   69755    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69756    <a href=#rcdata-end-tag-name-state>RCDATA end tag name state</a>.</dd>
   69757 
   69758    <dt>Anything else</dt>
   69759    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69760    character token, a character token for each of the characters in
   69761    the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   69762    the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   69763    in the <a href=#rcdata-state>RCDATA state</a>.</dd>
   69764 
   69765   </dl><h5 id=rawtext-less-than-sign-state><span class=secno>10.2.4.14 </span><dfn>RAWTEXT less-than sign state</dfn></h5>
   69766   <!-- identical to the RCDATA less-than sign state, except s/RCDATA/RAWTEXT/g -->
   69767 
   69768   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69769 
   69770   <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   69771    <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   69772    to the <a href=#rawtext-end-tag-open-state>RAWTEXT end tag open state</a>.</dd>
   69773 
   69774    <dt>Anything else</dt>
   69775    <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   69776    <a href=#current-input-character>current input character</a> in the <a href=#rawtext-state>RAWTEXT
   69777    state</a>.</dd>
   69778 
   69779   </dl><h5 id=rawtext-end-tag-open-state><span class=secno>10.2.4.15 </span><dfn>RAWTEXT end tag open state</dfn></h5>
   69780   <!-- identical to the RCDATA (and Script data) end tag open state, except s/RCDATA/RAWTEXT/g -->
   69781 
   69782   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69783 
   69784   <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69785    <dd>Create a new end tag token, and set its tag name to the
   69786    lowercase version of the <a href=#current-input-character>current input character</a> (add
   69787    0x0020 to the character's code point). Append the <a href=#current-input-character>current
   69788    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69789    switch to the <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>. (Don't emit
   69790    the token yet; further details will be filled in before it is
   69791    emitted.)</dd>
   69792 
   69793    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69794    <dd>Create a new end tag token, and set its tag name to the
   69795    <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   69796    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69797    switch to the <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>. (Don't emit
   69798    the token yet; further details will be filled in before it is
   69799    emitted.)</dd>
   69800 
   69801    <dt>Anything else</dt>
   69802    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69803    character token, and reconsume the <a href=#current-input-character>current input
   69804    character</a> in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>
   69805 
   69806   </dl><h5 id=rawtext-end-tag-name-state><span class=secno>10.2.4.16 </span><dfn>RAWTEXT end tag name state</dfn></h5>
   69807   <!-- identical to the RCDATA (and Script data) end tag name state, except s/RCDATA/RAWTEXT/g -->
   69808 
   69809   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69810 
   69811   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   69812    <dt>U+000A LINE FEED (LF)</dt>
   69813    <dt>U+000C FORM FEED (FF)</dt>
   69814    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   69815    <dt>U+0020 SPACE</dt>
   69816    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69817    token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   69818    state</a>. Otherwise, treat it as per the "anything else" entry
   69819    below.</dd>
   69820 
   69821    <dt>U+002F SOLIDUS (/)</dt>
   69822    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69823    token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   69824    state</a>. Otherwise, treat it as per the "anything else" entry
   69825    below.</dd>
   69826 
   69827    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   69828    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69829    token</a>, then emit the current tag token and switch to the
   69830    <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   69831    else" entry below.</dd>
   69832 
   69833    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69834    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   69835    character</a> (add 0x0020 to the character's code point) to the
   69836    current tag token's tag name. Append the <a href=#current-input-character>current input
   69837    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69838    <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>.</dd>
   69839 
   69840    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69841    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   69842    tag token's tag name. Append the <a href=#current-input-character>current input
   69843    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69844    <a href=#rawtext-end-tag-name-state>RAWTEXT end tag name state</a>.</dd>
   69845 
   69846    <dt>Anything else</dt>
   69847    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69848    character token, a character token for each of the characters in
   69849    the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   69850    the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   69851    in the <a href=#rawtext-state>RAWTEXT state</a>.</dd>
   69852 
   69853   </dl><h5 id=script-data-less-than-sign-state><span class=secno>10.2.4.17 </span><dfn>Script data less-than sign state</dfn></h5>
   69854 
   69855   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69856 
   69857   <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   69858    <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   69859    to the <a href=#script-data-end-tag-open-state>script data end tag open state</a>.</dd>
   69860 
   69861    <dt>U+0021 EXCLAMATION MARK (!)</dt>
   69862    <dd>Emit a U+003C LESS-THAN SIGN character token and a U+0021
   69863    EXCLAMATION MARK character token. Switch to the <a href=#script-data-escape-start-state>script data
   69864    escape start state</a>.</dd>
   69865 
   69866    <dt>Anything else</dt>
   69867    <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   69868    <a href=#current-input-character>current input character</a> in the <a href=#script-data-state>script data
   69869    state</a>.</dd>
   69870 
   69871   </dl><h5 id=script-data-end-tag-open-state><span class=secno>10.2.4.18 </span><dfn>Script data end tag open state</dfn></h5>
   69872   <!-- identical to the RCDATA (and RAWTEXT) end tag open state, except s/RCDATA/Script data/g -->
   69873 
   69874   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69875 
   69876   <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69877    <dd>Create a new end tag token, and set its tag name to the
   69878    lowercase version of the <a href=#current-input-character>current input character</a> (add
   69879    0x0020 to the character's code point). Append the <a href=#current-input-character>current
   69880    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69881    switch to the <a href=#script-data-end-tag-name-state>script data end tag name state</a>. (Don't emit
   69882    the token yet; further details will be filled in before it is
   69883    emitted.)</dd>
   69884 
   69885    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69886    <dd>Create a new end tag token, and set its tag name to the
   69887    <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   69888    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   69889    switch to the <a href=#script-data-end-tag-name-state>script data end tag name state</a>. (Don't emit
   69890    the token yet; further details will be filled in before it is
   69891    emitted.)</dd>
   69892 
   69893    <dt>Anything else</dt>
   69894    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69895    character token, and reconsume the <a href=#current-input-character>current input
   69896    character</a> in the <a href=#script-data-state>script data state</a>.</dd>
   69897 
   69898   </dl><h5 id=script-data-end-tag-name-state><span class=secno>10.2.4.19 </span><dfn>Script data end tag name state</dfn></h5>
   69899   <!-- identical to the RCDATA (and RAWTEXT) end tag name state, except s/RCDATA/Script data/g -->
   69900 
   69901   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69902 
   69903   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   69904    <dt>U+000A LINE FEED (LF)</dt>
   69905    <dt>U+000C FORM FEED (FF)</dt>
   69906    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   69907    <dt>U+0020 SPACE</dt>
   69908    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69909    token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   69910    state</a>. Otherwise, treat it as per the "anything else" entry
   69911    below.</dd>
   69912 
   69913    <dt>U+002F SOLIDUS (/)</dt>
   69914    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69915    token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   69916    state</a>. Otherwise, treat it as per the "anything else" entry
   69917    below.</dd>
   69918 
   69919    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   69920    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   69921    token</a>, then emit the current tag token and switch to the
   69922    <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   69923    else" entry below.</dd>
   69924 
   69925    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   69926    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   69927    character</a> (add 0x0020 to the character's code point) to the
   69928    current tag token's tag name. Append the <a href=#current-input-character>current input
   69929    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69930    <a href=#script-data-end-tag-name-state>script data end tag name state</a>.</dd>
   69931 
   69932    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   69933    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   69934    tag token's tag name. Append the <a href=#current-input-character>current input
   69935    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   69936    <a href=#script-data-end-tag-name-state>script data end tag name state</a>.</dd>
   69937 
   69938    <dt>Anything else</dt>
   69939    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   69940    character token, a character token for each of the characters in
   69941    the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   69942    the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   69943    in the <a href=#script-data-state>script data state</a>.</dd>
   69944 
   69945   </dl><h5 id=script-data-escape-start-state><span class=secno>10.2.4.20 </span><dfn>Script data escape start state</dfn></h5>
   69946 
   69947   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69948 
   69949   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   69950    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   69951    <a href=#script-data-escape-start-dash-state>script data escape start dash state</a>.</dd>
   69952 
   69953    <dt>Anything else</dt>
   69954    <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   69955    <a href=#script-data-state>script data state</a>.</dd>
   69956 
   69957   </dl><h5 id=script-data-escape-start-dash-state><span class=secno>10.2.4.21 </span><dfn>Script data escape start dash state</dfn></h5>
   69958 
   69959   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69960 
   69961   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   69962    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   69963    <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>
   69964 
   69965    <dt>Anything else</dt>
   69966    <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   69967    <a href=#script-data-state>script data state</a>.</dd>
   69968 
   69969   </dl><h5 id=script-data-escaped-state><span class=secno>10.2.4.22 </span><dfn>Script data escaped state</dfn></h5>
   69970 
   69971   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69972 
   69973   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   69974    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   69975    <a href=#script-data-escaped-dash-state>script data escaped dash state</a>.</dd>
   69976 
   69977    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69978    <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   69979    state</a>.</dd>
   69980 
   69981    <dt>EOF</dt>
   69982    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   69983    <a href=#data-state>data state</a>.</dd>
   69984 
   69985    <dt>Anything else</dt>
   69986    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   69987    token. Stay in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   69988 
   69989   </dl><h5 id=script-data-escaped-dash-state><span class=secno>10.2.4.23 </span><dfn>Script data escaped dash state</dfn></h5>
   69990 
   69991   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   69992 
   69993   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   69994    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   69995    <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>
   69996 
   69997    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   69998    <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   69999    state</a>.</dd>
   70000 
   70001    <dt>EOF</dt>
   70002    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70003    <a href=#data-state>data state</a>.</dd>
   70004 
   70005    <dt>Anything else</dt>
   70006    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70007    token. Switch to the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   70008 
   70009   </dl><h5 id=script-data-escaped-dash-dash-state><span class=secno>10.2.4.24 </span><dfn>Script data escaped dash dash state</dfn></h5>
   70010 
   70011   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70012 
   70013   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70014    <dd>Emit a U+002D HYPHEN-MINUS character token. Stay in the
   70015    <a href=#script-data-escaped-dash-dash-state>script data escaped dash dash state</a>.</dd>
   70016 
   70017    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70018    <dd><p>Switch to the <a href=#script-data-escaped-less-than-sign-state>script data escaped less-than sign
   70019    state</a>.</dd>
   70020 
   70021    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70022    <dd>Emit a U+003E GREATER-THAN SIGN character token. Switch to the
   70023    <a href=#script-data-state>script data state</a>.</dd>
   70024 
   70025    <dt>EOF</dt>
   70026    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70027    <a href=#data-state>data state</a>.</dd>
   70028 
   70029    <dt>Anything else</dt>
   70030    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70031    token. Switch to the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   70032 
   70033   </dl><h5 id=script-data-escaped-less-than-sign-state><span class=secno>10.2.4.25 </span><dfn>Script data escaped less-than sign state</dfn></h5>
   70034 
   70035   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70036 
   70037   <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   70038    <dd>Set the <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Switch
   70039    to the <a href=#script-data-escaped-end-tag-open-state>script data escaped end tag open state</a>.</dd>
   70040 
   70041    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70042    <dd>Emit a U+003C LESS-THAN SIGN character token and the
   70043    <a href=#current-input-character>current input character</a> as a character token. Set the
   70044    <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Append the
   70045    lowercase version of the <a href=#current-input-character>current input character</a> (add
   70046    0x0020 to the character's code point) to the <var><a href=#temporary-buffer>temporary
   70047    buffer</a></var>. Switch to the <a href=#script-data-double-escape-start-state>script data double escape start
   70048    state</a>.</dd>
   70049 
   70050    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   70051    <dd>Emit a U+003C LESS-THAN SIGN character token and the
   70052    <a href=#current-input-character>current input character</a> as a character token. Set the
   70053    <var><a href=#temporary-buffer>temporary buffer</a></var> to the empty string. Append the
   70054    <a href=#current-input-character>current input character</a> to the <var><a href=#temporary-buffer>temporary
   70055    buffer</a></var>. Switch to the <a href=#script-data-double-escape-start-state>script data double escape start
   70056    state</a>.</dd>
   70057 
   70058    <dt>Anything else</dt>
   70059    <dd>Emit a U+003C LESS-THAN SIGN character token and reconsume the
   70060    <a href=#current-input-character>current input character</a> in the <a href=#script-data-escaped-state>script data
   70061    escaped state</a>.</dd>
   70062 
   70063   </dl><h5 id=script-data-escaped-end-tag-open-state><span class=secno>10.2.4.26 </span><dfn>Script data escaped end tag open state</dfn></h5>
   70064 
   70065   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70066 
   70067   <dl class=switch><dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70068    <dd>Create a new end tag token, and set its tag name to the
   70069    lowercase version of the <a href=#current-input-character>current input character</a> (add
   70070    0x0020 to the character's code point). Append the <a href=#current-input-character>current
   70071    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   70072    switch to the <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name
   70073    state</a>. (Don't emit the token yet; further details will be
   70074    filled in before it is emitted.)</dd>
   70075 
   70076    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   70077    <dd>Create a new end tag token, and set its tag name to the
   70078    <a href=#current-input-character>current input character</a>. Append the <a href=#current-input-character>current
   70079    input character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Finally,
   70080    switch to the <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name
   70081    state</a>. (Don't emit the token yet; further details will be
   70082    filled in before it is emitted.)</dd>
   70083 
   70084    <dt>Anything else</dt>
   70085    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   70086    character token, and reconsume the <a href=#current-input-character>current input
   70087    character</a> in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   70088 
   70089   </dl><h5 id=script-data-escaped-end-tag-name-state><span class=secno>10.2.4.27 </span><dfn>Script data escaped end tag name state</dfn></h5>
   70090 
   70091   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70092 
   70093   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70094    <dt>U+000A LINE FEED (LF)</dt>
   70095    <dt>U+000C FORM FEED (FF)</dt>
   70096    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70097    <dt>U+0020 SPACE</dt>
   70098    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   70099    token</a>, then switch to the <a href=#before-attribute-name-state>before attribute name
   70100    state</a>. Otherwise, treat it as per the "anything else" entry
   70101    below.</dd>
   70102 
   70103    <dt>U+002F SOLIDUS (/)</dt>
   70104    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   70105    token</a>, then switch to the <a href=#self-closing-start-tag-state>self-closing start tag
   70106    state</a>. Otherwise, treat it as per the "anything else" entry
   70107    below.</dd>
   70108 
   70109    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70110    <dd>If the current end tag token is an <a href=#appropriate-end-tag-token>appropriate end tag
   70111    token</a>, then emit the current tag token and switch to the
   70112    <a href=#data-state>data state</a>. Otherwise, treat it as per the "anything
   70113    else" entry below.</dd>
   70114 
   70115    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70116    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   70117    character</a> (add 0x0020 to the character's code point) to the
   70118    current tag token's tag name. Append the <a href=#current-input-character>current input
   70119    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   70120    <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name state</a>.</dd>
   70121 
   70122    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   70123    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70124    tag token's tag name. Append the <a href=#current-input-character>current input
   70125    character</a> to the <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the
   70126    <a href=#script-data-escaped-end-tag-name-state>script data escaped end tag name state</a>.</dd>
   70127 
   70128    <dt>Anything else</dt>
   70129    <dd>Emit a U+003C LESS-THAN SIGN character token, a U+002F SOLIDUS
   70130    character token, a character token for each of the characters in
   70131    the <var><a href=#temporary-buffer>temporary buffer</a></var> (in the order they were added to
   70132    the buffer), and reconsume the <a href=#current-input-character>current input character</a>
   70133    in the <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   70134 
   70135   </dl><h5 id=script-data-double-escape-start-state><span class=secno>10.2.4.28 </span><dfn>Script data double escape start state</dfn></h5>
   70136 
   70137   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70138 
   70139   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70140    <dt>U+000A LINE FEED (LF)</dt>
   70141    <dt>U+000C FORM FEED (FF)</dt>
   70142    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70143    <dt>U+0020 SPACE</dt>
   70144    <dt>U+002F SOLIDUS (/)</dt>
   70145    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70146    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70147    token. If the <var><a href=#temporary-buffer>temporary buffer</a></var> is the string "<code title="">script</code>", then switch to the <a href=#script-data-double-escaped-state>script data
   70148    double escaped state</a>. Otherwise, switch to the <a href=#script-data-escaped-state>script
   70149    data escaped state</a>.</dd>
   70150 
   70151    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70152    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70153    token. Append the lowercase version of the <a href=#current-input-character>current input
   70154    character</a> (add 0x0020 to the character's code point) to the
   70155    <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-start-state>script data double
   70156    escape start state</a>.</dd>
   70157 
   70158    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   70159    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70160    token. Append the <a href=#current-input-character>current input character</a> to the
   70161    <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-start-state>script data double
   70162    escape start state</a>.</dd>
   70163 
   70164    <dt>Anything else</dt>
   70165    <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   70166    <a href=#script-data-escaped-state>script data escaped state</a>.</dd>
   70167 
   70168   </dl><h5 id=script-data-double-escaped-state><span class=secno>10.2.4.29 </span><dfn>Script data double escaped state</dfn></h5>
   70169 
   70170   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70171 
   70172   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70173    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   70174    <a href=#script-data-double-escaped-dash-state>script data double escaped dash state</a>.</dd>
   70175 
   70176    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70177    <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   70178    <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   70179    state</a>.</dd>
   70180 
   70181    <dt>EOF</dt>
   70182    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70183    <a href=#data-state>data state</a>.</dd>
   70184 
   70185    <dt>Anything else</dt>
   70186    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70187    token. Stay in the <a href=#script-data-double-escaped-state>script data double escaped
   70188    state</a>.</dd>
   70189 
   70190   </dl><h5 id=script-data-double-escaped-dash-state><span class=secno>10.2.4.30 </span><dfn>Script data double escaped dash state</dfn></h5>
   70191 
   70192   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70193 
   70194   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70195    <dd>Emit a U+002D HYPHEN-MINUS character token. Switch to the
   70196    <a href=#script-data-double-escaped-dash-dash-state>script data double escaped dash dash state</a>.</dd>
   70197 
   70198    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70199    <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   70200    <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   70201    state</a>.</dd>
   70202 
   70203    <dt>EOF</dt>
   70204    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70205    <a href=#data-state>data state</a>.</dd>
   70206 
   70207    <dt>Anything else</dt>
   70208    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70209    token. Switch to the <a href=#script-data-double-escaped-state>script data double escaped
   70210    state</a>.</dd>
   70211 
   70212   </dl><h5 id=script-data-double-escaped-dash-dash-state><span class=secno>10.2.4.31 </span><dfn>Script data double escaped dash dash state</dfn></h5>
   70213 
   70214   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70215 
   70216   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70217    <dd>Emit a U+002D HYPHEN-MINUS character token. Stay in the
   70218    <a href=#script-data-double-escaped-dash-dash-state>script data double escaped dash dash state</a>.</dd>
   70219 
   70220    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70221    <dd><p>Emit a U+003C LESS-THAN SIGN character token. Switch to the
   70222    <a href=#script-data-double-escaped-less-than-sign-state>script data double escaped less-than sign
   70223    state</a>.</dd>
   70224 
   70225    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70226    <dd>Emit a U+003E GREATER-THAN SIGN character token. Switch to the
   70227    <a href=#script-data-state>script data state</a>.</dd>
   70228 
   70229    <dt>EOF</dt>
   70230    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70231    <a href=#data-state>data state</a>.</dd>
   70232 
   70233    <dt>Anything else</dt>
   70234    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70235    token. Switch to the <a href=#script-data-double-escaped-state>script data double escaped
   70236    state</a>.</dd>
   70237 
   70238   </dl><h5 id=script-data-double-escaped-less-than-sign-state><span class=secno>10.2.4.32 </span><dfn>Script data double escaped less-than sign state</dfn></h5>
   70239 
   70240   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70241 
   70242   <dl class=switch><dt>U+002F SOLIDUS (/)</dt>
   70243    <dd>Emit a U+002F SOLIDUS character token. Set the <var><a href=#temporary-buffer>temporary
   70244    buffer</a></var> to the empty string. Switch to the <a href=#script-data-double-escape-end-state>script data
   70245    double escape end state</a>.</dd>
   70246 
   70247    <dt>Anything else</dt>
   70248    <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   70249    <a href=#script-data-double-escaped-state>script data double escaped state</a>.</dd>
   70250 
   70251   </dl><h5 id=script-data-double-escape-end-state><span class=secno>10.2.4.33 </span><dfn>Script data double escape end state</dfn></h5>
   70252 
   70253   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70254 
   70255   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70256    <dt>U+000A LINE FEED (LF)</dt>
   70257    <dt>U+000C FORM FEED (FF)</dt>
   70258    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70259    <dt>U+0020 SPACE</dt>
   70260    <dt>U+002F SOLIDUS (/)</dt>
   70261    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70262    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70263    token. If the <var><a href=#temporary-buffer>temporary buffer</a></var> is the string "<code title="">script</code>", then switch to the <a href=#script-data-escaped-state>script data
   70264    escaped state</a>. Otherwise, switch to the <a href=#script-data-double-escaped-state>script data
   70265    double escaped state</a>.</dd>
   70266 
   70267    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70268    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70269    token. Append the lowercase version of the <a href=#current-input-character>current input
   70270    character</a> (add 0x0020 to the character's code point) to the
   70271    <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-end-state>script data double
   70272    escape end state</a>.</dd>
   70273 
   70274    <dt>U+0061 LATIN SMALL LETTER A through to U+007A LATIN SMALL LETTER Z</dt>
   70275    <dd>Emit the <a href=#current-input-character>current input character</a> as a character
   70276    token. Append the <a href=#current-input-character>current input character</a> to the
   70277    <var><a href=#temporary-buffer>temporary buffer</a></var>. Stay in the <a href=#script-data-double-escape-end-state>script data double
   70278    escape end state</a>.</dd>
   70279 
   70280    <dt>Anything else</dt>
   70281    <dd>Reconsume the <a href=#current-input-character>current input character</a> in the
   70282    <a href=#script-data-double-escaped-state>script data double escaped state</a>.</dd>
   70283 
   70284   </dl><h5 id=before-attribute-name-state><span class=secno>10.2.4.34 </span><dfn>Before attribute name state</dfn></h5>
   70285 
   70286   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70287 
   70288   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70289    <dt>U+000A LINE FEED (LF)</dt>
   70290    <dt>U+000C FORM FEED (FF)</dt>
   70291    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70292    <dt>U+0020 SPACE</dt>
   70293    <dd>Stay in the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   70294 
   70295    <dt>U+002F SOLIDUS (/)</dt>
   70296    <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>
   70297 
   70298    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70299    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   70300    state</a>.</dd>
   70301 
   70302    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70303    <dd>Start a new attribute in the current tag token. Set that
   70304    attribute's name to the lowercase version of the <a href=#current-input-character>current input
   70305    character</a> (add 0x0020 to the character's code point), and its
   70306    value to the empty string. Switch to the <a href=#attribute-name-state>attribute name
   70307    state</a>.</dd>
   70308 
   70309    <dt>U+0022 QUOTATION MARK (")</dt>
   70310    <dt>U+0027 APOSTROPHE (')</dt>
   70311    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70312    <dt>U+003D EQUALS SIGN (=)</dt>
   70313    <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   70314    entry below.</dd>
   70315 
   70316    <dt>EOF</dt>
   70317    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70318    <a href=#data-state>data state</a>.</dd>
   70319 
   70320    <dt>Anything else</dt>
   70321    <dd>Start a new attribute in the current tag token. Set that
   70322    attribute's name to the <a href=#current-input-character>current input character</a>, and its value to
   70323    the empty string. Switch to the <a href=#attribute-name-state>attribute name
   70324    state</a>.</dd>
   70325 
   70326   </dl><h5 id=attribute-name-state><span class=secno>10.2.4.35 </span><dfn>Attribute name state</dfn></h5>
   70327 
   70328   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70329 
   70330   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70331    <dt>U+000A LINE FEED (LF)</dt>
   70332    <dt>U+000C FORM FEED (FF)</dt>
   70333    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70334    <dt>U+0020 SPACE</dt>
   70335    <dd>Switch to the <a href=#after-attribute-name-state>after attribute name state</a>.</dd>
   70336 
   70337    <dt>U+002F SOLIDUS (/)</dt>
   70338    <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>
   70339 
   70340    <dt>U+003D EQUALS SIGN (=)</dt>
   70341    <dd>Switch to the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>
   70342 
   70343    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70344    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   70345    state</a>.</dd>
   70346 
   70347    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70348    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   70349    character</a> (add 0x0020 to the character's code point) to the
   70350    current attribute's name. Stay in the <a href=#attribute-name-state>attribute name
   70351    state</a>.</dd>
   70352 
   70353    <dt>U+0022 QUOTATION MARK (")</dt>
   70354    <dt>U+0027 APOSTROPHE (')</dt>
   70355    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70356    <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   70357    entry below.</dd>
   70358 
   70359    <dt>EOF</dt>
   70360    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70361    <a href=#data-state>data state</a>.</dd>
   70362 
   70363    <dt>Anything else</dt>
   70364    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70365    attribute's name. Stay in the <a href=#attribute-name-state>attribute name
   70366    state</a>.</dd>
   70367 
   70368   </dl><p>When the user agent leaves the attribute name state (and before
   70369   emitting the tag token, if appropriate), the complete attribute's
   70370   name must be compared to the other attributes on the same token;
   70371   if there is already an attribute on the token with the exact same
   70372   name, then this is a <a href=#parse-error>parse error</a> and the new
   70373   attribute must be dropped, along with the value that gets
   70374   associated with it (if any).</p>
   70375 
   70376 
   70377   <h5 id=after-attribute-name-state><span class=secno>10.2.4.36 </span><dfn>After attribute name state</dfn></h5>
   70378 
   70379   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70380 
   70381   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70382    <dt>U+000A LINE FEED (LF)</dt>
   70383    <dt>U+000C FORM FEED (FF)</dt>
   70384    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70385    <dt>U+0020 SPACE</dt>
   70386    <dd>Stay in the <a href=#after-attribute-name-state>after attribute name state</a>.</dd>
   70387 
   70388    <dt>U+002F SOLIDUS (/)</dt>
   70389    <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>
   70390 
   70391    <dt>U+003D EQUALS SIGN (=)</dt>
   70392    <dd>Switch to the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>
   70393 
   70394    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70395    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   70396    state</a>.</dd>
   70397 
   70398    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70399    <dd>Start a new attribute in the current tag token. Set that
   70400    attribute's name to the lowercase version of the <a href=#current-input-character>current
   70401    input character</a> (add 0x0020 to the character's code point),
   70402    and its value to the empty string. Switch to the <a href=#attribute-name-state>attribute
   70403    name state</a>.</dd>
   70404 
   70405    <dt>U+0022 QUOTATION MARK (")</dt>
   70406    <dt>U+0027 APOSTROPHE (')</dt>
   70407    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70408    <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   70409    entry below.</dd>
   70410 
   70411    <dt>EOF</dt>
   70412    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70413    <a href=#data-state>data state</a>.</dd>
   70414 
   70415    <dt>Anything else</dt>
   70416    <dd>Start a new attribute in the current tag token. Set that
   70417    attribute's name to the <a href=#current-input-character>current input character</a>, and
   70418    its value to the empty string. Switch to the <a href=#attribute-name-state>attribute name
   70419    state</a>.</dd>
   70420 
   70421   </dl><h5 id=before-attribute-value-state><span class=secno>10.2.4.37 </span><dfn>Before attribute value state</dfn></h5>
   70422 
   70423   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70424 
   70425   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70426    <dt>U+000A LINE FEED (LF)</dt>
   70427    <dt>U+000C FORM FEED (FF)</dt>
   70428    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70429    <dt>U+0020 SPACE</dt>
   70430    <dd>Stay in the <a href=#before-attribute-value-state>before attribute value state</a>.</dd>
   70431 
   70432    <dt>U+0022 QUOTATION MARK (")</dt>
   70433    <dd>Switch to the <a href=#attribute-value-(double-quoted)-state>attribute value (double-quoted) state</a>.</dd>
   70434 
   70435    <dt>U+0026 AMPERSAND (&amp;)</dt>
   70436    <dd>Switch to the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted) state</a>
   70437    and reconsume this <a href=#current-input-character>current input character</a>.</dd>
   70438 
   70439    <dt>U+0027 APOSTROPHE (')</dt>
   70440    <dd>Switch to the <a href=#attribute-value-(single-quoted)-state>attribute value (single-quoted) state</a>.</dd>
   70441 
   70442    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70443    <dd><a href=#parse-error>Parse error</a>. Emit the current tag token. Switch to
   70444    the <a href=#data-state>data state</a>.</dd>
   70445 
   70446    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70447    <dt>U+003D EQUALS SIGN (=)</dt>
   70448    <dt>U+0060 GRAVE ACCENT (`)</dt>
   70449    <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   70450    entry below.</dd>
   70451 
   70452    <dt>EOF</dt>
   70453    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70454    <a href=#data-state>data state</a>.</dd>
   70455 
   70456    <dt>Anything else</dt>
   70457    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70458    attribute's value. Switch to the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted)
   70459    state</a>.</dd>
   70460 
   70461   </dl><h5 id=attribute-value-(double-quoted)-state><span class=secno>10.2.4.38 </span><dfn>Attribute value (double-quoted) state</dfn></h5>
   70462 
   70463   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70464 
   70465   <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   70466    <dd>Switch to the <a href=#after-attribute-value-(quoted)-state>after attribute value (quoted)
   70467    state</a>.</dd>
   70468 
   70469    <dt>U+0026 AMPERSAND (&amp;)</dt>
   70470    <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   70471    state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   70472    being U+0022 QUOTATION MARK (").</dd>
   70473 
   70474    <dt>EOF</dt>
   70475    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70476    <a href=#data-state>data state</a>.</dd>
   70477 
   70478    <dt>Anything else</dt>
   70479    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70480    attribute's value. Stay in the <a href=#attribute-value-(double-quoted)-state>attribute value
   70481    (double-quoted) state</a>.</dd>
   70482 
   70483   </dl><h5 id=attribute-value-(single-quoted)-state><span class=secno>10.2.4.39 </span><dfn>Attribute value (single-quoted) state</dfn></h5>
   70484 
   70485   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70486 
   70487   <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   70488    <dd>Switch to the <a href=#after-attribute-value-(quoted)-state>after attribute value (quoted)
   70489    state</a>.</dd>
   70490 
   70491    <dt>U+0026 AMPERSAND (&amp;)</dt>
   70492    <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   70493    state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   70494    being U+0027 APOSTROPHE (').</dd>
   70495 
   70496    <dt>EOF</dt>
   70497    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70498    <a href=#data-state>data state</a>.</dd>
   70499 
   70500    <dt>Anything else</dt>
   70501    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70502    attribute's value. Stay in the <a href=#attribute-value-(single-quoted)-state>attribute value
   70503    (single-quoted) state</a>.</dd>
   70504 
   70505   </dl><h5 id=attribute-value-(unquoted)-state><span class=secno>10.2.4.40 </span><dfn>Attribute value (unquoted) state</dfn></h5>
   70506 
   70507   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70508 
   70509   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70510    <dt>U+000A LINE FEED (LF)</dt>
   70511    <dt>U+000C FORM FEED (FF)</dt>
   70512    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70513    <dt>U+0020 SPACE</dt>
   70514    <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   70515 
   70516    <dt>U+0026 AMPERSAND (&amp;)</dt>
   70517    <dd>Switch to the <a href=#character-reference-in-attribute-value-state>character reference in attribute value
   70518    state</a>, with the <a href=#additional-allowed-character>additional allowed character</a>
   70519    being U+003E GREATER-THAN SIGN (&gt;).</dd>
   70520 
   70521    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70522    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   70523    state</a>.</dd>
   70524 
   70525    <dt>U+0022 QUOTATION MARK (")</dt>
   70526    <dt>U+0027 APOSTROPHE (')</dt>
   70527    <dt>U+003C LESS-THAN SIGN (&lt;)</dt>
   70528    <dt>U+003D EQUALS SIGN (=)</dt>
   70529    <dt>U+0060 GRAVE ACCENT (`)</dt>
   70530    <dd><a href=#parse-error>Parse error</a>. Treat it as per the "anything else"
   70531    entry below.</dd>
   70532 
   70533    <dt>EOF</dt>
   70534    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70535    <a href=#data-state>data state</a>.</dd>
   70536 
   70537    <dt>Anything else</dt>
   70538    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70539    attribute's value. Stay in the <a href=#attribute-value-(unquoted)-state>attribute value (unquoted)
   70540    state</a>.</dd>
   70541 
   70542   </dl><h5 id=character-reference-in-attribute-value-state><span class=secno>10.2.4.41 </span><dfn>Character reference in attribute value state</dfn></h5>
   70543 
   70544   <p>Attempt to <a href=#consume-a-character-reference>consume a character reference</a>.</p>
   70545 
   70546   <p>If nothing is returned, append a U+0026 AMPERSAND character to
   70547   the current attribute's value.</p>
   70548 
   70549   <p>Otherwise, append the returned character token to the current
   70550   attribute's value.</p>
   70551 
   70552   <p>Finally, switch back to the attribute value state that you were
   70553   in when were switched into this state.</p>
   70554 
   70555 
   70556   <h5 id=after-attribute-value-(quoted)-state><span class=secno>10.2.4.42 </span><dfn>After attribute value (quoted) state</dfn></h5>
   70557 
   70558   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70559 
   70560   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70561    <dt>U+000A LINE FEED (LF)</dt>
   70562    <dt>U+000C FORM FEED (FF)</dt>
   70563    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70564    <dt>U+0020 SPACE</dt>
   70565    <dd>Switch to the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   70566 
   70567    <dt>U+002F SOLIDUS (/)</dt>
   70568    <dd>Switch to the <a href=#self-closing-start-tag-state>self-closing start tag state</a>.</dd>
   70569 
   70570    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70571    <dd>Emit the current tag token. Switch to the <a href=#data-state>data
   70572    state</a>.</dd>
   70573 
   70574    <dt>EOF</dt>
   70575    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70576    <a href=#data-state>data state</a>.</dd>
   70577 
   70578    <dt>Anything else</dt>
   70579    <dd><a href=#parse-error>Parse error</a>. Reconsume the character in
   70580    the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   70581 
   70582   </dl><h5 id=self-closing-start-tag-state><span class=secno>10.2.4.43 </span><dfn>Self-closing start tag state</dfn></h5>
   70583 
   70584   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70585 
   70586   <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70587    <dd>Set the <i>self-closing flag</i> of the current tag
   70588    token. Emit the current tag token. Switch to the <a href=#data-state>data
   70589    state</a>.</dd>
   70590 
   70591    <dt>EOF</dt>
   70592    <dd><a href=#parse-error>Parse error</a>. Reconsume the EOF character in the
   70593    <a href=#data-state>data state</a>.</dd>
   70594 
   70595    <dt>Anything else</dt>
   70596    <dd><a href=#parse-error>Parse error</a>. Reconsume the character in
   70597    the <a href=#before-attribute-name-state>before attribute name state</a>.</dd>
   70598 
   70599   </dl><h5 id=bogus-comment-state><span class=secno>10.2.4.44 </span><dfn>Bogus comment state</dfn></h5>
   70600 
   70601   <p>Consume every character up to and including the first U+003E
   70602   GREATER-THAN SIGN character (&gt;) or the end of the file (EOF),
   70603   whichever comes first. Emit a comment token whose data is the
   70604   concatenation of all the characters starting from and including
   70605   the character that caused the state machine to switch into the
   70606   bogus comment state, up to and including the character immediately
   70607   before the last consumed character (i.e. up to the character just
   70608   before the U+003E or EOF character). (If the comment was started
   70609   by the end of the file (EOF), the token is empty.)</p>
   70610 
   70611   <p>Switch to the <a href=#data-state>data state</a>.</p>
   70612 
   70613   <p>If the end of the file was reached, reconsume the EOF
   70614   character.</p>
   70615 
   70616 
   70617   <h5 id=markup-declaration-open-state><span class=secno>10.2.4.45 </span><dfn>Markup declaration open state</dfn></h5>
   70618 
   70619   <p>If the next two characters are both U+002D HYPHEN-MINUS
   70620   characters (-), consume those two characters, create a comment token
   70621   whose data is the empty string, and switch to the <a href=#comment-start-state>comment
   70622   start state</a>.</p>
   70623 
   70624   <p>Otherwise, if the next seven characters are an <a href=#ascii-case-insensitive>ASCII
   70625   case-insensitive</a> match for the word "DOCTYPE", then consume
   70626   those characters and switch to the <a href=#doctype-state>DOCTYPE state</a>.</p>
   70627 
   70628   <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
   70629   content</a>" and the <a href=#current-node>current node</a> is not an element
   70630   in the <a href=#html-namespace-0>HTML namespace</a> and the next seven characters are
   70631   an <a href=#case-sensitive>case-sensitive</a> match for the string "[CDATA[" (the
   70632   five uppercase letters "CDATA" with a U+005B LEFT SQUARE BRACKET
   70633   character before and after), then consume those characters and
   70634   switch to the <a href=#cdata-section-state>CDATA section state</a>.</p>
   70635 
   70636   <p>Otherwise, this is a <a href=#parse-error>parse error</a>. Switch to the
   70637   <a href=#bogus-comment-state>bogus comment state</a>. The next character that is
   70638   consumed, if any, is the first character that will be in the
   70639   comment.</p>
   70640 
   70641 
   70642   <h5 id=comment-start-state><span class=secno>10.2.4.46 </span><dfn>Comment start state</dfn></h5>
   70643 
   70644   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70645 
   70646   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70647    <dd>Switch to the <a href=#comment-start-dash-state>comment start dash state</a>.</dd>
   70648 
   70649    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70650    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Switch to the
   70651    <a href=#data-state>data state</a>.</dd> <!-- see comment in comment end state
   70652    -->
   70653 
   70654    <dt>EOF</dt>
   70655    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   70656    the EOF character in the <a href=#data-state>data state</a>.</dd>
   70657 
   70658    <dt>Anything else</dt>
   70659    <dd>Append the <a href=#current-input-character>current input character</a> to the comment
   70660    token's data. Switch to the <a href=#comment-state>comment state</a>.</dd>
   70661 
   70662   </dl><h5 id=comment-start-dash-state><span class=secno>10.2.4.47 </span><dfn>Comment start dash state</dfn></h5>
   70663 
   70664   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70665 
   70666   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70667    <dd>Switch to the <a href=#comment-end-state>comment end state</a></dd>
   70668 
   70669    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70670    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Switch to
   70671    the <a href=#data-state>data state</a>.</dd>
   70672 
   70673    <dt>EOF</dt>
   70674    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   70675    EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   70676    in comment end state -->
   70677 
   70678    <dt>Anything else</dt>
   70679    <dd>Append a U+002D HYPHEN-MINUS character (-) and the
   70680    <a href=#current-input-character>current input character</a> to the comment token's
   70681    data. Switch to the <a href=#comment-state>comment state</a>.</dd>
   70682 
   70683   </dl><h5 id=comment-state><span class=secno>10.2.4.48 </span><dfn id=comment>Comment state</dfn></h5>
   70684 
   70685   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70686 
   70687   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70688    <dd>Switch to the <a href=#comment-end-dash-state>comment end dash state</a></dd>
   70689 
   70690    <dt>EOF</dt>
   70691    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   70692    EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   70693    in comment end state -->
   70694 
   70695    <dt>Anything else</dt>
   70696    <dd>Append the <a href=#current-input-character>current input character</a> to the comment
   70697    token's data. Stay in the <a href=#comment-state>comment state</a>.</dd>
   70698 
   70699   </dl><h5 id=comment-end-dash-state><span class=secno>10.2.4.49 </span><dfn>Comment end dash state</dfn></h5>
   70700 
   70701   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70702 
   70703   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70704    <dd>Switch to the <a href=#comment-end-state>comment end state</a></dd>
   70705 
   70706    <dt>EOF</dt>
   70707    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume the
   70708    EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see comment
   70709    in comment end state -->
   70710 
   70711    <dt>Anything else</dt>
   70712    <dd>Append a U+002D HYPHEN-MINUS character (-) and the
   70713    <a href=#current-input-character>current input character</a> to the comment token's
   70714    data. Switch to the <a href=#comment-state>comment state</a>.</dd>
   70715 
   70716   </dl><h5 id=comment-end-state><span class=secno>10.2.4.50 </span><dfn>Comment end state</dfn></h5>
   70717 
   70718   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70719 
   70720   <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70721    <dd>Emit the comment token. Switch to the <a href=#data-state>data
   70722    state</a>.</dd>
   70723 
   70724    <dt>U+0009 CHARACTER TABULATION</dt>
   70725    <dt>U+000A LINE FEED (LF)</dt>
   70726    <dt>U+000C FORM FEED (FF)</dt>
   70727    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70728    <dt>U+0020 SPACE</dt>
   70729    <dd><a href=#parse-error>Parse error</a>. Append two U+002D HYPHEN-MINUS
   70730    characters (-) and the <a href=#current-input-character>current input character</a> to the
   70731    comment token's data. Switch to the <a href=#comment-end-space-state>comment end space
   70732    state</a>.</dd>
   70733 
   70734    <dt>U+0021 EXCLAMATION MARK (!)</dt>
   70735    <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#comment-end-bang-state>comment end bang
   70736    state</a>.</dd>
   70737 
   70738    <dt>U+002D HYPHEN-MINUS (-)</dt>
   70739    <dd><a href=#parse-error>Parse error</a>. Append a U+002D HYPHEN-MINUS
   70740    character (-) to the comment token's data. Stay in the
   70741    <a href=#comment-end-state>comment end state</a>.</dd>
   70742 
   70743    <dt>EOF</dt>
   70744    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   70745    the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- For
   70746    security reasons: otherwise, hostile user could put a <script> in
   70747    a comment e.g. in a blog comment and then DOS the server so that
   70748    the end tag isn't read, and then the commented <script> tag would
   70749    be treated as live code -->
   70750 
   70751    <dt>Anything else</dt>
   70752    <dd><a href=#parse-error>Parse error</a>. Append two U+002D HYPHEN-MINUS
   70753    characters (-) and the <a href=#current-input-character>current input character</a> to the
   70754    comment token's data. Switch to the <a href=#comment-state>comment
   70755    state</a>.</dd>
   70756 
   70757   </dl><h5 id=comment-end-bang-state><span class=secno>10.2.4.51 </span><dfn>Comment end bang state</dfn></h5>
   70758 
   70759   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70760 
   70761   <dl class=switch><dt>U+002D HYPHEN-MINUS (-)</dt>
   70762    <dd>Append two U+002D HYPHEN-MINUS characters (-) and a U+0021
   70763    EXCLAMATION MARK character (!) to the comment token's data. Switch
   70764    to the <a href=#comment-end-dash-state>comment end dash state</a>.</dd>
   70765 
   70766    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70767    <dd>Emit the comment token. Switch to the <a href=#data-state>data
   70768    state</a>.</dd>
   70769 
   70770    <dt>EOF</dt>
   70771    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   70772    the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see
   70773    comment in comment end state -->
   70774 
   70775    <dt>Anything else</dt>
   70776    <dd>Append two U+002D HYPHEN-MINUS characters (-), a U+0021
   70777    EXCLAMATION MARK character (!), and the <a href=#current-input-character>current input
   70778    character</a> to the comment token's data. Switch to the
   70779    <a href=#comment-state>comment state</a>.</dd>
   70780 
   70781   </dl><h5 id=comment-end-space-state><span class=secno>10.2.4.52 </span><dfn>Comment end space state</dfn></h5>
   70782 
   70783   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70784 
   70785   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70786    <dt>U+000A LINE FEED (LF)</dt>
   70787    <dt>U+000C FORM FEED (FF)</dt>
   70788    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70789    <dt>U+0020 SPACE</dt>
   70790    <dd>Append the <a href=#current-input-character>current input character</a> to the comment token's data. Stay in
   70791    the <a href=#comment-end-space-state>comment end space state</a>.</dd>
   70792 
   70793    <dt>U+002D HYPHEN-MINUS (-)</dt>
   70794    <dd>Switch to the <a href=#comment-end-dash-state>comment end dash state</a>.</dd>
   70795 
   70796    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70797    <dd>Emit the comment token. Switch to the <a href=#data-state>data
   70798    state</a>.</dd>
   70799 
   70800    <dt>EOF</dt>
   70801    <dd><a href=#parse-error>Parse error</a>. Emit the comment token. Reconsume
   70802    the EOF character in the <a href=#data-state>data state</a>.</dd> <!-- see
   70803    comment in comment end state -->
   70804 
   70805    <dt>Anything else</dt>
   70806    <dd>Append the <a href=#current-input-character>current input character</a> to the comment token's data. Switch
   70807    to the <a href=#comment-state>comment state</a>.</dd>
   70808 
   70809   </dl><h5 id=doctype-state><span class=secno>10.2.4.53 </span><dfn>DOCTYPE state</dfn></h5>
   70810 
   70811   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70812 
   70813   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70814    <dt>U+000A LINE FEED (LF)</dt>
   70815    <dt>U+000C FORM FEED (FF)</dt>
   70816    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70817    <dt>U+0020 SPACE</dt>
   70818    <dd>Switch to the <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>
   70819 
   70820    <dt>EOF</dt>
   70821    <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   70822    <i>force-quirks flag</i> to <i>on</i>. Emit the token. Reconsume
   70823    the EOF character in the <a href=#data-state>data state</a>.</dd>
   70824 
   70825    <dt>Anything else</dt>
   70826    <dd><a href=#parse-error>Parse error</a>. Reconsume the character in the
   70827    <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>
   70828 
   70829   </dl><h5 id=before-doctype-name-state><span class=secno>10.2.4.54 </span><dfn>Before DOCTYPE name state</dfn></h5>
   70830 
   70831   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70832 
   70833   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70834    <dt>U+000A LINE FEED (LF)</dt>
   70835    <dt>U+000C FORM FEED (FF)</dt>
   70836    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70837    <dt>U+0020 SPACE</dt>
   70838    <dd>Stay in the <a href=#before-doctype-name-state>before DOCTYPE name state</a>.</dd>
   70839 
   70840    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70841    <dd>Create a new DOCTYPE token. Set the token's name to the
   70842    lowercase version of the <a href=#current-input-character>current input character</a> (add 0x0020 to the
   70843    character's code point). Switch to the <a href=#doctype-name-state>DOCTYPE name
   70844    state</a>.</dd>
   70845 
   70846    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70847    <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   70848    <i>force-quirks flag</i> to <i>on</i>. Emit the token. Switch to
   70849    the <a href=#data-state>data state</a>.</dd>
   70850 
   70851    <dt>EOF</dt>
   70852    <dd><a href=#parse-error>Parse error</a>. Create a new DOCTYPE token. Set its
   70853    <i>force-quirks flag</i> to <i>on</i>. Emit the token. Reconsume
   70854    the EOF character in the <a href=#data-state>data state</a>.</dd>
   70855 
   70856    <dt>Anything else</dt>
   70857    <dd>Create a new DOCTYPE token. Set the token's name to the
   70858    <a href=#current-input-character>current input character</a>. Switch to the <a href=#doctype-name-state>DOCTYPE name
   70859    state</a>.</dd>
   70860 
   70861   </dl><h5 id=doctype-name-state><span class=secno>10.2.4.55 </span><dfn>DOCTYPE name state</dfn></h5>
   70862 
   70863   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70864 
   70865   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70866    <dt>U+000A LINE FEED (LF)</dt>
   70867    <dt>U+000C FORM FEED (FF)</dt>
   70868    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70869    <dt>U+0020 SPACE</dt>
   70870    <dd>Switch to the <a href=#after-doctype-name-state>after DOCTYPE name state</a>.</dd>
   70871 
   70872    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70873    <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   70874    state</a>.</dd>
   70875 
   70876    <dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z</dt>
   70877    <dd>Append the lowercase version of the <a href=#current-input-character>current input
   70878    character</a> (add 0x0020 to the character's code point) to the
   70879    current DOCTYPE token's name. Stay in the <a href=#doctype-name-state>DOCTYPE name
   70880    state</a>.</dd>
   70881 
   70882    <dt>EOF</dt>
   70883    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70884    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   70885    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   70886 
   70887    <dt>Anything else</dt>
   70888    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   70889    DOCTYPE token's name. Stay in the <a href=#doctype-name-state>DOCTYPE name
   70890    state</a>.</dd>
   70891 
   70892   </dl><h5 id=after-doctype-name-state><span class=secno>10.2.4.56 </span><dfn>After DOCTYPE name state</dfn></h5>
   70893 
   70894   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70895 
   70896   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70897    <dt>U+000A LINE FEED (LF)</dt>
   70898    <dt>U+000C FORM FEED (FF)</dt>
   70899    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70900    <dt>U+0020 SPACE</dt>
   70901    <dd>Stay in the <a href=#after-doctype-name-state>after DOCTYPE name state</a>.</dd>
   70902 
   70903    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70904    <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   70905    state</a>.</dd>
   70906 
   70907    <dt>EOF</dt>
   70908    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70909    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   70910    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   70911 
   70912    <dt>Anything else</dt>
   70913    <dd>
   70914 
   70915     <p>If the six characters starting from the <a href=#current-input-character>current input
   70916     character</a> are an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
   70917     for the word "PUBLIC", then consume those characters and switch to
   70918     the <a href=#after-doctype-public-keyword-state>after DOCTYPE public keyword state</a>.</p>
   70919 
   70920     <p>Otherwise, if the six characters starting from the
   70921     <a href=#current-input-character>current input character</a> are an <a href=#ascii-case-insensitive>ASCII
   70922     case-insensitive</a> match for the word "SYSTEM", then consume
   70923     those characters and switch to the <a href=#after-doctype-system-keyword-state>after DOCTYPE system
   70924     keyword state</a>.</p>
   70925 
   70926     <p>Otherwise, this is the <a href=#parse-error>parse error</a>. Set the
   70927     DOCTYPE token's <i>force-quirks flag</i> to <i>on</i>. Switch to
   70928     the <a href=#bogus-doctype-state>bogus DOCTYPE state</a>.</p>
   70929 
   70930    </dd>
   70931 
   70932   </dl><h5 id=after-doctype-public-keyword-state><span class=secno>10.2.4.57 </span><dfn>After DOCTYPE public keyword state</dfn></h5>
   70933 
   70934   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70935 
   70936   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70937    <dt>U+000A LINE FEED (LF)</dt>
   70938    <dt>U+000C FORM FEED (FF)</dt>
   70939    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70940    <dt>U+0020 SPACE</dt>
   70941    <dd>Switch to the <a href=#before-doctype-public-identifier-state>before DOCTYPE public identifier
   70942    state</a>.</dd>
   70943 
   70944    <dt>U+0022 QUOTATION MARK (")</dt>
   70945    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's public
   70946    identifier to the empty string (not missing), then switch to the
   70947    <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public identifier (double-quoted) state</a>.</dd>
   70948 
   70949    <dt>U+0027 APOSTROPHE (')</dt>
   70950    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's public
   70951    identifier to the empty string (not missing), then switch to the
   70952    <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public identifier (single-quoted) state</a>.</dd>
   70953 
   70954    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70955    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70956    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   70957    token. Switch to the <a href=#data-state>data state</a>.</dd>
   70958 
   70959    <dt>EOF</dt>
   70960    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70961    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   70962    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   70963 
   70964    <dt>Anything else</dt>
   70965    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70966    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   70967    DOCTYPE state</a>.</dd>
   70968 
   70969   </dl><h5 id=before-doctype-public-identifier-state><span class=secno>10.2.4.58 </span><dfn>Before DOCTYPE public identifier state</dfn></h5>
   70970 
   70971   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   70972 
   70973   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   70974    <dt>U+000A LINE FEED (LF)</dt>
   70975    <dt>U+000C FORM FEED (FF)</dt>
   70976    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   70977    <dt>U+0020 SPACE</dt>
   70978    <dd>Stay in the <a href=#before-doctype-public-identifier-state>before DOCTYPE public identifier state</a>.</dd>
   70979 
   70980    <dt>U+0022 QUOTATION MARK (")</dt>
   70981    <dd>Set the DOCTYPE token's public identifier to the empty string
   70982    (not missing), then switch to the <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public identifier
   70983    (double-quoted) state</a>.</dd>
   70984 
   70985    <dt>U+0027 APOSTROPHE (')</dt>
   70986    <dd>Set the DOCTYPE token's public identifier to the empty string
   70987    (not missing), then switch to the <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public identifier
   70988    (single-quoted) state</a>.</dd>
   70989 
   70990    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   70991    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70992    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   70993    token. Switch to the <a href=#data-state>data state</a>.</dd>
   70994 
   70995    <dt>EOF</dt>
   70996    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   70997    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   70998    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   70999 
   71000    <dt>Anything else</dt>
   71001    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71002    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   71003    DOCTYPE state</a>.</dd>
   71004 
   71005   </dl><h5 id=doctype-public-identifier-(double-quoted)-state><span class=secno>10.2.4.59 </span><dfn>DOCTYPE public identifier (double-quoted) state</dfn></h5>
   71006 
   71007   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71008 
   71009   <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   71010    <dd>Switch to the <a href=#after-doctype-public-identifier-state>after DOCTYPE public identifier state</a>.</dd>
   71011 
   71012    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71013    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71014    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71015    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71016 
   71017    <dt>EOF</dt>
   71018    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71019    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71020    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71021 
   71022    <dt>Anything else</dt>
   71023    <dd>Append the <a href=#current-input-character>current input character</a> to the current DOCTYPE
   71024    token's public identifier. Stay in the <a href=#doctype-public-identifier-(double-quoted)-state>DOCTYPE public
   71025    identifier (double-quoted) state</a>.</dd>
   71026 
   71027   </dl><h5 id=doctype-public-identifier-(single-quoted)-state><span class=secno>10.2.4.60 </span><dfn>DOCTYPE public identifier (single-quoted) state</dfn></h5>
   71028 
   71029   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71030 
   71031   <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   71032    <dd>Switch to the <a href=#after-doctype-public-identifier-state>after DOCTYPE public identifier state</a>.</dd>
   71033 
   71034    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71035    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71036    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71037    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71038 
   71039    <dt>EOF</dt>
   71040    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71041    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71042    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71043 
   71044    <dt>Anything else</dt>
   71045    <dd>Append the <a href=#current-input-character>current input character</a> to the current DOCTYPE
   71046    token's public identifier. Stay in the <a href=#doctype-public-identifier-(single-quoted)-state>DOCTYPE public
   71047    identifier (single-quoted) state</a>.</dd>
   71048 
   71049   </dl><h5 id=after-doctype-public-identifier-state><span class=secno>10.2.4.61 </span><dfn>After DOCTYPE public identifier state</dfn></h5>
   71050 
   71051   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71052 
   71053   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71054    <dt>U+000A LINE FEED (LF)</dt>
   71055    <dt>U+000C FORM FEED (FF)</dt>
   71056    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71057    <dt>U+0020 SPACE</dt>
   71058    <dd>Switch to the <a href=#between-doctype-public-and-system-identifiers-state>between DOCTYPE public and system
   71059    identifiers state</a>.</dd>
   71060 
   71061    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71062    <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   71063    state</a>.</dd>
   71064 
   71065    <dt>U+0022 QUOTATION MARK (")</dt>
   71066    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   71067    identifier to the empty string (not missing), then switch to the
   71068    <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier (double-quoted) state</a>.</dd>
   71069 
   71070    <dt>U+0027 APOSTROPHE (')</dt>
   71071    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   71072    identifier to the empty string (not missing), then switch to the
   71073    <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier (single-quoted) state</a>.</dd>
   71074 
   71075    <dt>EOF</dt>
   71076    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71077    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71078    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71079 
   71080    <dt>Anything else</dt>
   71081    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71082    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   71083    DOCTYPE state</a>.</dd>
   71084 
   71085   </dl><h5 id=between-doctype-public-and-system-identifiers-state><span class=secno>10.2.4.62 </span><dfn>Between DOCTYPE public and system identifiers state</dfn></h5>
   71086 
   71087   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71088 
   71089   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71090    <dt>U+000A LINE FEED (LF)</dt>
   71091    <dt>U+000C FORM FEED (FF)</dt>
   71092    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71093    <dt>U+0020 SPACE</dt>
   71094    <dd>Stay in the <a href=#between-doctype-public-and-system-identifiers-state>between DOCTYPE public and system identifiers
   71095    state</a>.</dd>
   71096 
   71097    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71098    <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   71099    state</a>.</dd>
   71100 
   71101    <dt>U+0022 QUOTATION MARK (")</dt>
   71102    <dd>Set the DOCTYPE token's system identifier to the empty string
   71103    (not missing), then switch to the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier
   71104    (double-quoted) state</a>.</dd>
   71105 
   71106    <dt>U+0027 APOSTROPHE (')</dt>
   71107    <dd>Set the DOCTYPE token's system identifier to the empty string
   71108    (not missing), then switch to the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier
   71109    (single-quoted) state</a>.</dd>
   71110 
   71111    <dt>EOF</dt>
   71112    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71113    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71114    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71115 
   71116    <dt>Anything else</dt>
   71117    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71118    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   71119    DOCTYPE state</a>.</dd>
   71120 
   71121   </dl><h5 id=after-doctype-system-keyword-state><span class=secno>10.2.4.63 </span><dfn>After DOCTYPE system keyword state</dfn></h5>
   71122 
   71123   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71124 
   71125   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71126    <dt>U+000A LINE FEED (LF)</dt>
   71127    <dt>U+000C FORM FEED (FF)</dt>
   71128    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71129    <dt>U+0020 SPACE</dt>
   71130    <dd>Switch to the <a href=#before-doctype-system-identifier-state>before DOCTYPE system identifier
   71131    state</a>.</dd>
   71132 
   71133    <dt>U+0022 QUOTATION MARK (")</dt>
   71134    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   71135    identifier to the empty string (not missing), then switch to the
   71136    <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier (double-quoted) state</a>.</dd>
   71137 
   71138    <dt>U+0027 APOSTROPHE (')</dt>
   71139    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's system
   71140    identifier to the empty string (not missing), then switch to the
   71141    <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier (single-quoted) state</a>.</dd>
   71142 
   71143    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71144    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71145    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71146    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71147 
   71148    <dt>EOF</dt>
   71149    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71150    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71151    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71152 
   71153    <dt>Anything else</dt>
   71154    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71155    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   71156    DOCTYPE state</a>.</dd>
   71157 
   71158   </dl><h5 id=before-doctype-system-identifier-state><span class=secno>10.2.4.64 </span><dfn>Before DOCTYPE system identifier state</dfn></h5>
   71159 
   71160   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71161 
   71162   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71163    <dt>U+000A LINE FEED (LF)</dt>
   71164    <dt>U+000C FORM FEED (FF)</dt>
   71165    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71166    <dt>U+0020 SPACE</dt>
   71167    <dd>Stay in the <a href=#before-doctype-system-identifier-state>before DOCTYPE system identifier state</a>.</dd>
   71168 
   71169    <dt>U+0022 QUOTATION MARK (")</dt>
   71170    <dd>Set the DOCTYPE token's system identifier to the empty string
   71171    (not missing), then switch to the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system identifier
   71172    (double-quoted) state</a>.</dd>
   71173 
   71174    <dt>U+0027 APOSTROPHE (')</dt>
   71175    <dd>Set the DOCTYPE token's system identifier to the empty string
   71176    (not missing), then switch to the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system identifier
   71177    (single-quoted) state</a>.</dd>
   71178 
   71179    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71180    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71181    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71182    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71183 
   71184    <dt>EOF</dt>
   71185    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71186    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71187    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71188 
   71189    <dt>Anything else</dt>
   71190    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71191    <i>force-quirks flag</i> to <i>on</i>. Switch to the <a href=#bogus-doctype-state>bogus
   71192    DOCTYPE state</a>.</dd>
   71193 
   71194   </dl><h5 id=doctype-system-identifier-(double-quoted)-state><span class=secno>10.2.4.65 </span><dfn>DOCTYPE system identifier (double-quoted) state</dfn></h5>
   71195 
   71196   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71197 
   71198   <dl class=switch><dt>U+0022 QUOTATION MARK (")</dt>
   71199    <dd>Switch to the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   71200    state</a>.</dd>
   71201 
   71202    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71203    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71204    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71205    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71206 
   71207    <dt>EOF</dt>
   71208    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71209    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71210    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71211 
   71212    <dt>Anything else</dt>
   71213    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   71214    DOCTYPE token's system identifier. Stay in the <a href=#doctype-system-identifier-(double-quoted)-state>DOCTYPE system
   71215    identifier (double-quoted) state</a>.</dd>
   71216 
   71217   </dl><h5 id=doctype-system-identifier-(single-quoted)-state><span class=secno>10.2.4.66 </span><dfn>DOCTYPE system identifier (single-quoted) state</dfn></h5>
   71218 
   71219   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71220 
   71221   <dl class=switch><dt>U+0027 APOSTROPHE (')</dt>
   71222    <dd>Switch to the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   71223    state</a>.</dd>
   71224 
   71225    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71226    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71227    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE
   71228    token. Switch to the <a href=#data-state>data state</a>.</dd>
   71229 
   71230    <dt>EOF</dt>
   71231    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71232    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71233    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71234 
   71235    <dt>Anything else</dt>
   71236    <dd>Append the <a href=#current-input-character>current input character</a> to the current
   71237    DOCTYPE token's system identifier. Stay in the <a href=#doctype-system-identifier-(single-quoted)-state>DOCTYPE system
   71238    identifier (single-quoted) state</a>.</dd>
   71239 
   71240   </dl><h5 id=after-doctype-system-identifier-state><span class=secno>10.2.4.67 </span><dfn>After DOCTYPE system identifier state</dfn></h5>
   71241 
   71242   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71243 
   71244   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71245    <dt>U+000A LINE FEED (LF)</dt>
   71246    <dt>U+000C FORM FEED (FF)</dt>
   71247    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71248    <dt>U+0020 SPACE</dt>
   71249    <dd>Stay in the <a href=#after-doctype-system-identifier-state>after DOCTYPE system identifier
   71250    state</a>.</dd>
   71251 
   71252    <dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71253    <dd>Emit the current DOCTYPE token. Switch to the <a href=#data-state>data
   71254    state</a>.</dd>
   71255 
   71256    <dt>EOF</dt>
   71257    <dd><a href=#parse-error>Parse error</a>. Set the DOCTYPE token's
   71258    <i>force-quirks flag</i> to <i>on</i>. Emit that DOCTYPE token.
   71259    Reconsume the EOF character in the <a href=#data-state>data state</a>.</dd>
   71260 
   71261    <dt>Anything else</dt>
   71262    <dd><a href=#parse-error>Parse error</a>. Switch to the <a href=#bogus-doctype-state>bogus DOCTYPE
   71263    state</a>. (This does <em>not</em> set the DOCTYPE token's
   71264    <i>force-quirks flag</i> to <i>on</i>.)</dd>
   71265 
   71266   </dl><h5 id=bogus-doctype-state><span class=secno>10.2.4.68 </span><dfn>Bogus DOCTYPE state</dfn></h5>
   71267 
   71268   <p>Consume the <a href=#next-input-character>next input character</a>:</p>
   71269 
   71270   <dl class=switch><dt>U+003E GREATER-THAN SIGN (&gt;)</dt>
   71271    <dd>Emit the DOCTYPE token. Switch to the <a href=#data-state>data
   71272    state</a>.</dd>
   71273 
   71274    <dt>EOF</dt>
   71275    <dd>Emit the DOCTYPE token. Reconsume the EOF character in the
   71276    <a href=#data-state>data state</a>.</dd>
   71277 
   71278    <dt>Anything else</dt>
   71279    <dd>Stay in the <a href=#bogus-doctype-state>bogus DOCTYPE state</a>.</dd>
   71280 
   71281   </dl><h5 id=cdata-section-state><span class=secno>10.2.4.69 </span><dfn>CDATA section state</dfn></h5>
   71282 
   71283   <p>Consume every character up to the next occurrence of the three
   71284   character sequence U+005D RIGHT SQUARE BRACKET U+005D RIGHT SQUARE
   71285   BRACKET U+003E GREATER-THAN SIGN (<code title="">]]&gt;</code>), or the
   71286   end of the file (EOF), whichever comes first. Emit a series of
   71287   character tokens consisting of all the characters consumed except
   71288   the matching three character sequence at the end (if one was found
   71289   before the end of the file).</p>
   71290 
   71291   <p>Switch to the <a href=#data-state>data state</a>.</p>
   71292 
   71293   <p>If the end of the file was reached, reconsume the EOF
   71294   character.</p>
   71295 
   71296 
   71297 
   71298   <h5 id=tokenizing-character-references><span class=secno>10.2.4.70 </span>Tokenizing character references</h5>
   71299 
   71300   <p>This section defines how to <dfn id=consume-a-character-reference>consume a character
   71301   reference</dfn>. This definition is used when parsing character
   71302   references <a href=#character-reference-in-data-state title="character reference in data state">in
   71303   text</a> and <a href=#character-reference-in-attribute-value-state title="character reference in attribute value
   71304   state">in attributes</a>.</p>
   71305 
   71306   <p>The behavior depends on the identity of the next character (the
   71307   one immediately after the U+0026 AMPERSAND character):</p>
   71308 
   71309   <dl class=switch><dt>U+0009 CHARACTER TABULATION</dt>
   71310    <dt>U+000A LINE FEED (LF)</dt>
   71311    <dt>U+000C FORM FEED (FF)</dt>
   71312    <!--<dt>U+000D CARRIAGE RETURN (CR)</dt>-->
   71313    <dt>U+0020 SPACE</dt>
   71314    <dt>U+003C LESS-THAN SIGN</dt>
   71315    <dt>U+0026 AMPERSAND</dt>
   71316    <dt>EOF</dt>
   71317    <dt>The <dfn id=additional-allowed-character>additional allowed character</dfn>, if there is one</dt>
   71318 
   71319    <dd>Not a character reference. No characters are consumed, and
   71320    nothing is returned. (This is not an error, either.)</dd>
   71321 
   71322 
   71323    <dt>U+0023 NUMBER SIGN (#)</dt>
   71324 
   71325    <dd>
   71326 
   71327     <p>Consume the U+0023 NUMBER SIGN.</p>
   71328 
   71329     <p>The behavior further depends on the character after the U+0023
   71330     NUMBER SIGN:</p>
   71331 
   71332     <dl class=switch><dt>U+0078 LATIN SMALL LETTER X</dt>
   71333      <dt>U+0058 LATIN CAPITAL LETTER X</dt>
   71334 
   71335      <dd>
   71336 
   71337       <p>Consume the X.</p>
   71338 
   71339       <p>Follow the steps below, but using the range of characters
   71340       U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061 LATIN
   71341       SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041 LATIN
   71342       CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F (in other
   71343       words, 0-9, A-F, a-f).</p>
   71344 
   71345       <p>When it comes to interpreting the number, interpret it as a
   71346       hexadecimal number.</p>
   71347 
   71348      </dd>
   71349 
   71350 
   71351      <dt>Anything else</dt>
   71352 
   71353      <dd>
   71354 
   71355       <p>Follow the steps below, but using the range of characters
   71356       U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9).</p>
   71357 
   71358       <p>When it comes to interpreting the number, interpret it as a
   71359       decimal number.</p>
   71360 
   71361      </dd>
   71362 
   71363     </dl><p>Consume as many characters as match the range of characters
   71364     given above.</p>
   71365 
   71366     <p>If no characters match the range, then don't consume any
   71367     characters (and unconsume the U+0023 NUMBER SIGN character and, if
   71368     appropriate, the X character). This is a <a href=#parse-error>parse
   71369     error</a>; nothing is returned.</p>
   71370 
   71371     <p>Otherwise, if the next character is a U+003B SEMICOLON, consume
   71372     that too. If it isn't, there is a <a href=#parse-error>parse
   71373     error</a>.</p>
   71374 
   71375     <p>If one or more characters match the range, then take them all
   71376     and interpret the string of characters as a number (either
   71377     hexadecimal or decimal as appropriate).</p>
   71378 
   71379     <p>If that number is one of the numbers in the first column of the
   71380     following table, then this is a <a href=#parse-error>parse error</a>. Find the
   71381     row with that number in the first column, and return a character
   71382     token for the Unicode character given in the second column of that
   71383     row.</p>
   71384 
   71385     <table><thead><tr><th>Number <th colspan=2>Unicode character
   71386      <tbody><tr><td>0x00 <td>U+FFFD <td>REPLACEMENT CHARACTER
   71387       <tr><td>0x0D <td>U+000D <td>CARRIAGE RETURN (CR)
   71388       <tr><td>0x80 <td>U+20AC <td>EURO SIGN (&euro;)
   71389       <tr><td>0x81 <td>U+0081 <td>&lt;control&gt;
   71390       <tr><td>0x82 <td>U+201A <td>SINGLE LOW-9 QUOTATION MARK (&sbquo;)
   71391       <tr><td>0x83 <td>U+0192 <td>LATIN SMALL LETTER F WITH HOOK (&fnof;)
   71392       <tr><td>0x84 <td>U+201E <td>DOUBLE LOW-9 QUOTATION MARK (&bdquo;)
   71393       <tr><td>0x85 <td>U+2026 <td>HORIZONTAL ELLIPSIS (&hellip;)
   71394       <tr><td>0x86 <td>U+2020 <td>DAGGER (&dagger;)
   71395       <tr><td>0x87 <td>U+2021 <td>DOUBLE DAGGER (&Dagger;)
   71396       <tr><td>0x88 <td>U+02C6 <td>MODIFIER LETTER CIRCUMFLEX ACCENT (&circ;)
   71397       <tr><td>0x89 <td>U+2030 <td>PER MILLE SIGN (&permil;)
   71398       <tr><td>0x8A <td>U+0160 <td>LATIN CAPITAL LETTER S WITH CARON (&Scaron;)
   71399       <tr><td>0x8B <td>U+2039 <td>SINGLE LEFT-POINTING ANGLE QUOTATION MARK (&lsaquo;)
   71400       <tr><td>0x8C <td>U+0152 <td>LATIN CAPITAL LIGATURE OE (&OElig;)
   71401       <tr><td>0x8D <td>U+008D <td>&lt;control&gt;
   71402       <tr><td>0x8E <td>U+017D <td>LATIN CAPITAL LETTER Z WITH CARON (&#381;)
   71403       <tr><td>0x8F <td>U+008F <td>&lt;control&gt;
   71404       <tr><td>0x90 <td>U+0090 <td>&lt;control&gt;
   71405       <tr><td>0x91 <td>U+2018 <td>LEFT SINGLE QUOTATION MARK (&lsquo;)
   71406       <tr><td>0x92 <td>U+2019 <td>RIGHT SINGLE QUOTATION MARK (&rsquo;)
   71407       <tr><td>0x93 <td>U+201C <td>LEFT DOUBLE QUOTATION MARK (&ldquo;)
   71408       <tr><td>0x94 <td>U+201D <td>RIGHT DOUBLE QUOTATION MARK (&rdquo;)
   71409       <tr><td>0x95 <td>U+2022 <td>BULLET (&bull;)
   71410       <tr><td>0x96 <td>U+2013 <td>EN DASH (&ndash;)
   71411       <tr><td>0x97 <td>U+2014 <td>EM DASH (&mdash;)
   71412       <tr><td>0x98 <td>U+02DC <td>SMALL TILDE (&tilde;)
   71413       <tr><td>0x99 <td>U+2122 <td>TRADE MARK SIGN (&trade;)
   71414       <tr><td>0x9A <td>U+0161 <td>LATIN SMALL LETTER S WITH CARON (&scaron;)
   71415       <tr><td>0x9B <td>U+203A <td>SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (&rsaquo;)
   71416       <tr><td>0x9C <td>U+0153 <td>LATIN SMALL LIGATURE OE (&oelig;)
   71417       <tr><td>0x9D <td>U+009D <td>&lt;control&gt;
   71418       <tr><td>0x9E <td>U+017E <td>LATIN SMALL LETTER Z WITH CARON (&#382;)
   71419       <tr><td>0x9F <td>U+0178 <td>LATIN CAPITAL LETTER Y WITH DIAERESIS (&Yuml;)
   71420     </table><p>Otherwise, if the number is in the range 0xD800 to 0xDFFF<!--
   71421     surrogates not allowed; see the comment in the "preprocessing the
   71422     input stream" section for details --> or is greater than 0x10FFFF,
   71423     then this is a <a href=#parse-error>parse error</a>. Return a U+FFFD
   71424     REPLACEMENT CHARACTER.</p>
   71425 
   71426     <p>Otherwise, return a character token for the Unicode character
   71427     whose code point is that number.
   71428 
   71429     <!-- this is the same as the equivalent list in the input stream
   71430     section -->
   71431     If the number is in the range 0x0001 to 0x0008, <!-- HT, LF
   71432     allowed --> <!-- U+000B is in the next list --> <!-- FF, CR
   71433     allowed --> 0x000E to 0x001F, <!-- ASCII allowed --> 0x007F <!--to
   71434     0x0084, (0x0085 NEL not allowed), 0x0086--> to 0x009F, 0xFDD0 to
   71435     0xFDEF, or is one of 0x000B, 0xFFFE, 0xFFFF, 0x1FFFE, 0x1FFFF,
   71436     0x2FFFE, 0x2FFFF, 0x3FFFE, 0x3FFFF, 0x4FFFE, 0x4FFFF, 0x5FFFE,
   71437     0x5FFFF, 0x6FFFE, 0x6FFFF, 0x7FFFE, 0x7FFFF, 0x8FFFE, 0x8FFFF,
   71438     0x9FFFE, 0x9FFFF, 0xAFFFE, 0xAFFFF, 0xBFFFE, 0xBFFFF, 0xCFFFE,
   71439     0xCFFFF, 0xDFFFE, 0xDFFFF, 0xEFFFE, 0xEFFFF, 0xFFFFE, 0xFFFFF,
   71440     0x10FFFE, or 0x10FFFF, then this is a <a href=#parse-error>parse
   71441     error</a>.</p>
   71442 
   71443    </dd>
   71444 
   71445 
   71446    <dt>Anything else</dt>
   71447 
   71448    <dd>
   71449 
   71450     <p>Consume the maximum number of characters possible, with the
   71451     consumed characters matching one of the identifiers in the first
   71452     column of the <a href=#named-character-references>named character references</a> table (in a
   71453     <a href=#case-sensitive>case-sensitive</a> manner).</p>
   71454 
   71455     <p>If no match can be made, then no characters are consumed, and
   71456     nothing is returned. In this case, if the characters after the
   71457     U+0026 AMPERSAND character (&amp;) consist of a sequence of one or
   71458     more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
   71459     NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
   71460     Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL
   71461     LETTER Z, followed by a U+003B SEMICOLON character (;), then this
   71462     is a <a href=#parse-error>parse error</a>.</p>
   71463 
   71464     <p>If the character reference is being consumed <a href=#character-reference-in-attribute-value-state title="character reference in attribute value state">as part of an
   71465     attribute</a>, and the last character matched is not a U+003B
   71466     SEMICOLON character (;), and the next character is either a U+003D
   71467     EQUALS SIGN character (=) or in the range U+0030 DIGIT ZERO (0) to
   71468     U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+005A
   71469     LATIN CAPITAL LETTER Z, or U+0061 LATIN SMALL LETTER A to U+007A
   71470     LATIN SMALL LETTER Z, then, for historical reasons, all the
   71471     characters that were matched after the U+0026 AMPERSAND character
   71472     (&amp;) must be unconsumed, and nothing is returned.</p>
   71473     <!-- "=" added because of http://www.w3.org/Bugs/Public/show_bug.cgi?id=9207#c5 -->
   71474 
   71475     <p>Otherwise, a character reference is parsed. If the last
   71476     character matched is not a U+003B SEMICOLON character (;), there
   71477     is a <a href=#parse-error>parse error</a>.</p>
   71478 
   71479     <p>Return a character token for the character corresponding to the
   71480     character reference name (as given by the second column of the
   71481     <a href=#named-character-references>named character references</a> table).</p>
   71482 
   71483     <div class=example>
   71484 
   71485      <p>If the markup contains (not in an attribute) the string <code title="">I'm &amp;notit; I tell you</code>, the character
   71486      reference is parsed as "not", as in, <code title="">I'm &not;it;
   71487      I tell you</code> (and this is a parse error). But if the markup
   71488      was <code title="">I'm &amp;notin; I tell you</code>, the
   71489      character reference would be parsed as "notin;", resulting in
   71490      <code title="">I'm &notin; I tell you</code> (and no parse
   71491      error).</p>
   71492 
   71493     </div>
   71494 
   71495    </dd>
   71496 
   71497   </dl></div>
   71498 
   71499 
   71500   <div class=impl>
   71501 
   71502   <!-- v2: One thing that this doesn't define is handling deeply
   71503   nested documents. There are compatibility requirements around that:
   71504   you can't throw away the elements altogether, consider Tux made only
   71505   with opening <font> elements, one per character. Seems that the best
   71506   thing to do is to close some formatting elements from the middle of
   71507   the stack when you hit a limit, or something. -->
   71508 
   71509   <h4 id=tree-construction><span class=secno>10.2.5 </span><dfn>Tree construction</dfn></h4>
   71510 
   71511   <p>The input to the tree construction stage is a sequence of tokens
   71512   from the <a href=#tokenization>tokenization</a> stage. The tree construction
   71513   stage is associated with a DOM <code><a href=#document>Document</a></code> object when a
   71514   parser is created. The "output" of this stage consists of
   71515   dynamically modifying or extending that document's DOM tree.</p>
   71516 
   71517   <p>This specification does not define when an interactive user agent
   71518   has to render the <code><a href=#document>Document</a></code> so that it is available to
   71519   the user, or when it has to begin accepting user input.</p>
   71520 
   71521   <p>As each token is emitted from the tokenizer, the user agent must
   71522   process the token according to the rules given in the section
   71523   corresponding to the current <a href=#insertion-mode>insertion mode</a>.</p>
   71524 
   71525   <p>When the steps below require the UA to <dfn id=insert-a-character>insert a
   71526   character</dfn> into a node, if that node has a child immediately
   71527   before where the character is to be inserted, and that child is a
   71528   <code><a href=#text>Text</a></code> node, and that <code><a href=#text>Text</a></code> node was the last
   71529   node that the parser inserted into the document, then the character
   71530   must be appended to that <code><a href=#text>Text</a></code> node; otherwise, a new
   71531   <code><a href=#text>Text</a></code> node whose data is just that character must be
   71532   inserted in the appropriate place.</p>
   71533 
   71534   <div class=example>
   71535 
   71536    <p>Here are some sample inputs to the parser and the corresponding
   71537    number of text nodes that they result in, assuming a user agent
   71538    that executes scripts.</p>
   71539 
   71540    <table><thead><tr><th>Input <th>Number of text nodes
   71541     <tbody><tr><td><pre>A&lt;script&gt;
   71542 var&nbsp;script&nbsp;=&nbsp;document.getElementsByTagName('script')[0];
   71543 document.body.removeChild(script);
   71544 &lt;/script&gt;B</pre>
   71545       <td>Two adjacent text nodes in the document, containing "A" and "B".
   71546      <tr><td><pre>A&lt;script&gt;
   71547 var&nbsp;text&nbsp;=&nbsp;document.createTextNode('B');
   71548 document.body.appendChild(text);
   71549 &lt;/script&gt;C</pre>
   71550       <td>Four text nodes; "A" before the script, the script's contents, "B" after the script, and then, immediately after that, "C".
   71551      <tr><td><pre>A&lt;script&gt;
   71552 var&nbsp;text&nbsp;=&nbsp;document.getElementsByTagName('script')[0].firstChild;
   71553 text.data&nbsp;=&nbsp;'B';
   71554 document.body.appendChild(text);
   71555 &lt;/script&gt;B</pre>
   71556       <td>Two adjacent text nodes in the document, containing "A" and "BB".
   71557      <tr><td><pre>A&lt;table&gt;B&lt;tr&gt;C&lt;/tr&gt;C&lt;/table&gt;</pre>
   71558       <td>Three adjacent text nodes before the table, containing "A", "B", and "CC" respectively. (This is caused by <a href=#foster-parent title="foster parent">foster parenting</a>.)
   71559      <tr><td><pre>A&lt;table&gt;&lt;tr&gt;&nbsp;B&lt;/tr&gt;&nbsp;B&lt;/table&gt;</pre>
   71560       <td>Two adjacent text nodes before the table, containing "A" and "&nbsp;B&nbsp;B" (space-B-space-B) respectively. (This is caused by <a href=#foster-parent title="foster parent">foster parenting</a>.)
   71561      <tr><td><pre>A&lt;table&gt;&lt;tr&gt;&nbsp;B&lt;/tr&gt;&nbsp;&lt;/em&gt;C&lt;/table&gt;</pre>
   71562       <td>Three adjacent text nodes before the table, containing "A", "&nbsp;B" (space-B), and "C" respectively, and one text node inside the table (as a child of a <code><a href=#the-tbody-element>tbody</a></code>) with a single space character. (Space characters separated from non-space characters by non-character tokens are not affected by <a href=#foster-parent title="foster parent">foster parenting</a>, even if those other tokens then get ignored.)
   71563    </table></div>
   71564 
   71565   <p id=mutation-during-parsing>DOM mutation events must not fire
   71566   for changes caused by the UA parsing the document. (Conceptually,
   71567   the parser is not mutating the DOM, it is constructing it.) This
   71568   includes the parsing of any content inserted using <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> and <code title=dom-document-writeln><a href=#dom-document-writeln>document.writeln()</a></code> calls. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   71569 
   71570   <p class=note>Not all of the tag names mentioned below are
   71571   conformant tag names in this specification; many are included to
   71572   handle legacy content. They still form part of the algorithm that
   71573   implementations are required to implement to claim conformance.</p>
   71574 
   71575   <p class=note>The algorithm described below places no limit on the
   71576   depth of the DOM tree generated, or on the length of tag names,
   71577   attribute names, attribute values, text nodes, etc. While
   71578   implementors are encouraged to avoid arbitrary limits, it is
   71579   recognized that <a href=#hardwareLimitations>practical
   71580   concerns</a> will likely force user agents to impose nesting depth
   71581   constraints.</p>
   71582 
   71583 
   71584   <h5 id=creating-and-inserting-elements><span class=secno>10.2.5.1 </span>Creating and inserting elements</h5>
   71585 
   71586   <p>When the steps below require the UA to <dfn id=create-an-element-for-the-token title="create an
   71587   element for the token">create an element for a token</dfn> in a
   71588   particular namespace, the UA must create a node implementing the
   71589   interface appropriate for the element type corresponding to the tag
   71590   name of the token in the given namespace (as given in the
   71591   specification that defines that element, e.g. for an <code><a href=#the-a-element>a</a></code>
   71592   element in the <a href=#html-namespace-0>HTML namespace</a>, this specification
   71593   defines it to be the <code><a href=#htmlanchorelement>HTMLAnchorElement</a></code> interface), with
   71594   the tag name being the name of that element, with the node being in
   71595   the given namespace, and with the attributes on the node being those
   71596   given in the given token.</p>
   71597 
   71598   <p>The interface appropriate for an element in the <a href=#html-namespace-0>HTML
   71599   namespace</a> that is not defined in this specification (or
   71600   <a href=#other-applicable-specifications>other applicable specifications</a>) is
   71601   <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code>. Element in other namespaces whose
   71602   interface is not defined by that namespace's specification must use
   71603   the interface <code><a href=#element>Element</a></code>.</p>
   71604 
   71605   <p>When a <a href=#category-reset title=category-reset>resettable element</a> is
   71606   created in this manner, its <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> must be
   71607   invoked once the attributes are set. (This initializes the element's
   71608   <a href=#concept-fe-value title=concept-fe-value>value</a> and <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> based on the element's
   71609   attributes.)</p>
   71610 
   71611   <hr><p>When the steps below require the UA to <dfn id=insert-an-html-element>insert an HTML
   71612   element</dfn> for a token, the UA must first <a href=#create-an-element-for-the-token>create an element
   71613   for the token</a> in the <a href=#html-namespace-0>HTML namespace</a>, and then
   71614   append this node to the <a href=#current-node>current node</a>, and push it onto
   71615   the <a href=#stack-of-open-elements>stack of open elements</a> so that it is the new
   71616   <a href=#current-node>current node</a>.</p>
   71617 
   71618   <p>The steps below may also require that the UA insert an HTML
   71619   element in a particular place, in which case the UA must follow the
   71620   same steps except that it must insert or append the new node in the
   71621   location specified instead of appending it to the <a href=#current-node>current
   71622   node</a>. (This happens in particular during the parsing of
   71623   tables with invalid content.)</p>
   71624 
   71625   <p>If an element created by the <a href=#insert-an-html-element>insert an HTML element</a>
   71626   algorithm is a <a href=#form-associated-element>form-associated element</a>, and the
   71627   <a href=#form-element-pointer><code title="">form</code> element pointer</a> is not null,
   71628   and the newly created element doesn't have a <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute, the user agent must
   71629   <a href=#concept-form-association title=concept-form-association>associate</a> the newly
   71630   created element with the <code><a href=#the-form-element>form</a></code> element pointed to by the
   71631   <a href=#form-element-pointer><code title="">form</code> element pointer</a> before
   71632   inserting it wherever it is to be inserted.</p>
   71633 
   71634   <hr><p>When the steps below require the UA to <dfn id=insert-a-foreign-element>insert a foreign
   71635   element</dfn> for a token, the UA must first <a href=#create-an-element-for-the-token>create an element
   71636   for the token</a> in the given namespace, and then append this
   71637   node to the <a href=#current-node>current node</a>, and push it onto the
   71638   <a href=#stack-of-open-elements>stack of open elements</a> so that it is the new
   71639   <a href=#current-node>current node</a>. If the newly created element has an <code title="">xmlns</code> attribute in the <a href=#xmlns-namespace>XMLNS namespace</a>
   71640   whose value is not exactly the same as the element's namespace, that
   71641   is a <a href=#parse-error>parse error</a>. Similarly, if the newly created
   71642   element has an <code title="">xmlns:xlink</code> attribute in the
   71643   <a href=#xmlns-namespace>XMLNS namespace</a> whose value is not the <a href=#xlink-namespace>XLink
   71644   Namespace</a>, that is a <a href=#parse-error>parse error</a>.</p>
   71645 
   71646   <p>When the steps below require the user agent to <dfn id=adjust-mathml-attributes>adjust MathML
   71647   attributes</dfn> for a token, then, if the token has an attribute
   71648   named <code title="">definitionurl</code>, change its name to <code title="">definitionURL</code> (note the case difference).</p>
   71649 
   71650   <p>When the steps below require the user agent to <dfn id=adjust-svg-attributes>adjust SVG
   71651   attributes</dfn> for a token, then, for each attribute on the token
   71652   whose attribute name is one of the ones in the first column of the
   71653   following table, change the attribute's name to the name given in
   71654   the corresponding cell in the second column. (This fixes the case of
   71655   SVG attributes that are not all lowercase.)</p>
   71656 
   71657   <table><thead><tr><th> Attribute name on token <th> Attribute name on element
   71658    <tbody><tr><td> <code title="">attributename</code> <td> <code title="">attributeName</code>
   71659     <tr><td> <code title="">attributetype</code> <td> <code title="">attributeType</code>
   71660     <tr><td> <code title="">basefrequency</code> <td> <code title="">baseFrequency</code>
   71661     <tr><td> <code title="">baseprofile</code> <td> <code title="">baseProfile</code>
   71662     <tr><td> <code title="">calcmode</code> <td> <code title="">calcMode</code>
   71663     <tr><td> <code title="">clippathunits</code> <td> <code title="">clipPathUnits</code>
   71664     <tr><td> <code title="">contentscripttype</code> <td> <code title="">contentScriptType</code>
   71665     <tr><td> <code title="">contentstyletype</code> <td> <code title="">contentStyleType</code>
   71666     <tr><td> <code title="">diffuseconstant</code> <td> <code title="">diffuseConstant</code>
   71667     <tr><td> <code title="">edgemode</code> <td> <code title="">edgeMode</code>
   71668     <tr><td> <code title="">externalresourcesrequired</code> <td> <code title="">externalResourcesRequired</code>
   71669     <tr><td> <code title="">filterres</code> <td> <code title="">filterRes</code>
   71670     <tr><td> <code title="">filterunits</code> <td> <code title="">filterUnits</code>
   71671     <tr><td> <code title="">glyphref</code> <td> <code title="">glyphRef</code>
   71672     <tr><td> <code title="">gradienttransform</code> <td> <code title="">gradientTransform</code>
   71673     <tr><td> <code title="">gradientunits</code> <td> <code title="">gradientUnits</code>
   71674     <tr><td> <code title="">kernelmatrix</code> <td> <code title="">kernelMatrix</code>
   71675     <tr><td> <code title="">kernelunitlength</code> <td> <code title="">kernelUnitLength</code>
   71676     <tr><td> <code title="">keypoints</code> <td> <code title="">keyPoints</code>
   71677     <tr><td> <code title="">keysplines</code> <td> <code title="">keySplines</code>
   71678     <tr><td> <code title="">keytimes</code> <td> <code title="">keyTimes</code>
   71679     <tr><td> <code title="">lengthadjust</code> <td> <code title="">lengthAdjust</code>
   71680     <tr><td> <code title="">limitingconeangle</code> <td> <code title="">limitingConeAngle</code>
   71681     <tr><td> <code title="">markerheight</code> <td> <code title="">markerHeight</code>
   71682     <tr><td> <code title="">markerunits</code> <td> <code title="">markerUnits</code>
   71683     <tr><td> <code title="">markerwidth</code> <td> <code title="">markerWidth</code>
   71684     <tr><td> <code title="">maskcontentunits</code> <td> <code title="">maskContentUnits</code>
   71685     <tr><td> <code title="">maskunits</code> <td> <code title="">maskUnits</code>
   71686     <tr><td> <code title="">numoctaves</code> <td> <code title="">numOctaves</code>
   71687     <tr><td> <code title="">pathlength</code> <td> <code title="">pathLength</code>
   71688     <tr><td> <code title="">patterncontentunits</code> <td> <code title="">patternContentUnits</code>
   71689     <tr><td> <code title="">patterntransform</code> <td> <code title="">patternTransform</code>
   71690     <tr><td> <code title="">patternunits</code> <td> <code title="">patternUnits</code>
   71691     <tr><td> <code title="">pointsatx</code> <td> <code title="">pointsAtX</code>
   71692     <tr><td> <code title="">pointsaty</code> <td> <code title="">pointsAtY</code>
   71693     <tr><td> <code title="">pointsatz</code> <td> <code title="">pointsAtZ</code>
   71694     <tr><td> <code title="">preservealpha</code> <td> <code title="">preserveAlpha</code>
   71695     <tr><td> <code title="">preserveaspectratio</code> <td> <code title="">preserveAspectRatio</code>
   71696     <tr><td> <code title="">primitiveunits</code> <td> <code title="">primitiveUnits</code>
   71697     <tr><td> <code title="">refx</code> <td> <code title="">refX</code>
   71698     <tr><td> <code title="">refy</code> <td> <code title="">refY</code>
   71699     <tr><td> <code title="">repeatcount</code> <td> <code title="">repeatCount</code>
   71700     <tr><td> <code title="">repeatdur</code> <td> <code title="">repeatDur</code>
   71701     <tr><td> <code title="">requiredextensions</code> <td> <code title="">requiredExtensions</code>
   71702     <tr><td> <code title="">requiredfeatures</code> <td> <code title="">requiredFeatures</code>
   71703     <tr><td> <code title="">specularconstant</code> <td> <code title="">specularConstant</code>
   71704     <tr><td> <code title="">specularexponent</code> <td> <code title="">specularExponent</code>
   71705     <tr><td> <code title="">spreadmethod</code> <td> <code title="">spreadMethod</code>
   71706     <tr><td> <code title="">startoffset</code> <td> <code title="">startOffset</code>
   71707     <tr><td> <code title="">stddeviation</code> <td> <code title="">stdDeviation</code>
   71708     <tr><td> <code title="">stitchtiles</code> <td> <code title="">stitchTiles</code>
   71709     <tr><td> <code title="">surfacescale</code> <td> <code title="">surfaceScale</code>
   71710     <tr><td> <code title="">systemlanguage</code> <td> <code title="">systemLanguage</code>
   71711     <tr><td> <code title="">tablevalues</code> <td> <code title="">tableValues</code>
   71712     <tr><td> <code title="">targetx</code> <td> <code title="">targetX</code>
   71713     <tr><td> <code title="">targety</code> <td> <code title="">targetY</code>
   71714     <tr><td> <code title="">textlength</code> <td> <code title="">textLength</code>
   71715     <tr><td> <code title="">viewbox</code> <td> <code title="">viewBox</code>
   71716     <tr><td> <code title="">viewtarget</code> <td> <code title="">viewTarget</code>
   71717     <tr><td> <code title="">xchannelselector</code> <td> <code title="">xChannelSelector</code>
   71718     <tr><td> <code title="">ychannelselector</code> <td> <code title="">yChannelSelector</code>
   71719     <tr><td> <code title="">zoomandpan</code> <td> <code title="">zoomAndPan</code>
   71720   </table><p>When the steps below require the user agent to <dfn id=adjust-foreign-attributes>adjust
   71721   foreign attributes</dfn> for a token, then, if any of the attributes
   71722   on the token match the strings given in the first column of the
   71723   following table, let the attribute be a namespaced attribute, with
   71724   the prefix being the string given in the corresponding cell in the
   71725   second column, the local name being the string given in the
   71726   corresponding cell in the third column, and the namespace being the
   71727   namespace given in the corresponding cell in the fourth
   71728   column. (This fixes the use of namespaced attributes, in particular
   71729   <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code> attributes in
   71730   the <span>XML namespace</span></a>.)</p>
   71731 
   71732   <table><thead><tr><th> Attribute name <th> Prefix <th> Local name <th> Namespace
   71733    <tbody><tr><td> <code title="">xlink:actuate</code> <td> <code title="">xlink</code> <td> <code title="">actuate</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71734     <tr><td> <code title="">xlink:arcrole</code> <td> <code title="">xlink</code> <td> <code title="">arcrole</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71735     <tr><td> <code title="">xlink:href</code> <td> <code title="">xlink</code> <td> <code title="">href</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71736     <tr><td> <code title="">xlink:role</code> <td> <code title="">xlink</code> <td> <code title="">role</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71737     <tr><td> <code title="">xlink:show</code> <td> <code title="">xlink</code> <td> <code title="">show</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71738     <tr><td> <code title="">xlink:title</code> <td> <code title="">xlink</code> <td> <code title="">title</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71739     <tr><td> <code title="">xlink:type</code> <td> <code title="">xlink</code> <td> <code title="">type</code> <td> <a href=#xlink-namespace>XLink namespace</a>
   71740     <tr><td> <code title="">xml:base</code> <td> <code title="">xml</code> <td> <code title="">base</code> <td> <a href=#xml-namespace>XML namespace</a> <!-- attr-xml-base -->
   71741     <tr><td> <code title="">xml:lang</code> <td> <code title="">xml</code> <td> <code title="">lang</code> <td> <a href=#xml-namespace>XML namespace</a>
   71742     <tr><td> <code title="">xml:space</code> <td> <code title="">xml</code> <td> <code title="">space</code> <td> <a href=#xml-namespace>XML namespace</a>
   71743     <tr><td> <code title="">xmlns</code> <td> (none) <td> <code title="">xmlns</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a>
   71744     <tr><td> <code title="">xmlns:xlink</code> <td> <code title="">xmlns</code> <td> <code title="">xlink</code> <td> <a href=#xmlns-namespace>XMLNS namespace</a>
   71745   </table><hr><p>The <dfn id=generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</dfn> and the
   71746   <dfn id=generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</dfn> consist of the
   71747   following steps. These algorithms are always invoked in response to
   71748   a start tag token.</p>
   71749 
   71750   <ol><li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</li>
   71751 
   71752    <li><p>If the algorithm that was invoked is the <a href=#generic-raw-text-element-parsing-algorithm>generic raw
   71753    text element parsing algorithm</a>, switch the tokenizer to the
   71754    <a href=#rawtext-state>RAWTEXT state</a>; otherwise the algorithm invoked
   71755    was the <a href=#generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</a>,
   71756    switch the tokenizer to the <a href=#rcdata-state>RCDATA state</a>.</li>
   71757 
   71758    <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
   71759    <a href=#insertion-mode>insertion mode</a>.</p>
   71760 
   71761    <li><p>Then, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>
   71762 
   71763   </ol><h5 id=closing-elements-that-have-implied-end-tags><span class=secno>10.2.5.2 </span>Closing elements that have implied end tags</h5>
   71764 
   71765   <p>When the steps below require the UA to <dfn id=generate-implied-end-tags>generate implied end
   71766   tags</dfn>, then, while the <a href=#current-node>current node</a> is a
   71767   <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code> element, an
   71768   <code><a href=#the-li-element>li</a></code> element, an <code><a href=#the-option-element>option</a></code> element, an
   71769   <code><a href=#the-optgroup-element>optgroup</a></code> element, a <code><a href=#the-p-element>p</a></code> element, an
   71770   <code><a href=#the-rp-element>rp</a></code> element, or an <code><a href=#the-rt-element>rt</a></code> element, the UA must
   71771   pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   71772   elements</a>.</p>
   71773 
   71774   <p>If a step requires the UA to generate implied end tags but lists
   71775   an element to exclude from the process, then the UA must perform the
   71776   above steps as if that element was not in the above list.</p>
   71777 
   71778 
   71779   <h5 id=foster-parenting><span class=secno>10.2.5.3 </span>Foster parenting</h5>
   71780 
   71781   <p>Foster parenting happens when content is misnested in tables.</p>
   71782 
   71783   <p>When a node <var title="">node</var> is to be <dfn id=foster-parent title="foster
   71784   parent">foster parented</dfn>, the node <var title="">node</var>
   71785   must be inserted into the <i><a href=#foster-parent-element>foster parent element</a></i>.</p>
   71786 
   71787   <p>The <dfn id=foster-parent-element>foster parent element</dfn> is the parent element of the
   71788   last <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
   71789   elements</a>, if there is a <code><a href=#the-table-element>table</a></code> element and it has
   71790   such a parent element. If there is no <code><a href=#the-table-element>table</a></code> element in
   71791   the <a href=#stack-of-open-elements>stack of open elements</a> (<a href=#fragment-case>fragment
   71792   case</a>), then the <i><a href=#foster-parent-element>foster parent element</a></i> is the first
   71793   element in the <a href=#stack-of-open-elements>stack of open elements</a> (the
   71794   <code><a href=#the-html-element-0>html</a></code> element). Otherwise, if there is a
   71795   <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
   71796   elements</a>, but the last <code><a href=#the-table-element>table</a></code> element in the
   71797   <a href=#stack-of-open-elements>stack of open elements</a> has no parent, or its parent
   71798   node is not an element, then the <i><a href=#foster-parent-element>foster parent element</a></i> is
   71799   the element before the last <code><a href=#the-table-element>table</a></code> element in the
   71800   <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   71801 
   71802   <p>If the <i><a href=#foster-parent-element>foster parent element</a></i> is the parent element of the
   71803   last <code><a href=#the-table-element>table</a></code> element in the <a href=#stack-of-open-elements>stack of open
   71804   elements</a>, then <var title="">node</var> must be inserted
   71805   immediately <em>before</em> the last <code><a href=#the-table-element>table</a></code> element in
   71806   the <a href=#stack-of-open-elements>stack of open elements</a> in the <i><a href=#foster-parent-element>foster parent
   71807   element</a></i>; otherwise, <var title="">node</var> must be
   71808   <em>appended</em> to the <i><a href=#foster-parent-element>foster parent element</a></i>.</p>
   71809 
   71810 
   71811 
   71812   <h5 id=the-initial-insertion-mode><span class=secno>10.2.5.4 </span>The "<dfn title="insertion mode: initial">initial</dfn>" insertion mode</h5>
   71813 
   71814   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-initial-insertion-mode title="insertion
   71815   mode: initial">initial</a>", tokens must be handled as follows:</p>
   71816 
   71817   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   71818    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   71819    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   71820    <dd>
   71821     <p>Ignore the token.</p>
   71822    </dd>
   71823 
   71824    <dt>A comment token</dt>
   71825    <dd>
   71826     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
   71827     object with the <code title="">data</code> attribute set to the
   71828     data given in the comment token.</p>
   71829    </dd>
   71830 
   71831    <dt>A DOCTYPE token</dt>
   71832    <dd>
   71833 
   71834     <p>If the DOCTYPE token's name is not a
   71835     <a href=#case-sensitive>case-sensitive</a> match for the string "<code title="">html</code>", or the token's public identifier is not
   71836     missing, or the token's system identifier is neither missing nor a
   71837     <a href=#case-sensitive>case-sensitive</a> match for the string
   71838     "<code><a href=#about:legacy-compat>about:legacy-compat</a></code>", and none of the sets of
   71839     conditions in the following list are matched, then there is a
   71840     <a href=#parse-error>parse error</a>.</p>
   71841 
   71842     <ul><!-- only things that trigger no-quirks mode and were valid in
   71843      some other spec are allowed in this list --><li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
   71844      match for the string "<code title="">html</code>", the token's
   71845      public identifier is the <a href=#case-sensitive>case-sensitive</a> string
   71846      "<code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.0//EN</code>", and
   71847      the token's system identifier is either missing or the
   71848      <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>".</li>
   71849 
   71850      <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
   71851      match for the string "<code title="">html</code>", the token's
   71852      public identifier is the <a href=#case-sensitive>case-sensitive</a> string
   71853      "<code title="">-//W3C//DTD&nbsp;HTML&nbsp;4.01//EN</code>", and
   71854      the token's system identifier is either missing or the
   71855      <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/html4/strict.dtd</code>".</li>
   71856 
   71857      <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
   71858      match for the string "<code title="">html</code>", the token's
   71859      public identifier is the <a href=#case-sensitive>case-sensitive</a> string
   71860      "<code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code>",
   71861      and the token's system identifier is the
   71862      <a href=#case-sensitive>case-sensitive</a> string "<code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>".</li>
   71863 
   71864      <li>The DOCTYPE token's name is a <a href=#case-sensitive>case-sensitive</a>
   71865      match for the string "<code title="">html</code>", the token's
   71866      public identifier is the <a href=#case-sensitive>case-sensitive</a> string
   71867      "<code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code>", and
   71868      the token's system identifier is the <a href=#case-sensitive>case-sensitive</a>
   71869      string "<code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>".</li>
   71870 
   71871     </ul><p>Conformance checkers may, based on the values (including
   71872     presence or lack thereof) of the DOCTYPE token's name, public
   71873     identifier, or system identifier, switch to a conformance checking
   71874     mode for another language (e.g. based on the DOCTYPE token a
   71875     conformance checker could recognize that the document is an
   71876     HTML4-era document, and defer to an HTML4 conformance
   71877     checker.)</p>
   71878 
   71879     <p>Append a <code><a href=#documenttype>DocumentType</a></code> node to the
   71880     <code><a href=#document>Document</a></code> node, with the <code title="">name</code>
   71881     attribute set to the name given in the DOCTYPE token, or the empty
   71882     string if the name was missing; the <code title="">publicId</code>
   71883     attribute set to the public identifier given in the DOCTYPE token,
   71884     or the empty string if the public identifier was missing; the
   71885     <code title="">systemId</code> attribute set to the system
   71886     identifier given in the DOCTYPE token, or the empty string if the
   71887     system identifier was missing; and the other attributes specific
   71888     to <code><a href=#documenttype>DocumentType</a></code> objects set to null and empty lists
   71889     as appropriate. Associate the <code><a href=#documenttype>DocumentType</a></code> node with
   71890     the <code><a href=#document>Document</a></code> object so that it is returned as the
   71891     value of the <code title="">doctype</code> attribute of the
   71892     <code><a href=#document>Document</a></code> object.</p>
   71893 
   71894     <p id=quirks-mode-doctypes>Then, if the DOCTYPE token matches
   71895     one of the conditions in the following list, then set the
   71896     <code><a href=#document>Document</a></code> to <a href=#quirks-mode>quirks mode</a>:</p>
   71897 
   71898     <ul class=brief><li> The <i>force-quirks flag</i> is set to <i>on</i>. </li>
   71899      <li> The name is set to anything other than "<code title="">html</code>" (compared <a href=#case-sensitive title=case-sensitive>case-sensitively</a>). </li>
   71900      <li> The public identifier starts with: "<code title="">+//Silmaril//dtd html Pro v0r11 19970101//<!--EN--></code>" </li>
   71901      <li> The public identifier starts with: "<code title="">-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//<!--EN--></code>" </li>
   71902      <li> The public identifier starts with: "<code title="">-//AS//DTD HTML 3.0 asWedit + extensions//<!--EN--></code>" </li>
   71903      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Level 1//<!--EN--></code>" </li>
   71904      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Level 2//<!--EN--></code>" </li>
   71905      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict Level 1//<!--EN--></code>" </li>
   71906      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict Level 2//<!--EN--></code>" </li>
   71907      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0 Strict//<!--EN--></code>" </li>
   71908      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.0//<!--EN--></code>" </li>
   71909      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 2.1E//<!--EN--></code>" </li>
   71910      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.0//<!--EN--></code>" </li>
   71911    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML 3.0//EN//</code>" </li>-->
   71912      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.2 Final//<!--EN--></code>" </li>
   71913      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3.2//<!--EN--></code>" </li>
   71914      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML 3//<!--EN--></code>" </li>
   71915      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 0//<!--EN--></code>" </li>
   71916    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 0//EN//2.0</code>" </li>-->
   71917      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 1//<!--EN--></code>" </li>
   71918    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 1//EN//2.0</code>" </li>-->
   71919      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 2//<!--EN--></code>" </li>
   71920    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 2//EN//2.0</code>" </li>-->
   71921      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Level 3//<!--EN--></code>" </li>
   71922    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Level 3//EN//3.0</code>" </li>-->
   71923      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 0//<!--EN--></code>" </li>
   71924    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 0//EN//2.0</code>" </li>-->
   71925      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 1//<!--EN--></code>" </li>
   71926    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 1//EN//2.0</code>" </li>-->
   71927      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 2//<!--EN--></code>" </li>
   71928    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 2//EN//2.0</code>" </li>-->
   71929      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict Level 3//<!--EN--></code>" </li>
   71930    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict Level 3//EN//3.0</code>" </li>-->
   71931      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML Strict//<!--EN--></code>" </li>
   71932    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict//EN//2.0</code>" </li>-->
   71933    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML Strict//EN//3.0</code>" </li>-->
   71934      <li> The public identifier starts with: "<code title="">-//IETF//DTD HTML//<!--EN--></code>" </li>
   71935    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML//EN//2.0</code>" </li>-->
   71936    <!--<li> The public identifier is set to: "<code title="">-//IETF//DTD HTML//EN//3.0</code>" </li>-->
   71937      <li> The public identifier starts with: "<code title="">-//Metrius//DTD Metrius Presentational//<!--EN--></code>" </li>
   71938      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//<!--EN--></code>" </li>
   71939      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 HTML//<!--EN--></code>" </li>
   71940      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 2.0 Tables//<!--EN--></code>" </li>
   71941      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//<!--EN--></code>" </li>
   71942      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 HTML//<!--EN--></code>" </li>
   71943      <li> The public identifier starts with: "<code title="">-//Microsoft//DTD Internet Explorer 3.0 Tables//<!--EN--></code>" </li>
   71944      <li> The public identifier starts with: "<code title="">-//Netscape Comm. Corp.//DTD HTML//<!--EN--></code>" </li>
   71945      <li> The public identifier starts with: "<code title="">-//Netscape Comm. Corp.//DTD Strict HTML//<!--EN--></code>" </li>
   71946      <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML 2.0//<!--EN--></code>" </li>
   71947      <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML Extended 1.0//<!--EN--></code>" </li>
   71948      <li> The public identifier starts with: "<code title="">-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//<!--EN--></code>" </li>
   71949      <li> The public identifier starts with: "<code title="">-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//<!--EN--></code>" </li>
   71950      <li> The public identifier starts with: "<code title="">-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//<!--EN--></code>" </li>
   71951      <li> The public identifier starts with: "<code title="">-//Spyglass//DTD HTML 2.0 Extended//<!--EN--></code>" </li>
   71952      <li> The public identifier starts with: "<code title="">-//SQ//DTD HTML 2.0 HoTMetaL + extensions//<!--EN--></code>" </li>
   71953      <li> The public identifier starts with: "<code title="">-//Sun Microsystems Corp.//DTD HotJava HTML//<!--EN--></code>" </li>
   71954      <li> The public identifier starts with: "<code title="">-//Sun Microsystems Corp.//DTD HotJava Strict HTML//<!--EN--></code>" </li>
   71955      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3 1995-03-24//<!--EN--></code>" </li>
   71956      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2 Draft//<!--EN--></code>" </li>
   71957      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2 Final//<!--EN--></code>" </li>
   71958      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2//<!--EN--></code>" </li>
   71959      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 3.2S Draft//<!--EN--></code>" </li>
   71960      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 4.0 Frameset//<!--EN--></code>" </li>
   71961      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML 4.0 Transitional//<!--EN--></code>" </li>
   71962      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML Experimental 19960712//<!--EN--></code>" </li>
   71963      <li> The public identifier starts with: "<code title="">-//W3C//DTD HTML Experimental 970421//<!--EN--></code>" </li>
   71964      <li> The public identifier starts with: "<code title="">-//W3C//DTD W3 HTML//<!--EN--></code>" </li>
   71965      <li> The public identifier starts with: "<code title="">-//W3O//DTD W3 HTML 3.0//<!--EN--></code>" </li>
   71966    <!--<li> The public identifier is set to: "<code title="">-//W3O//DTD W3 HTML 3.0//EN//</code>" </li>-->
   71967      <li> The public identifier is set to: "<code title="">-//W3O//DTD W3 HTML Strict 3.0//EN//</code>" </li>
   71968      <li> The public identifier starts with: "<code title="">-//WebTechs//DTD Mozilla HTML 2.0//<!--EN--></code>" </li>
   71969      <li> The public identifier starts with: "<code title="">-//WebTechs//DTD Mozilla HTML//<!--EN--></code>" </li>
   71970      <li> The public identifier is set to: "<code title="">-/W3C/DTD HTML 4.0 Transitional/EN</code>" </li>
   71971      <li> The public identifier is set to: "<code title="">HTML</code>" </li>
   71972      <li> The system identifier is set to: "<code title="">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</code>" </li>
   71973      <li> The system identifier is missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Frameset//<!--EN--></code>" </li>
   71974      <li> The system identifier is missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Transitional//<!--EN--></code>" </li>
   71975     </ul><p>Otherwise, if the DOCTYPE token matches one of the conditions
   71976     in the following list, then set the <code><a href=#document>Document</a></code> to
   71977     <a href=#limited-quirks-mode>limited-quirks mode</a>:</p>
   71978 
   71979     <ul class=brief><li> The public identifier starts with: "<code title="">-//W3C//DTD XHTML 1.0 Frameset//<!--EN--></code>" </li>
   71980      <li> The public identifier starts with: "<code title="">-//W3C//DTD XHTML 1.0 Transitional//<!--EN--></code>" </li>
   71981      <li> The system identifier is not missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Frameset//<!--EN--></code>" </li>
   71982      <li> The system identifier is not missing and the public identifier starts with: "<code title="">-//W3C//DTD HTML 4.01 Transitional//<!--EN--></code>" </li>
   71983     </ul><p>The system identifier and public identifier strings must be
   71984     compared to the values given in the lists above in an <a href=#ascii-case-insensitive>ASCII
   71985     case-insensitive</a> manner. A system identifier whose value is
   71986     the empty string is not considered missing for the purposes of the
   71987     conditions above.</p>
   71988 
   71989     <p>Then, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>".</p>
   71990 
   71991    </dd>
   71992 
   71993    <dt>Anything else</dt>
   71994    <dd>
   71995 
   71996     <p>If the document is <em>not</em> <a href=#an-iframe-srcdoc-document>an <code>iframe</code>
   71997     <code title=attr-iframe-srcdoc>srcdoc</code> document</a>,
   71998     then this is a <a href=#parse-error>parse error</a>; set the
   71999     <code><a href=#document>Document</a></code> to <a href=#quirks-mode>quirks mode</a>.</p>
   72000 
   72001     <p>In any case, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-html-insertion-mode title="insertion mode: before html">before html</a>", then
   72002     reprocess the current token.</p>
   72003 
   72004    </dd>
   72005 
   72006   </dl><h5 id=the-before-html-insertion-mode><span class=secno>10.2.5.5 </span>The "<dfn title="insertion mode: before html">before html</dfn>" insertion mode</h5>
   72007 
   72008   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-before-html-insertion-mode title="insertion
   72009   mode: before html">before html</a>", tokens must be handled as follows:</p>
   72010 
   72011   <dl class=switch><dt>A DOCTYPE token</dt>
   72012    <dd>
   72013     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72014    </dd>
   72015 
   72016    <dt>A comment token</dt>
   72017    <dd>
   72018     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
   72019     object with the <code title="">data</code> attribute set to the
   72020     data given in the comment token.</p>
   72021    </dd>
   72022 
   72023    <dt>A character token that is one of U+0009 CHARACTER
   72024    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   72025    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   72026    <dd>
   72027     <p>Ignore the token.</p>
   72028    </dd>
   72029 
   72030    <dt>A start tag whose tag name is "html"</dt>
   72031    <dd>
   72032 
   72033     <p><a href=#create-an-element-for-the-token>Create an element for the token</a> in the <a href=#html-namespace-0>HTML
   72034     namespace</a>. Append it to the <code><a href=#document>Document</a></code>
   72035     object. Put this element in the <a href=#stack-of-open-elements>stack of open
   72036     elements</a>.</p>
   72037 
   72038     <p id=parser-appcache>If the <code><a href=#document>Document</a></code> is being
   72039     loaded as part of <a href=#navigate title=navigate>navigation</a> of a
   72040     <a href=#browsing-context>browsing context</a>, then: if the newly created element
   72041     has a <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code> attribute
   72042     whose value is not the empty string, then <a href=#resolve-a-url title="resolve a
   72043     url">resolve</a> the value of that attribute to an
   72044     <a href=#absolute-url>absolute URL</a>, relative to the newly created element,
   72045     and if that is successful, run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
   72046     algorithm</a> with the resulting <a href=#absolute-url>absolute URL</a> with
   72047     any <a href=#url-fragment title=url-fragment>&lt;fragment&gt;</a> component
   72048     removed; otherwise, if there is no such attribute, or its value is
   72049     the empty string, or resolving its value fails, run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
   72050     algorithm</a> with no manifest. The algorithm must be passed
   72051     the <code><a href=#document>Document</a></code> object.</p>
   72052 
   72053     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>".</p>
   72054 
   72055    </dd>
   72056 
   72057    <dt>An end tag whose tag name is one of: "head", "body", "html", "br"</dt>
   72058    <dd>
   72059     <p>Act as described in the "anything else" entry below.</p>
   72060    </dd>
   72061 
   72062    <dt>Any other end tag</dt>
   72063    <dd>
   72064     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72065    </dd>
   72066 
   72067    <dt>Anything else</dt>
   72068    <dd>
   72069 
   72070     <p>Create an <code><a href=#the-html-element-0>html</a></code> element. Append it to the
   72071     <code><a href=#document>Document</a></code> object. Put this element in the <a href=#stack-of-open-elements>stack
   72072     of open elements</a>.</p>
   72073 
   72074     <p>If the <code><a href=#document>Document</a></code> is being loaded as part of <a href=#navigate title=navigate>navigation</a> of a <a href=#browsing-context>browsing
   72075     context</a>, then: run the <a href=#concept-appcache-init title=concept-appcache-init>application cache selection
   72076     algorithm</a> with no manifest, passing it the
   72077     <code><a href=#document>Document</a></code> object.</p>
   72078 
   72079     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-before-head-insertion-mode title="insertion mode: before head">before head</a>", then
   72080     reprocess the current token.</p>
   72081 
   72082    </dd>
   72083 
   72084   </dl><p>The root element can end up being removed from the
   72085   <code><a href=#document>Document</a></code> object, e.g. by scripts; nothing in particular
   72086   happens in such cases, content continues being appended to the nodes
   72087   as described in the next section.</p>
   72088 
   72089 
   72090   <h5 id=the-before-head-insertion-mode><span class=secno>10.2.5.6 </span>The "<dfn title="insertion mode: before head">before head</dfn>" insertion mode</h5>
   72091 
   72092   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-before-head-insertion-mode title="insertion
   72093   mode: before head">before head</a>", tokens must be handled as follows:</p>
   72094 
   72095   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   72096    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   72097    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   72098    <dd>
   72099     <p>Ignore the token.</p> <!-- :-( -->
   72100    </dd>
   72101 
   72102    <dt>A comment token</dt>
   72103    <dd>
   72104     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   72105     node</a> with the <code title="">data</code> attribute set to
   72106     the data given in the comment token.</p>
   72107    </dd>
   72108 
   72109    <dt>A DOCTYPE token</dt>
   72110    <dd>
   72111     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72112    </dd>
   72113 
   72114    <dt>A start tag whose tag name is "html"</dt>
   72115    <dd>
   72116     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   72117     mode</a>.</p>
   72118    </dd>
   72119 
   72120    <dt>A start tag whose tag name is "head"</dt>
   72121    <dd>
   72122 
   72123     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72124 
   72125     <p>Set the <a href=#head-element-pointer><code title="">head</code> element pointer</a>
   72126     to the newly created <code><a href=#the-head-element-0>head</a></code> element.</p>
   72127 
   72128     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>".</p>
   72129 
   72130    </dd>
   72131 
   72132    <dt>An end tag whose tag name is one of: "head", "body", "html", "br"</dt>
   72133    <dd>
   72134 
   72135     <p>Act as if a start tag token with the tag name "head" and no
   72136     attributes had been seen, then reprocess the current token.</p>
   72137 
   72138    </dd>
   72139 
   72140    <dt>Any other end tag</dt>
   72141    <dd>
   72142 
   72143     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72144 
   72145    </dd>
   72146 
   72147    <dt>Anything else</dt>
   72148    <dd>
   72149 
   72150     <p>Act as if a start tag token with the tag name "head" and no
   72151     attributes had been seen, then reprocess the current
   72152     token.</p>
   72153 
   72154    </dd>
   72155 
   72156   </dl><h5 id=parsing-main-inhead><span class=secno>10.2.5.7 </span>The "<dfn title="insertion mode: in head">in head</dfn>" insertion mode</h5>
   72157 
   72158   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inhead title="insertion
   72159   mode: in head">in head</a>", tokens must be handled as follows:</p>
   72160 
   72161   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   72162    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   72163    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   72164    <dd>
   72165     <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
   72166     the <a href=#current-node>current node</a>.</p>
   72167    </dd>
   72168 
   72169    <dt>A comment token</dt>
   72170    <dd>
   72171     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   72172     node</a> with the <code title="">data</code> attribute set to
   72173     the data given in the comment token.</p>
   72174    </dd>
   72175 
   72176    <dt>A DOCTYPE token</dt>
   72177    <dd>
   72178     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72179    </dd>
   72180 
   72181    <dt>A start tag whose tag name is "html"</dt>
   72182    <dd>
   72183     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   72184     mode</a>.</p>
   72185    </dd>
   72186 
   72187    <dt>A start tag whose tag name is one of: "base", "command",
   72188    "link"</dt>
   72189    <dd>
   72190 
   72191     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   72192     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   72193     elements</a>.</p>
   72194 
   72195     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   72196     token's <i>self-closing flag</i></a>, if it is set.</p>
   72197 
   72198    </dd>
   72199 
   72200    <dt>A start tag whose tag name is "meta"</dt>
   72201    <dd>
   72202 
   72203     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   72204     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   72205     elements</a>.</p>
   72206 
   72207     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   72208     token's <i>self-closing flag</i></a>, if it is set.</p>
   72209 
   72210     <p id=meta-charset-during-parse>If the element has a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute, and its
   72211     value is a supported encoding, and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
   72212     currently <i>tentative</i>, then <a href=#change-the-encoding>change the
   72213     encoding</a> to the encoding given by the value of the
   72214     <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>
   72215 
   72216     <p>Otherwise, if the element has an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute whose
   72217     value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   72218     string "<code title="">Content-Type</code>", and the element has a
   72219     <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, and
   72220     applying the <a href=#algorithm-for-extracting-an-encoding-from-a-content-type>algorithm for extracting an encoding from a
   72221     Content-Type</a> to that attribute's value returns a supported
   72222     encoding <var title="">encoding</var>, and the <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is currently
   72223     <i>tentative</i>, then <a href=#change-the-encoding>change the encoding</a> to the
   72224     encoding <var title="">encoding</var>.</p>
   72225 
   72226    </dd>
   72227 
   72228    <dt>A start tag whose tag name is "title"</dt>
   72229    <dd>
   72230     <p>Follow the <a href=#generic-rcdata-element-parsing-algorithm>generic RCDATA element parsing algorithm</a>.</p>
   72231    </dd>
   72232 
   72233    <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is enabled</dt>
   72234    <dt>A start tag whose tag name is one of: "noframes", "style"</dt>
   72235    <dd>
   72236     <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>
   72237    </dd>
   72238 
   72239    <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is disabled</dt>
   72240    <dd>
   72241 
   72242     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72243 
   72244     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inheadnoscript title="insertion mode: in head noscript">in head
   72245     noscript</a>".</p>
   72246 
   72247    </dd>
   72248 
   72249    <dt id=scriptTag>A start tag whose tag name is "script"</dt>
   72250    <dd>
   72251 
   72252     <p>Run these steps:</p>
   72253 
   72254     <ol><li><p><a href=#create-an-element-for-the-token>Create an element for the token</a> in the
   72255      <a href=#html-namespace-0>HTML namespace</a>.</li>
   72256 
   72257      <li>
   72258 
   72259       <p>Mark the element as being <a href=#parser-inserted>"parser-inserted"</a>.</p>
   72260 
   72261       <p class=note>This ensures that, if the script is external,
   72262       any <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>
   72263       calls in the script will execute in-line, instead of blowing the
   72264       document away, as would happen in most other cases. It also
   72265       prevents the script from executing until the end tag is
   72266       seen.</p>
   72267 
   72268      </li>
   72269 
   72270      <li><p>If the parser was originally created for the <a href=#html-fragment-parsing-algorithm>HTML
   72271      fragment parsing algorithm</a>, then mark the
   72272      <code><a href=#script>script</a></code> element as <a href=#already-started>"already
   72273      started"</a>. (<a href=#fragment-case>fragment case</a>)</li>
   72274 
   72275      <li><p>Append the new element to the <a href=#current-node>current node</a>
   72276      and push it onto the <a href=#stack-of-open-elements>stack of open
   72277      elements</a>.</li>
   72278 
   72279      <li><p>Switch the tokenizer to the <a href=#script-data-state>script data
   72280      state</a>.</li>
   72281 
   72282      <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
   72283      <a href=#insertion-mode>insertion mode</a>.</p>
   72284 
   72285      <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>
   72286 
   72287     </ol></dd>
   72288 
   72289    <dt>An end tag whose tag name is "head"</dt>
   72290    <dd>
   72291 
   72292     <p>Pop the <a href=#current-node>current node</a> (which will be the
   72293     <code><a href=#the-head-element-0>head</a></code> element) off the <a href=#stack-of-open-elements>stack of open
   72294     elements</a>.</p>
   72295 
   72296     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-head-insertion-mode title="insertion mode: after head">after head</a>".</p>
   72297 
   72298    </dd>
   72299 
   72300    <dt>An end tag whose tag name is one of: "body", "html", "br"</dt>
   72301    <dd>
   72302     <p>Act as described in the "anything else" entry below.</p>
   72303    </dd>
   72304 
   72305    <dt>A start tag whose tag name is "head"</dt>
   72306    <dt>Any other end tag</dt>
   72307    <dd>
   72308     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72309    </dd>
   72310 
   72311    <dt>Anything else</dt>
   72312    <dd>
   72313 
   72314     <!-- can't get here with an EOF and a fragment case -->
   72315 
   72316     <p>Act as if an end tag token with the tag name "head" had
   72317     been seen, and reprocess the current token.</p>
   72318 
   72319    </dd>
   72320 
   72321   </dl><h5 id=parsing-main-inheadnoscript><span class=secno>10.2.5.8 </span>The "<dfn title="insertion mode: in head noscript">in head noscript</dfn>" insertion mode</h5>
   72322 
   72323   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inheadnoscript title="insertion
   72324   mode: in head noscript">in head noscript</a>", tokens must be handled as follows:</p>
   72325 
   72326   <dl class=switch><dt>A DOCTYPE token</dt>
   72327    <dd>
   72328     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72329    </dd>
   72330 
   72331    <dt>A start tag whose tag name is "html"</dt>
   72332    <dd>
   72333     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   72334     mode</a>.</p>
   72335    </dd>
   72336 
   72337    <dt>An end tag whose tag name is "noscript"</dt>
   72338    <dd>
   72339 
   72340     <p>Pop the <a href=#current-node>current node</a> (which will be a
   72341     <code><a href=#the-noscript-element>noscript</a></code> element) from the <a href=#stack-of-open-elements>stack of open
   72342     elements</a>; the new <a href=#current-node>current node</a> will be a
   72343     <code><a href=#the-head-element-0>head</a></code> element.</p>
   72344 
   72345     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inhead title="insertion mode: in head">in head</a>".</p>
   72346 
   72347    </dd>
   72348 
   72349    <dt>A character token that is one of U+0009 CHARACTER
   72350    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   72351    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   72352    <dt>A comment token</dt>
   72353    <dt>A start tag whose tag name is one of: "link", "meta", "noframes", "style"</dt>
   72354    <dd>
   72355     <p>Process the token <a href=#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=#insertion-mode>insertion
   72356     mode</a>.</p>
   72357    </dd>
   72358 
   72359    <dt>An end tag whose tag name is "br"</dt>
   72360    <dd>
   72361     <p>Act as described in the "anything else" entry below.</p>
   72362    </dd>
   72363 
   72364    <dt>A start tag whose tag name is one of: "head", "noscript"</dt>
   72365    <dt>Any other end tag</dt>
   72366    <dd>
   72367     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72368    </dd>
   72369 
   72370    <dt>Anything else</dt>
   72371    <dd>
   72372 
   72373     <!-- can't get here with an EOF and a fragment case -->
   72374 
   72375     <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
   72376     name "noscript" had been seen and reprocess the current
   72377     token.</p>
   72378 
   72379    </dd>
   72380 
   72381   </dl><h5 id=the-after-head-insertion-mode><span class=secno>10.2.5.9 </span>The "<dfn title="insertion mode: after head">after head</dfn>" insertion mode</h5>
   72382 
   72383   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-head-insertion-mode title="insertion
   72384   mode: after head">after head</a>", tokens must be handled as follows:</p>
   72385 
   72386   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   72387    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   72388    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   72389    <dd>
   72390     <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
   72391     the <a href=#current-node>current node</a>.</p>
   72392    </dd>
   72393 
   72394    <dt>A comment token</dt>
   72395    <dd>
   72396     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   72397     node</a> with the <code title="">data</code> attribute set to
   72398     the data given in the comment token.</p>
   72399    </dd>
   72400 
   72401    <dt>A DOCTYPE token</dt>
   72402    <dd>
   72403     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72404    </dd>
   72405 
   72406    <dt>A start tag whose tag name is "html"</dt>
   72407    <dd>
   72408     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   72409     mode</a>.</p>
   72410    </dd>
   72411 
   72412    <dt>A start tag whose tag name is "body"</dt>
   72413    <dd>
   72414 
   72415     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72416 
   72417     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   72418 
   72419     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>
   72420 
   72421    </dd>
   72422 
   72423    <dt>A start tag whose tag name is "frameset"</dt>
   72424    <dd>
   72425 
   72426     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72427 
   72428     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>".</p>
   72429 
   72430    </dd>
   72431 
   72432    <dt>A start tag token whose tag name is one of: "base", "link",
   72433    "meta", "noframes", "script", "style", "title"</dt>
   72434    <dd>
   72435 
   72436     <p><a href=#parse-error>Parse error</a>.</p>
   72437 
   72438     <p>Push the node pointed to by the <a href=#head-element-pointer><code title="">head</code> element pointer</a> onto the
   72439     <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   72440 
   72441     <p>Process the token <a href=#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=#insertion-mode>insertion
   72442     mode</a>.</p>
   72443 
   72444     <p>Remove the node pointed to by the <a href=#head-element-pointer><code title="">head</code> element pointer</a> from the <a href=#stack-of-open-elements>stack
   72445     of open elements</a>.</p>
   72446 
   72447     <p class=note>The <a href=#head-element-pointer><code title="">head</code> element
   72448     pointer</a> cannot be null at this point.</p>
   72449 
   72450    </dd>
   72451 
   72452    <dt>An end tag whose tag name is one of: "body", "html", "br"</dt>
   72453    <dd>
   72454     <p>Act as described in the "anything else" entry below.</p>
   72455    </dd>
   72456 
   72457    <dt>A start tag whose tag name is "head"</dt>
   72458    <dt>Any other end tag</dt>
   72459    <dd>
   72460     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72461    </dd>
   72462 
   72463    <dt>Anything else</dt>
   72464    <dd>
   72465     <p>Act as if a start tag token with the tag name "body" and no
   72466     attributes had been seen, then set the <a href=#frameset-ok-flag>frameset-ok
   72467     flag</a> back to "ok", and then reprocess the current
   72468     token.</p>
   72469    </dd>
   72470 
   72471   </dl><h5 id=parsing-main-inbody><span class=secno>10.2.5.10 </span>The "<dfn title="insertion mode: in body">in body</dfn>" insertion mode</h5>
   72472 
   72473   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion
   72474   mode: in body">in body</a>", tokens must be handled as follows:</p>
   72475 
   72476   <dl class=switch><dt>A character token</dt>
   72477    <dd>
   72478 
   72479     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   72480     any.</p>
   72481 
   72482     <p><a href=#insert-a-character title="insert a character">Insert the token's
   72483     character</a> into the <a href=#current-node>current node</a>.</p>
   72484 
   72485     <p>If the token is not one of U+0009 CHARACTER TABULATION, U+000A
   72486     LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN
   72487     (CR), or U+0020 SPACE, then set the <a href=#frameset-ok-flag>frameset-ok
   72488     flag</a> to "not ok".</p>
   72489 
   72490    </dd>
   72491 
   72492    <dt>A comment token</dt>
   72493    <dd>
   72494     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   72495     node</a> with the <code title="">data</code> attribute set to
   72496     the data given in the comment token.</p>
   72497    </dd>
   72498 
   72499    <dt>A DOCTYPE token</dt>
   72500    <dd>
   72501     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   72502    </dd>
   72503 
   72504    <dt>A start tag whose tag name is "html"</dt>
   72505    <dd>
   72506     <p><a href=#parse-error>Parse error</a>. For each attribute on the token,
   72507     check to see if the attribute is already present on the top
   72508     element of the <a href=#stack-of-open-elements>stack of open elements</a>. If it is not,
   72509     add the attribute and its corresponding value to that element.</p>
   72510    </dd>
   72511 
   72512    <dt>A start tag token whose tag name is one of: "base", "command",
   72513    "link", "meta", "noframes", "script", "style", "title"</dt>
   72514    <dd>
   72515     <p>Process the token <a href=#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=#insertion-mode>insertion
   72516     mode</a>.</p>
   72517    </dd>
   72518 
   72519    <dt>A start tag whose tag name is "body"</dt>
   72520    <dd>
   72521 
   72522     <p><a href=#parse-error>Parse error</a>.</p>
   72523 
   72524     <p>If the second element on the <a href=#stack-of-open-elements>stack of open
   72525     elements</a> is not a <code><a href=#the-body-element-0>body</a></code> element, or, if the
   72526     <a href=#stack-of-open-elements>stack of open elements</a> has only one node on it,
   72527     then ignore the token. (<a href=#fragment-case>fragment case</a>)</p>
   72528 
   72529     <p>Otherwise, for each attribute on the token, check to see if
   72530     the attribute is already present on the <code><a href=#the-body-element-0>body</a></code>
   72531     element (the second element) on the <a href=#stack-of-open-elements>stack of open
   72532     elements</a>. If it is not, add the attribute and its
   72533     corresponding value to that element.</p>
   72534 
   72535    </dd>
   72536 
   72537    <dt>A start tag whose tag name is "frameset"</dt>
   72538    <dd>
   72539 
   72540     <p><a href=#parse-error>Parse error</a>.</p>
   72541 
   72542     <p>If the second element on the <a href=#stack-of-open-elements>stack of open
   72543     elements</a> is not a <code><a href=#the-body-element-0>body</a></code> element, or, if the
   72544     <a href=#stack-of-open-elements>stack of open elements</a> has only one node on it,
   72545     then ignore the token. (<a href=#fragment-case>fragment case</a>)</p>
   72546 
   72547     <p>If the <a href=#frameset-ok-flag>frameset-ok flag</a> is set to "not ok", ignore
   72548     the token.</p>
   72549 
   72550     <p>Otherwise, run the following steps:</p>
   72551 
   72552     <ol><li><p>Remove the second element on the <a href=#stack-of-open-elements>stack of open
   72553      elements</a> from its parent node, if it has one.</li>
   72554 
   72555      <li><p>Pop all the nodes from the bottom of the <a href=#stack-of-open-elements>stack of
   72556      open elements</a>, from the <a href=#current-node>current node</a> up to,
   72557      but not including, the root <code><a href=#the-html-element-0>html</a></code> element.</p>
   72558 
   72559      <li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the
   72560      token.</li>
   72561 
   72562      <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inframeset title="insertion mode: in frameset">in frameset</a>".</p>
   72563 
   72564     </ol></dd>
   72565 
   72566    <dt>An end-of-file token</dt>
   72567    <dd>
   72568 
   72569     <p>If there is a node in the <a href=#stack-of-open-elements>stack of open elements</a>
   72570     that is not either a <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code>
   72571     element, an <code><a href=#the-li-element>li</a></code> element, a <code><a href=#the-p-element>p</a></code> element, a
   72572     <code><a href=#the-tbody-element>tbody</a></code> element, a <code><a href=#the-td-element>td</a></code> element, a
   72573     <code><a href=#the-tfoot-element>tfoot</a></code> element, a <code><a href=#the-th-element>th</a></code> element, a
   72574     <code><a href=#the-thead-element>thead</a></code> element, a <code><a href=#the-tr-element>tr</a></code> element, the
   72575     <code><a href=#the-body-element-0>body</a></code> element, or the <code><a href=#the-html-element-0>html</a></code> element, then
   72576     this is a <a href=#parse-error>parse error</a>.</p> <!-- (some of those are
   72577     fragment cases) -->
   72578 
   72579     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   72580 
   72581    </dd>
   72582 
   72583    <dt>An end tag whose tag name is "body"</dt>
   72584    <dd>
   72585 
   72586     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have a <code>body</code> element
   72587     in scope</a>, this is a <a href=#parse-error>parse error</a>; ignore the
   72588     token.</p>
   72589 
   72590     <!-- if we get here, the insertion mode here is forcibly "in
   72591     body". -->
   72592 
   72593     <p>Otherwise, if there is a node in the <a href=#stack-of-open-elements>stack of open
   72594     elements</a> that is not either a <code><a href=#the-dd-element>dd</a></code> element, a
   72595     <code><a href=#the-dt-element>dt</a></code> element, an <code><a href=#the-li-element>li</a></code> element, an
   72596     <code><a href=#the-optgroup-element>optgroup</a></code> element, an <code><a href=#the-option-element>option</a></code> element, a
   72597     <code><a href=#the-p-element>p</a></code> element, an <code><a href=#the-rp-element>rp</a></code> element, an
   72598     <code><a href=#the-rt-element>rt</a></code> element, a <code><a href=#the-tbody-element>tbody</a></code> element, a
   72599     <code><a href=#the-td-element>td</a></code> element, a <code><a href=#the-tfoot-element>tfoot</a></code> element, a
   72600     <code><a href=#the-th-element>th</a></code> element, a <code><a href=#the-thead-element>thead</a></code> element, a
   72601     <code><a href=#the-tr-element>tr</a></code> element, the <code><a href=#the-body-element-0>body</a></code> element, or the
   72602     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   72603     error</a>.</p> <!-- (some of those are fragment cases, e.g. for
   72604     <tbody> you'd have hit the first paragraph since the <body>
   72605     wouldn't be in scope, unless it was a fragment case) -->
   72606 
   72607     <!-- If we ever change the frameset-ok flag to an insertion mode,
   72608     then we'd have to somehow keep track of its state when we switch
   72609     to after-body. -->
   72610 
   72611     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-afterbody title="insertion mode: after body">after body</a>".</p>
   72612 
   72613    </dd>
   72614 
   72615    <dt>An end tag whose tag name is "html"</dt>
   72616    <dd>
   72617 
   72618     <p>Act as if an end tag with tag name "body" had been seen,
   72619     then, if that token wasn't ignored, reprocess the current
   72620     token.</p>
   72621 
   72622    </dd>
   72623 
   72624    <!-- start tags for non-phrasing flow content elements -->
   72625 
   72626    <!-- the normal ones -->
   72627    <dt>A start tag whose tag name is one of: "address", "article",
   72628    "aside", "blockquote", "center", <!--v2DATAGRID"datagrid",-->
   72629    "details", "dir", "div", "dl", "fieldset", "figure", "footer",
   72630    "header", "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
   72631    <dd>
   72632 
   72633     <!-- As of May 2008 this doesn't match any browser exactly, but is
   72634     as close to what IE does as I can get without doing the non-tree
   72635     DOM nonsense, and thus should actually afford better compatibility
   72636     when implemented by the other browsers. -->
   72637 
   72638     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72639     an element in scope">has a <code>p</code> element in
   72640     scope</a>, then act as if an end tag with the tag name
   72641     "p" had been seen.</p>
   72642 
   72643     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72644 
   72645    </dd>
   72646 
   72647    <!-- as normal, but close h1-h6 if it's the current node -->
   72648    <dt>A start tag whose tag name is one of: "h1", "h2", "h3", "h4",
   72649    "h5", "h6"</dt>
   72650    <dd>
   72651 
   72652     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72653     an element in scope">has a <code>p</code> element in
   72654     scope</a>, then act as if an end tag with the tag name
   72655     "p" had been seen.</p>
   72656 
   72657     <p>If the <a href=#current-node>current node</a> is an element whose tag name
   72658     is one of "h1", "h2", "h3", "h4", "h5", or "h6", then this is a
   72659     <a href=#parse-error>parse error</a>; pop the <a href=#current-node>current node</a> off
   72660     the <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   72661     <!-- See https://bugs.webkit.org/show_bug.cgi?id=12646 -->
   72662 
   72663     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72664 
   72665    </dd>
   72666 
   72667    <!-- as normal, but drops leading newline -->
   72668    <dt>A start tag whose tag name is one of: "pre", "listing"</dt>
   72669    <dd>
   72670 
   72671     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72672     an element in scope">has a <code>p</code> element in
   72673     scope</a>, then act as if an end tag with the tag name
   72674     "p" had been seen.</p>
   72675 
   72676     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72677 
   72678     <p>If the next token is a U+000A LINE FEED (LF) character
   72679     token, then ignore that token and move on to the next
   72680     one. (Newlines at the start of <code><a href=#the-pre-element>pre</a></code> blocks are
   72681     ignored as an authoring convenience.)</p>
   72682 
   72683     <!-- <pre>[CR]X will eat the [CR], <pre>&#x10;X will eat the
   72684     &#x10;, but <pre>&#x13;X will not eat the &#x13;. -->
   72685 
   72686     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   72687 
   72688    </dd>
   72689 
   72690    <!-- as normal, but interacts with the form element pointer -->
   72691    <dt>A start tag whose tag name is "form"</dt>
   72692    <dd>
   72693 
   72694     <p>If the <a href=#form-element-pointer><code title=form>form</code> element
   72695     pointer</a> is not null, then this is a <a href=#parse-error>parse
   72696     error</a>; ignore the token.</p>
   72697 
   72698     <p>Otherwise:</p>
   72699 
   72700     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72701     an element in scope">has a <code>p</code> element in
   72702     scope</a>, then act as if an end tag with the tag name
   72703     "p" had been seen.</p>
   72704 
   72705     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, and set the
   72706     <a href=#form-element-pointer><code title=form>form</code> element pointer</a> to
   72707     point to the element created.</p>
   72708 
   72709    </dd>
   72710 
   72711    <!-- as normal, but imply </li> when there's another <li> open in weird cases -->
   72712    <dt>A start tag whose tag name is "li"</dt>
   72713    <dd>
   72714 
   72715     <p>Run these steps:</p>
   72716 
   72717     <ol><li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</li>
   72718 
   72719      <li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   72720      node</a> (the bottommost node of the stack).</li>
   72721 
   72722      <li><p><i>Loop</i>: If <var title="">node</var> is an
   72723      <code><a href=#the-li-element>li</a></code> element, then act as if an end tag with the tag
   72724      name "li" had been seen, then jump to the last step.</li>
   72725 
   72726      <li><p>If <var title="">node</var> is not in the
   72727      <a href=#formatting>formatting</a> category, and is not in the
   72728      <a href=#phrasing>phrasing</a> category, and is not an
   72729      <code><a href=#the-address-element>address</a></code>, <code><a href=#the-div-element>div</a></code>, or <code><a href=#the-p-element>p</a></code>
   72730      element, then jump to the last step.</li> <!-- an element
   72731      <foo> is in this list if the following markup:
   72732 
   72733          <!DOCTYPE html><body><ol><li><foo><li>
   72734 
   72735      ...results in the second <li> not being (in any way) a descendant
   72736      of the first <li>, or if <foo> is a formatting element that gets
   72737      reopened later. -->
   72738 
   72739      <li><p>Otherwise, set <var title="">node</var> to the previous
   72740      entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to
   72741      the step labeled <i>loop</i>.</li>
   72742 
   72743      <li>
   72744 
   72745       <p>This is the last step.</p>
   72746 
   72747       <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72748       an element in scope">has a <code>p</code> element in
   72749       scope</a>, then act as if an end tag with the tag name
   72750       "p" had been seen.</p>
   72751 
   72752       <p>Finally, <a href=#insert-an-html-element>insert an HTML element</a> for the
   72753       token.</p>
   72754 
   72755      </li>
   72756 
   72757     </ol></dd>
   72758 
   72759    <!-- as normal, but imply </dt> or </dd> when there's another <dt> or <dd> open in weird cases  -->
   72760    <dt>A start tag whose tag name is one of: "dd", "dt"</dt>
   72761    <dd>
   72762 
   72763     <p>Run these steps:</p>
   72764 
   72765     <ol><li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</li>
   72766 
   72767      <li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   72768      node</a> (the bottommost node of the stack).</li>
   72769 
   72770      <li><p><i>Loop</i>: If <var title="">node</var> is a
   72771      <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> element, then act as if an end
   72772      tag with the same tag name as <var title="">node</var> had been
   72773      seen, then jump to the last step.</li>
   72774 
   72775      <li><p>If <var title="">node</var> is not in the
   72776      <a href=#formatting>formatting</a> category, and is not in the
   72777      <a href=#phrasing>phrasing</a> category, and is not an
   72778      <code><a href=#the-address-element>address</a></code>, <code><a href=#the-div-element>div</a></code>, or <code><a href=#the-p-element>p</a></code>
   72779      element, then jump to the last step.</li> <!-- an element
   72780      <foo> is in this list if the following markup:
   72781 
   72782          <!DOCTYPE html><body><dl><dt><foo><dt>
   72783 
   72784      ...results in the second <dt> not being (in any way) a descendant
   72785      of the first <dt>, or if <foo> is a formatting element that gets
   72786      reopened later. -->
   72787 
   72788      <li><p>Otherwise, set <var title="">node</var> to the previous
   72789      entry in the <a href=#stack-of-open-elements>stack of open elements</a> and return to
   72790      the step labeled <i>loop</i>.</li>
   72791 
   72792      <li>
   72793 
   72794       <p>This is the last step.</p>
   72795 
   72796       <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72797       an element in scope">has a <code>p</code> element in
   72798       scope</a>, then act as if an end tag with the tag name
   72799       "p" had been seen.</p>
   72800 
   72801       <p>Finally, <a href=#insert-an-html-element>insert an HTML element</a> for the
   72802       token.</p>
   72803 
   72804      </li>
   72805 
   72806     </ol></dd>
   72807 
   72808    <!-- same as normal, but effectively ends parsing -->
   72809    <dt>A start tag whose tag name is "plaintext"</dt>
   72810    <dd>
   72811 
   72812     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72813     an element in scope">has a <code>p</code> element in
   72814     scope</a>, then act as if an end tag with the tag name
   72815     "p" had been seen.</p>
   72816 
   72817     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72818 
   72819     <p>Switch the tokenizer to the <a href=#plaintext-state>PLAINTEXT state</a>.</p>
   72820 
   72821     <p class=note>Once a start tag with the tag name "plaintext" has
   72822     been seen, that will be the last token ever seen other than
   72823     character tokens (and the end-of-file token), because there is no
   72824     way to switch out of the <a href=#plaintext-state>PLAINTEXT state</a>.</p>
   72825 
   72826    </dd>
   72827 
   72828    <!-- button is a hybrid -->
   72829    <dt>A start tag whose tag name is "button"</dt>
   72830    <dd>
   72831 
   72832     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   72833     an element in scope">has a <code>button</code> element in
   72834     scope</a>, then this is a <a href=#parse-error>parse error</a>;
   72835     act as if an end tag with the tag name "button" had been seen,
   72836     then reprocess the token.</p>
   72837 
   72838     <p>Otherwise:</p>
   72839 
   72840     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   72841     any.</p>
   72842 
   72843     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   72844 
   72845     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   72846 
   72847    </dd>
   72848 
   72849    <!-- end tags for non-phrasing flow content elements (and button) -->
   72850 
   72851    <!-- the normal ones -->
   72852    <dt>An end tag whose tag name is one of: "address", "article",
   72853    "aside", "blockquote", "button", "center",
   72854    <!--v2DATAGRID"datagrid",--> "details", "dir", "div", "dl",
   72855    "fieldset", "figure", "footer", "header", "hgroup", "listing",
   72856    "menu", "nav", "ol", "pre", "section", "ul"</dt>
   72857    <dd>
   72858 
   72859     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
   72860     with the same tag name as that of the token, then this is a
   72861     <a href=#parse-error>parse error</a>; ignore the token.</p>
   72862 
   72863     <p>Otherwise, run these steps:</p>
   72864 
   72865     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>
   72866 
   72867      <li><p>If the <a href=#current-node>current node</a> is not an element with
   72868      the same tag name as that of the token, then this is a
   72869      <a href=#parse-error>parse error</a>.</li>
   72870 
   72871      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   72872      until an element with the same tag name as the token has been
   72873      popped from the stack.</li>
   72874 
   72875     </ol></dd>
   72876 
   72877    <!-- removes the form element pointer instead of the matching node -->
   72878    <dt>An end tag whose tag name is "form"</dt>
   72879    <dd>
   72880 
   72881     <p>Let <var title="">node</var> be the element that the
   72882     <a href=#form-element-pointer><code title="">form</code> element pointer</a> is set
   72883     to.</p>
   72884 
   72885     <p>Set the <a href=#form-element-pointer><code title="">form</code> element pointer</a>
   72886     to null.</p>
   72887 
   72888     <p>If <var title="">node</var> is null or the <a href=#stack-of-open-elements>stack of open
   72889     elements</a> does not <a href=#has-an-element-in-scope title="has an element in
   72890     scope">have <var title="">node</var> in scope</a>, then this is
   72891     a <a href=#parse-error>parse error</a>; ignore the token.</p>
   72892 
   72893     <p>Otherwise, run these steps:</p>
   72894 
   72895     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>
   72896 
   72897      <li><p>If the <a href=#current-node>current node</a> is not <var title="">node</var>, then this is a <a href=#parse-error>parse
   72898      error</a>.</li>
   72899 
   72900      <li><p>Remove <var title="">node</var> from the <a href=#stack-of-open-elements>stack of
   72901      open elements</a>.</li>
   72902 
   72903     </ol></dd>
   72904 
   72905    <!-- as normal, except </p> implies <p> if there's no <p> in scope, and needs care as the elements have optional tags -->
   72906    <dt>An end tag whose tag name is "p"</dt>
   72907    <dd>
   72908 
   72909     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
   72910     with the same tag name as that of the token, then this is a
   72911     <a href=#parse-error>parse error</a>; act as if a start tag with the tag name
   72912     "p" had been seen, then reprocess the current token.</p>
   72913 
   72914     <p>Otherwise, run these steps:</p>
   72915 
   72916     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
   72917      for elements with the same tag name as the token.</li>
   72918 
   72919      <li><p>If the <a href=#current-node>current node</a> is not an element with
   72920      the same tag name as that of the token, then this is a
   72921      <a href=#parse-error>parse error</a>.</li>
   72922 
   72923      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   72924      until an element with the same tag name as the token has been
   72925      popped from the stack.</li>
   72926 
   72927     </ol></dd>
   72928 
   72929    <!-- as normal, but needs care as the elements have optional tags, and are further scoped by <ol>/<ul> -->
   72930    <dt>An end tag whose tag name is "li"</dt>
   72931    <dd>
   72932 
   72933     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-list-item-scope title="has an element in list item scope">have an element in list
   72934     item scope</a> with the same tag name as that of the token,
   72935     then this is a <a href=#parse-error>parse error</a>; ignore the token.</p>
   72936 
   72937     <p>Otherwise, run these steps:</p>
   72938 
   72939     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
   72940      for elements with the same tag name as the token.</li>
   72941 
   72942      <li><p>If the <a href=#current-node>current node</a> is not an element with
   72943      the same tag name as that of the token, then this is a
   72944      <a href=#parse-error>parse error</a>.</li>
   72945 
   72946      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   72947      until an element with the same tag name as the token has been
   72948      popped from the stack.</li>
   72949 
   72950     </ol></dd>
   72951 
   72952    <!-- as normal, but needs care as the elements have optional tags -->
   72953    <dt>An end tag whose tag name is one of: "dd", "dt"</dt>
   72954    <dd>
   72955 
   72956     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
   72957     with the same tag name as that of the token, then this is a
   72958     <a href=#parse-error>parse error</a>; ignore the token.</p>
   72959 
   72960     <p>Otherwise, run these steps:</p>
   72961 
   72962     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>, except
   72963      for elements with the same tag name as the token.</li>
   72964 
   72965      <li><p>If the <a href=#current-node>current node</a> is not an element with
   72966      the same tag name as that of the token, then this is a
   72967      <a href=#parse-error>parse error</a>.</li>
   72968 
   72969      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   72970      until an element with the same tag name as the token has been
   72971      popped from the stack.</li>
   72972 
   72973     </ol></dd>
   72974 
   72975    <!-- as normal, except acts as a closer for any of the h1-h6 elements -->
   72976    <dt>An end tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"</dt>
   72977    <dd>
   72978 
   72979     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
   72980     whose tag name is one of "h1", "h2", "h3", "h4", "h5", or "h6",
   72981     then this is a <a href=#parse-error>parse error</a>; ignore the token.</p>
   72982 
   72983     <p>Otherwise, run these steps:</p>
   72984 
   72985     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>
   72986 
   72987      <li><p>If the <a href=#current-node>current node</a> is not an element with
   72988      the same tag name as that of the token, then this is a
   72989      <a href=#parse-error>parse error</a>.</li>
   72990 
   72991      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   72992      until an element whose tag name is one of "h1", "h2", "h3", "h4",
   72993      "h5", or "h6" has been popped from the stack.</li>
   72994 
   72995     </ol></dd>
   72996 
   72997    <!-- see also applet/marquee/object lower down -->
   72998 
   72999    <dt>An end tag whose tag name is "sarcasm"</dt>
   73000    <dd>
   73001     <p>Take a deep breath, then act as described in the "any other end
   73002     tag" entry below.</p>
   73003    </dd>
   73004 
   73005    <!-- ADOPTION AGENCY ELEMENTS
   73006         Mozilla-only: bdo blink del ins sub sup q
   73007         Safari-only: code dfn kbd nobr samp var wbr
   73008         Both: a b big em font i s small strike strong tt u -->
   73009 
   73010    <dt>A start tag whose tag name is "a"</dt>
   73011    <dd>
   73012 
   73013     <p>If the <a href=#list-of-active-formatting-elements>list of active formatting elements</a>
   73014     contains an element whose tag name is "a" between the end of
   73015     the list and the last marker on the list (or the start of the
   73016     list if there is no marker on the list), then this is a
   73017     <a href=#parse-error>parse error</a>; act as if an end tag with the tag
   73018     name "a" had been seen, then remove that element from the
   73019     <a href=#list-of-active-formatting-elements>list of active formatting elements</a> and the
   73020     <a href=#stack-of-open-elements>stack of open elements</a> if the end tag didn't
   73021     already remove it (it might not have if the element is not
   73022     <a href=#has-an-element-in-table-scope title="has an element in table scope">in table
   73023     scope</a>).</p>
   73024 
   73025     <p class=example>In the non-conforming stream
   73026     <code>&lt;a&nbsp;href="a"&gt;a&lt;table&gt;&lt;a&nbsp;href="b"&gt;b&lt;/table&gt;x</code>,
   73027     the first <code><a href=#the-a-element>a</a></code> element would be closed upon seeing the
   73028     second one, and the "x" character would be inside a link to "b",
   73029     not to "a". This is despite the fact that the outer <code><a href=#the-a-element>a</a></code>
   73030     element is not in table scope (meaning that a regular
   73031     <code>&lt;/a&gt;</code> end tag at the start of the table wouldn't
   73032     close the outer <code><a href=#the-a-element>a</a></code> element). The result is that the
   73033     two <code><a href=#the-a-element>a</a></code> elements are indirectly nested inside each
   73034     other &mdash; non-conforming markup will often result in
   73035     non-conforming DOMs when parsed.</p>
   73036 
   73037     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73038     any.</p>
   73039 
   73040     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
   73041     element to the <a href=#list-of-active-formatting-elements>list of active formatting
   73042     elements</a>.</p>
   73043 
   73044    </dd>
   73045 
   73046    <dt>A start tag whose tag name is one of: "b", "big", "code", "em",
   73047    "font", "i", "s", "small", "strike", "strong", "tt", "u"</dt>
   73048    <dd>
   73049 
   73050     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73051     any.</p>
   73052 
   73053     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
   73054     element to the <a href=#list-of-active-formatting-elements>list of active formatting
   73055     elements</a>.</p>
   73056 
   73057    </dd>
   73058 
   73059    <dt>A start tag whose tag name is "nobr"</dt>
   73060    <dd>
   73061 
   73062     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73063     any.</p>
   73064 
   73065     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
   73066     element in scope">has a <code>nobr</code> element in scope</a>,
   73067     then this is a <a href=#parse-error>parse error</a>; act as if an end tag with
   73068     the tag name "nobr" had been seen, then once again
   73069     <a href=#reconstruct-the-active-formatting-elements>reconstruct the active formatting elements</a>, if
   73070     any.</p>
   73071 
   73072     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Add that
   73073     element to the <a href=#list-of-active-formatting-elements>list of active formatting
   73074     elements</a>.</p>
   73075 
   73076    </dd>
   73077 
   73078    <dt id=adoptionAgency>An end tag whose tag name is one of: "a",
   73079    "b", "big", "code", "em", "font", "i", "nobr", "s", "small",
   73080    "strike", "strong", "tt", "u"</dt>
   73081    <dd>
   73082 
   73083     <p>Run these steps:</p>
   73084 
   73085     <ol><li>
   73086 
   73087       <p>Let the <var title="">formatting element</var> be the
   73088       last element in the <a href=#list-of-active-formatting-elements>list of active formatting
   73089       elements</a> that:</p>
   73090 
   73091       <ul><li>is between the end of the list and the last scope
   73092        marker in the list, if any, or the start of the list
   73093        otherwise, and</li>
   73094 
   73095        <li>has the same tag name as the token.</li>
   73096 
   73097       </ul><p>If there is no such node, or, if that node is also in the
   73098       <a href=#stack-of-open-elements>stack of open elements</a> but the element is not <a href=#has-an-element-in-scope title="has an element in scope">in scope</a>, then this is a
   73099       <a href=#parse-error>parse error</a>; ignore the token, and abort these
   73100       steps.</p>
   73101 
   73102       <p>Otherwise, if there is such a node, but that node is not
   73103       in the <a href=#stack-of-open-elements>stack of open elements</a>, then this is a
   73104       <a href=#parse-error>parse error</a>; remove the element from the list,
   73105       and abort these steps.</p>
   73106 
   73107       <p>Otherwise, there is a <var title="">formatting
   73108       element</var> and that element is in <a href=#stack-of-open-elements title="stack of
   73109       open elements">the stack</a> and is <a href=#has-an-element-in-scope title="has an
   73110       element in scope">in scope</a>. If the element is not the
   73111       <a href=#current-node>current node</a>, this is a <a href=#parse-error>parse
   73112       error</a>. In any case, proceed with the algorithm as
   73113       written in the following steps.</p>
   73114 
   73115      </li>
   73116 
   73117      <li><p>Let the <var title="">furthest block</var> be the
   73118      topmost node in the <a href=#stack-of-open-elements>stack of open elements</a> that
   73119      is lower in the stack than the <var title="">formatting
   73120      element</var>, and is not an element in the
   73121      <a href=#phrasing>phrasing</a> or <a href=#formatting>formatting</a>
   73122      categories. There might not be one.</li>
   73123 
   73124      <li><p>If there is no <var title="">furthest block</var>,
   73125      then the UA must skip the subsequent steps and instead just
   73126      pop all the nodes from the bottom of the <a href=#stack-of-open-elements>stack of open
   73127      elements</a>, from the <a href=#current-node>current node</a> up to and
   73128      including the <var title="">formatting element</var>, and
   73129      remove the <var title="">formatting element</var> from the
   73130      <a href=#list-of-active-formatting-elements>list of active formatting elements</a>.</li>
   73131 
   73132      <li><p>Let the <var title="">common ancestor</var> be the element
   73133      immediately above the <var title="">formatting element</var> in the
   73134      <a href=#stack-of-open-elements>stack of open elements</a>.</li>
   73135 
   73136      <li><p>Let a bookmark note the position of the <var title="">formatting element</var> in the <a href=#list-of-active-formatting-elements>list of active
   73137      formatting elements</a> relative to the elements on either
   73138      side of it in the list.</li>
   73139 
   73140      <li>
   73141 
   73142       <p>Let <var title="">node</var> and <var title="">last node</var> be the
   73143       <var title="">furthest block</var>. Follow these steps:</p>
   73144 
   73145       <ol><li>Let <var title="">node</var> be the element immediately
   73146        above <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
   73147        elements</a>, or if <var title="">node</var> is no longer in
   73148        the <a href=#stack-of-open-elements>stack of open elements</a> (e.g. because it got
   73149        removed by the next step), the element that was immediately
   73150        above <var title="">node</var> in the <a href=#stack-of-open-elements>stack of open
   73151        elements</a> before <var title="">node</var> was
   73152        removed.</li>
   73153 
   73154        <li>If <var title="">node</var> is not in the <a href=#list-of-active-formatting-elements>list of
   73155        active formatting elements</a>, then remove <var title="">node</var> from the <a href=#stack-of-open-elements>stack of open
   73156        elements</a> and then go back to step 1.</li>
   73157 
   73158        <li>Otherwise, if <var title="">node</var> is the <var title="">formatting element</var>, then go to the next step
   73159        in the overall algorithm.</li>
   73160 
   73161        <li>Otherwise, if <var title="">last node</var> is the <var title="">furthest block</var>, then move the aforementioned
   73162        bookmark to be immediately after the <var title="">node</var> in the <a href=#list-of-active-formatting-elements>list of active formatting
   73163        elements</a>.</li>
   73164 
   73165        <li><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
   73166        element <var title="">node</var> was created, replace the entry
   73167        for <var title="">node</var> in the <a href=#list-of-active-formatting-elements>list of active
   73168        formatting elements</a> with an entry for the new element,
   73169        replace the entry for <var title="">node</var> in the
   73170        <a href=#stack-of-open-elements>stack of open elements</a> with an entry for the new
   73171        element, and let <var title="">node</var> be the new
   73172        element.</li>
   73173 
   73174        <li>Insert <var title="">last node</var> into <var title="">node</var>, first removing it from its previous
   73175        parent node if any.</li>
   73176 
   73177        <li>Let <var title="">last node</var> be <var title="">node</var>.</li>
   73178 
   73179        <li>Return to step 1 of this inner set of steps.</li>
   73180 
   73181       </ol></li>
   73182 
   73183      <li>
   73184 
   73185       <p>If the <var title="">common ancestor</var> node is a
   73186       <code><a href=#the-table-element>table</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
   73187       <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-tr-element>tr</a></code> element, then,
   73188       <a href=#foster-parent>foster parent</a> whatever <var title="">last
   73189       node</var> ended up being in the previous step, first removing
   73190       it from its previous parent node if any.</p>
   73191 
   73192       <p>Otherwise, append whatever <var title="">last node</var>
   73193       ended up being in the previous step to the <var title="">common
   73194       ancestor</var> node, first removing it from its previous parent
   73195       node if any.</p>
   73196 
   73197      </li>
   73198 
   73199      <li><p><a href=#create-an-element-for-the-token>Create an element for the token</a> for which the
   73200      <var title="">formatting element</var> was created.</li>
   73201 
   73202      <li><p>Take all of the child nodes of the <var title="">furthest
   73203      block</var> and append them to the element created in the last
   73204      step.</li>
   73205 
   73206      <li><p>Append that new element to the <var title="">furthest
   73207      block</var>.</li>
   73208 
   73209      <li><p>Remove the <var title="">formatting element</var> from the
   73210      <a href=#list-of-active-formatting-elements>list of active formatting elements</a>, and insert the
   73211      new element into the <a href=#list-of-active-formatting-elements>list of active formatting
   73212      elements</a> at the position of the aforementioned
   73213      bookmark.</li>
   73214 
   73215      <li><p>Remove the <var title="">formatting element</var> from the
   73216      <a href=#stack-of-open-elements>stack of open elements</a>, and insert the new element
   73217      into the <a href=#stack-of-open-elements>stack of open elements</a> immediately below
   73218      the position of the <var title="">furthest block</var> in that
   73219      stack.</li>
   73220 
   73221      <li><p>Jump back to step 1 in this series of steps.</li>
   73222 
   73223     </ol><p class=note>Because of the way this algorithm causes elements
   73224     to change parents, it has been dubbed the "adoption agency
   73225     algorithm" (in contrast with other possible algorithms for dealing
   73226     with misnested content, which included the "incest algorithm", the
   73227     "secret affair algorithm", and the "Heisenberg algorithm").</p>
   73228 
   73229    </dd>
   73230 
   73231    <dt>A start tag token whose tag name is one of: "applet",
   73232    "marquee", "object"</dt>
   73233    <dd>
   73234 
   73235     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73236     any.</p>
   73237 
   73238     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73239 
   73240     <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
   73241     formatting elements</a>.</p>
   73242 
   73243     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73244 
   73245    </dd>
   73246 
   73247    <dt>An end tag token whose tag name is one of: "applet",
   73248    "marquee", "object"</dt>
   73249    <dd>
   73250 
   73251     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
   73252     with the same tag name as that of the token, then this is a
   73253     <a href=#parse-error>parse error</a>; ignore the token.</p>
   73254 
   73255     <p>Otherwise, run these steps:</p>
   73256 
   73257     <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>
   73258 
   73259      <li><p>If the <a href=#current-node>current node</a> is not an element with
   73260      the same tag name as that of the token, then this is a
   73261      <a href=#parse-error>parse error</a>.</li>
   73262 
   73263      <li><p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   73264      until an element with the same tag name as the token has been
   73265      popped from the stack.</li>
   73266 
   73267      <li><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to the
   73268      last marker</a>.</li>
   73269 
   73270     </ol></dd>
   73271 
   73272    <dt>A start tag whose tag name is "table"</dt>
   73273    <dd>
   73274 
   73275     <p>If the <code><a href=#document>Document</a></code> is <em>not</em> set to
   73276     <a href=#quirks-mode>quirks mode</a>, and the <a href=#stack-of-open-elements>stack of open
   73277     elements</a> <a href=#has-an-element-in-scope title="has an element in scope">has a
   73278     <code>p</code> element in scope</a>, then act as if an end tag
   73279     with the tag name "p" had been seen.</p> <!-- i hate myself (this
   73280     quirk was basically caused by acid2; if i'd realised we could
   73281     change the specs when i wrote acid2, we could have avoided having
   73282     any parsing-mode quirks) -Hixie -->
   73283 
   73284     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73285 
   73286     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73287 
   73288     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>
   73289 
   73290    </dd>
   73291 
   73292    <dt>A start tag whose tag name is one of: "area", "basefont",
   73293    "bgsound", "br", "embed", "img", "input", "keygen", "wbr"</dt>
   73294    <dd>
   73295 
   73296     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73297     any.</p>
   73298 
   73299     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   73300     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73301     elements</a>.</p>
   73302 
   73303     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   73304     token's <i>self-closing flag</i></a>, if it is set.</p>
   73305 
   73306     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p> <!--
   73307     shouldn't really do it for <area>, <basefont>, and <bgsound> -->
   73308 
   73309    </dd>
   73310 
   73311    <dt>A start tag whose tag name is one of: "param", "source", "track"</dt>
   73312    <dd>
   73313 
   73314     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   73315     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73316     elements</a>.</p>
   73317 
   73318     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   73319     token's <i>self-closing flag</i></a>, if it is set.</p>
   73320 
   73321    </dd>
   73322 
   73323    <dt>A start tag whose tag name is "hr"</dt>
   73324    <dd>
   73325 
   73326     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   73327     an element in scope">has a <code>p</code> element in
   73328     scope</a>, then act as if an end tag with the tag name
   73329     "p" had been seen.</p>
   73330 
   73331     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   73332     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73333     elements</a>.</p>
   73334 
   73335     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   73336     token's <i>self-closing flag</i></a>, if it is set.</p>
   73337 
   73338     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73339 
   73340    </dd>
   73341 
   73342    <dt>A start tag whose tag name is "image"</dt>
   73343    <dd>
   73344     <p><a href=#parse-error>Parse error</a>. Change the token's tag name
   73345     to "img" and reprocess it. (Don't ask.)</p> <!-- As of
   73346     2005-12, studies showed that around 0.2% of pages used the
   73347     <image> element. -->
   73348    </dd>
   73349 
   73350    <dt id=isindex>A start tag whose tag name is "isindex"</dt>
   73351    <dd>
   73352 
   73353     <p><a href=#parse-error>Parse error</a>.</p>
   73354 
   73355     <p>If the <a href=#form-element-pointer><code title="">form</code> element
   73356     pointer</a> is not null, then ignore the token.</p>
   73357 
   73358     <p>Otherwise:</p>
   73359 
   73360     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   73361     token's <i>self-closing flag</i></a>, if it is set.</p> <!--
   73362     purely to reduce the number of errors (we don't care if they
   73363     included the /, they're not supposed to be including the tag at
   73364     all! -->
   73365 
   73366     <p>Act as if a start tag token with the tag name "form" had been seen.</p>
   73367 
   73368     <p>If the token has an attribute called "action", set the
   73369     <code title=attr-form-action>action</code> attribute on the
   73370     resulting <code><a href=#the-form-element>form</a></code> element to the value of the
   73371     "action" attribute of the token.</p>
   73372 
   73373     <p>Act as if a start tag token with the tag name "hr" had been
   73374     seen.</p>
   73375 
   73376     <p>Act as if a start tag token with the tag name "label" had been
   73377     seen.</p>
   73378 
   73379     <p>Act as if a stream of character tokens had been seen (see below
   73380     for what they should say).</p>
   73381 
   73382     <p>Act as if a start tag token with the tag name "input" had been
   73383     seen, with all the attributes from the "isindex" token except
   73384     "name", "action", and "prompt". Set the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute of the resulting
   73385     <code><a href=#the-input-element>input</a></code> element to the value "<code title="">isindex</code>".</p>
   73386 
   73387     <p>Act as if a stream of character tokens had been seen (see
   73388     below for what they should say).</p>
   73389 
   73390     <p>Act as if an end tag token with the tag name "label" had been
   73391     seen.</p>
   73392 
   73393     <p>Act as if a start tag token with the tag name "hr" had been
   73394     seen.</p>
   73395 
   73396     <p>Act as if an end tag token with the tag name "form" had been
   73397     seen.</p>
   73398 
   73399     <p>If the token has an attribute with the name "prompt", then the
   73400     first stream of characters must be the same string as given in
   73401     that attribute, and the second stream of characters must be
   73402     empty. Otherwise, the two streams of character tokens together
   73403     should, together with the <code><a href=#the-input-element>input</a></code> element, express the
   73404     equivalent of "This is a searchable index. Enter search keywords:
   73405     (input field)" in the user's preferred language.</p>
   73406 
   73407    </dd>
   73408 
   73409    <dt>A start tag whose tag name is "textarea"</dt>
   73410    <dd>
   73411 
   73412     <p>Run these steps:</p>
   73413 
   73414     <ol><li><p><a href=#insert-an-html-element>Insert an HTML element</a> for the
   73415      token.</li>
   73416 
   73417      <li><p>If the next token is a U+000A LINE FEED (LF) character
   73418      token, then ignore that token and move on to the next
   73419      one. (Newlines at the start of <code><a href=#the-textarea-element>textarea</a></code> elements are
   73420      ignored as an authoring convenience.)</li>
   73421 
   73422      <!-- see comment in <pre> start tag bit -->
   73423 
   73424      <li><p>Switch the tokenizer to the <a href=#rcdata-state>RCDATA
   73425      state</a>.</li>
   73426 
   73427      <li><p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the
   73428      current <a href=#insertion-mode>insertion mode</a>.</p>
   73429 
   73430      <li><p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not
   73431      ok".</li>
   73432 
   73433      <li><p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incdata title="insertion mode: text">text</a>".</li>
   73434 
   73435     </ol></dd>
   73436 
   73437    <dt>A start tag whose tag name is "xmp"</dt>
   73438    <dd>
   73439 
   73440     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has
   73441     an element in scope">has a <code>p</code> element in
   73442     scope</a>, then act as if an end tag with the tag name
   73443     "p" had been seen.</p>
   73444 
   73445     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73446     any.</p>
   73447 
   73448     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73449 
   73450     <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>
   73451 
   73452    </dd>
   73453 
   73454    <dt>A start tag whose tag name is "iframe"</dt>
   73455    <dd>
   73456 
   73457     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73458 
   73459     <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>
   73460 
   73461    </dd>
   73462 
   73463    <dt>A start tag whose tag name is "noembed"</dt>
   73464    <dt>A start tag whose tag name is "noscript", if the <a href=#scripting-flag>scripting flag</a> is enabled</dt>
   73465    <dd>
   73466 
   73467     <p>Follow the <a href=#generic-raw-text-element-parsing-algorithm>generic raw text element parsing algorithm</a>.</p>
   73468 
   73469    </dd>
   73470 
   73471    <dt>A start tag whose tag name is "select"</dt>
   73472    <dd>
   73473 
   73474     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73475     any.</p>
   73476 
   73477     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73478 
   73479     <p>Set the <a href=#frameset-ok-flag>frameset-ok flag</a> to "not ok".</p>
   73480 
   73481     <p>If the <a href=#insertion-mode>insertion mode</a> is one of <a href=#parsing-main-intable title="insertion mode: in table">in table</a>", "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>", "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column group</a>",
   73482     "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
   73483     body</a>", "<a href=#parsing-main-intr title="insertion mode: in row">in
   73484     row</a>", or "<a href=#parsing-main-intd title="insertion mode: in cell">in
   73485     cell</a>", then switch the <a href=#insertion-mode>insertion mode</a> to
   73486     "<a href=#parsing-main-inselectintable title="insertion mode: in select in table">in select in
   73487     table</a>". Otherwise, switch the <a href=#insertion-mode>insertion mode</a>
   73488     to "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>".</p>
   73489 
   73490    </dd>
   73491 
   73492    <dt>A start tag whose tag name is one of: "optgroup", "option"</dt>
   73493    <dd>
   73494 
   73495     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
   73496     element in scope">has an <code>option</code> element in
   73497     scope</a>, then act as if an end tag with the tag name "option"
   73498     had been seen.</p>
   73499 
   73500     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73501     any.</p>
   73502 
   73503     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73504 
   73505    </dd>
   73506 
   73507    <dt>A start tag whose tag name is one of: "rp", "rt"</dt>
   73508    <dd>
   73509 
   73510     <!-- the parsing rules for ruby really don't match IE much at all,
   73511          but in practice the markup used is very simple and so strict
   73512          compatibility with IE isn't required. For example, as defined
   73513          here we get very, very different behaviour than IE for
   73514          pathological cases like:
   73515 
   73516            <ruby><ol><li><p>a<rt>b
   73517            <ruby>a<rt>b<p>c
   73518 
   73519          But in practice most ruby markup falls into these cases:
   73520 
   73521            <ruby>a<rt>b</ruby>
   73522            <ruby>a<rp>b<rt>c<rp>d</ruby>
   73523            <ruby>a<rt>b</rt></ruby>
   73524            <ruby>a<rp>b</rp><rt>c</rt><rp>d</rp></ruby>
   73525 
   73526     -->
   73527 
   73528     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-scope title="has an
   73529     element in scope">has a <code>ruby</code> element in scope</a>,
   73530     then <a href=#generate-implied-end-tags>generate implied end tags</a>. If the <a href=#current-node>current
   73531     node</a> is not then a <code><a href=#the-ruby-element>ruby</a></code> element, this is a
   73532     <a href=#parse-error>parse error</a>; pop all the nodes from the <a href=#current-node>current
   73533     node</a> up to the node immediately before the bottommost
   73534     <code><a href=#the-ruby-element>ruby</a></code> element on the <a href=#stack-of-open-elements>stack of open
   73535     elements</a>.</p>
   73536 
   73537     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73538 
   73539    </dd>
   73540 
   73541    <dt>An end tag whose tag name is "br"</dt>
   73542    <dd>
   73543     <p><a href=#parse-error>Parse error</a>. Act as if a start tag token with
   73544     the tag name "br" had been seen. Ignore the end tag token.</p>
   73545    </dd>
   73546 
   73547    <dt>A start tag whose tag name is "math"</dt>
   73548    <dd>
   73549 
   73550     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73551     any.</p>
   73552 
   73553     <p><a href=#adjust-mathml-attributes>Adjust MathML attributes</a> for the token. (This
   73554     fixes the case of MathML attributes that are not all
   73555     lowercase.)</p>
   73556 
   73557     <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
   73558     fixes the use of namespaced attributes, in particular XLink.)</p>
   73559 
   73560     <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
   73561     <a href=#mathml-namespace>MathML namespace</a>.</p>
   73562 
   73563     <!-- If we ever change the frameset-ok flag to an insertion mode,
   73564     the following change would be implied, except we'd have to do it
   73565     even in the face of a self-closed tag:
   73566     <p>Set the <span>frameset-ok flag</span> to "not ok".</p>
   73567     -->
   73568 
   73569     <p>If the token has its <i>self-closing flag</i> set, pop the
   73570     <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73571     elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
   73572     flag">acknowledge the token's <i>self-closing flag</i></a>.</p>
   73573 
   73574     <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is not already
   73575     "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
   73576     content</a>", let the <a href=#secondary-insertion-mode>secondary insertion mode</a> be
   73577     the current <a href=#insertion-mode>insertion mode</a>, and then switch the
   73578     <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
   73579     foreign content">in foreign content</a>".</p>
   73580 
   73581    </dd>
   73582 
   73583    <dt>A start tag whose tag name is "svg"</dt>
   73584    <dd>
   73585 
   73586     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73587     any.</p>
   73588 
   73589     <p><a href=#adjust-svg-attributes>Adjust SVG attributes</a> for the token. (This fixes
   73590     the case of SVG attributes that are not all lowercase.)</p>
   73591 
   73592     <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
   73593     fixes the use of namespaced attributes, in particular XLink in
   73594     SVG.)</p>
   73595 
   73596     <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
   73597     <a href=#svg-namespace>SVG namespace</a>.</p>
   73598 
   73599     <!-- If we ever change the frameset-ok flag to an insertion mode,
   73600     the following change would be implied, except we'd have to do it
   73601     even in the face of a self-closed tag:
   73602     <p>Set the <span>frameset-ok flag</span> to "not ok".</p>
   73603     -->
   73604 
   73605     <p>If the token has its <i>self-closing flag</i> set, pop the
   73606     <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73607     elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
   73608     flag">acknowledge the token's <i>self-closing flag</i></a>.</p>
   73609 
   73610     <p>Otherwise, if the <a href=#insertion-mode>insertion mode</a> is not already
   73611     "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
   73612     content</a>", let the <a href=#secondary-insertion-mode>secondary insertion mode</a> be
   73613     the current <a href=#insertion-mode>insertion mode</a>, and then switch the
   73614     <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-inforeign title="insertion mode: in
   73615     foreign content">in foreign content</a>".</p>
   73616 
   73617    </dd>
   73618 
   73619    <dt>A start <!--or end--> tag whose tag name is one of: "caption",
   73620    "col", "colgroup", "frame", "head", "tbody", "td", "tfoot", "th",
   73621    "thead", "tr"</dt>
   73622    <!--<dt>An end tag whose tag name is one of: "area", "base",
   73623    "basefont", "bgsound", "command", "embed", "hr", "iframe", "image",
   73624    "img", "input", "isindex", "keygen", "link", "meta", "noembed",
   73625    "noframes", "param", "script", "select", "source", "style",
   73626    "table", "textarea", "title", "track", "wbr"</dt>-->
   73627    <!--<dt>An end tag whose tag name is "noscript", if the
   73628    <span>scripting flag</span> is enabled</dt>-->
   73629    <dd>
   73630     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   73631     <!-- end tags are commented out because since they can never end
   73632     up on the stack anyway, the default end tag clause will
   73633     automatically handle them. we don't want to have text in the spec
   73634     that is just an optimisation, as that detracts from the spec
   73635     itself -->
   73636    </dd>
   73637 
   73638    <dt>Any other start tag</dt>
   73639    <dd>
   73640 
   73641     <p><a href=#reconstruct-the-active-formatting-elements>Reconstruct the active formatting elements</a>, if
   73642     any.</p>
   73643 
   73644     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73645 
   73646     <p class=note>This element will be a <a href=#phrasing>phrasing</a>
   73647     element.</p>
   73648 
   73649    </dd>
   73650 
   73651    <dt>Any other end tag</dt>
   73652    <dd>
   73653 
   73654     <p>Run these steps:</p>
   73655 
   73656     <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   73657      node</a> (the bottommost node of the stack).</li>
   73658 
   73659      <li><p>If <var title="">node</var> has the same tag name as
   73660      the token, then:</p>
   73661 
   73662       <ol><li><p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</li>
   73663 
   73664        <li><p>If the tag name of the end tag token does not match
   73665        the tag name of the <a href=#current-node>current node</a>, this is a
   73666        <a href=#parse-error>parse error</a>.</li>
   73667 
   73668        <li><p>Pop all the nodes from the <a href=#current-node>current node</a> up
   73669        to <var title="">node</var>, including <var title="">node</var>, then stop these steps.</li>
   73670 
   73671       </ol></li>
   73672 
   73673      <li><p>Otherwise, if <var title="">node</var> is in neither the
   73674      <a href=#formatting>formatting</a> category nor the <a href=#phrasing>phrasing</a>
   73675      category, then this is a <a href=#parse-error>parse error</a>; ignore the
   73676      token, and abort these steps.</li>
   73677 
   73678      <li><p>Set <var title="">node</var> to the previous entry in the
   73679      <a href=#stack-of-open-elements>stack of open elements</a>.</li>
   73680 
   73681      <li><p>Return to step 2.</li>
   73682 
   73683     </ol></dd>
   73684 
   73685   </dl><h5 id=parsing-main-incdata><span class=secno>10.2.5.11 </span>The "<dfn title="insertion mode: text">text</dfn>" insertion mode</h5>
   73686 
   73687   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incdata title="insertion
   73688   mode: text">text</a>", tokens must be handled as follows:</p>
   73689 
   73690   <dl class=switch><dt>A character token</dt>
   73691    <dd>
   73692 
   73693     <p><a href=#insert-a-character title="insert a character">Insert the token's
   73694     character</a> into the <a href=#current-node>current node</a>.</p>
   73695 
   73696    </dd>
   73697 
   73698    <dt>An end-of-file token</dt>
   73699    <dd>
   73700 
   73701     <!-- can't be the fragment case -->
   73702     <p><a href=#parse-error>Parse error</a>.</p>
   73703 
   73704     <p>If the <a href=#current-node>current node</a> is a <code><a href=#script>script</a></code>
   73705     element, mark the <code><a href=#script>script</a></code> element as <a href=#already-started>"already
   73706     started"</a>.</p>
   73707 
   73708     <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73709     elements</a>.</p>
   73710 
   73711     <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
   73712     insertion mode</a> and reprocess the current token.</p>
   73713 
   73714    </dd>
   73715 
   73716    <dt id=scriptEndTag>An end tag whose tag name is "script"</dt>
   73717    <dd>
   73718 
   73719     <p>Let <var title="">script</var> be the <a href=#current-node>current node</a>
   73720     (which will be a <code><a href=#script>script</a></code> element).</p>
   73721 
   73722     <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73723     elements</a>.</p>
   73724 
   73725     <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
   73726     insertion mode</a>.</p>
   73727 
   73728     <p>Let the <var title="">old insertion point</var> have the
   73729     same value as the current <a href=#insertion-point>insertion point</a>. Let
   73730     the <a href=#insertion-point>insertion point</a> be just before the <a href=#next-input-character>next
   73731     input character</a>.</p>
   73732 
   73733     <p>Increment the parser's <a href=#script-nesting-level>script nesting level</a> by
   73734     one.</p>
   73735 
   73736     <p><a href=#running-a-script title="running a script">Run</a> the <var title="">script</var>. This might cause some script to execute,
   73737     which might cause <a href=#dom-document-write title=dom-document-write>new characters
   73738     to be inserted into the tokenizer</a>, and might cause the
   73739     tokenizer to output more tokens, resulting in a <a href=#nestedParsing>reentrant invocation of the parser</a>.</p>
   73740 
   73741     <p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a> by
   73742     one. If the parser's <a href=#script-nesting-level>script nesting level</a> is zero,
   73743     then set the <a href=#parser-pause-flag>parser pause flag</a> to false.</p>
   73744 
   73745     <p>Let the <a href=#insertion-point>insertion point</a> have the value of the <var title="">old insertion point</var>. (In other words, restore the
   73746     <a href=#insertion-point>insertion point</a> to its previous value. This value
   73747     might be the "undefined" value.)</p>
   73748 
   73749     <p id=scriptTagParserResumes>At this stage, if there is a
   73750     <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>, then:</p>
   73751 
   73752     <dl class=switch><dt>If the <a href=#script-nesting-level>script nesting level</a> is not zero:</dt>
   73753 
   73754      <dd>
   73755 
   73756       <p>Set the <a href=#parser-pause-flag>parser pause flag</a> to true, and abort the
   73757       processing of any nested invocations of the tokenizer, yielding
   73758       control back to the caller. (Tokenization will resume when the
   73759       caller returns to the "outer" tree construction stage.)</p>
   73760 
   73761       <p class=note>The tree construction stage of this particular
   73762       parser is <a href=#nestedParsing>being called reentrantly</a>,
   73763       say from a call to <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code>.</p>
   73764 
   73765      </dd>
   73766 
   73767 
   73768      <dt>Otherwise:</dt>
   73769 
   73770      <dd>
   73771 
   73772       <p>Run these steps:</p>
   73773 
   73774       <ol><li><p>Let <var title="">the script</var> be the <a href=#pending-parsing-blocking-script>pending
   73775        parsing-blocking script</a>. There is no longer a <a href=#pending-parsing-blocking-script>pending
   73776        parsing-blocking script</a>.</li>
   73777 
   73778        <li><p>Block the <a href=#tokenization title=tokenization>tokenizer</a>
   73779        for this instance of the <a href=#html-parser>HTML parser</a>, such that
   73780        the <a href=#event-loop>event loop</a> will not run <a href=#concept-task title=concept-task>tasks</a> that invoke the <a href=#tokenization title=tokenization>tokenizer</a>.</li>
   73781 
   73782        <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet blocking
   73783        scripts</a> and <var title="">the script</var>'s
   73784        <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag is set.</li>
   73785 
   73786        <li><p>Unblock the <a href=#tokenization title=tokenization>tokenizer</a>
   73787        for this instance of the <a href=#html-parser>HTML parser</a>, such that
   73788        <a href=#concept-task title=concept-task>tasks</a> that invoke the <a href=#tokenization title=tokenization>tokenizer</a> can again be
   73789        run.</li>
   73790 
   73791        <li><p>Let the <a href=#insertion-point>insertion point</a> be just before the
   73792        <a href=#next-input-character>next input character</a>.</li>
   73793 
   73794        <li><p>Increment the parser's <a href=#script-nesting-level>script nesting level</a>
   73795        by one (it should be zero before this step, so this sets it to
   73796        one).</li>
   73797 
   73798        <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a>
   73799        <var title="">the script</var>.</li>
   73800 
   73801        <li><p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a>
   73802        by one. If the parser's <a href=#script-nesting-level>script nesting level</a> is
   73803        zero (which it always should be at this point), then set the
   73804        <a href=#parser-pause-flag>parser pause flag</a> to false.</p>
   73805 
   73806        <li><p>Let the <a href=#insertion-point>insertion point</a> be undefined
   73807        again.</li>
   73808 
   73809        <li><p>If there is once again a <a href=#pending-parsing-blocking-script>pending parsing-blocking
   73810        script</a>, then repeat these steps from step 1.</li>
   73811 
   73812       </ol></dd>
   73813 
   73814     </dl></dd>
   73815 
   73816    <dt>Any other end tag</dt>
   73817    <dd>
   73818 
   73819     <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   73820     elements</a>.</p>
   73821 
   73822     <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
   73823     insertion mode</a>.</p>
   73824 
   73825    </dd>
   73826 
   73827   </dl><h5 id=parsing-main-intable><span class=secno>10.2.5.12 </span>The "<dfn title="insertion mode: in table">in table</dfn>" insertion mode</h5>
   73828 
   73829   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intable title="insertion
   73830   mode: in table">in table</a>", tokens must be handled as follows:</p>
   73831 
   73832   <dl class=switch><dt>A character token</dt>
   73833    <dd>
   73834 
   73835      <p>Let the <dfn id=pending-table-character-tokens><var>pending table character tokens</var></dfn>
   73836      be an empty list of tokens.</p>
   73837 
   73838      <p>Let the <a href=#original-insertion-mode>original insertion mode</a> be the current
   73839      <a href=#insertion-mode>insertion mode</a>.</p>
   73840 
   73841      <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table text</a>" and
   73842      reprocess the token.</p>
   73843 
   73844    </dd>
   73845 
   73846    <dt>A comment token</dt>
   73847    <dd>
   73848     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   73849     node</a> with the <code title="">data</code> attribute set to
   73850     the data given in the comment token.</p>
   73851    </dd>
   73852 
   73853    <dt>A DOCTYPE token</dt>
   73854    <dd>
   73855     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   73856    </dd>
   73857 
   73858    <dt>A start tag whose tag name is "caption"</dt>
   73859    <dd>
   73860 
   73861     <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
   73862     below.)</p>
   73863 
   73864     <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
   73865     formatting elements</a>.</p>
   73866 
   73867     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
   73868     switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incaption title="insertion mode: in caption">in caption</a>".</p>
   73869 
   73870    </dd>
   73871 
   73872    <dt>A start tag whose tag name is "colgroup"</dt>
   73873    <dd>
   73874 
   73875     <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
   73876     below.)</p>
   73877 
   73878     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
   73879     switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-incolgroup title="insertion mode: in column group">in column
   73880     group</a>".</p>
   73881 
   73882    </dd>
   73883 
   73884    <dt>A start tag whose tag name is "col"</dt>
   73885    <dd>
   73886     <p>Act as if a start tag token with the tag name "colgroup"
   73887     had been seen, then reprocess the current token.</p>
   73888    </dd>
   73889 
   73890    <dt>A start tag whose tag name is one of: "tbody", "tfoot", "thead"</dt>
   73891    <dd>
   73892 
   73893     <p><a href=#clear-the-stack-back-to-a-table-context>Clear the stack back to a table context</a>. (See
   73894     below.)</p>
   73895 
   73896     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then
   73897     switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
   73898     body</a>".</p>
   73899 
   73900    </dd>
   73901 
   73902    <dt>A start tag whose tag name is one of: "td", "th", "tr"</dt>
   73903    <dd>
   73904     <p>Act as if a start tag token with the tag name "tbody" had
   73905     been seen, then reprocess the current token.</p>
   73906    </dd>
   73907 
   73908    <dt>A start tag whose tag name is "table"</dt>
   73909    <dd>
   73910 
   73911     <p><a href=#parse-error>Parse error</a>. Act as if an end tag token with
   73912     the tag name "table" had been seen, then, if that token wasn't
   73913     ignored, reprocess the current token.</p>
   73914 
   73915     <p class=note>The fake end tag token here can only be
   73916     ignored in the <a href=#fragment-case>fragment case</a>.</p>
   73917 
   73918    </dd>
   73919 
   73920    <dt>An end tag whose tag name is "table"</dt>
   73921    <dd>
   73922 
   73923     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   73924     scope</a> with the same tag name as the token, this is a
   73925     <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
   73926     case</a>)</p>
   73927 
   73928     <p>Otherwise:</p>
   73929 
   73930     <p>Pop elements from this stack until a <code><a href=#the-table-element>table</a></code>
   73931     element has been popped from the stack.</p>
   73932 
   73933     <p><a href=#reset-the-insertion-mode-appropriately>Reset the insertion mode appropriately</a>.</p>
   73934 
   73935    </dd>
   73936 
   73937    <dt>An end tag whose tag name is one of: "body", "caption",
   73938    "col", "colgroup", "html", "tbody", "td", "tfoot", "th",
   73939    "thead", "tr"</dt>
   73940    <dd>
   73941     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   73942    </dd>
   73943 
   73944    <dt>A start tag whose tag name is one of: "style", "script"</dt>
   73945    <dd>
   73946 
   73947     <p>Process the token <a href=#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=#insertion-mode>insertion
   73948     mode</a>.</p>
   73949 
   73950    </dd>
   73951 
   73952    <dt>A start tag whose tag name is "input"</dt>
   73953    <dd>
   73954 
   73955     <p>If the token does not have an attribute with the name "type",
   73956     or if it does, but that attribute's value is not an <a href=#ascii-case-insensitive>ASCII
   73957     case-insensitive</a> match for the string "<code title="">hidden</code>", then: act as described in the "anything
   73958     else" entry below.</p>
   73959 
   73960     <p>Otherwise:</p>
   73961 
   73962     <p><a href=#parse-error>Parse error</a>.</p>
   73963 
   73964     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73965 
   73966     <p>Pop that <code><a href=#the-input-element>input</a></code> element off the <a href=#stack-of-open-elements>stack of
   73967     open elements</a>.</p>
   73968 
   73969    </dd>
   73970 
   73971    <dt>A start tag whose tag name is "form"</dt>
   73972    <dd>
   73973 
   73974     <p><a href=#parse-error>Parse error</a>.</p>
   73975 
   73976     <p>If the <a href=#form-element-pointer><code title=form>form</code> element
   73977     pointer</a> is not null, ignore the token.</p>
   73978 
   73979     <p>Otherwise:</p>
   73980 
   73981     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   73982 
   73983     <p>Pop that <code><a href=#the-form-element>form</a></code> element off the <a href=#stack-of-open-elements>stack of
   73984     open elements</a>.</p>
   73985 
   73986    </dd>
   73987 
   73988    <!-- "form" end tag falls through to in-body, which does the right thing -->
   73989 
   73990    <dt>An end-of-file token</dt>
   73991    <dd>
   73992 
   73993     <p>If the <a href=#current-node>current node</a> is not the root
   73994     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   73995     error</a>.</p>
   73996 
   73997     <p class=note>It can only be the <a href=#current-node>current node</a> in
   73998     the <a href=#fragment-case>fragment case</a>.</p>
   73999 
   74000     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   74001 
   74002    </dd>
   74003 
   74004    <dt>Anything else</dt>
   74005    <dd>
   74006 
   74007     <p><a href=#parse-error>Parse error</a>. Process the token <a href=#using-the-rules-for>using the
   74008     rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in
   74009     body</a>" <a href=#insertion-mode>insertion mode</a>, except that if the
   74010     <a href=#current-node>current node</a> is a <code><a href=#the-table-element>table</a></code>,
   74011     <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>, or
   74012     <code><a href=#the-tr-element>tr</a></code> element, then, whenever a node would be inserted
   74013     into the <a href=#current-node>current node</a>, it must instead be <a href=#foster-parent title="foster parent">foster parented</a>.</p>
   74014 
   74015    </dd>
   74016 
   74017   </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-context>clear the stack
   74018   back to a table context</dfn>, it means that the UA must, while
   74019   the <a href=#current-node>current node</a> is not a <code><a href=#the-table-element>table</a></code>
   74020   element or an <code><a href=#the-html-element-0>html</a></code> element, pop elements from the
   74021   <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   74022 
   74023   <p class=note>The <a href=#current-node>current node</a> being an
   74024   <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
   74025   case</a>.</p>
   74026 
   74027 
   74028 
   74029   <h5 id=parsing-main-intabletext><span class=secno>10.2.5.13 </span>The "<dfn title="insertion mode: in table text">in table text</dfn>" insertion mode</h5>
   74030 
   74031   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intabletext title="insertion
   74032   mode: in table text">in table text</a>", tokens must be handled
   74033   as follows:</p>
   74034 
   74035   <dl class=switch><dt>A character token</dt>
   74036    <dd>
   74037 
   74038     <p>Append the character token to the <var><a href=#pending-table-character-tokens>pending table character
   74039     tokens</a></var> list.</p>
   74040 
   74041    </dd>
   74042 
   74043 
   74044    <dt>Anything else</dt>
   74045    <dd>
   74046 
   74047     <p>If any of the tokens in the <var><a href=#pending-table-character-tokens>pending table character
   74048     tokens</a></var> list are character tokens that are not one of U+0009
   74049     CHARACTER TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED
   74050     (FF), U+000D CARRIAGE RETURN (CR), or U+0020 SPACE, then
   74051     reprocess those character tokens using the rules given in the
   74052     "anything else" entry in the <a href=#parsing-main-intable title="insertion mode: in
   74053     table">in table</a>" insertion mode.</p>
   74054 
   74055     <p>Otherwise, <a href=#insert-a-character title="insert a character">insert the
   74056     characters</a> given by the <var><a href=#pending-table-character-tokens>pending table character
   74057     tokens</a></var> list into the <a href=#current-node>current node</a>.</p>
   74058 
   74059     <p>Switch the <a href=#insertion-mode>insertion mode</a> to the <a href=#original-insertion-mode>original
   74060     insertion mode</a> and reprocess the token.</p>
   74061 
   74062    </dd>
   74063 
   74064   </dl><h5 id=parsing-main-incaption><span class=secno>10.2.5.14 </span>The "<dfn title="insertion mode: in caption">in caption</dfn>" insertion mode</h5>
   74065 
   74066   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incaption title="insertion
   74067   mode: in caption">in caption</a>", tokens must be handled as follows:</p>
   74068 
   74069   <dl class=switch><dt>An end tag whose tag name is "caption"</dt>
   74070    <dd>
   74071 
   74072     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74073     scope</a> with the same tag name as the token, this is a
   74074     <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
   74075     case</a>)</p>
   74076 
   74077     <p>Otherwise:</p>
   74078 
   74079     <p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</p>
   74080 
   74081     <p>Now, if the <a href=#current-node>current node</a> is not a
   74082     <code><a href=#the-caption-element>caption</a></code> element, then this is a <a href=#parse-error>parse
   74083     error</a>.</p>
   74084 
   74085     <p>Pop elements from this stack until a <code><a href=#the-caption-element>caption</a></code>
   74086     element has been popped from the stack.</p>
   74087 
   74088     <p><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to
   74089     the last marker</a>.</p>
   74090 
   74091     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>
   74092 
   74093    </dd>
   74094 
   74095    <dt>A start tag whose tag name is one of: "caption", "col",
   74096    "colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"</dt>
   74097    <dt>An end tag whose tag name is "table"</dt>
   74098    <dd>
   74099 
   74100     <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
   74101     name "caption" had been seen, then, if that token wasn't
   74102     ignored, reprocess the current token.</p>
   74103 
   74104     <p class=note>The fake end tag token here can only be
   74105     ignored in the <a href=#fragment-case>fragment case</a>.</p>
   74106 
   74107    </dd>
   74108 
   74109    <dt>An end tag whose tag name is one of: "body", "col",
   74110    "colgroup", "html", "tbody", "td", "tfoot", "th", "thead",
   74111    "tr"</dt>
   74112    <dd>
   74113     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74114    </dd>
   74115 
   74116    <dt>Anything else</dt>
   74117    <dd>
   74118     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74119     mode</a>.</p>
   74120    </dd>
   74121 
   74122   </dl><h5 id=parsing-main-incolgroup><span class=secno>10.2.5.15 </span>The "<dfn title="insertion mode: in column group">in column group</dfn>" insertion mode</h5>
   74123 
   74124   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-incolgroup title="insertion
   74125   mode: in column group">in column group</a>", tokens must be handled as follows:</p>
   74126 
   74127   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   74128    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   74129    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   74130    <dd>
   74131     <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
   74132     the <a href=#current-node>current node</a>.</p>
   74133    </dd>
   74134 
   74135    <dt>A comment token</dt>
   74136    <dd>
   74137     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   74138     node</a> with the <code title="">data</code> attribute set to
   74139     the data given in the comment token.</p>
   74140    </dd>
   74141 
   74142    <dt>A DOCTYPE token</dt>
   74143    <dd>
   74144     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74145    </dd>
   74146 
   74147    <dt>A start tag whose tag name is "html"</dt>
   74148    <dd>
   74149     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74150     mode</a>.</p>
   74151    </dd>
   74152 
   74153    <dt>A start tag whose tag name is "col"</dt>
   74154    <dd>
   74155 
   74156     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
   74157     pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   74158     elements</a>.</p>
   74159 
   74160     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   74161     token's <i>self-closing flag</i></a>, if it is set.</p>
   74162 
   74163    </dd>
   74164 
   74165    <dt>An end tag whose tag name is "colgroup"</dt>
   74166    <dd>
   74167 
   74168     <p>If the <a href=#current-node>current node</a> is the root
   74169     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   74170     error</a>; ignore the token. (<a href=#fragment-case>fragment
   74171     case</a>)</p>
   74172 
   74173     <p>Otherwise, pop the <a href=#current-node>current node</a> (which will be
   74174     a <code><a href=#the-colgroup-element>colgroup</a></code> element) from the <a href=#stack-of-open-elements>stack of open
   74175     elements</a>. Switch the <a href=#insertion-mode>insertion mode</a> to
   74176     "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>
   74177 
   74178    </dd>
   74179 
   74180    <dt>An end tag whose tag name is "col"</dt>
   74181    <dd>
   74182     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74183    </dd>
   74184 
   74185    <dt>An end-of-file token</dt>
   74186    <dd>
   74187 
   74188     <p>If the <a href=#current-node>current node</a> is the root <code><a href=#the-html-element-0>html</a></code>
   74189     element, then <a href=#stop-parsing>stop parsing</a>. (<a href=#fragment-case>fragment
   74190     case</a>)</p>
   74191 
   74192     <p>Otherwise, act as described in the "anything else" entry
   74193     below.</p>
   74194 
   74195    </dd>
   74196 
   74197    <dt>Anything else</dt>
   74198    <dd>
   74199 
   74200     <p>Act as if an end tag with the tag name "colgroup" had been
   74201     seen, and then, if that token wasn't ignored, reprocess the
   74202     current token.</p>
   74203 
   74204     <p class=note>The fake end tag token here can only be
   74205     ignored in the <a href=#fragment-case>fragment case</a>.</p>
   74206 
   74207    </dd>
   74208 
   74209   </dl><h5 id=parsing-main-intbody><span class=secno>10.2.5.16 </span>The "<dfn title="insertion mode: in table body">in table body</dfn>" insertion mode</h5>
   74210 
   74211   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intbody title="insertion
   74212   mode: in table body">in table body</a>", tokens must be handled as follows:</p>
   74213 
   74214   <dl class=switch><dt>A start tag whose tag name is "tr"</dt>
   74215    <dd>
   74216 
   74217     <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
   74218     context</a>. (See below.)</p>
   74219 
   74220     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then switch
   74221     the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion mode:
   74222     in row">in row</a>".</p>
   74223 
   74224    </dd>
   74225 
   74226    <dt>A start tag whose tag name is one of: "th", "td"</dt>
   74227    <dd>
   74228     <p><a href=#parse-error>Parse error</a>. Act as if a start tag with
   74229     the tag name "tr" had been seen, then reprocess the current
   74230     token.</p>
   74231    </dd>
   74232 
   74233    <dt>An end tag whose tag name is one of: "tbody", "tfoot",
   74234    "thead"</dt>
   74235    <dd>
   74236 
   74237     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74238     scope</a> with the same tag name as the token, this is a
   74239     <a href=#parse-error>parse error</a>. Ignore the token.</p>
   74240 
   74241     <p>Otherwise:</p>
   74242 
   74243     <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
   74244     context</a>. (See below.)</p>
   74245 
   74246     <p>Pop the <a href=#current-node>current node</a> from the <a href=#stack-of-open-elements>stack of
   74247     open elements</a>. Switch the <a href=#insertion-mode>insertion mode</a>
   74248     to "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>".</p>
   74249 
   74250    </dd>
   74251 
   74252    <dt>A start tag whose tag name is one of: "caption", "col",
   74253    "colgroup", "tbody", "tfoot", "thead"</dt>
   74254    <dt>An end tag whose tag name is "table"</dt>
   74255    <dd>
   74256 
   74257     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have a
   74258     <code>tbody</code>, <code>thead</code>, or <code>tfoot</code>
   74259     element in table scope</a>, this is a <a href=#parse-error>parse
   74260     error</a>. Ignore the token. (<a href=#fragment-case>fragment
   74261     case</a>)</p>
   74262 
   74263     <p>Otherwise:</p>
   74264 
   74265     <p><a href=#clear-the-stack-back-to-a-table-body-context>Clear the stack back to a table body
   74266     context</a>. (See below.)</p>
   74267 
   74268     <p>Act as if an end tag with the same tag name as the
   74269     <a href=#current-node>current node</a> ("tbody", "tfoot", or "thead") had
   74270     been seen, then reprocess the current token.</p>
   74271 
   74272    </dd>
   74273 
   74274    <dt>An end tag whose tag name is one of: "body", "caption",
   74275    "col", "colgroup", "html", "td", "th", "tr"</dt>
   74276    <dd>
   74277     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74278    </dd>
   74279 
   74280    <dt>Anything else</dt>
   74281    <dd>
   74282     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" <a href=#insertion-mode>insertion
   74283     mode</a>.</p>
   74284    </dd>
   74285 
   74286   </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-body-context>clear the stack
   74287   back to a table body context</dfn>, it means that the UA must,
   74288   while the <a href=#current-node>current node</a> is not a <code><a href=#the-tbody-element>tbody</a></code>,
   74289   <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-html-element-0>html</a></code>
   74290   element, pop elements from the <a href=#stack-of-open-elements>stack of open
   74291   elements</a>.</p>
   74292 
   74293   <p class=note>The <a href=#current-node>current node</a> being an
   74294   <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
   74295   case</a>.</p>
   74296 
   74297 
   74298   <h5 id=parsing-main-intr><span class=secno>10.2.5.17 </span>The "<dfn title="insertion mode: in row">in row</dfn>" insertion mode</h5>
   74299 
   74300   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intr title="insertion
   74301   mode: in row">in row</a>", tokens must be handled as follows:</p>
   74302 
   74303   <dl class=switch><dt>A start tag whose tag name is one of: "th", "td"</dt>
   74304    <dd>
   74305 
   74306     <p><a href=#clear-the-stack-back-to-a-table-row-context>Clear the stack back to a table row
   74307     context</a>. (See below.)</p>
   74308 
   74309     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token, then switch
   74310     the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intd title="insertion mode:
   74311     in cell">in cell</a>".</p>
   74312 
   74313     <p>Insert a marker at the end of the <a href=#list-of-active-formatting-elements>list of active
   74314     formatting elements</a>.</p>
   74315 
   74316    </dd>
   74317 
   74318    <dt>An end tag whose tag name is "tr"</dt>
   74319    <dd>
   74320 
   74321     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74322     scope</a> with the same tag name as the token, this is a
   74323     <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
   74324     case</a>)</p>
   74325 
   74326     <p>Otherwise:</p>
   74327 
   74328     <p><a href=#clear-the-stack-back-to-a-table-row-context>Clear the stack back to a table row
   74329     context</a>. (See below.)</p>
   74330 
   74331     <p>Pop the <a href=#current-node>current node</a> (which will be a
   74332     <code><a href=#the-tr-element>tr</a></code> element) from the <a href=#stack-of-open-elements>stack of open
   74333     elements</a>. Switch the <a href=#insertion-mode>insertion mode</a> to
   74334     "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
   74335     body</a>".</p>
   74336 
   74337    </dd>
   74338 
   74339    <dt>A start tag whose tag name is one of: "caption", "col",
   74340    "colgroup", "tbody", "tfoot", "thead", "tr"</dt>
   74341    <dt>An end tag whose tag name is "table"</dt>
   74342    <dd>
   74343 
   74344     <p>Act as if an end tag with the tag name "tr" had been seen,
   74345     then, if that token wasn't ignored, reprocess the current
   74346     token.</p>
   74347 
   74348     <p class=note>The fake end tag token here can only be
   74349     ignored in the <a href=#fragment-case>fragment case</a>.</p>
   74350 
   74351    </dd>
   74352 
   74353    <dt>An end tag whose tag name is one of: "tbody", "tfoot",
   74354    "thead"</dt>
   74355    <dd>
   74356 
   74357     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74358     scope</a> with the same tag name as the token, this is a
   74359     <a href=#parse-error>parse error</a>. Ignore the token.</p>
   74360 
   74361     <p>Otherwise, act as if an end tag with the tag name "tr" had
   74362     been seen, then reprocess the current token.</p>
   74363 
   74364    </dd>
   74365 
   74366    <dt>An end tag whose tag name is one of: "body", "caption",
   74367    "col", "colgroup", "html", "td", "th"</dt>
   74368    <dd>
   74369     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74370    </dd>
   74371 
   74372    <dt>Anything else</dt>
   74373    <dd>
   74374     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" <a href=#insertion-mode>insertion
   74375     mode</a>.</p>
   74376    </dd>
   74377 
   74378   </dl><p>When the steps above require the UA to <dfn id=clear-the-stack-back-to-a-table-row-context>clear the stack
   74379   back to a table row context</dfn>, it means that the UA must,
   74380   while the <a href=#current-node>current node</a> is not a <code><a href=#the-tr-element>tr</a></code>
   74381   element or an <code><a href=#the-html-element-0>html</a></code> element, pop elements from the
   74382   <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   74383 
   74384   <p class=note>The <a href=#current-node>current node</a> being an
   74385   <code><a href=#the-html-element-0>html</a></code> element after this process is a <a href=#fragment-case>fragment
   74386   case</a>.</p>
   74387 
   74388 
   74389   <h5 id=parsing-main-intd><span class=secno>10.2.5.18 </span>The "<dfn title="insertion mode: in cell">in cell</dfn>" insertion mode</h5>
   74390 
   74391   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intd title="insertion
   74392   mode: in cell">in cell</a>", tokens must be handled as follows:</p>
   74393 
   74394   <dl class=switch><dt>An end tag whose tag name is one of: "td", "th"</dt>
   74395    <dd>
   74396 
   74397     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74398     scope</a> with the same tag name as that of the token, then
   74399     this is a <a href=#parse-error>parse error</a> and the token must be
   74400     ignored.</p>
   74401 
   74402     <p>Otherwise:</p>
   74403 
   74404     <p><a href=#generate-implied-end-tags>Generate implied end tags</a>.</p>
   74405 
   74406     <p>Now, if the <a href=#current-node>current node</a> is not an element
   74407     with the same tag name as the token, then this is a
   74408     <a href=#parse-error>parse error</a>.</p>
   74409 
   74410     <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a> stack
   74411     until an element with the same tag name as the token has been
   74412     popped from the stack.</p>
   74413 
   74414     <p><a href=#clear-the-list-of-active-formatting-elements-up-to-the-last-marker>Clear the list of active formatting elements up to
   74415     the last marker</a>.</p>
   74416 
   74417     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-intr title="insertion mode: in row">in row</a>". (The
   74418     <a href=#current-node>current node</a> will be a <code><a href=#the-tr-element>tr</a></code> element at
   74419     this point.)</p>
   74420 
   74421    </dd>
   74422 
   74423    <dt>A start tag whose tag name is one of: "caption", "col",
   74424    "colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"</dt>
   74425    <dd>
   74426 
   74427     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does
   74428     <em>not</em> <a href=#has-an-element-in-table-scope title="has an element in table scope">have
   74429     a <code>td</code> or <code>th</code> element in table
   74430     scope</a>, then this is a <a href=#parse-error>parse error</a>; ignore
   74431     the token. (<a href=#fragment-case>fragment case</a>)</p>
   74432 
   74433     <p>Otherwise, <a href=#close-the-cell>close the cell</a> (see below) and
   74434     reprocess the current token.</p>
   74435 
   74436    </dd>
   74437 
   74438    <dt>An end tag whose tag name is one of: "body", "caption",
   74439    "col", "colgroup", "html"</dt>
   74440    <dd>
   74441     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74442    </dd>
   74443 
   74444    <dt>An end tag whose tag name is one of: "table", "tbody",
   74445    "tfoot", "thead", "tr"</dt>
   74446    <dd>
   74447 
   74448     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74449     scope</a> with the same tag name as that of the token
   74450     (which can only happen for "tbody", "tfoot" and "thead", or,
   74451     in the <a href=#fragment-case>fragment case</a>), then this is a <a href=#parse-error>parse
   74452     error</a> and the token must be ignored.</p>
   74453 
   74454     <p>Otherwise, <a href=#close-the-cell>close the cell</a> (see below) and
   74455     reprocess the current token.</p>
   74456 
   74457    </dd>
   74458 
   74459    <dt>Anything else</dt>
   74460    <dd>
   74461     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74462     mode</a>.</p>
   74463    </dd>
   74464 
   74465   </dl><p>Where the steps above say to <dfn id=close-the-cell>close the cell</dfn>, they
   74466   mean to run the following algorithm:</p>
   74467 
   74468   <ol><li><p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-table-scope title="has an element in table scope">has a <code>td</code>
   74469    element in table scope</a>, then act as if an end tag token
   74470    with the tag name "td" had been seen.</li>
   74471 
   74472    <li><p>Otherwise, the <a href=#stack-of-open-elements>stack of open elements</a> will
   74473    <a href=#has-an-element-in-table-scope title="has an element in table scope">have a
   74474    <code>th</code> element in table scope</a>; act as if an end
   74475    tag token with the tag name "th" had been seen.</li>
   74476 
   74477   </ol><p class=note>The <a href=#stack-of-open-elements>stack of open elements</a> cannot
   74478   have both a <code><a href=#the-td-element>td</a></code> and a <code><a href=#the-th-element>th</a></code> element <a href=#has-an-element-in-table-scope title="has an element in table scope">in table scope</a> at
   74479   the same time, nor can it have neither when the <a href=#insertion-mode>insertion
   74480   mode</a> is "<a href=#parsing-main-intd title="insertion mode: in cell">in
   74481   cell</a>".</p>
   74482 
   74483 
   74484   <h5 id=parsing-main-inselect><span class=secno>10.2.5.19 </span>The "<dfn title="insertion mode: in select">in select</dfn>" insertion mode</h5>
   74485 
   74486   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inselect title="insertion
   74487   mode: in select">in select</a>", tokens must be handled as follows:</p>
   74488 
   74489   <dl class=switch><dt>A character token</dt>
   74490    <dd>
   74491     <p><a href=#insert-a-character title="insert a character">Insert the token's
   74492     character</a> into the <a href=#current-node>current node</a>.</p>
   74493    </dd>
   74494 
   74495    <dt>A comment token</dt>
   74496    <dd>
   74497     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   74498     node</a> with the <code title="">data</code> attribute set to
   74499     the data given in the comment token.</p>
   74500    </dd>
   74501 
   74502    <dt>A DOCTYPE token</dt>
   74503    <dd>
   74504     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74505    </dd>
   74506 
   74507    <dt>A start tag whose tag name is "html"</dt>
   74508    <dd>
   74509     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74510     mode</a>.</p>
   74511    </dd>
   74512 
   74513    <dt>A start tag whose tag name is "option"</dt>
   74514    <dd>
   74515 
   74516     <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
   74517     element, act as if an end tag with the tag name "option" had
   74518     been seen.</p>
   74519 
   74520     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   74521 
   74522    </dd>
   74523 
   74524    <dt>A start tag whose tag name is "optgroup"</dt>
   74525    <dd>
   74526 
   74527     <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
   74528     element, act as if an end tag with the tag name "option" had
   74529     been seen.</p>
   74530 
   74531     <p>If the <a href=#current-node>current node</a> is an
   74532     <code><a href=#the-optgroup-element>optgroup</a></code> element, act as if an end tag with the
   74533     tag name "optgroup" had been seen.</p>
   74534 
   74535     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   74536 
   74537    </dd>
   74538 
   74539    <dt>An end tag whose tag name is "optgroup"</dt>
   74540    <dd>
   74541 
   74542     <p>First, if the <a href=#current-node>current node</a> is an
   74543     <code><a href=#the-option-element>option</a></code> element, and the node immediately before
   74544     it in the <a href=#stack-of-open-elements>stack of open elements</a> is an
   74545     <code><a href=#the-optgroup-element>optgroup</a></code> element, then act as if an end tag with
   74546     the tag name "option" had been seen.</p>
   74547 
   74548     <p>If the <a href=#current-node>current node</a> is an
   74549     <code><a href=#the-optgroup-element>optgroup</a></code> element, then pop that node from the
   74550     <a href=#stack-of-open-elements>stack of open elements</a>. Otherwise, this is a
   74551     <a href=#parse-error>parse error</a>; ignore the token.</p>
   74552 
   74553    </dd>
   74554 
   74555    <dt>An end tag whose tag name is "option"</dt>
   74556    <dd>
   74557 
   74558     <p>If the <a href=#current-node>current node</a> is an <code><a href=#the-option-element>option</a></code>
   74559     element, then pop that node from the <a href=#stack-of-open-elements>stack of open
   74560     elements</a>. Otherwise, this is a <a href=#parse-error>parse
   74561     error</a>; ignore the token.</p>
   74562 
   74563    </dd>
   74564 
   74565    <dt>An end tag whose tag name is "select"</dt>
   74566    <dd>
   74567 
   74568     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have an element in table
   74569     scope</a> with the same tag name as the token, this is a
   74570     <a href=#parse-error>parse error</a>. Ignore the token. (<a href=#fragment-case>fragment
   74571     case</a>)</p>
   74572 
   74573     <p>Otherwise:</p>
   74574 
   74575     <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a>
   74576     until a <code><a href=#the-select-element>select</a></code> element has been popped from the
   74577     stack.</p>
   74578 
   74579     <p><a href=#reset-the-insertion-mode-appropriately>Reset the insertion mode appropriately</a>.</p>
   74580 
   74581    </dd>
   74582 
   74583    <dt>A start tag whose tag name is "select"</dt>
   74584    <dd>
   74585 
   74586     <p><a href=#parse-error>Parse error</a>. Act as if the token had been
   74587     an end tag with the tag name "select" instead.</p>
   74588 
   74589    </dd>
   74590 
   74591    <dt>A start tag whose tag name is one of: "input", "keygen", "textarea"</dt>
   74592    <dd>
   74593 
   74594     <p><a href=#parse-error>Parse error</a>.</p>
   74595 
   74596     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-table-scope title="has an element in table scope">have a <code>select</code>
   74597     element in table scope</a>, ignore the token. (<a href=#fragment-case>fragment
   74598     case</a>)</p>
   74599 
   74600     <p>Otherwise, act as if an end tag with the tag name "select" had
   74601     been seen, and reprocess the token.</p>
   74602 
   74603    </dd>
   74604 
   74605    <dt>A start tag token whose tag name is "script"</dt>
   74606    <dd>
   74607     <p>Process the token <a href=#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=#insertion-mode>insertion
   74608     mode</a>.</p>
   74609    </dd>
   74610 
   74611    <dt>An end-of-file token</dt>
   74612    <dd>
   74613 
   74614     <p>If the <a href=#current-node>current node</a> is not the root
   74615     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   74616     error</a>.</p>
   74617 
   74618     <p class=note>It can only be the <a href=#current-node>current node</a> in
   74619     the <a href=#fragment-case>fragment case</a>.</p>
   74620 
   74621     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   74622 
   74623    </dd>
   74624 
   74625    <dt>Anything else</dt>
   74626    <dd>
   74627     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74628    </dd>
   74629 
   74630   </dl><h5 id=parsing-main-inselectintable><span class=secno>10.2.5.20 </span>The "<dfn title="insertion mode: in select in table">in select in table</dfn>" insertion mode</h5>
   74631 
   74632   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inselectintable title="insertion
   74633   mode: in select in table">in select in table</a>", tokens must be handled as follows:</p>
   74634 
   74635   <dl class=switch><dt>A start tag whose tag name is one of: "caption", "table",
   74636    "tbody", "tfoot", "thead", "tr", "td", "th"</dt>
   74637    <dd>
   74638     <p><a href=#parse-error>Parse error</a>. Act as if an end tag with the tag
   74639     name "select" had been seen, and reprocess the token.</p>
   74640    </dd>
   74641 
   74642    <dt>An end tag whose tag name is one of: "caption", "table",
   74643    "tbody", "tfoot", "thead", "tr", "td", "th"</dt>
   74644    <dd>
   74645 
   74646     <p><a href=#parse-error>Parse error</a>.</p>
   74647 
   74648     <p>If the <a href=#stack-of-open-elements>stack of open elements</a> <a href=#has-an-element-in-table-scope>has an
   74649     element in table scope</a> with the same tag name as that
   74650     of the token, then act as if an end tag with the tag name
   74651     "select" had been seen, and reprocess the token. Otherwise,
   74652     ignore the token.</p>
   74653 
   74654    </dd>
   74655 
   74656    <dt>Anything else</dt>
   74657    <dd>
   74658     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inselect title="insertion mode: in select">in select</a>" <a href=#insertion-mode>insertion
   74659     mode</a>.</p>
   74660    </dd>
   74661 
   74662   </dl><h5 id=parsing-main-inforeign><span class=secno>10.2.5.21 </span>The "<dfn title="insertion mode: in foreign content">in foreign content</dfn>" insertion mode</h5>
   74663 
   74664   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inforeign title="insertion
   74665   mode: in foreign content">in foreign content</a>", tokens must be
   74666   handled as follows:</p>
   74667 
   74668   <dl class=switch><dt>A character token</dt>
   74669    <dd>
   74670 
   74671     <p><a href=#insert-a-character title="insert a character">Insert the token's
   74672     character</a> into the <a href=#current-node>current node</a>.</p>
   74673 
   74674     <p>If the token is not one of U+0009 CHARACTER TABULATION, U+000A
   74675     LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN
   74676     (CR), or U+0020 SPACE, then set the <a href=#frameset-ok-flag>frameset-ok
   74677     flag</a> to "not ok".</p>
   74678 
   74679    </dd>
   74680 
   74681    <dt>A comment token</dt>
   74682    <dd>
   74683     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   74684     node</a> with the <code title="">data</code> attribute set to
   74685     the data given in the comment token.</p>
   74686    </dd>
   74687 
   74688    <dt>A DOCTYPE token</dt>
   74689    <dd>
   74690     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74691    </dd>
   74692 
   74693    <dt id=scriptForeignEndTag>An end tag whose tag name is "script", if the <a href=#current-node>current node</a> is a <code title="">script</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   74694    <dd>
   74695 
   74696     <p>Pop the <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   74697     elements</a>.</p>
   74698 
   74699     <p>Let the <var title="">old insertion point</var> have the
   74700     same value as the current <a href=#insertion-point>insertion point</a>. Let
   74701     the <a href=#insertion-point>insertion point</a> be just before the <a href=#next-input-character>next
   74702     input character</a>.</p>
   74703 
   74704     <p>Increment the parser's <a href=#script-nesting-level>script nesting level</a> by
   74705     one. Set the <a href=#parser-pause-flag>parser pause flag</a> to true.</p>
   74706 
   74707     <p><a href=http://www.w3.org/TR/SVGMobile12/script.html#ScriptContentProcessing>Process
   74708     the <code title="">script</code> element</a> according to the SVG
   74709     rules, if the user agent supports SVG. <a href=#refsSVG>[SVG]</a></p>
   74710 
   74711     <p class=note>Even if this causes <a href=#dom-document-write title=dom-document-write>new characters to be inserted into the
   74712     tokenizer</a>, the parser will not be executed reentrantly,
   74713     since the <a href=#parser-pause-flag>parser pause flag</a> is true.</p>
   74714 
   74715     <p>Decrement the parser's <a href=#script-nesting-level>script nesting level</a> by
   74716     one. If the parser's <a href=#script-nesting-level>script nesting level</a> is zero,
   74717     then set the <a href=#parser-pause-flag>parser pause flag</a> to false.</p>
   74718 
   74719     <p>Let the <a href=#insertion-point>insertion point</a> have the value of the <var title="">old insertion point</var>. (In other words, restore the
   74720     <a href=#insertion-point>insertion point</a> to its previous value. This value
   74721     might be the "undefined" value.)</p>
   74722 
   74723    </dd>
   74724 
   74725    <dt>An end tag, if the <a href=#current-node>current node</a> is not an element in the <a href=#html-namespace-0>HTML namespace</a>.</dt>
   74726 
   74727    <dd>
   74728 
   74729     <p>Run these steps:</p>
   74730 
   74731     <ol><li><p>Initialize <var title="">node</var> to be the <a href=#current-node>current
   74732      node</a> (the bottommost node of the stack).</li>
   74733 
   74734      <li><p>If <var title="">node</var> is not an element with the
   74735      same tag name as the token, then this is a <a href=#parse-error>parse
   74736      error</a>.</li>
   74737 
   74738      <li><p><i>Loop</i>: If <var title="">node</var> has the same tag
   74739      name as the token, pop elements from the <a href=#stack-of-open-elements>stack of
   74740      open elements</a> until <var title="">node</var> has been
   74741      popped from the stack, and then abort these steps.</li>
   74742 
   74743      <li><p>Set <var title="">node</var> to the previous entry in the
   74744      <a href=#stack-of-open-elements>stack of open elements</a>.</li>
   74745 
   74746      <li>
   74747 
   74748       <p>If <var title="">node</var> is an element in the <a href=#html-namespace-0>HTML
   74749       namespace</a>, process the token <a href=#using-the-rules-for>using the rules
   74750       for</a> the <a href=#secondary-insertion-mode>secondary insertion mode</a>. If, after
   74751       doing so, the <a href=#insertion-mode>insertion mode</a> is still "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
   74752       content</a>", but there is no element <a href=#has-an-element-in-scope title="has an
   74753       element in scope">in scope</a> that has a namespace other
   74754       than the <a href=#html-namespace-0>HTML namespace</a>, switch the <a href=#insertion-mode>insertion
   74755       mode</a> to the <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>
   74756 
   74757      </li>
   74758 
   74759      <li><p>Return to the step labeled <i>loop</i>.</li>
   74760 
   74761     </ol></dd>
   74762 
   74763    <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mi</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74764    <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mo</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74765    <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mn</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74766    <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">ms</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74767    <dt>A start tag whose tag name is neither "mglyph" nor "malignmark", if the <a href=#current-node>current node</a> is an <code title="">mtext</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74768    <dt>A start tag whose tag name is "svg", if the <a href=#current-node>current node</a> is an <code title="">annotation-xml</code> element in the <a href=#mathml-namespace>MathML namespace</a>.</dt>
   74769    <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">foreignObject</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   74770    <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">desc</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   74771    <dt>A start tag, if the <a href=#current-node>current node</a> is a <code title="">title</code> element in the <a href=#svg-namespace>SVG namespace</a>.</dt>
   74772    <dt>A start tag, if the <a href=#current-node>current node</a> is an element in the <a href=#html-namespace-0>HTML namespace</a>.</dt>
   74773    <dt>Any other end tag</dt>
   74774    <dd>
   74775 
   74776     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the
   74777     <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>
   74778 
   74779     <p>If, after doing so, the <a href=#insertion-mode>insertion mode</a> is still
   74780     "<a href=#parsing-main-inforeign title="insertion mode: in foreign content">in foreign
   74781     content</a>", but there is no element <a href=#has-an-element-in-scope title="has an
   74782     element in scope">in scope</a> that has a namespace other than
   74783     the <a href=#html-namespace-0>HTML namespace</a>, switch the <a href=#insertion-mode>insertion
   74784     mode</a> to the <a href=#secondary-insertion-mode>secondary insertion mode</a>.</p>
   74785 
   74786    </dd>
   74787 
   74788    <dt>A start tag whose tag name is one of: <!--"a",--> "b", "big",
   74789    "blockquote", "body"<!--by inspection-->, "br", "center", "code",
   74790    "dd", "div", "dl", "dt"<!-- so that dd and dt can be handled
   74791    uniformly throughout the parser -->, "em", "embed", "h1", "h2",
   74792    "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
   74793    completeness-->, "head"<!--by inspection-->, "hr", "i", "img",
   74794    "li", "listing"<!-- so that pre and listing can be handled
   74795    uniformly throughout the parser -->, "menu", "meta", "nobr",
   74796    "ol"<!-- so that dl, ul, and ol can be handled uniformly throughout
   74797    the parser -->, "p", "pre", "ruby", "s", <!--"script",--> "small",
   74798    "span", "strong", "strike"<!-- so that s and strike can be handled
   74799    uniformly throughout the parser -->, <!--"style",--> "sub", "sup",
   74800    "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt> <!-- this
   74801    list was determined empirically by studying over 6,000,000,000
   74802    pages that were specifically not XML pages -->
   74803    <dt>A start tag whose tag name is "font", if the token has any
   74804    attributes named "color", "face", or "size"</dt> <!-- the
   74805    attributes here are required so that SVG <font> will go through as
   74806    SVG but legacy <font>s won't -->
   74807    <dt>An end-of-file token</dt> <dd>
   74808 
   74809     <p><a href=#parse-error>Parse error</a>.</p>
   74810 
   74811     <p>Pop elements from the <a href=#stack-of-open-elements>stack of open elements</a> until
   74812     either a <code><a href=#math>math</a></code> element or an <code><a href=#svg>svg</a></code> element
   74813     has been popped from the stack, and reprocess the token.</p>
   74814 
   74815    </dd>
   74816 
   74817    <dt>Any other start tag</dt>
   74818    <dd>
   74819 
   74820     <p>If the <a href=#current-node>current node</a> is an element in the
   74821     <a href=#mathml-namespace>MathML namespace</a>, <a href=#adjust-mathml-attributes>adjust MathML
   74822     attributes</a> for the token. (This fixes the case of MathML
   74823     attributes that are not all lowercase.)</p>
   74824 
   74825     <p>If the <a href=#current-node>current node</a> is an element in the <a href=#svg-namespace>SVG
   74826     namespace</a>, and the token's tag name is one of the ones in
   74827     the first column of the following table, change the tag name to
   74828     the name given in the corresponding cell in the second
   74829     column. (This fixes the case of SVG elements that are not all
   74830     lowercase.)</p>
   74831 
   74832     <table><thead><tr><th> Tag name <th> Element name
   74833      <tbody><tr><td> <code title="">altglyph</code> <td> <code title="">altGlyph</code>
   74834       <tr><td> <code title="">altglyphdef</code> <td> <code title="">altGlyphDef</code>
   74835       <tr><td> <code title="">altglyphitem</code> <td> <code title="">altGlyphItem</code>
   74836       <tr><td> <code title="">animatecolor</code> <td> <code title="">animateColor</code>
   74837       <tr><td> <code title="">animatemotion</code> <td> <code title="">animateMotion</code>
   74838       <tr><td> <code title="">animatetransform</code> <td> <code title="">animateTransform</code>
   74839       <tr><td> <code title="">clippath</code> <td> <code title="">clipPath</code>
   74840       <tr><td> <code title="">feblend</code> <td> <code title="">feBlend</code>
   74841       <tr><td> <code title="">fecolormatrix</code> <td> <code title="">feColorMatrix</code>
   74842       <tr><td> <code title="">fecomponenttransfer</code> <td> <code title="">feComponentTransfer</code>
   74843       <tr><td> <code title="">fecomposite</code> <td> <code title="">feComposite</code>
   74844       <tr><td> <code title="">feconvolvematrix</code> <td> <code title="">feConvolveMatrix</code>
   74845       <tr><td> <code title="">fediffuselighting</code> <td> <code title="">feDiffuseLighting</code>
   74846       <tr><td> <code title="">fedisplacementmap</code> <td> <code title="">feDisplacementMap</code>
   74847       <tr><td> <code title="">fedistantlight</code> <td> <code title="">feDistantLight</code>
   74848       <tr><td> <code title="">feflood</code> <td> <code title="">feFlood</code>
   74849       <tr><td> <code title="">fefunca</code> <td> <code title="">feFuncA</code>
   74850       <tr><td> <code title="">fefuncb</code> <td> <code title="">feFuncB</code>
   74851       <tr><td> <code title="">fefuncg</code> <td> <code title="">feFuncG</code>
   74852       <tr><td> <code title="">fefuncr</code> <td> <code title="">feFuncR</code>
   74853       <tr><td> <code title="">fegaussianblur</code> <td> <code title="">feGaussianBlur</code>
   74854       <tr><td> <code title="">feimage</code> <td> <code title="">feImage</code>
   74855       <tr><td> <code title="">femerge</code> <td> <code title="">feMerge</code>
   74856       <tr><td> <code title="">femergenode</code> <td> <code title="">feMergeNode</code>
   74857       <tr><td> <code title="">femorphology</code> <td> <code title="">feMorphology</code>
   74858       <tr><td> <code title="">feoffset</code> <td> <code title="">feOffset</code>
   74859       <tr><td> <code title="">fepointlight</code> <td> <code title="">fePointLight</code>
   74860       <tr><td> <code title="">fespecularlighting</code> <td> <code title="">feSpecularLighting</code>
   74861       <tr><td> <code title="">fespotlight</code> <td> <code title="">feSpotLight</code>
   74862       <tr><td> <code title="">fetile</code> <td> <code title="">feTile</code>
   74863       <tr><td> <code title="">feturbulence</code> <td> <code title="">feTurbulence</code>
   74864       <tr><td> <code title="">foreignobject</code> <td> <code title="">foreignObject</code>
   74865       <tr><td> <code title="">glyphref</code> <td> <code title="">glyphRef</code>
   74866       <tr><td> <code title="">lineargradient</code> <td> <code title="">linearGradient</code>
   74867       <tr><td> <code title="">radialgradient</code> <td> <code title="">radialGradient</code>
   74868       <!--<tr> <td> <code title="">solidcolor</code> <td> <code title="">solidColor</code> (SVG 1.2)-->
   74869       <tr><td> <code title="">textpath</code> <td> <code title="">textPath</code>
   74870     </table><p>If the <a href=#current-node>current node</a> is an element in the <a href=#svg-namespace>SVG
   74871     namespace</a>, <a href=#adjust-svg-attributes>adjust SVG attributes</a> for the
   74872     token. (This fixes the case of SVG attributes that are not all
   74873     lowercase.)</p>
   74874 
   74875     <p><a href=#adjust-foreign-attributes>Adjust foreign attributes</a> for the token. (This
   74876     fixes the use of namespaced attributes, in particular XLink in
   74877     SVG.)</p>
   74878 
   74879     <p><a href=#insert-a-foreign-element>Insert a foreign element</a> for the token, in the
   74880     same namespace as the <a href=#current-node>current node</a>.</p>
   74881 
   74882     <p>If the token has its <i>self-closing flag</i> set, pop the
   74883     <a href=#current-node>current node</a> off the <a href=#stack-of-open-elements>stack of open
   74884     elements</a> and <a href=#acknowledge-self-closing-flag title="acknowledge self-closing
   74885     flag">acknowledge the token's <i>self-closing flag</i></a>.</p>
   74886 
   74887    </dd>
   74888 
   74889   </dl><h5 id=parsing-main-afterbody><span class=secno>10.2.5.22 </span>The "<dfn title="insertion mode: after body">after body</dfn>" insertion mode</h5>
   74890 
   74891   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-afterbody title="insertion
   74892   mode: after body">after body</a>", tokens must be handled as follows:</p>
   74893 
   74894   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   74895    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   74896    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   74897    <dd>
   74898     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74899     mode</a>.</p>
   74900    </dd>
   74901 
   74902    <dt>A comment token</dt>
   74903    <dd>
   74904     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the first element in
   74905     the <a href=#stack-of-open-elements>stack of open elements</a> (the <code><a href=#the-html-element-0>html</a></code>
   74906     element), with the <code title="">data</code> attribute set to
   74907     the data given in the comment token.</p>
   74908    </dd>
   74909 
   74910    <dt>A DOCTYPE token</dt>
   74911    <dd>
   74912     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74913    </dd>
   74914 
   74915    <dt>A start tag whose tag name is "html"</dt>
   74916    <dd>
   74917     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74918     mode</a>.</p>
   74919    </dd>
   74920 
   74921    <dt>An end tag whose tag name is "html"</dt>
   74922    <dd>
   74923 
   74924     <p>If the parser was originally created as part of the <a href=#html-fragment-parsing-algorithm>HTML
   74925     fragment parsing algorithm</a>, this is a <a href=#parse-error>parse
   74926     error</a>; ignore the token. (<a href=#fragment-case>fragment case</a>)</p>
   74927 
   74928     <p>Otherwise, switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-after-body-insertion-mode title="insertion mode: after after body">after after
   74929     body</a>".</p>
   74930 
   74931    </dd>
   74932 
   74933    <dt>An end-of-file token</dt>
   74934    <dd>
   74935     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   74936    </dd>
   74937 
   74938    <dt>Anything else</dt>
   74939    <dd>
   74940 
   74941     <p><a href=#parse-error>Parse error</a>. Switch the <a href=#insertion-mode>insertion
   74942     mode</a> to "<a href=#parsing-main-inbody title="insertion mode: in body">in
   74943     body</a>" and reprocess the token.</p>
   74944 
   74945    </dd>
   74946 
   74947   </dl><h5 id=parsing-main-inframeset><span class=secno>10.2.5.23 </span>The "<dfn title="insertion mode: in frameset">in frameset</dfn>" insertion mode</h5>
   74948 
   74949   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inframeset title="insertion
   74950   mode: in frameset">in frameset</a>", tokens must be handled as follows:</p>
   74951 
   74952   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   74953    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   74954    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   74955    <dd>
   74956     <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
   74957     the <a href=#current-node>current node</a>.</p>
   74958    </dd>
   74959 
   74960    <dt>A comment token</dt>
   74961    <dd>
   74962     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   74963     node</a> with the <code title="">data</code> attribute set to
   74964     the data given in the comment token.</p>
   74965    </dd>
   74966 
   74967    <dt>A DOCTYPE token</dt>
   74968    <dd>
   74969     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   74970    </dd>
   74971 
   74972    <dt>A start tag whose tag name is "html"</dt>
   74973    <dd>
   74974     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   74975     mode</a>.</p>
   74976    </dd>
   74977 
   74978    <dt>A start tag whose tag name is "frameset"</dt>
   74979    <dd>
   74980     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.</p>
   74981    </dd>
   74982 
   74983    <dt>An end tag whose tag name is "frameset"</dt>
   74984    <dd>
   74985 
   74986     <p>If the <a href=#current-node>current node</a> is the root
   74987     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   74988     error</a>; ignore the token. (<a href=#fragment-case>fragment
   74989     case</a>)</p>
   74990 
   74991     <p>Otherwise, pop the <a href=#current-node>current node</a> from the
   74992     <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   74993 
   74994     <p>If the parser was <em>not</em> originally created as part
   74995     of the <a href=#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>
   74996     (<a href=#fragment-case>fragment case</a>), and the <a href=#current-node>current
   74997     node</a> is no longer a <code><a href=#frameset>frameset</a></code> element, then
   74998     switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#parsing-main-afterframeset title="insertion mode: after frameset">after
   74999     frameset</a>".</p>
   75000 
   75001    </dd>
   75002 
   75003    <dt>A start tag whose tag name is "frame"</dt>
   75004    <dd>
   75005 
   75006     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token.
   75007     Immediately pop the <a href=#current-node>current node</a> off the
   75008     <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   75009 
   75010     <p><a href=#acknowledge-self-closing-flag title="acknowledge self-closing flag">Acknowledge the
   75011     token's <i>self-closing flag</i></a>, if it is set.</p>
   75012 
   75013    </dd>
   75014 
   75015    <dt>A start tag whose tag name is "noframes"</dt>
   75016    <dd>
   75017     <p>Process the token <a href=#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=#insertion-mode>insertion
   75018     mode</a>.</p>
   75019    </dd>
   75020 
   75021    <dt>An end-of-file token</dt>
   75022    <dd>
   75023 
   75024     <p>If the <a href=#current-node>current node</a> is not the root
   75025     <code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
   75026     error</a>.</p>
   75027 
   75028     <p class=note>It can only be the <a href=#current-node>current node</a> in
   75029     the <a href=#fragment-case>fragment case</a>.</p>
   75030 
   75031     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   75032 
   75033    </dd>
   75034 
   75035    <dt>Anything else</dt>
   75036    <dd>
   75037     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   75038    </dd>
   75039 
   75040   </dl><h5 id=parsing-main-afterframeset><span class=secno>10.2.5.24 </span>The "<dfn title="insertion mode: after frameset">after frameset</dfn>" insertion mode</h5>
   75041 
   75042   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-afterframeset title="insertion
   75043   mode: after frameset">after frameset</a>", tokens must be handled as follows:</p>
   75044 
   75045   <!-- due to rules in the "in frameset" mode, this can't be entered in the fragment case -->
   75046   <dl class=switch><dt>A character token that is one of U+0009 CHARACTER
   75047    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   75048    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   75049    <dd>
   75050     <p><a href=#insert-a-character title="insert a character">Insert the character</a> into
   75051     the <a href=#current-node>current node</a>.</p>
   75052    </dd>
   75053 
   75054    <dt>A comment token</dt>
   75055    <dd>
   75056     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <a href=#current-node>current
   75057     node</a> with the <code title="">data</code> attribute set to
   75058     the data given in the comment token.</p>
   75059    </dd>
   75060 
   75061    <dt>A DOCTYPE token</dt>
   75062    <dd>
   75063     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   75064    </dd>
   75065 
   75066    <dt>A start tag whose tag name is "html"</dt>
   75067    <dd>
   75068     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   75069     mode</a>.</p>
   75070    </dd>
   75071 
   75072    <dt>An end tag whose tag name is "html"</dt>
   75073    <dd>
   75074     <p>Switch the <a href=#insertion-mode>insertion mode</a> to "<a href=#the-after-after-frameset-insertion-mode title="insertion mode: after after frameset">after after
   75075     frameset</a>".</p>
   75076    </dd>
   75077 
   75078    <dt>A start tag whose tag name is "noframes"</dt>
   75079    <dd>
   75080     <p>Process the token <a href=#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=#insertion-mode>insertion
   75081     mode</a>.</p>
   75082    </dd>
   75083 
   75084    <dt>An end-of-file token</dt>
   75085    <dd>
   75086     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   75087    </dd>
   75088 
   75089    <dt>Anything else</dt>
   75090    <dd>
   75091     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   75092    </dd>
   75093 
   75094   </dl><h5 id=the-after-after-body-insertion-mode><span class=secno>10.2.5.25 </span>The "<dfn title="insertion mode: after after body">after after body</dfn>" insertion mode</h5>
   75095 
   75096   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-after-body-insertion-mode title="insertion
   75097   mode: after after body">after after body</a>", tokens must be handled as follows:</p>
   75098 
   75099   <dl class=switch><dt>A comment token</dt>
   75100    <dd>
   75101     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
   75102     object with the <code title="">data</code> attribute set to the
   75103     data given in the comment token.</p>
   75104    </dd>
   75105 
   75106    <dt>A DOCTYPE token</dt>
   75107    <dt>A character token that is one of U+0009 CHARACTER
   75108    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   75109    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   75110    <dt>A start tag whose tag name is "html"</dt>
   75111    <dd>
   75112     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   75113     mode</a>.</p>
   75114    </dd>
   75115 
   75116    <dt>An end-of-file token</dt>
   75117    <dd>
   75118     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   75119    </dd>
   75120 
   75121    <dt>Anything else</dt>
   75122    <dd>
   75123     <p><a href=#parse-error>Parse error</a>. Switch the <a href=#insertion-mode>insertion mode</a>
   75124     to "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" and
   75125     reprocess the token.</p>
   75126    </dd>
   75127 
   75128   </dl><h5 id=the-after-after-frameset-insertion-mode><span class=secno>10.2.5.26 </span>The "<dfn title="insertion mode: after after frameset">after after frameset</dfn>" insertion mode</h5>
   75129 
   75130   <p>When the <a href=#insertion-mode>insertion mode</a> is "<a href=#the-after-after-frameset-insertion-mode title="insertion
   75131   mode: after after frameset">after after frameset</a>", tokens must be handled as follows:</p>
   75132 
   75133   <dl class=switch><dt>A comment token</dt>
   75134    <dd>
   75135     <p>Append a <code><a href=#comment-0>Comment</a></code> node to the <code><a href=#document>Document</a></code>
   75136     object with the <code title="">data</code> attribute set to the
   75137     data given in the comment token.</p>
   75138    </dd>
   75139 
   75140    <dt>A DOCTYPE token</dt>
   75141    <dt>A character token that is one of U+0009 CHARACTER
   75142    TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF),
   75143    U+000D CARRIAGE RETURN (CR), or U+0020 SPACE</dt>
   75144    <dt>A start tag whose tag name is "html"</dt>
   75145    <dd>
   75146     <p>Process the token <a href=#using-the-rules-for>using the rules for</a> the "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>" <a href=#insertion-mode>insertion
   75147     mode</a>.</p>
   75148    </dd>
   75149 
   75150    <dt>An end-of-file token</dt>
   75151    <dd>
   75152     <p><a href=#stop-parsing>Stop parsing</a>.</p>
   75153    </dd>
   75154 
   75155    <dt>A start tag whose tag name is "noframes"</dt>
   75156    <dd>
   75157     <p>Process the token <a href=#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=#insertion-mode>insertion
   75158     mode</a>.</p>
   75159    </dd>
   75160 
   75161    <dt>Anything else</dt>
   75162    <dd>
   75163     <p><a href=#parse-error>Parse error</a>. Ignore the token.</p>
   75164    </dd>
   75165 
   75166   </dl></div>
   75167 
   75168 
   75169   <div class=impl>
   75170 
   75171   <h4 id=the-end><span class=secno>10.2.6 </span>The end</h4>
   75172 
   75173   <p>Once the user agent <dfn id=stop-parsing title="stop parsing">stops parsing</dfn>
   75174   the document, the user agent must run the following steps:</p>
   75175 
   75176   <ol><!-- this happens as part of one of the tasks that runs the parser --><li><p>Set the <a href=#current-document-readiness>current document readiness</a> to
   75177    "interactive" <!-- this also synchronously fires an event --> and
   75178    the <a href=#insertion-point>insertion point</a> to undefined.</li>
   75179 
   75180    <li><p>Pop <em>all</em> the nodes off the <a href=#stack-of-open-elements>stack of open
   75181    elements</a>.</li>
   75182 
   75183    <li><p>If the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the
   75184    document has finished parsing</a> is not empty, run these
   75185    substeps:</p>
   75186 
   75187     <ol><li><p><a href=#spin-the-event-loop>Spin the event loop</a> until the first
   75188      <code><a href=#script>script</a></code> in the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will
   75189      execute when the document has finished parsing</a> has its
   75190      <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag set <em>and</em> there
   75191      is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet
   75192      blocking scripts</a>.</li>
   75193 
   75194      <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a> the
   75195      first <code><a href=#script>script</a></code> in the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will
   75196      execute when the document has finished parsing</a>.</li>
   75197 
   75198      <li><p>Remove the first <code><a href=#script>script</a></code> element from the
   75199      <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the document has
   75200      finished parsing</a> (i.e. shift out the first entry in the
   75201      list).</li>
   75202 
   75203      <li><p>If the <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the
   75204      document has finished parsing</a> is still not empty, repeat
   75205      these substeps again from substep 1.</p>
   75206 
   75207     </ol></li>
   75208 
   75209    <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   75210    event</a> named <code title=event-DOMContentLoaded>DOMContentLoaded</code> at the
   75211    <code><a href=#document>Document</a></code>.</li>
   75212 
   75213    <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until the <a href=#set-of-scripts-that-will-execute-as-soon-as-possible>set of
   75214    scripts that will execute as soon as possible</a> is
   75215    empty.</li> <!-- this step is redundant with the next one,
   75216    really, since all those scripts also delay the load event. It's
   75217    here in case we add an event between this step and the next or if
   75218    we move the previous step (DOMContentLoaded) down again. -->
   75219 
   75220    <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is nothing that
   75221    <dfn id=delay-the-load-event title="delay the load event">delays the load event</dfn> in
   75222    the <code><a href=#document>Document</a></code>.</li>
   75223 
   75224    <li><p><a href=#queue-a-task>Queue a task</a> to set the <a href=#current-document-readiness>current document
   75225    readiness</a> to "complete". <!-- this also fires an event
   75226    synchronously during the task --></li>
   75227 
   75228    <li><p>If the <code><a href=#document>Document</a></code> is in a <a href=#browsing-context>browsing
   75229    context</a>, then <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a
   75230    simple event</a> named <code title=event-load>load</code> at
   75231    the <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object, but with
   75232    its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   75233    <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   75234    <code><a href=#window>Window</a></code> object).</li>
   75235 
   75236    <li><p>If the <code><a href=#document>Document</a></code> is in a <a href=#browsing-context>browsing
   75237    context</a>, then <a href=#queue-a-task>queue a task</a> to fire a <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event at the
   75238    <code><a href=#window>Window</a></code> object of the <code><a href=#document>Document</a></code>, but with
   75239    its <code title=dom-event-target><a href=#dom-event-target>target</a></code> set to the
   75240    <code><a href=#document>Document</a></code> object (and the <code title=dom-event-currentTarget>currentTarget</code> set to the
   75241    <code><a href=#window>Window</a></code> object), using the
   75242    <code><a href=#pagetransitionevent>PageTransitionEvent</a></code> interface, with the <code title=dom-PageTransitionEvent-persisted><a href=#dom-pagetransitionevent-persisted>persisted</a></code>
   75243    attribute set to false. This event must not bubble, must not be
   75244    cancelable, and has no default action.</li>
   75245 
   75246    <li><p>If the <code><a href=#document>Document</a></code> has a <a href=#pending-state-object>pending state
   75247    object</a>, then <a href=#queue-a-task>queue a task</a> to fire a <code title=event-popstate><a href=#event-popstate>popstate</a></code> event at the
   75248    <code><a href=#document>Document</a></code>'s <code><a href=#window>Window</a></code> object using the
   75249    <code><a href=#popstateevent>PopStateEvent</a></code> interface, with the <code title=dom-PopStateEvent-state><a href=#dom-popstateevent-state>state</a></code> attribute set to the
   75250    current value of the <a href=#pending-state-object>pending state object</a>. This event
   75251    must bubble but not be cancelable and has no default
   75252    action.</li>
   75253 
   75254    <li><p>If the <code><a href=#document>Document</a></code> has any <a href=#pending-application-cache-download-process-tasks>pending
   75255    application cache download process tasks</a>, then <a href=#queue-a-task title="queue a task">queue</a> each such <a href=#concept-task title=concept-task>task</a> in the order they were added to
   75256    the list of <a href=#pending-application-cache-download-process-tasks>pending application cache download process
   75257    tasks</a>, and then empty the list of <a href=#pending-application-cache-download-process-tasks>pending application
   75258    cache download process tasks</a>. The <a href=#task-source>task source</a>
   75259    for these <a href=#concept-task title=concept-task>tasks</a> is the
   75260    <a href=#networking-task-source>networking task source</a>.</li>
   75261 
   75262    <li><p>The <code><a href=#document>Document</a></code> is now <dfn id=completely-loaded>completely
   75263    loaded</dfn>.</li>
   75264 
   75265   </ol><p>When the user agent is to <dfn id=abort-an-html-parser>abort an HTML parser</dfn>, it
   75266   must run the following steps:</p>
   75267 
   75268   <ol><li><p>Throw away any pending content in the <a href=#the-input-stream>input
   75269    stream</a>, and discard any future content that would have been
   75270    added to it.</li>
   75271 
   75272    <li><p>Pop <em>all</em> the nodes off the <a href=#stack-of-open-elements>stack of open
   75273    elements</a>.</li>
   75274 
   75275    <!-- anything else? this is things that happen when you call
   75276    document.open() on a document that's still being parsed. Should the
   75277    pending scripts be blown away or anything? -->
   75278 
   75279   </ol><p>Except where otherwise specified, the <a href=#task-source>task source</a>
   75280   for the <a href=#concept-task title=concept-task>tasks</a> mentioned in this
   75281   section is the <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>
   75282 
   75283   </div>
   75284 
   75285 
   75286   <div class=impl>
   75287 
   75288   <h4 id=coercing-an-html-dom-into-an-infoset><span class=secno>10.2.7 </span>Coercing an HTML DOM into an infoset</h4>
   75289 
   75290   <p>When an application uses an <a href=#html-parser>HTML parser</a> in
   75291   conjunction with an XML pipeline, it is possible that the
   75292   constructed DOM is not compatible with the XML tool chain in certain
   75293   subtle ways. For example, an XML toolchain might not be able to
   75294   represent attributes with the name <code title="">xmlns</code>,
   75295   since they conflict with the Namespaces in XML syntax. There is also
   75296   some data that the <a href=#html-parser>HTML parser</a> generates that isn't
   75297   included in the DOM itself. This section specifies some rules for
   75298   handling these issues.</p>
   75299 
   75300   <p>If the XML API being used doesn't support DOCTYPEs, the tool may
   75301   drop DOCTYPEs altogether.</p>
   75302 
   75303   <p>If the XML API doesn't support attributes in no namespace that
   75304   are named "<code title="">xmlns</code>", attributes whose names
   75305   start with "<code title="">xmlns:</code>", or attributes in the
   75306   <a href=#xmlns-namespace>XMLNS namespace</a>, then the tool may drop such
   75307   attributes.</p>
   75308 
   75309   <p>The tool may annotate the output with any namespace declarations
   75310   required for proper operation.</p>
   75311 
   75312   <p>If the XML API being used restricts the allowable characters in
   75313   the local names of elements and attributes, then the tool may map
   75314   all element and attribute local names that the API wouldn't support
   75315   to a set of names that <em>are</em> allowed, by replacing any
   75316   character that isn't supported with the uppercase letter U and the
   75317   six digits of the character's Unicode code point when expressed in
   75318   hexadecimal, using digits 0-9 and capital letters A-F as the
   75319   symbols, in increasing numeric order.</p>
   75320 
   75321   <p class=example>For example, the element name <code title="">foo&lt;bar</code>, which can be output by the <a href=#html-parser>HTML
   75322   parser</a>, though it is neither a legal HTML element name nor a
   75323   well-formed XML element name, would be converted into <code title="">fooU00003Cbar</code>, which <em>is</em> a well-formed XML
   75324   element name (though it's still not legal in HTML by any means).</p>
   75325 
   75326   <p class=example>As another example, consider the attribute
   75327   <code>xlink:href</code>. Used on a MathML element, it becomes, after
   75328   being <a href=#adjust-foreign-attributes title="adjust foreign attributes">adjusted</a>, an
   75329   attribute with a prefix "<code title="">xlink</code>" and a local
   75330   name "<code title="">href</code>". However, used on an HTML element,
   75331   it becomes an attribute with no prefix and the local name "<code title="">xlink:href</code>", which is not a valid NCName, and thus
   75332   might not be accepted by an XML API. It could thus get converted,
   75333   becoming "<code title="">xlinkU00003Ahref</code>".</p>
   75334 
   75335   <p class=note>The resulting names from this conversion
   75336   conveniently can't clash with any attribute generated by the
   75337   <a href=#html-parser>HTML parser</a>, since those are all either lowercase or
   75338   those listed in the <a href=#adjust-foreign-attributes>adjust foreign attributes</a>
   75339   algorithm's table.</p>
   75340 
   75341   <p>If the XML API restricts comments from having two consecutive
   75342   U+002D HYPHEN-MINUS characters (--), the tool may insert a single
   75343   U+0020 SPACE character between any such offending characters.</p>
   75344 
   75345   <p>If the XML API restricts comments from ending in a
   75346   U+002D HYPHEN-MINUS character (-), the tool may insert a single
   75347   U+0020 SPACE character at the end of such comments.</p>
   75348 
   75349   <p>If the XML API restricts allowed characters in character data,
   75350   attribute values, or comments, the tool may replace any U+000C FORM
   75351   FEED (FF) character with a U+0020 SPACE character, and any other
   75352   literal non-XML character with a U+FFFD REPLACEMENT CHARACTER.</p>
   75353 
   75354   <p>If the tool has no way to convey out-of-band information, then
   75355   the tool may drop the following information:</p>
   75356 
   75357   <ul><li>Whether the document is set to <i><a href=#no-quirks-mode>no-quirks mode</a></i>,
   75358    <i><a href=#limited-quirks-mode>limited-quirks mode</a></i>, or <i><a href=#quirks-mode>quirks mode</a></i></li>
   75359 
   75360    <li>The association between form controls and forms that aren't
   75361    their nearest <code><a href=#the-form-element>form</a></code> element ancestor (use of the
   75362    <a href=#form-element-pointer><code>form</code> element pointer</a> in the parser)</li>
   75363 
   75364   </ul><p class=note>The mutations allowed by this section apply
   75365   <em>after</em> the <a href=#html-parser>HTML parser</a>'s rules have been
   75366   applied. For example, a <code title="">&lt;a::&gt;</code> start tag
   75367   will be closed by a <code title="">&lt;/a::&gt;</code> end tag, and
   75368   never by a <code title="">&lt;/aU00003AU00003A&gt;</code> end tag, even
   75369   if the user agent is using the rules above to then generate an
   75370   actual element in the DOM with the name <code title="">aU00003AU00003A</code> for that start tag.</p>
   75371 
   75372   </div>
   75373 
   75374 
   75375   <div class=impl>
   75376 
   75377   <h4 id=an-introduction-to-error-handling-and-strange-cases-in-the-parser><span class=secno>10.2.8 </span>An introduction to error handling and strange cases in the parser</h4>
   75378 
   75379   <p><i>This section is non-normative.</i></p>
   75380 
   75381   <p>This section examines some erroneous markup and discusses how
   75382   the <a href=#html-parser>HTML parser</a> handles these cases.</p>
   75383 
   75384 
   75385   <h5 id=misnested-tags:-b-i-/b-/i><span class=secno>10.2.8.1 </span>Misnested tags: &lt;b&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt;</h5>
   75386 
   75387   <p><i>This section is non-normative.</i></p>
   75388 
   75389   <p>The most-often discussed example of erroneous markup is as
   75390   follows:</p>
   75391 
   75392   <pre>&lt;p&gt;1&lt;b&gt;2&lt;i&gt;3&lt;/b&gt;4&lt;/i&gt;5&lt;/p&gt;</pre>
   75393 
   75394   <p>The parsing of this markup is straightforward up to the "3". At
   75395   this point, the DOM looks like this:</p>
   75396 
   75397   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul></ul></ul></ul></ul><p>Here, the <a href=#stack-of-open-elements>stack of open elements</a> has five elements
   75398   on it: <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-p-element>p</a></code>,
   75399   <code><a href=#the-b-element>b</a></code>, and <code><a href=#the-i-element>i</a></code>. The <a href=#list-of-active-formatting-elements>list of active
   75400   formatting elements</a> just has two: <code><a href=#the-b-element>b</a></code> and
   75401   <code><a href=#the-i-element>i</a></code>. The <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>
   75402 
   75403   <p>Upon receiving the end tag token with the tag name "b", the "<a href=#adoptionAgency>adoption agency algorithm</a>" is
   75404   invoked. This is a simple case, in that the <var title="">formatting
   75405   element</var> is the <code><a href=#the-b-element>b</a></code> element, and there is no
   75406   <var title="">furthest block</var>. Thus, the <a href=#stack-of-open-elements>stack of open
   75407   elements</a> ends up with just three elements: <code><a href=#the-html-element-0>html</a></code>,
   75408   <code><a href=#the-body-element-0>body</a></code>, and <code><a href=#the-p-element>p</a></code>, while the <a href=#list-of-active-formatting-elements>list of
   75409   active formatting elements</a> has just one: <code><a href=#the-i-element>i</a></code>. The
   75410   DOM tree is unmodified at this point.</p>
   75411 
   75412   <p>The next token is a character ("4"), triggers the <a href=#reconstruct-the-active-formatting-elements title="reconstruct the active formatting elements">reconstruction of
   75413   the active formatting elements</a>, in this case just the
   75414   <code><a href=#the-i-element>i</a></code> element. A new <code><a href=#the-i-element>i</a></code> element is thus created
   75415   for the "4" text node. After the end tag token for the "i" is also
   75416   received, and the "5" text node is inserted, the DOM looks as
   75417   follows:</p>
   75418 
   75419   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul><li class=t1><code><a href=#the-i-element>i</a></code><ul><li class=t3><code>#text</code>: <span title="">4</span></ul><li class=t3><code>#text</code>: <span title="">5</span></ul></ul></ul></ul><h5 id=misnested-tags:-b-p-/b-/p><span class=secno>10.2.8.2 </span>Misnested tags: &lt;b&gt;&lt;p&gt;&lt;/b&gt;&lt;/p&gt;</h5>
   75420 
   75421   <p><i>This section is non-normative.</i></p>
   75422 
   75423   <p>A case similar to the previous one is the following:</p>
   75424 
   75425   <pre>&lt;b&gt;1&lt;p&gt;2&lt;/b&gt;3&lt;/p&gt;</pre>
   75426 
   75427   <p>Up to the "2" the parsing here is straightforward:</p>
   75428 
   75429   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul></ul><p>The interesting part is when the end tag token with the tag name
   75430   "b" is parsed.</p>
   75431 
   75432   <p>Before that token is seen, the <a href=#stack-of-open-elements>stack of open
   75433   elements</a> has four elements on it: <code><a href=#the-html-element-0>html</a></code>,
   75434   <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-b-element>b</a></code>, and <code><a href=#the-p-element>p</a></code>. The
   75435   <a href=#list-of-active-formatting-elements>list of active formatting elements</a> just has the one:
   75436   <code><a href=#the-b-element>b</a></code>. The <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-inbody title="insertion mode: in body">in body</a>".</p>
   75437 
   75438   <p>Upon receiving the end tag token with the tag name "b", the "<a href=#adoptionAgency>adoption agency algorithm</a>" is invoked, as
   75439   in the previous example. However, in this case, there <em>is</em> a
   75440   <var title="">furthest block</var>, namely the <code><a href=#the-p-element>p</a></code> element. Thus,
   75441   this time the adoption agency algorithm isn't skipped over.</p>
   75442 
   75443   <p>The <var title="">common ancestor</var> is the <code><a href=#the-body-element-0>body</a></code>
   75444   element. A conceptual "bookmark" marks the position of the
   75445   <code><a href=#the-b-element>b</a></code> in the <a href=#list-of-active-formatting-elements>list of active formatting
   75446   elements</a>, but since that list has only one element in it,
   75447   it won't have much effect.</p>
   75448 
   75449   <p>As the algorithm progresses, <var title="">node</var> ends up set
   75450   to the formatting element (<code><a href=#the-b-element>b</a></code>), and <var title="">last
   75451   node</var> ends up set to the <var title="">furthest block</var>
   75452   (<code><a href=#the-p-element>p</a></code>).</p>
   75453 
   75454   <p>The <var title="">last node</var> gets appended (moved) to the
   75455   <var title="">common ancestor</var>, so that the DOM looks like:</p>
   75456 
   75457   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul><p>A new <code><a href=#the-b-element>b</a></code> element is created, and the children of the
   75458   <code><a href=#the-p-element>p</a></code> element are moved to it:</p>
   75459 
   75460   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code></ul></ul></ul><ul class=domTree><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul><p>Finally, the new <code><a href=#the-b-element>b</a></code> element is appended to the
   75461   <code><a href=#the-p-element>p</a></code> element, so that the DOM looks like:</p>
   75462 
   75463   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul></ul></ul></ul></ul><p>The <code><a href=#the-b-element>b</a></code> element is removed from the <a href=#list-of-active-formatting-elements>list of
   75464   active formatting elements</a> and the <a href=#stack-of-open-elements>stack of open
   75465   elements</a>, so that when the "3" is parsed, it is appended to
   75466   the <code><a href=#the-p-element>p</a></code> element:</p>
   75467 
   75468   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">1</span></ul><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">2</span></ul><li class=t3><code>#text</code>: <span title="">3</span></ul></ul></ul></ul><h5 id=unexpected-markup-in-tables><span class=secno>10.2.8.3 </span>Unexpected markup in tables</h5>
   75469 
   75470   <p><i>This section is non-normative.</i></p>
   75471 
   75472   <p>Error handling in tables is, for historical reasons, especially
   75473   strange. For example, consider the following markup:</p>
   75474 
   75475   <pre>&lt;table&gt;<strong>&lt;b&gt;</strong>&lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt;<strong>bbb</strong>&lt;/table&gt;ccc</pre>
   75476 
   75477   <p>The highlighted <code><a href=#the-b-element>b</a></code> element start tag is not allowed
   75478   directly inside a table like that, and the parser handles this case
   75479   by placing the element <em>before</em> the table. (This is called <i title="foster parent"><a href=#foster-parent>foster parenting</a></i>.) This can be seen by
   75480   examining the DOM tree as it stands just after the
   75481   <code><a href=#the-table-element>table</a></code> element's start tag has been seen:</p>
   75482 
   75483   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-table-element>table</a></code></ul></ul></ul><p>...and then immediately after the <code><a href=#the-b-element>b</a></code> element start
   75484   tag has been seen:</p>
   75485 
   75486   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code></ul></ul></ul><p>At this point, the <a href=#stack-of-open-elements>stack of open elements</a> has on it
   75487   the elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>,
   75488   <code><a href=#the-table-element>table</a></code>, and <code><a href=#the-b-element>b</a></code> (in that order, despite the
   75489   resulting DOM tree); the <a href=#list-of-active-formatting-elements>list of active formatting
   75490   elements</a> just has the <code><a href=#the-b-element>b</a></code> element in it; and the
   75491   <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intable title="insertion mode: in
   75492   table">in table</a>".</p>
   75493 
   75494   <p>The <code><a href=#the-tr-element>tr</a></code> start tag causes the <code><a href=#the-b-element>b</a></code> element
   75495   to be popped off the stack and a <code><a href=#the-tbody-element>tbody</a></code> start tag to be
   75496   implied; the <code><a href=#the-tbody-element>tbody</a></code> and <code><a href=#the-tr-element>tr</a></code> elements are
   75497   then handled in a rather straight-forward manner, taking the parser
   75498   through the "<a href=#parsing-main-intbody title="insertion mode: in table body">in table
   75499   body</a>" and "<a href=#parsing-main-intr title="insertion mode: in row">in
   75500   row</a>" insertion modes, after which the DOM looks as
   75501   follows:</p>
   75502 
   75503   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code></ul></ul></ul></ul></ul><p>Here, the <a href=#stack-of-open-elements>stack of open elements</a> has on it the
   75504   elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
   75505   <code><a href=#the-tbody-element>tbody</a></code>, and <code><a href=#the-tr-element>tr</a></code>; the <a href=#list-of-active-formatting-elements>list of active
   75506   formatting elements</a> still has the <code><a href=#the-b-element>b</a></code> element in
   75507   it; and the <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intr title="insertion
   75508   mode: in row">in row</a>".</p>
   75509 
   75510   <p>The <code><a href=#the-td-element>td</a></code> element start tag token, after putting a
   75511   <code><a href=#the-td-element>td</a></code> element on the tree, puts a marker on the <a href=#list-of-active-formatting-elements>list
   75512   of active formatting elements</a> (it also switches to the "<a href=#parsing-main-intd title="insertion mode: in cell">in cell</a>" <a href=#insertion-mode>insertion
   75513   mode</a>).</p>
   75514 
   75515   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code></ul></ul></ul></ul></ul></ul><p>The marker means that when the "aaa" character tokens are seen,
   75516   no <code><a href=#the-b-element>b</a></code> element is created to hold the resulting text
   75517   node:</p>
   75518 
   75519   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul></ul></ul></ul><p>The end tags are handled in a straight-forward manner; after
   75520   handling them, the <a href=#stack-of-open-elements>stack of open elements</a> has on it the
   75521   elements <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
   75522   and <code><a href=#the-tbody-element>tbody</a></code>; the <a href=#list-of-active-formatting-elements>list of active formatting
   75523   elements</a> still has the <code><a href=#the-b-element>b</a></code> element in it (the
   75524   marker having been removed by the "td" end tag token); and the
   75525   <a href=#insertion-mode>insertion mode</a> is "<a href=#parsing-main-intbody title="insertion mode: in
   75526   table body">in table body</a>".</p>
   75527 
   75528   <p>Thus it is that the "bbb" character tokens are found. These
   75529   trigger the "<a href=#parsing-main-intabletext title="insertion mode: in table text">in table
   75530   text</a>" insertion mode to be used (with the <a href=#original-insertion-mode>original
   75531   insertion mode</a> set to "<a href=#parsing-main-intbody title="insertion mode: in table
   75532   body">in table body</a>"). The character tokens are collected,
   75533   and when the next token (the <code><a href=#the-table-element>table</a></code> element end tag) is
   75534   seen, they are processed as a group. Since they are not all spaces,
   75535   they are handled as per the "anything else" rules in the "<a href=#parsing-main-intable title="insertion mode: in table">in table</a>" insertion mode,
   75536   which defer to the "<a href=#parsing-main-inbody title="insertion mode: in body">in
   75537   body</a>" insertion mode but with <a href=#foster-parent title="foster
   75538   parent">foster parenting</a>.</p>
   75539 
   75540   <p>When <a href=#reconstruct-the-active-formatting-elements title="reconstruct the active formatting elements">the
   75541   active formatting elements are reconstructed</a>, a
   75542   <code><a href=#the-b-element>b</a></code> element is created and <a href=#foster-parent title="foster
   75543   parent">foster parented</a>, and then the "bbb" text node is
   75544   appended to it:</p>
   75545 
   75546   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">bbb</span></ul><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul></ul></ul></ul><p>The <a href=#stack-of-open-elements>stack of open elements</a> has on it the elements
   75547   <code><a href=#the-html-element-0>html</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>,
   75548   <code><a href=#the-tbody-element>tbody</a></code>, and the new <code><a href=#the-b-element>b</a></code> (again, note that
   75549   this doesn't match the resulting tree!); the <a href=#list-of-active-formatting-elements>list of active
   75550   formatting elements</a> has the new <code><a href=#the-b-element>b</a></code> element in it;
   75551   and the <a href=#insertion-mode>insertion mode</a> is still "<a href=#parsing-main-intbody title="insertion
   75552   mode: in table body">in table body</a>".</p>
   75553 
   75554   <p>Had the character tokens been only <a href=#space-character title="space
   75555   character">space characters</a> instead of "bbb", then those
   75556   <a href=#space-character title="space character">space characters</a> would just be
   75557   appended to the <code><a href=#the-tbody-element>tbody</a></code> element.</p>
   75558 
   75559   <p>Finally, the <code><a href=#the-table-element>table</a></code> is closed by a "table" end
   75560   tag. This pops all the nodes from the <a href=#stack-of-open-elements>stack of open
   75561   elements</a> up to and including the <code><a href=#the-table-element>table</a></code> element,
   75562   but it doesn't affect the <a href=#list-of-active-formatting-elements>list of active formatting
   75563   elements</a>, so the "ccc" character tokens after the table
   75564   result in yet another <code><a href=#the-b-element>b</a></code> element being created, this
   75565   time after the table:</p>
   75566 
   75567   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-b-element>b</a></code><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">bbb</span></ul><li class=t1><code><a href=#the-table-element>table</a></code><ul><li class=t1><code><a href=#the-tbody-element>tbody</a></code><ul><li class=t1><code><a href=#the-tr-element>tr</a></code><ul><li class=t1><code><a href=#the-td-element>td</a></code><ul><li class=t3><code>#text</code>: <span title="">aaa</span></ul></ul></ul></ul><li class=t1><code><a href=#the-b-element>b</a></code><ul><li class=t3><code>#text</code>: <span title="">ccc</span></ul></ul></ul></ul><h5 id=scripts-that-modify-the-page-as-it-is-being-parsed><span class=secno>10.2.8.4 </span>Scripts that modify the page as it is being parsed</h5>
   75568 
   75569   <p><i>This section is non-normative.</i></p>
   75570 
   75571   <p>Consider the following markup, which for this example we will
   75572   assume is the document with <a href=#url>URL</a> <code title="">http://example.com/inner</code>, being rendered as the
   75573   content of an <code><a href=#the-iframe-element>iframe</a></code> in another document with the
   75574   <a href=#url>URL</a> <code title="">http://example.com/outer</code>:</p>
   75575 
   75576   <pre>&lt;div id=a&gt;
   75577  &lt;script&gt;
   75578   var div = document.getElementById('a');
   75579   parent.document.body.appendChild(div);
   75580  &lt;/script&gt;
   75581  &lt;script&gt;
   75582   alert(document.URL);
   75583  &lt;/script&gt;
   75584 &lt;/div&gt;
   75585 &lt;script&gt;
   75586  alert(document.URL);
   75587 &lt;/script&gt;</pre>
   75588 
   75589   <p>Up to the first "script" end tag, before the script is parsed,
   75590   the result is relatively straightforward:</p>
   75591 
   75592   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#the-div-element>div</a></code> <span class=t2 title=""><code class="attribute name">id</code>="<code class="attribute value"><a href=#the-a-element>a</a></code>"</span><ul><li class=t3><code>#text</code>: <span title="">
   75593  </span><li class=t1><code><a href=#script>script</a></code><ul><li class=t3><code>#text</code>: <span title="">var div = document.getElementById('a'); &#9166; parent.document.body.appendChild(div);</span></ul></ul></ul></ul></ul><p>After the script is parsed, though, the <code><a href=#the-div-element>div</a></code> element
   75594   and its child <code><a href=#script>script</a></code> element are gone:</p>
   75595 
   75596   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code></ul></ul><p>They are, at this point, in the <code><a href=#document>Document</a></code> of the
   75597   aforementioned outer <a href=#browsing-context>browsing context</a>. However, the
   75598   <a href=#stack-of-open-elements>stack of open elements</a> <em>still contains the
   75599   <code><a href=#the-div-element>div</a></code> element</em>.</p>
   75600 
   75601   <p>Thus, when the second <code><a href=#script>script</a></code> element is parsed, it
   75602   is inserted <em>into the outer <code><a href=#document>Document</a></code>
   75603   object</em>.</p>
   75604 
   75605   <p>This also means that the <a href="#script's-global-object">script's global object</a> is
   75606   the outer <a href=#browsing-context>browsing context</a>'s <code><a href=#window>Window</a></code>
   75607   object, <em>not</em> the <code><a href=#window>Window</a></code> object inside the
   75608   <code><a href=#the-iframe-element>iframe</a></code>.</p>
   75609 
   75610   <p class=note>This isn't a security problem since the script that
   75611   moves the <code><a href=#the-div-element>div</a></code> into the outer <code><a href=#document>Document</a></code> can
   75612   only do so because the two <code><a href=#document>Document</a></code> object have the
   75613   same <a href=#origin>origin</a>.</p>
   75614 
   75615   <p>Thus, the first alert says "http://example.com/outer".</p>
   75616 
   75617   <p>Once the <code><a href=#the-div-element>div</a></code> element's end tag is parsed, the
   75618   <code><a href=#the-div-element>div</a></code> element is popped off the stack, and so the next
   75619   <code><a href=#script>script</a></code> element is in the inner <code><a href=#document>Document</a></code>:</p>
   75620 
   75621   <ul class=domTree><li class=t1><code><a href=#the-html-element-0>html</a></code><ul><li class=t1><code><a href=#the-head-element-0>head</a></code><li class=t1><code><a href=#the-body-element-0>body</a></code><ul><li class=t1><code><a href=#script>script</a></code><ul><li class=t3><code>#text</code>: <span title="">alert(document.URL);</span></ul></ul></ul></ul><p>This second alert will say "http://example.com/inner".</p>
   75622 
   75623 
   75624 
   75625 
   75626   <h3 id=serializing-html-fragments><span class=secno>10.3 </span>Serializing HTML fragments</h3>
   75627 
   75628   <p>The following steps form the <dfn id=html-fragment-serialization-algorithm>HTML fragment serialization
   75629   algorithm</dfn>. The algorithm takes as input a DOM
   75630   <code><a href=#element>Element</a></code> or <code><a href=#document>Document</a></code>, referred to as <var title="">the node</var>, and either returns a string or raises an
   75631   exception.</p>
   75632 
   75633   <p class=note>This algorithm serializes the <em>children</em> of
   75634   the node being serialized, not the node itself.</p>
   75635 
   75636   <ol><li><p>Let <var title="">s</var> be a string, and initialize it to
   75637    the empty string.</li>
   75638 
   75639    <li>
   75640 
   75641     <p>For each child node of <var title="">the node</var>, in
   75642     <a href=#tree-order>tree order</a>, run the following steps:
   75643 
   75644     <ol><li><p>Let <var title="">current node</var> be the child node
   75645      being processed.</li>
   75646 
   75647      <li>
   75648 
   75649       <p>Append the appropriate string from the following list to
   75650       <var title="">s</var>:</p>
   75651 
   75652       <dl class=switch><dt>If <var title="">current node</var> is an <code title="">Element</code></dt>
   75653 
   75654        <dd>
   75655 
   75656         <p>Append a U+003C LESS-THAN SIGN character character (&lt;),
   75657         followed by the element's tag name. (For nodes created by the
   75658         <a href=#html-parser>HTML parser</a> or <code title="">Document.createElement()</code>, the tag name will be
   75659         lowercase.)</p>
   75660 
   75661         <p>For each attribute that the element has, append a U+0020
   75662         SPACE character, the attribute's name (which, for attributes
   75663         set by the <a href=#html-parser>HTML parser</a> or by <code title="">Element.setAttributeNode()</code> or <code title="">Element.setAttribute()</code>, will be lowercase), a
   75664         U+003D EQUALS SIGN character (=), a U+0022 QUOTATION MARK
   75665         character ("), the attribute's value, <a href=#escapingString title="escaping a string">escaped as described below</a> in
   75666         <i>attribute mode</i>, and a second U+0022 QUOTATION MARK
   75667         character (").</p>
   75668 
   75669         <p>While the exact order of attributes is UA-defined, and may
   75670         depend on factors such as the order that the attributes were
   75671         given in the original markup, the sort order must be stable,
   75672         such that consecutive invocations of this algorithm serialize an
   75673         element's attributes in the same order.</p>
   75674 
   75675         <p>Append a U+003E GREATER-THAN SIGN character (&gt;).</p>
   75676 
   75677         <p>If <var title="">current node</var> is an
   75678         <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>,
   75679         <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
   75680         <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-hr-element>hr</a></code>,
   75681         <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>,
   75682         <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>, <code><a href=#the-param-element>param</a></code>, or
   75683         <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child
   75684         node at this point.</p> <!-- also, i guess: image and isindex,
   75685         but we don't list those because we don't consider those
   75686         "elements", more "macros", and thus we should never serialize
   75687         them -->
   75688 
   75689         <p>If <var title="">current node</var> is a <code><a href=#the-pre-element>pre</a></code>,
   75690         <code><a href=#the-textarea-element>textarea</a></code>, or <code><a href=#listing>listing</a></code> element, append
   75691         a U+000A LINE FEED (LF) character.</p>
   75692 
   75693         <p>Append the value of running the <a href=#html-fragment-serialization-algorithm>HTML fragment
   75694         serialization algorithm</a> on the <var title="">current
   75695         node</var> element (thus recursing into this algorithm for
   75696         that element), followed by a U+003C LESS-THAN SIGN character
   75697         (&lt;), a U+002F SOLIDUS character (/), the element's tag name
   75698         again, and finally a U+003E GREATER-THAN SIGN character
   75699         (&gt;).</p>
   75700 
   75701        </dd>
   75702 
   75703 
   75704        <dt>If <var title="">current node</var> is a <code title="">Text</code> or <code title="">CDATASection</code>
   75705        node</dt>
   75706 
   75707        <dd>
   75708 
   75709         <p>If the parent of <var title="">current node</var> is a
   75710         <code><a href=#the-style-element>style</a></code>, <code><a href=#script>script</a></code>, <code><a href=#xmp>xmp</a></code>,
   75711         <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#noembed>noembed</a></code>,
   75712         <code><a href=#noframes>noframes</a></code>, or <code><a href=#plaintext>plaintext</a></code> element, or
   75713         if the parent of <var title="">current node</var> is
   75714         <code><a href=#the-noscript-element>noscript</a></code> element and <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
   75715         node, then append the value of <var title="">current
   75716         node</var>'s <code title="">data</code> IDL attribute
   75717         literally.</p>
   75718 
   75719         <p>Otherwise, append the value of <var title="">current
   75720         node</var>'s <code title="">data</code> IDL attribute, <a href=#escapingString title="escaping a string">escaped as described
   75721         below</a>.</p>
   75722 
   75723        </dd>
   75724 
   75725 
   75726        <dt>If <var title="">current node</var> is a <code title="">Comment</code></dt>
   75727 
   75728        <dd>
   75729 
   75730         <p>Append the literal string <code>&lt;!--</code> (U+003C
   75731         LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS,
   75732         U+002D HYPHEN-MINUS), followed by the value of <var title="">current node</var>'s <code title="">data</code> IDL
   75733         attribute, followed by the literal string <code>--&gt;</code>
   75734         (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN
   75735         SIGN).</p>
   75736 
   75737        </dd>
   75738 
   75739 
   75740        <dt>If <var title="">current node</var> is a <code title="">ProcessingInstruction</code></dt>
   75741 
   75742        <dd>
   75743 
   75744         <p>Append the literal string <code>&lt;?</code> (U+003C
   75745         LESS-THAN SIGN, U+003F QUESTION MARK), followed by the value
   75746         of <var title="">current node</var>'s <code title="">target</code> IDL attribute, followed by a single
   75747         U+0020 SPACE character, followed by the value of <var title="">current node</var>'s <code title="">data</code> IDL
   75748         attribute, followed by a single U+003E GREATER-THAN SIGN
   75749         character (&gt;).</p>
   75750 
   75751        </dd>
   75752 
   75753 
   75754        <dt>If <var title="">current node</var> is a <code title="">DocumentType</code></dt>
   75755 
   75756        <dd>
   75757 
   75758         <p>Append the literal string <code>&lt;!DOCTYPE</code> (U+003C
   75759         LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+0044 LATIN CAPITAL
   75760         LETTER D, U+004F LATIN CAPITAL LETTER O, U+0043 LATIN CAPITAL
   75761         LETTER C, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL
   75762         LETTER Y, U+0050 LATIN CAPITAL LETTER P, U+0045 LATIN CAPITAL
   75763         LETTER E), followed by a space (U+0020 SPACE), followed by the
   75764         value of <var title="">current node</var>'s <code title="">name</code> IDL attribute, followed by the literal
   75765         string <code>&gt;</code> (U+003E GREATER-THAN SIGN).</p>
   75766 
   75767        </dd>
   75768 
   75769 
   75770       </dl><p>Other node types (e.g. <code title="">Attr</code>) cannot
   75771       occur as children of elements. If, despite this, they somehow do
   75772       occur, this algorithm must raise an
   75773       <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception.</p>
   75774 
   75775      </li>
   75776 
   75777     </ol></li>
   75778 
   75779    <li><p>The result of the algorithm is the string <var title="">s</var>.</li>
   75780 
   75781   </ol><p><dfn id=escapingString>Escaping a string</dfn> (for the
   75782   purposes of the algorithm above) consists of replacing any
   75783   occurrences of the "<code title="">&amp;</code>" character by the
   75784   string "<code title="">&amp;amp;</code>", any occurrences of the
   75785   U+00A0 NO-BREAK SPACE character by the string "<code title="">&amp;nbsp;</code>", and, if the algorithm was invoked in
   75786   the <i>attribute mode</i>, any occurrences of the "<code title="">"</code>" character by the string "<code title="">&amp;quot;</code>", or if it was not, any occurrences of
   75787   the "<code title="">&lt;</code>" character by the string "<code title="">&amp;lt;</code>", any occurrences of the "<code title="">&gt;</code>" character by the string "<code title="">&amp;gt;</code>".</p>
   75788 
   75789   <p class=note>Entity reference nodes are <a href=#entity-references>assumed to be expanded</a> by the user
   75790   agent, and are therefore not covered in the algorithm above.</p>
   75791 
   75792   <p class=note>It is possible that the output of this algorithm, if
   75793   parsed with an <a href=#html-parser>HTML parser</a>, will not return the
   75794   original tree structure. For instance, if a <code><a href=#the-textarea-element>textarea</a></code>
   75795   element to which a <code title="">Comment</code> node has been
   75796   appended is serialized and the output is then reparsed, the comment
   75797   will end up being displayed in the text field. Similarly, if, as a
   75798   result of DOM manipulation, an element contains a comment that
   75799   contains the literal string "<code title="">--&gt;</code>", then
   75800   when the result of serializing the element is parsed, the comment
   75801   will be truncated at that point and the rest of the comment will be
   75802   interpreted as markup. More examples would be making a
   75803   <code><a href=#script>script</a></code> element contain a text node with the text string
   75804   "<code>&lt;/script&gt;</code>", or having a <code><a href=#the-p-element>p</a></code> element that
   75805   contains a <code><a href=#the-ul-element>ul</a></code> element (as the <code><a href=#the-ul-element>ul</a></code> element's
   75806   <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> would imply the end
   75807   tag for the <code><a href=#the-p-element>p</a></code>).</p>
   75808 
   75809 
   75810   <h3 id=parsing-html-fragments><span class=secno>10.4 </span>Parsing HTML fragments</h3>
   75811 
   75812   <p>The following steps form the <dfn id=html-fragment-parsing-algorithm>HTML fragment parsing
   75813   algorithm</dfn>. The algorithm optionally takes as input an
   75814   <code><a href=#element>Element</a></code> node, referred to as the <var title="">context</var> element, which gives the context for the
   75815   parser, as well as <var title="">input</var>, a string to parse, and
   75816   returns a list of zero or more nodes.</p>
   75817 
   75818   <p class=note>Parts marked <dfn id=fragment-case>fragment case</dfn> in algorithms
   75819   in the parser section are parts that only occur if the parser was
   75820   created for the purposes of this algorithm (and with a <var title="">context</var> element). The algorithms have been annotated
   75821   with such markings for informational purposes only; such markings
   75822   have no normative weight. If it is possible for a condition
   75823   described as a <a href=#fragment-case>fragment case</a> to occur even when the
   75824   parser wasn't created for the purposes of handling this algorithm,
   75825   then that is an error in the specification.</p>
   75826 
   75827   <ol><li>
   75828 
   75829     <p>Create a new <code><a href=#document>Document</a></code> node, and mark it as being
   75830     an <a href=#html-documents title="HTML documents">HTML document</a>.</p>
   75831 
   75832    </li>
   75833 
   75834    <li>
   75835 
   75836     <p>If there is a <var title="">context</var> element, and the
   75837     <code><a href=#document>Document</a></code> of the <var title="">context</var> element
   75838     is in <a href=#quirks-mode>quirks mode</a>, then let the <code><a href=#document>Document</a></code>
   75839     be in <a href=#quirks-mode>quirks mode</a>. Otherwise, if there is a <var title="">context</var> element, and the <code><a href=#document>Document</a></code> of
   75840     the <var title="">context</var> element is in <a href=#limited-quirks-mode>limited-quirks
   75841     mode</a>, then let the <code><a href=#document>Document</a></code> be in
   75842     <a href=#limited-quirks-mode>limited-quirks mode</a>. Otherwise, leave the
   75843     <code><a href=#document>Document</a></code> in <a href=#no-quirks-mode>no-quirks mode</a>.</p>
   75844 
   75845    </li>
   75846 
   75847    <li>
   75848 
   75849     <p>Create a new <a href=#html-parser>HTML parser</a>, and associate it with
   75850     the just created <code><a href=#document>Document</a></code> node.</p>
   75851 
   75852    </li>
   75853 
   75854    <li>
   75855 
   75856     <p>If there is a <var title="">context</var> element, run these
   75857     substeps:</p>
   75858 
   75859     <ol><li>
   75860 
   75861       <p>Set the state of the <a href=#html-parser>HTML parser</a>'s
   75862       <a href=#tokenization>tokenization</a> stage as follows:</p>
   75863 
   75864       <dl class=switch><dt>If it is a <code><a href=#the-title-element-0>title</a></code> or <code><a href=#the-textarea-element>textarea</a></code>
   75865        element</dt>
   75866 
   75867        <dd>Switch the tokenizer to the <a href=#rcdata-state>RCDATA state</a>.</dd>
   75868 
   75869 
   75870        <dt>If it is a <code><a href=#the-style-element>style</a></code>, <code><a href=#xmp>xmp</a></code>,
   75871        <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#noembed>noembed</a></code>, or
   75872        <code><a href=#noframes>noframes</a></code> element</dt>
   75873 
   75874        <dd>Switch the tokenizer to the <a href=#rawtext-state>RAWTEXT state</a>.</dd>
   75875 
   75876 
   75877        <dt>If it is a <code><a href=#script>script</a></code> element</dt>
   75878 
   75879        <dd>Switch the tokenizer to the <a href=#script-data-state>script data state</a>.</dd>
   75880 
   75881 
   75882        <dt>If it is a <code><a href=#the-noscript-element>noscript</a></code> element</dt>
   75883 
   75884        <dd>If the <a href=#scripting-flag>scripting flag</a> is enabled, switch the
   75885        tokenizer to the <a href=#rawtext-state>RAWTEXT state</a>.  Otherwise,
   75886        leave the tokenizer in the <a href=#data-state>data state</a>.</dd>
   75887 
   75888 
   75889        <dt>If it is a <code><a href=#plaintext>plaintext</a></code> element</dt>
   75890 
   75891        <dd>Switch the tokenizer to the <a href=#plaintext-state>PLAINTEXT
   75892        state</a>.</dd>
   75893 
   75894 
   75895        <dt>Otherwise</dt>
   75896 
   75897        <dd>Leave the tokenizer in the <a href=#data-state>data state</a>.</dd>
   75898 
   75899       </dl><p class=note>For performance reasons, an implementation that
   75900       does not report errors and that uses the actual state machine
   75901       described in this specification directly could use the PLAINTEXT
   75902       state instead of the RAWTEXT and script data states where those
   75903       are mentioned in the list above. Except for rules regarding
   75904       parse errors, they are equivalent, since there is no
   75905       <a href=#appropriate-end-tag-token>appropriate end tag token</a> in the fragment case, yet
   75906       they involve far fewer state transitions.</p>
   75907 
   75908      </li>
   75909 
   75910      <li>
   75911 
   75912       <p>Let <var title="">root</var> be a new <code><a href=#the-html-element-0>html</a></code> element
   75913       with no attributes.</p>
   75914 
   75915      </li>
   75916 
   75917      <li>
   75918 
   75919       <p>Append the element <var title="">root</var> to the
   75920       <code><a href=#document>Document</a></code> node created above.</p>
   75921 
   75922      </li>
   75923 
   75924      <li>
   75925 
   75926       <p>Set up the parser's <a href=#stack-of-open-elements>stack of open elements</a> so that
   75927       it contains just the single element <var title="">root</var>.</p>
   75928 
   75929      </li>
   75930 
   75931      <li>
   75932 
   75933       <p><a href=#reset-the-insertion-mode-appropriately title="reset the insertion mode appropriately">Reset the
   75934       parser's insertion mode appropriately</a>.</p>
   75935 
   75936       <p class=note>The parser will reference the <var title="">context</var> element as part of that algorithm.</p>
   75937 
   75938      </li>
   75939 
   75940      <li>
   75941 
   75942       <p>Set the parser's <a href=#form-element-pointer><code>form</code> element pointer</a>
   75943       to the nearest node to the <var title="">context</var> element
   75944       that is a <code><a href=#the-form-element>form</a></code> element (going straight up the
   75945       ancestor chain, and including the element itself, if it is a
   75946       <code><a href=#the-form-element>form</a></code> element), or, if there is no such
   75947       <code><a href=#the-form-element>form</a></code> element, to null.</p>
   75948 
   75949      </li>
   75950 
   75951     </ol></li>
   75952 
   75953    <li>
   75954 
   75955     <p>Place into the <a href=#the-input-stream>input stream</a> for the <a href=#html-parser>HTML
   75956     parser</a> just created the <var title="">input</var>. The
   75957     encoding <a href=#concept-encoding-confidence title=concept-encoding-confidence>confidence</a> is
   75958     <i>irrelevant</i>.</p>
   75959 
   75960    </li>
   75961 
   75962    <li>
   75963 
   75964     <p>Start the parser and let it run until it has consumed all the
   75965     characters just inserted into the input stream.</p>
   75966 
   75967    </li>
   75968 
   75969    <li>
   75970 
   75971     <p>If there is a <var title="">context</var> element, return the
   75972     child nodes of <var title="">root</var>, in <a href=#tree-order>tree
   75973     order</a>.</p>
   75974 
   75975     <p>Otherwise, return the children of the <code><a href=#document>Document</a></code>
   75976     object, in <a href=#tree-order>tree order</a>.</p>
   75977 
   75978    </li>
   75979 
   75980   </ol></div>
   75981 
   75982 
   75983 
   75984   <h3 id=named-character-references><span class=secno>10.5 </span><dfn>Named character references</dfn></h3>
   75985 
   75986   <p>This table lists the character reference names that are supported
   75987   by HTML, and the code points to which they refer. It is referenced
   75988   by the previous sections.</p>
   75989 
   75990   <div id=named-character-references-table>
   75991    <table><thead><tr><th> Name </th> <th> Character </th> <th> Glyph </th> <tbody><tr><td> <code title="">AElig;</code> </td> <td> U+000C6 </td> <td> <span>&AElig;</span> </td> <tr class=impl><td> <code title="">AElig</code> </td> <td> U+000C6 </td> <td> <span title="">&AElig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">AMP;</code> </td> <td> U+00026 </td> <td> <span>&amp;</span> </td> <tr class=impl><td> <code title="">AMP</code> </td> <td> U+00026 </td> <td> <span title="">&amp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Aacute;</code> </td> <td> U+000C1 </td> <td> <span>&Aacute;</span> </td> <tr class=impl><td> <code title="">Aacute</code> </td> <td> U+000C1 </td> <td> <span title="">&Aacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Abreve;</code> </td> <td> U+00102 </td> <td> <span>&#258;</span> </td> <tr><td> <code title="">Acirc;</code> </td> <td> U+000C2 </td> <td> <span>&Acirc;</span> </td> <tr class=impl><td> <code title="">Acirc</code> </td> <td> U+000C2 </td> <td> <span title="">&Acirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Acy;</code> </td> <td> U+00410 </td> <td> <span>&#1040;</span> </td> <tr><td> <code title="">Afr;</code> </td> <td> U+1D504 </td> <td> <span>&#120068;</span> </td> <tr><td> <code title="">Agrave;</code> </td> <td> U+000C0 </td> <td> <span>&Agrave;</span> </td> <tr class=impl><td> <code title="">Agrave</code> </td> <td> U+000C0 </td> <td> <span title="">&Agrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Alpha;</code> </td> <td> U+00391 </td> <td> <span>&Alpha;</span> </td> <tr><td> <code title="">Amacr;</code> </td> <td> U+00100 </td> <td> <span>&#256;</span> </td> <tr><td> <code title="">And;</code> </td> <td> U+02A53 </td> <td> <span>&#10835;</span> </td> <tr><td> <code title="">Aogon;</code> </td> <td> U+00104 </td> <td> <span>&#260;</span> </td> <tr><td> <code title="">Aopf;</code> </td> <td> U+1D538 </td> <td> <span>&#120120;</span> </td> <tr><td> <code title="">ApplyFunction;</code> </td> <td> U+02061 </td> <td> <span>&#8289;</span> </td> <tr><td> <code title="">Aring;</code> </td> <td> U+000C5 </td> <td> <span>&Aring;</span> </td> <tr class=impl><td> <code title="">Aring</code> </td> <td> U+000C5 </td> <td> <span title="">&Aring;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ascr;</code> </td> <td> U+1D49C </td> <td> <span>&#119964;</span> </td> <tr><td> <code title="">Assign;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">Atilde;</code> </td> <td> U+000C3 </td> <td> <span>&Atilde;</span> </td> <tr class=impl><td> <code title="">Atilde</code> </td> <td> U+000C3 </td> <td> <span title="">&Atilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Auml;</code> </td> <td> U+000C4 </td> <td> <span>&Auml;</span> </td> <tr class=impl><td> <code title="">Auml</code> </td> <td> U+000C4 </td> <td> <span title="">&Auml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Backslash;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">Barv;</code> </td> <td> U+02AE7 </td> <td> <span>&#10983;</span> </td> <tr><td> <code title="">Barwed;</code> </td> <td> U+02306 </td> <td> <span>&#8966;</span> </td> <tr><td> <code title="">Bcy;</code> </td> <td> U+00411 </td> <td> <span>&#1041;</span> </td> <tr><td> <code title="">Because;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">Bernoullis;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">Beta;</code> </td> <td> U+00392 </td> <td> <span>&Beta;</span> </td> <tr><td> <code title="">Bfr;</code> </td> <td> U+1D505 </td> <td> <span>&#120069;</span> </td> <tr><td> <code title="">Bopf;</code> </td> <td> U+1D539 </td> <td> <span>&#120121;</span> </td> <tr><td> <code title="">Breve;</code> </td> <td> U+002D8 </td> <td> <span>&#728;</span> </td> <tr><td> <code title="">Bscr;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">Bumpeq;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">CHcy;</code> </td> <td> U+00427 </td> <td> <span>&#1063;</span> </td> <tr><td> <code title="">COPY;</code> </td> <td> U+000A9 </td> <td> <span>&copy;</span> </td> <tr class=impl><td> <code title="">COPY</code> </td> <td> U+000A9 </td> <td> <span title="">&copy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Cacute;</code> </td> <td> U+00106 </td> <td> <span>&#262;</span> </td> <tr><td> <code title="">Cap;</code> </td> <td> U+022D2 </td> <td> <span>&#8914;</span> </td> <tr><td> <code title="">CapitalDifferentialD;</code> </td> <td> U+02145 </td> <td> <span>&#8517;</span> </td> <tr><td> <code title="">Cayleys;</code> </td> <td> U+0212D </td> <td> <span>&#8493;</span> </td> <tr><td> <code title="">Ccaron;</code> </td> <td> U+0010C </td> <td> <span>&#268;</span> </td> <tr><td> <code title="">Ccedil;</code> </td> <td> U+000C7 </td> <td> <span>&Ccedil;</span> </td> <tr class=impl><td> <code title="">Ccedil</code> </td> <td> U+000C7 </td> <td> <span title="">&Ccedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ccirc;</code> </td> <td> U+00108 </td> <td> <span>&#264;</span> </td> <tr><td> <code title="">Cconint;</code> </td> <td> U+02230 </td> <td> <span>&#8752;</span> </td> <tr><td> <code title="">Cdot;</code> </td> <td> U+0010A </td> <td> <span>&#266;</span> </td> <tr><td> <code title="">Cedilla;</code> </td> <td> U+000B8 </td> <td> <span>&cedil;</span> </td> <tr><td> <code title="">CenterDot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr><td> <code title="">Cfr;</code> </td> <td> U+0212D </td> <td> <span>&#8493;</span> </td> <tr><td> <code title="">Chi;</code> </td> <td> U+003A7 </td> <td> <span>&Chi;</span> </td> <tr><td> <code title="">CircleDot;</code> </td> <td> U+02299 </td> <td> <span>&#8857;</span> </td> <tr><td> <code title="">CircleMinus;</code> </td> <td> U+02296 </td> <td> <span>&#8854;</span> </td> <tr><td> <code title="">CirclePlus;</code> </td> <td> U+02295 </td> <td> <span>&oplus;</span> </td> <tr><td> <code title="">CircleTimes;</code> </td> <td> U+02297 </td> <td> <span>&otimes;</span> </td> <tr><td> <code title="">ClockwiseContourIntegral;</code> </td> <td> U+02232 </td> <td> <span>&#8754;</span> </td> <tr><td> <code title="">CloseCurlyDoubleQuote;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">CloseCurlyQuote;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">Colon;</code> </td> <td> U+02237 </td> <td> <span>&#8759;</span> </td> <tr><td> <code title="">Colone;</code> </td> <td> U+02A74 </td> <td> <span>&#10868;</span> </td> <tr><td> <code title="">Congruent;</code> </td> <td> U+02261 </td> <td> <span>&equiv;</span> </td> <tr><td> <code title="">Conint;</code> </td> <td> U+0222F </td> <td> <span>&#8751;</span> </td> <tr><td> <code title="">ContourIntegral;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">Copf;</code> </td> <td> U+02102 </td> <td> <span>&#8450;</span> </td> <tr><td> <code title="">Coproduct;</code> </td> <td> U+02210 </td> <td> <span>&#8720;</span> </td> <tr><td> <code title="">CounterClockwiseContourIntegral;</code> </td> <td> U+02233 </td> <td> <span>&#8755;</span> </td> <tr><td> <code title="">Cross;</code> </td> <td> U+02A2F </td> <td> <span>&#10799;</span> </td> <tr><td> <code title="">Cscr;</code> </td> <td> U+1D49E </td> <td> <span>&#119966;</span> </td> <tr><td> <code title="">Cup;</code> </td> <td> U+022D3 </td> <td> <span>&#8915;</span> </td> <tr><td> <code title="">CupCap;</code> </td> <td> U+0224D </td> <td> <span>&#8781;</span> </td> <tr><td> <code title="">DD;</code> </td> <td> U+02145 </td> <td> <span>&#8517;</span> </td> <tr><td> <code title="">DDotrahd;</code> </td> <td> U+02911 </td> <td> <span>&#10513;</span> </td> <tr><td> <code title="">DJcy;</code> </td> <td> U+00402 </td> <td> <span>&#1026;</span> </td> <tr><td> <code title="">DScy;</code> </td> <td> U+00405 </td> <td> <span>&#1029;</span> </td> <tr><td> <code title="">DZcy;</code> </td> <td> U+0040F </td> <td> <span>&#1039;</span> </td> <tr><td> <code title="">Dagger;</code> </td> <td> U+02021 </td> <td> <span>&Dagger;</span> </td> <tr><td> <code title="">Darr;</code> </td> <td> U+021A1 </td> <td> <span>&#8609;</span> </td> <tr><td> <code title="">Dashv;</code> </td> <td> U+02AE4 </td> <td> <span>&#10980;</span> </td> <tr><td> <code title="">Dcaron;</code> </td> <td> U+0010E </td> <td> <span>&#270;</span> </td> <tr><td> <code title="">Dcy;</code> </td> <td> U+00414 </td> <td> <span>&#1044;</span> </td> <tr><td> <code title="">Del;</code> </td> <td> U+02207 </td> <td> <span>&nabla;</span> </td> <tr><td> <code title="">Delta;</code> </td> <td> U+00394 </td> <td> <span>&Delta;</span> </td> <tr><td> <code title="">Dfr;</code> </td> <td> U+1D507 </td> <td> <span>&#120071;</span> </td> <tr><td> <code title="">DiacriticalAcute;</code> </td> <td> U+000B4 </td> <td> <span>&acute;</span> </td> <tr><td> <code title="">DiacriticalDot;</code> </td> <td> U+002D9 </td> <td> <span>&#729;</span> </td> <tr><td> <code title="">DiacriticalDoubleAcute;</code> </td> <td> U+002DD </td> <td> <span>&#733;</span> </td> <tr><td> <code title="">DiacriticalGrave;</code> </td> <td> U+00060 </td> <td> <span>`</span> </td> <tr><td> <code title="">DiacriticalTilde;</code> </td> <td> U+002DC </td> <td> <span>&tilde;</span> </td> <tr><td> <code title="">Diamond;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">DifferentialD;</code> </td> <td> U+02146 </td> <td> <span>&#8518;</span> </td> <tr><td> <code title="">Dopf;</code> </td> <td> U+1D53B </td> <td> <span>&#120123;</span> </td> <tr><td> <code title="">Dot;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">DotDot;</code> </td> <td> U+020DC </td> <td> <span>&#9676;&#8412;</span> </td> <tr><td> <code title="">DotEqual;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">DoubleContourIntegral;</code> </td> <td> U+0222F </td> <td> <span>&#8751;</span> </td> <tr><td> <code title="">DoubleDot;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">DoubleDownArrow;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">DoubleLeftArrow;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">DoubleLeftRightArrow;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">DoubleLeftTee;</code> </td> <td> U+02AE4 </td> <td> <span>&#10980;</span> </td> <tr><td> <code title="">DoubleLongLeftArrow;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">DoubleLongLeftRightArrow;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">DoubleLongRightArrow;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">DoubleRightArrow;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">DoubleRightTee;</code> </td> <td> U+022A8 </td> <td> <span>&#8872;</span> </td> <tr><td> <code title="">DoubleUpArrow;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">DoubleUpDownArrow;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">DoubleVerticalBar;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">DownArrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">DownArrowBar;</code> </td> <td> U+02913 </td> <td> <span>&#10515;</span> </td> <tr><td> <code title="">DownArrowUpArrow;</code> </td> <td> U+021F5 </td> <td> <span>&#8693;</span> </td> <tr><td> <code title="">DownBreve;</code> </td> <td> U+00311 </td> <td> <span>&#9676;&#785;</span> </td> <tr><td> <code title="">DownLeftRightVector;</code> </td> <td> U+02950 </td> <td> <span>&#10576;</span> </td> <tr><td> <code title="">DownLeftTeeVector;</code> </td> <td> U+0295E </td> <td> <span>&#10590;</span> </td> <tr><td> <code title="">DownLeftVector;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">DownLeftVectorBar;</code> </td> <td> U+02956 </td> <td> <span>&#10582;</span> </td> <tr><td> <code title="">DownRightTeeVector;</code> </td> <td> U+0295F </td> <td> <span>&#10591;</span> </td> <tr><td> <code title="">DownRightVector;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">DownRightVectorBar;</code> </td> <td> U+02957 </td> <td> <span>&#10583;</span> </td> <tr><td> <code title="">DownTee;</code> </td> <td> U+022A4 </td> <td> <span>&#8868;</span> </td> <tr><td> <code title="">DownTeeArrow;</code> </td> <td> U+021A7 </td> <td> <span>&#8615;</span> </td> <tr><td> <code title="">Downarrow;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">Dscr;</code> </td> <td> U+1D49F </td> <td> <span>&#119967;</span> </td> <tr><td> <code title="">Dstrok;</code> </td> <td> U+00110 </td> <td> <span>&#272;</span> </td> <tr><td> <code title="">ENG;</code> </td> <td> U+0014A </td> <td> <span>&#330;</span> </td> <tr><td> <code title="">ETH;</code> </td> <td> U+000D0 </td> <td> <span>&ETH;</span> </td> <tr class=impl><td> <code title="">ETH</code> </td> <td> U+000D0 </td> <td> <span title="">&ETH;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Eacute;</code> </td> <td> U+000C9 </td> <td> <span>&Eacute;</span> </td> <tr class=impl><td> <code title="">Eacute</code> </td> <td> U+000C9 </td> <td> <span title="">&Eacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ecaron;</code> </td> <td> U+0011A </td> <td> <span>&#282;</span> </td> <tr><td> <code title="">Ecirc;</code> </td> <td> U+000CA </td> <td> <span>&Ecirc;</span> </td> <tr class=impl><td> <code title="">Ecirc</code> </td> <td> U+000CA </td> <td> <span title="">&Ecirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ecy;</code> </td> <td> U+0042D </td> <td> <span>&#1069;</span> </td> <tr><td> <code title="">Edot;</code> </td> <td> U+00116 </td> <td> <span>&#278;</span> </td> <tr><td> <code title="">Efr;</code> </td> <td> U+1D508 </td> <td> <span>&#120072;</span> </td> <tr><td> <code title="">Egrave;</code> </td> <td> U+000C8 </td> <td> <span>&Egrave;</span> </td> <tr class=impl><td> <code title="">Egrave</code> </td> <td> U+000C8 </td> <td> <span title="">&Egrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Element;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">Emacr;</code> </td> <td> U+00112 </td> <td> <span>&#274;</span> </td> <tr><td> <code title="">EmptySmallSquare;</code> </td> <td> U+025FB </td> <td> <span>&#9723;</span> </td> <tr><td> <code title="">EmptyVerySmallSquare;</code> </td> <td> U+025AB </td> <td> <span>&#9643;</span> </td> <tr><td> <code title="">Eogon;</code> </td> <td> U+00118 </td> <td> <span>&#280;</span> </td> <tr><td> <code title="">Eopf;</code> </td> <td> U+1D53C </td> <td> <span>&#120124;</span> </td> <tr><td> <code title="">Epsilon;</code> </td> <td> U+00395 </td> <td> <span>&Epsilon;</span> </td> <tr><td> <code title="">Equal;</code> </td> <td> U+02A75 </td> <td> <span>&#10869;</span> </td> <tr><td> <code title="">EqualTilde;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">Equilibrium;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">Escr;</code> </td> <td> U+02130 </td> <td> <span>&#8496;</span> </td> <tr><td> <code title="">Esim;</code> </td> <td> U+02A73 </td> <td> <span>&#10867;</span> </td> <tr><td> <code title="">Eta;</code> </td> <td> U+00397 </td> <td> <span>&Eta;</span> </td> <tr><td> <code title="">Euml;</code> </td> <td> U+000CB </td> <td> <span>&Euml;</span> </td> <tr class=impl><td> <code title="">Euml</code> </td> <td> U+000CB </td> <td> <span title="">&Euml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Exists;</code> </td> <td> U+02203 </td> <td> <span>&exist;</span> </td> <tr><td> <code title="">ExponentialE;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">Fcy;</code> </td> <td> U+00424 </td> <td> <span>&#1060;</span> </td> <tr><td> <code title="">Ffr;</code> </td> <td> U+1D509 </td> <td> <span>&#120073;</span> </td> <tr><td> <code title="">FilledSmallSquare;</code> </td> <td> U+025FC </td> <td> <span>&#9724;</span> </td> <tr><td> <code title="">FilledVerySmallSquare;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">Fopf;</code> </td> <td> U+1D53D </td> <td> <span>&#120125;</span> </td> <tr><td> <code title="">ForAll;</code> </td> <td> U+02200 </td> <td> <span>&forall;</span> </td> <tr><td> <code title="">Fouriertrf;</code> </td> <td> U+02131 </td> <td> <span>&#8497;</span> </td> <tr><td> <code title="">Fscr;</code> </td> <td> U+02131 </td> <td> <span>&#8497;</span> </td> <tr><td> <code title="">GJcy;</code> </td> <td> U+00403 </td> <td> <span>&#1027;</span> </td> <tr><td> <code title="">GT;</code> </td> <td> U+0003E </td> <td> <span>&gt;</span> </td> <tr class=impl><td> <code title="">GT</code> </td> <td> U+0003E </td> <td> <span title="">&gt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Gamma;</code> </td> <td> U+00393 </td> <td> <span>&Gamma;</span> </td> <tr><td> <code title="">Gammad;</code> </td> <td> U+003DC </td> <td> <span>&#988;</span> </td> <tr><td> <code title="">Gbreve;</code> </td> <td> U+0011E </td> <td> <span>&#286;</span> </td> <tr><td> <code title="">Gcedil;</code> </td> <td> U+00122 </td> <td> <span>&#290;</span> </td> <tr><td> <code title="">Gcirc;</code> </td> <td> U+0011C </td> <td> <span>&#284;</span> </td> <tr><td> <code title="">Gcy;</code> </td> <td> U+00413 </td> <td> <span>&#1043;</span> </td> <tr><td> <code title="">Gdot;</code> </td> <td> U+00120 </td> <td> <span>&#288;</span> </td> <tr><td> <code title="">Gfr;</code> </td> <td> U+1D50A </td> <td> <span>&#120074;</span> </td> <tr><td> <code title="">Gg;</code> </td> <td> U+022D9 </td> <td> <span>&#8921;</span> </td> <tr><td> <code title="">Gopf;</code> </td> <td> U+1D53E </td> <td> <span>&#120126;</span> </td> <tr><td> <code title="">GreaterEqual;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">GreaterEqualLess;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">GreaterFullEqual;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">GreaterGreater;</code> </td> <td> U+02AA2 </td> <td> <span>&#10914;</span> </td> <tr><td> <code title="">GreaterLess;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">GreaterSlantEqual;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">GreaterTilde;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">Gscr;</code> </td> <td> U+1D4A2 </td> <td> <span>&#119970;</span> </td> <tr><td> <code title="">Gt;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">HARDcy;</code> </td> <td> U+0042A </td> <td> <span>&#1066;</span> </td> <tr><td> <code title="">Hacek;</code> </td> <td> U+002C7 </td> <td> <span>&#711;</span> </td> <tr><td> <code title="">Hat;</code> </td> <td> U+0005E </td> <td> <span>^</span> </td> <tr><td> <code title="">Hcirc;</code> </td> <td> U+00124 </td> <td> <span>&#292;</span> </td> <tr><td> <code title="">Hfr;</code> </td> <td> U+0210C </td> <td> <span>&#8460;</span> </td> <tr><td> <code title="">HilbertSpace;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">Hopf;</code> </td> <td> U+0210D </td> <td> <span>&#8461;</span> </td> <tr><td> <code title="">HorizontalLine;</code> </td> <td> U+02500 </td> <td> <span>&#9472;</span> </td> <tr><td> <code title="">Hscr;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">Hstrok;</code> </td> <td> U+00126 </td> <td> <span>&#294;</span> </td> <tr><td> <code title="">HumpDownHump;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">HumpEqual;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">IEcy;</code> </td> <td> U+00415 </td> <td> <span>&#1045;</span> </td> <tr><td> <code title="">IJlig;</code> </td> <td> U+00132 </td> <td> <span>&#306;</span> </td> <tr><td> <code title="">IOcy;</code> </td> <td> U+00401 </td> <td> <span>&#1025;</span> </td> <tr><td> <code title="">Iacute;</code> </td> <td> U+000CD </td> <td> <span>&Iacute;</span> </td> <tr class=impl><td> <code title="">Iacute</code> </td> <td> U+000CD </td> <td> <span title="">&Iacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Icirc;</code> </td> <td> U+000CE </td> <td> <span>&Icirc;</span> </td> <tr class=impl><td> <code title="">Icirc</code> </td> <td> U+000CE </td> <td> <span title="">&Icirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Icy;</code> </td> <td> U+00418 </td> <td> <span>&#1048;</span> </td> <tr><td> <code title="">Idot;</code> </td> <td> U+00130 </td> <td> <a href=#the-i-element>&#304;</a> </td> <tr><td> <code title="">Ifr;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">Igrave;</code> </td> <td> U+000CC </td> <td> <span>&Igrave;</span> </td> <tr class=impl><td> <code title="">Igrave</code> </td> <td> U+000CC </td> <td> <span title="">&Igrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Im;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">Imacr;</code> </td> <td> U+0012A </td> <td> <span>&#298;</span> </td> <tr><td> <code title="">ImaginaryI;</code> </td> <td> U+02148 </td> <td> <span>&#8520;</span> </td> <tr><td> <code title="">Implies;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">Int;</code> </td> <td> U+0222C </td> <td> <span>&#8748;</span> </td> <tr><td> <code title="">Integral;</code> </td> <td> U+0222B </td> <td> <span>&int;</span> </td> <tr><td> <code title="">Intersection;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">InvisibleComma;</code> </td> <td> U+02063 </td> <td> <span>&#8291;</span> </td> <tr><td> <code title="">InvisibleTimes;</code> </td> <td> U+02062 </td> <td> <span>&#8290;</span> </td> <tr><td> <code title="">Iogon;</code> </td> <td> U+0012E </td> <td> <span>&#302;</span> </td> <tr><td> <code title="">Iopf;</code> </td> <td> U+1D540 </td> <td> <span>&#120128;</span> </td> <tr><td> <code title="">Iota;</code> </td> <td> U+00399 </td> <td> <span>&Iota;</span> </td> <tr><td> <code title="">Iscr;</code> </td> <td> U+02110 </td> <td> <span>&#8464;</span> </td> <tr><td> <code title="">Itilde;</code> </td> <td> U+00128 </td> <td> <span>&#296;</span> </td> <tr><td> <code title="">Iukcy;</code> </td> <td> U+00406 </td> <td> <span>&#1030;</span> </td> <tr><td> <code title="">Iuml;</code> </td> <td> U+000CF </td> <td> <span>&Iuml;</span> </td> <tr class=impl><td> <code title="">Iuml</code> </td> <td> U+000CF </td> <td> <span title="">&Iuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Jcirc;</code> </td> <td> U+00134 </td> <td> <span>&#308;</span> </td> <tr><td> <code title="">Jcy;</code> </td> <td> U+00419 </td> <td> <span>&#1049;</span> </td> <tr><td> <code title="">Jfr;</code> </td> <td> U+1D50D </td> <td> <span>&#120077;</span> </td> <tr><td> <code title="">Jopf;</code> </td> <td> U+1D541 </td> <td> <span>&#120129;</span> </td> <tr><td> <code title="">Jscr;</code> </td> <td> U+1D4A5 </td> <td> <span>&#119973;</span> </td> <tr><td> <code title="">Jsercy;</code> </td> <td> U+00408 </td> <td> <span>&#1032;</span> </td> <tr><td> <code title="">Jukcy;</code> </td> <td> U+00404 </td> <td> <span>&#1028;</span> </td> <tr><td> <code title="">KHcy;</code> </td> <td> U+00425 </td> <td> <span>&#1061;</span> </td> <tr><td> <code title="">KJcy;</code> </td> <td> U+0040C </td> <td> <span>&#1036;</span> </td> <tr><td> <code title="">Kappa;</code> </td> <td> U+0039A </td> <td> <span>&Kappa;</span> </td> <tr><td> <code title="">Kcedil;</code> </td> <td> U+00136 </td> <td> <span>&#310;</span> </td> <tr><td> <code title="">Kcy;</code> </td> <td> U+0041A </td> <td> <span>&#1050;</span> </td> <tr><td> <code title="">Kfr;</code> </td> <td> U+1D50E </td> <td> <span>&#120078;</span> </td> <tr><td> <code title="">Kopf;</code> </td> <td> U+1D542 </td> <td> <span>&#120130;</span> </td> <tr><td> <code title="">Kscr;</code> </td> <td> U+1D4A6 </td> <td> <span>&#119974;</span> </td> <tr><td> <code title="">LJcy;</code> </td> <td> U+00409 </td> <td> <span>&#1033;</span> </td> <tr><td> <code title="">LT;</code> </td> <td> U+0003C </td> <td> <span>&lt;</span> </td> <tr class=impl><td> <code title="">LT</code> </td> <td> U+0003C </td> <td> <span title="">&lt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Lacute;</code> </td> <td> U+00139 </td> <td> <span>&#313;</span> </td> <tr><td> <code title="">Lambda;</code> </td> <td> U+0039B </td> <td> <span>&Lambda;</span> </td> <tr><td> <code title="">Lang;</code> </td> <td> U+027EA </td> <td> <span>&#10218;</span> </td> <tr><td> <code title="">Laplacetrf;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">Larr;</code> </td> <td> U+0219E </td> <td> <span>&#8606;</span> </td> <tr><td> <code title="">Lcaron;</code> </td> <td> U+0013D </td> <td> <span>&#317;</span> </td> <tr><td> <code title="">Lcedil;</code> </td> <td> U+0013B </td> <td> <span>&#315;</span> </td> <tr><td> <code title="">Lcy;</code> </td> <td> U+0041B </td> <td> <span>&#1051;</span> </td> <tr><td> <code title="">LeftAngleBracket;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">LeftArrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">LeftArrowBar;</code> </td> <td> U+021E4 </td> <td> <span>&#8676;</span> </td> <tr><td> <code title="">LeftArrowRightArrow;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">LeftCeiling;</code> </td> <td> U+02308 </td> <td> <span>&lceil;</span> </td> <tr><td> <code title="">LeftDoubleBracket;</code> </td> <td> U+027E6 </td> <td> <span>&#10214;</span> </td> <tr><td> <code title="">LeftDownTeeVector;</code> </td> <td> U+02961 </td> <td> <span>&#10593;</span> </td> <tr><td> <code title="">LeftDownVector;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">LeftDownVectorBar;</code> </td> <td> U+02959 </td> <td> <span>&#10585;</span> </td> <tr><td> <code title="">LeftFloor;</code> </td> <td> U+0230A </td> <td> <span>&lfloor;</span> </td> <tr><td> <code title="">LeftRightArrow;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">LeftRightVector;</code> </td> <td> U+0294E </td> <td> <span>&#10574;</span> </td> <tr><td> <code title="">LeftTee;</code> </td> <td> U+022A3 </td> <td> <span>&#8867;</span> </td> <tr><td> <code title="">LeftTeeArrow;</code> </td> <td> U+021A4 </td> <td> <span>&#8612;</span> </td> <tr><td> <code title="">LeftTeeVector;</code> </td> <td> U+0295A </td> <td> <span>&#10586;</span> </td> <tr><td> <code title="">LeftTriangle;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">LeftTriangleBar;</code> </td> <td> U+029CF </td> <td> <span>&#10703;</span> </td> <tr><td> <code title="">LeftTriangleEqual;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">LeftUpDownVector;</code> </td> <td> U+02951 </td> <td> <span>&#10577;</span> </td> <tr><td> <code title="">LeftUpTeeVector;</code> </td> <td> U+02960 </td> <td> <span>&#10592;</span> </td> <tr><td> <code title="">LeftUpVector;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">LeftUpVectorBar;</code> </td> <td> U+02958 </td> <td> <span>&#10584;</span> </td> <tr><td> <code title="">LeftVector;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">LeftVectorBar;</code> </td> <td> U+02952 </td> <td> <span>&#10578;</span> </td> <tr><td> <code title="">Leftarrow;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">Leftrightarrow;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">LessEqualGreater;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">LessFullEqual;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">LessGreater;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">LessLess;</code> </td> <td> U+02AA1 </td> <td> <span>&#10913;</span> </td> <tr><td> <code title="">LessSlantEqual;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">LessTilde;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">Lfr;</code> </td> <td> U+1D50F </td> <td> <span>&#120079;</span> </td> <tr><td> <code title="">Ll;</code> </td> <td> U+022D8 </td> <td> <span>&#8920;</span> </td> <tr><td> <code title="">Lleftarrow;</code> </td> <td> U+021DA </td> <td> <span>&#8666;</span> </td> <tr><td> <code title="">Lmidot;</code> </td> <td> U+0013F </td> <td> <span>&#319;</span> </td> <tr><td> <code title="">LongLeftArrow;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">LongLeftRightArrow;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">LongRightArrow;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">Longleftarrow;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">Longleftrightarrow;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">Longrightarrow;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">Lopf;</code> </td> <td> U+1D543 </td> <td> <span>&#120131;</span> </td> <tr><td> <code title="">LowerLeftArrow;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">LowerRightArrow;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">Lscr;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">Lsh;</code> </td> <td> U+021B0 </td> <td> <span>&#8624;</span> </td> <tr><td> <code title="">Lstrok;</code> </td> <td> U+00141 </td> <td> <span>&#321;</span> </td> <tr><td> <code title="">Lt;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">Map;</code> </td> <td> U+02905 </td> <td> <span>&#10501;</span> </td> <tr><td> <code title="">Mcy;</code> </td> <td> U+0041C </td> <td> <span>&#1052;</span> </td> <tr><td> <code title="">MediumSpace;</code> </td> <td> U+0205F </td> <td> <span>&#8287;</span> </td> <tr><td> <code title="">Mellintrf;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">Mfr;</code> </td> <td> U+1D510 </td> <td> <span>&#120080;</span> </td> <tr><td> <code title="">MinusPlus;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">Mopf;</code> </td> <td> U+1D544 </td> <td> <span>&#120132;</span> </td> <tr><td> <code title="">Mscr;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">Mu;</code> </td> <td> U+0039C </td> <td> <span>&Mu;</span> </td> <tr><td> <code title="">NJcy;</code> </td> <td> U+0040A </td> <td> <span>&#1034;</span> </td> <tr><td> <code title="">Nacute;</code> </td> <td> U+00143 </td> <td> <span>&#323;</span> </td> <tr><td> <code title="">Ncaron;</code> </td> <td> U+00147 </td> <td> <span>&#327;</span> </td> <tr><td> <code title="">Ncedil;</code> </td> <td> U+00145 </td> <td> <span>&#325;</span> </td> <tr><td> <code title="">Ncy;</code> </td> <td> U+0041D </td> <td> <span>&#1053;</span> </td> <tr><td> <code title="">NegativeMediumSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeThickSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeThinSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NegativeVeryThinSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">NestedGreaterGreater;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">NestedLessLess;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">NewLine;</code> </td> <td> U+0000A </td> <td> <span>
   75992 </span> </td> <tr><td> <code title="">Nfr;</code> </td> <td> U+1D511 </td> <td> <span>&#120081;</span> </td> <tr><td> <code title="">NoBreak;</code> </td> <td> U+02060 </td> <td> <span>&#8288;</span> </td> <tr><td> <code title="">NonBreakingSpace;</code> </td> <td> U+000A0 </td> <td> <span>&nbsp;</span> </td> <tr><td> <code title="">Nopf;</code> </td> <td> U+02115 </td> <td> <span>&#8469;</span> </td> <tr><td> <code title="">Not;</code> </td> <td> U+02AEC </td> <td> <span>&#10988;</span> </td> <tr><td> <code title="">NotCongruent;</code> </td> <td> U+02262 </td> <td> <span>&#8802;</span> </td> <tr><td> <code title="">NotCupCap;</code> </td> <td> U+0226D </td> <td> <span>&#8813;</span> </td> <tr><td> <code title="">NotDoubleVerticalBar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">NotElement;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">NotEqual;</code> </td> <td> U+02260 </td> <td> <span>&ne;</span> </td> <tr><td> <code title="">NotExists;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">NotGreater;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">NotGreaterEqual;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">NotGreaterLess;</code> </td> <td> U+02279 </td> <td> <span>&#8825;</span> </td> <tr><td> <code title="">NotGreaterTilde;</code> </td> <td> U+02275 </td> <td> <span>&#8821;</span> </td> <tr><td> <code title="">NotLeftTriangle;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">NotLeftTriangleEqual;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">NotLess;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">NotLessEqual;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">NotLessGreater;</code> </td> <td> U+02278 </td> <td> <span>&#8824;</span> </td> <tr><td> <code title="">NotLessTilde;</code> </td> <td> U+02274 </td> <td> <span>&#8820;</span> </td> <tr><td> <code title="">NotPrecedes;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">NotPrecedesSlantEqual;</code> </td> <td> U+022E0 </td> <td> <span>&#8928;</span> </td> <tr><td> <code title="">NotReverseElement;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">NotRightTriangle;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">NotRightTriangleEqual;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">NotSquareSubsetEqual;</code> </td> <td> U+022E2 </td> <td> <span>&#8930;</span> </td> <tr><td> <code title="">NotSquareSupersetEqual;</code> </td> <td> U+022E3 </td> <td> <span>&#8931;</span> </td> <tr><td> <code title="">NotSubsetEqual;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">NotSucceeds;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">NotSucceedsSlantEqual;</code> </td> <td> U+022E1 </td> <td> <span>&#8929;</span> </td> <tr><td> <code title="">NotSupersetEqual;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">NotTilde;</code> </td> <td> U+02241 </td> <td> <span>&#8769;</span> </td> <tr><td> <code title="">NotTildeEqual;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">NotTildeFullEqual;</code> </td> <td> U+02247 </td> <td> <span>&#8775;</span> </td> <tr><td> <code title="">NotTildeTilde;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">NotVerticalBar;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">Nscr;</code> </td> <td> U+1D4A9 </td> <td> <span>&#119977;</span> </td> <tr><td> <code title="">Ntilde;</code> </td> <td> U+000D1 </td> <td> <span>&Ntilde;</span> </td> <tr class=impl><td> <code title="">Ntilde</code> </td> <td> U+000D1 </td> <td> <span title="">&Ntilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Nu;</code> </td> <td> U+0039D </td> <td> <span>&Nu;</span> </td> <tr><td> <code title="">OElig;</code> </td> <td> U+00152 </td> <td> <span>&OElig;</span> </td> <tr><td> <code title="">Oacute;</code> </td> <td> U+000D3 </td> <td> <span>&Oacute;</span> </td> <tr class=impl><td> <code title="">Oacute</code> </td> <td> U+000D3 </td> <td> <span title="">&Oacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ocirc;</code> </td> <td> U+000D4 </td> <td> <span>&Ocirc;</span> </td> <tr class=impl><td> <code title="">Ocirc</code> </td> <td> U+000D4 </td> <td> <span title="">&Ocirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ocy;</code> </td> <td> U+0041E </td> <td> <span>&#1054;</span> </td> <tr><td> <code title="">Odblac;</code> </td> <td> U+00150 </td> <td> <span>&#336;</span> </td> <tr><td> <code title="">Ofr;</code> </td> <td> U+1D512 </td> <td> <span>&#120082;</span> </td> <tr><td> <code title="">Ograve;</code> </td> <td> U+000D2 </td> <td> <span>&Ograve;</span> </td> <tr class=impl><td> <code title="">Ograve</code> </td> <td> U+000D2 </td> <td> <span title="">&Ograve;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Omacr;</code> </td> <td> U+0014C </td> <td> <span>&#332;</span> </td> <tr><td> <code title="">Omega;</code> </td> <td> U+003A9 </td> <td> <span>&Omega;</span> </td> <tr><td> <code title="">Omicron;</code> </td> <td> U+0039F </td> <td> <span>&Omicron;</span> </td> <tr><td> <code title="">Oopf;</code> </td> <td> U+1D546 </td> <td> <span>&#120134;</span> </td> <tr><td> <code title="">OpenCurlyDoubleQuote;</code> </td> <td> U+0201C </td> <td> <span>&ldquo;</span> </td> <tr><td> <code title="">OpenCurlyQuote;</code> </td> <td> U+02018 </td> <td> <span>&lsquo;</span> </td> <tr><td> <code title="">Or;</code> </td> <td> U+02A54 </td> <td> <span>&#10836;</span> </td> <tr><td> <code title="">Oscr;</code> </td> <td> U+1D4AA </td> <td> <span>&#119978;</span> </td> <tr><td> <code title="">Oslash;</code> </td> <td> U+000D8 </td> <td> <span>&Oslash;</span> </td> <tr class=impl><td> <code title="">Oslash</code> </td> <td> U+000D8 </td> <td> <span title="">&Oslash;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Otilde;</code> </td> <td> U+000D5 </td> <td> <span>&Otilde;</span> </td> <tr class=impl><td> <code title="">Otilde</code> </td> <td> U+000D5 </td> <td> <span title="">&Otilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Otimes;</code> </td> <td> U+02A37 </td> <td> <span>&#10807;</span> </td> <tr><td> <code title="">Ouml;</code> </td> <td> U+000D6 </td> <td> <span>&Ouml;</span> </td> <tr class=impl><td> <code title="">Ouml</code> </td> <td> U+000D6 </td> <td> <span title="">&Ouml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">OverBar;</code> </td> <td> U+0203E </td> <td> <span>&oline;</span> </td> <tr><td> <code title="">OverBrace;</code> </td> <td> U+023DE </td> <td> <span>&#9182;</span> </td> <tr><td> <code title="">OverBracket;</code> </td> <td> U+023B4 </td> <td> <span>&#9140;</span> </td> <tr><td> <code title="">OverParenthesis;</code> </td> <td> U+023DC </td> <td> <span>&#9180;</span> </td> <tr><td> <code title="">PartialD;</code> </td> <td> U+02202 </td> <td> <span>&part;</span> </td> <tr><td> <code title="">Pcy;</code> </td> <td> U+0041F </td> <td> <span>&#1055;</span> </td> <tr><td> <code title="">Pfr;</code> </td> <td> U+1D513 </td> <td> <span>&#120083;</span> </td> <tr><td> <code title="">Phi;</code> </td> <td> U+003A6 </td> <td> <span>&Phi;</span> </td> <tr><td> <code title="">Pi;</code> </td> <td> U+003A0 </td> <td> <span>&Pi;</span> </td> <tr><td> <code title="">PlusMinus;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr><td> <code title="">Poincareplane;</code> </td> <td> U+0210C </td> <td> <span>&#8460;</span> </td> <tr><td> <code title="">Popf;</code> </td> <td> U+02119 </td> <td> <span>&#8473;</span> </td> <tr><td> <code title="">Pr;</code> </td> <td> U+02ABB </td> <td> <span>&#10939;</span> </td> <tr><td> <code title="">Precedes;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">PrecedesEqual;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">PrecedesSlantEqual;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">PrecedesTilde;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">Prime;</code> </td> <td> U+02033 </td> <td> <span>&Prime;</span> </td> <tr><td> <code title="">Product;</code> </td> <td> U+0220F </td> <td> <span>&prod;</span> </td> <tr><td> <code title="">Proportion;</code> </td> <td> U+02237 </td> <td> <span>&#8759;</span> </td> <tr><td> <code title="">Proportional;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">Pscr;</code> </td> <td> U+1D4AB </td> <td> <span>&#119979;</span> </td> <tr><td> <code title="">Psi;</code> </td> <td> U+003A8 </td> <td> <span>&Psi;</span> </td> <tr><td> <code title="">QUOT;</code> </td> <td> U+00022 </td> <td> <span>"</span> </td> <tr class=impl><td> <code title="">QUOT</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Qfr;</code> </td> <td> U+1D514 </td> <td> <span>&#120084;</span> </td> <tr><td> <code title="">Qopf;</code> </td> <td> U+0211A </td> <td> <span>&#8474;</span> </td> <tr><td> <code title="">Qscr;</code> </td> <td> U+1D4AC </td> <td> <span>&#119980;</span> </td> <tr><td> <code title="">RBarr;</code> </td> <td> U+02910 </td> <td> <span>&#10512;</span> </td> <tr><td> <code title="">REG;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr class=impl><td> <code title="">REG</code> </td> <td> U+000AE </td> <td> <span title="">&reg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Racute;</code> </td> <td> U+00154 </td> <td> <span>&#340;</span> </td> <tr><td> <code title="">Rang;</code> </td> <td> U+027EB </td> <td> <span>&#10219;</span> </td> <tr><td> <code title="">Rarr;</code> </td> <td> U+021A0 </td> <td> <span>&#8608;</span> </td> <tr><td> <code title="">Rarrtl;</code> </td> <td> U+02916 </td> <td> <span>&#10518;</span> </td> <tr><td> <code title="">Rcaron;</code> </td> <td> U+00158 </td> <td> <span>&#344;</span> </td> <tr><td> <code title="">Rcedil;</code> </td> <td> U+00156 </td> <td> <span>&#342;</span> </td> <tr><td> <code title="">Rcy;</code> </td> <td> U+00420 </td> <td> <span>&#1056;</span> </td> <tr><td> <code title="">Re;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">ReverseElement;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">ReverseEquilibrium;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">ReverseUpEquilibrium;</code> </td> <td> U+0296F </td> <td> <span>&#10607;</span> </td> <tr><td> <code title="">Rfr;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">Rho;</code> </td> <td> U+003A1 </td> <td> <span>&Rho;</span> </td> <tr><td> <code title="">RightAngleBracket;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">RightArrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">RightArrowBar;</code> </td> <td> U+021E5 </td> <td> <span>&#8677;</span> </td> <tr><td> <code title="">RightArrowLeftArrow;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">RightCeiling;</code> </td> <td> U+02309 </td> <td> <span>&rceil;</span> </td> <tr><td> <code title="">RightDoubleBracket;</code> </td> <td> U+027E7 </td> <td> <span>&#10215;</span> </td> <tr><td> <code title="">RightDownTeeVector;</code> </td> <td> U+0295D </td> <td> <span>&#10589;</span> </td> <tr><td> <code title="">RightDownVector;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">RightDownVectorBar;</code> </td> <td> U+02955 </td> <td> <span>&#10581;</span> </td> <tr><td> <code title="">RightFloor;</code> </td> <td> U+0230B </td> <td> <span>&rfloor;</span> </td> <tr><td> <code title="">RightTee;</code> </td> <td> U+022A2 </td> <td> <span>&#8866;</span> </td> <tr><td> <code title="">RightTeeArrow;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">RightTeeVector;</code> </td> <td> U+0295B </td> <td> <span>&#10587;</span> </td> <tr><td> <code title="">RightTriangle;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">RightTriangleBar;</code> </td> <td> U+029D0 </td> <td> <span>&#10704;</span> </td> <tr><td> <code title="">RightTriangleEqual;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">RightUpDownVector;</code> </td> <td> U+0294F </td> <td> <span>&#10575;</span> </td> <tr><td> <code title="">RightUpTeeVector;</code> </td> <td> U+0295C </td> <td> <span>&#10588;</span> </td> <tr><td> <code title="">RightUpVector;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">RightUpVectorBar;</code> </td> <td> U+02954 </td> <td> <span>&#10580;</span> </td> <tr><td> <code title="">RightVector;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">RightVectorBar;</code> </td> <td> U+02953 </td> <td> <span>&#10579;</span> </td> <tr><td> <code title="">Rightarrow;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">Ropf;</code> </td> <td> U+0211D </td> <td> <span>&#8477;</span> </td> <tr><td> <code title="">RoundImplies;</code> </td> <td> U+02970 </td> <td> <span>&#10608;</span> </td> <tr><td> <code title="">Rrightarrow;</code> </td> <td> U+021DB </td> <td> <span>&#8667;</span> </td> <tr><td> <code title="">Rscr;</code> </td> <td> U+0211B </td> <td> <span>&#8475;</span> </td> <tr><td> <code title="">Rsh;</code> </td> <td> U+021B1 </td> <td> <span>&#8625;</span> </td> <tr><td> <code title="">RuleDelayed;</code> </td> <td> U+029F4 </td> <td> <span>&#10740;</span> </td> <tr><td> <code title="">SHCHcy;</code> </td> <td> U+00429 </td> <td> <span>&#1065;</span> </td> <tr><td> <code title="">SHcy;</code> </td> <td> U+00428 </td> <td> <span>&#1064;</span> </td> <tr><td> <code title="">SOFTcy;</code> </td> <td> U+0042C </td> <td> <span>&#1068;</span> </td> <tr><td> <code title="">Sacute;</code> </td> <td> U+0015A </td> <td> <span>&#346;</span> </td> <tr><td> <code title="">Sc;</code> </td> <td> U+02ABC </td> <td> <span>&#10940;</span> </td> <tr><td> <code title="">Scaron;</code> </td> <td> U+00160 </td> <td> <span>&Scaron;</span> </td> <tr><td> <code title="">Scedil;</code> </td> <td> U+0015E </td> <td> <span>&#350;</span> </td> <tr><td> <code title="">Scirc;</code> </td> <td> U+0015C </td> <td> <span>&#348;</span> </td> <tr><td> <code title="">Scy;</code> </td> <td> U+00421 </td> <td> <span>&#1057;</span> </td> <tr><td> <code title="">Sfr;</code> </td> <td> U+1D516 </td> <td> <span>&#120086;</span> </td> <tr><td> <code title="">ShortDownArrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">ShortLeftArrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">ShortRightArrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">ShortUpArrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">Sigma;</code> </td> <td> U+003A3 </td> <td> <span>&Sigma;</span> </td> <tr><td> <code title="">SmallCircle;</code> </td> <td> U+02218 </td> <td> <span>&#8728;</span> </td> <tr><td> <code title="">Sopf;</code> </td> <td> U+1D54A </td> <td> <span>&#120138;</span> </td> <tr><td> <code title="">Sqrt;</code> </td> <td> U+0221A </td> <td> <span>&radic;</span> </td> <tr><td> <code title="">Square;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">SquareIntersection;</code> </td> <td> U+02293 </td> <td> <span>&#8851;</span> </td> <tr><td> <code title="">SquareSubset;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">SquareSubsetEqual;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">SquareSuperset;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">SquareSupersetEqual;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">SquareUnion;</code> </td> <td> U+02294 </td> <td> <span>&#8852;</span> </td> <tr><td> <code title="">Sscr;</code> </td> <td> U+1D4AE </td> <td> <span>&#119982;</span> </td> <tr><td> <code title="">Star;</code> </td> <td> U+022C6 </td> <td> <span>&#8902;</span> </td> <tr><td> <code title="">Sub;</code> </td> <td> U+022D0 </td> <td> <span>&#8912;</span> </td> <tr><td> <code title="">Subset;</code> </td> <td> U+022D0 </td> <td> <span>&#8912;</span> </td> <tr><td> <code title="">SubsetEqual;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">Succeeds;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">SucceedsEqual;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">SucceedsSlantEqual;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">SucceedsTilde;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">SuchThat;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">Sum;</code> </td> <td> U+02211 </td> <td> <span>&sum;</span> </td> <tr><td> <code title="">Sup;</code> </td> <td> U+022D1 </td> <td> <span>&#8913;</span> </td> <tr><td> <code title="">Superset;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">SupersetEqual;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">Supset;</code> </td> <td> U+022D1 </td> <td> <span>&#8913;</span> </td> <tr><td> <code title="">THORN;</code> </td> <td> U+000DE </td> <td> <span>&THORN;</span> </td> <tr class=impl><td> <code title="">THORN</code> </td> <td> U+000DE </td> <td> <span title="">&THORN;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">TRADE;</code> </td> <td> U+02122 </td> <td> <span>&trade;</span> </td> <tr><td> <code title="">TSHcy;</code> </td> <td> U+0040B </td> <td> <span>&#1035;</span> </td> <tr><td> <code title="">TScy;</code> </td> <td> U+00426 </td> <td> <span>&#1062;</span> </td> <tr><td> <code title="">Tab;</code> </td> <td> U+00009 </td> <td> <span>	</span> </td> <tr><td> <code title="">Tau;</code> </td> <td> U+003A4 </td> <td> <span>&Tau;</span> </td> <tr><td> <code title="">Tcaron;</code> </td> <td> U+00164 </td> <td> <span>&#356;</span> </td> <tr><td> <code title="">Tcedil;</code> </td> <td> U+00162 </td> <td> <span>&#354;</span> </td> <tr><td> <code title="">Tcy;</code> </td> <td> U+00422 </td> <td> <span>&#1058;</span> </td> <tr><td> <code title="">Tfr;</code> </td> <td> U+1D517 </td> <td> <span>&#120087;</span> </td> <tr><td> <code title="">Therefore;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">Theta;</code> </td> <td> U+00398 </td> <td> <span>&Theta;</span> </td> <tr><td> <code title="">ThinSpace;</code> </td> <td> U+02009 </td> <td> <span>&thinsp;</span> </td> <tr><td> <code title="">Tilde;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">TildeEqual;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">TildeFullEqual;</code> </td> <td> U+02245 </td> <td> <span>&cong;</span> </td> <tr><td> <code title="">TildeTilde;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">Topf;</code> </td> <td> U+1D54B </td> <td> <span>&#120139;</span> </td> <tr><td> <code title="">TripleDot;</code> </td> <td> U+020DB </td> <td> <span>&#9676;&#8411;</span> </td> <tr><td> <code title="">Tscr;</code> </td> <td> U+1D4AF </td> <td> <span>&#119983;</span> </td> <tr><td> <code title="">Tstrok;</code> </td> <td> U+00166 </td> <td> <span>&#358;</span> </td> <tr><td> <code title="">Uacute;</code> </td> <td> U+000DA </td> <td> <span>&Uacute;</span> </td> <tr class=impl><td> <code title="">Uacute</code> </td> <td> U+000DA </td> <td> <span title="">&Uacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Uarr;</code> </td> <td> U+0219F </td> <td> <span>&#8607;</span> </td> <tr><td> <code title="">Uarrocir;</code> </td> <td> U+02949 </td> <td> <span>&#10569;</span> </td> <tr><td> <code title="">Ubrcy;</code> </td> <td> U+0040E </td> <td> <span>&#1038;</span> </td> <tr><td> <code title="">Ubreve;</code> </td> <td> U+0016C </td> <td> <span>&#364;</span> </td> <tr><td> <code title="">Ucirc;</code> </td> <td> U+000DB </td> <td> <span>&Ucirc;</span> </td> <tr class=impl><td> <code title="">Ucirc</code> </td> <td> U+000DB </td> <td> <span title="">&Ucirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ucy;</code> </td> <td> U+00423 </td> <td> <span>&#1059;</span> </td> <tr><td> <code title="">Udblac;</code> </td> <td> U+00170 </td> <td> <span>&#368;</span> </td> <tr><td> <code title="">Ufr;</code> </td> <td> U+1D518 </td> <td> <span>&#120088;</span> </td> <tr><td> <code title="">Ugrave;</code> </td> <td> U+000D9 </td> <td> <span>&Ugrave;</span> </td> <tr class=impl><td> <code title="">Ugrave</code> </td> <td> U+000D9 </td> <td> <span title="">&Ugrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Umacr;</code> </td> <td> U+0016A </td> <td> <span>&#362;</span> </td> <tr><td> <code title="">UnderBar;</code> </td> <td> U+0005F </td> <td> <span>_</span> </td> <tr><td> <code title="">UnderBrace;</code> </td> <td> U+023DF </td> <td> <span>&#9183;</span> </td> <tr><td> <code title="">UnderBracket;</code> </td> <td> U+023B5 </td> <td> <span>&#9141;</span> </td> <tr><td> <code title="">UnderParenthesis;</code> </td> <td> U+023DD </td> <td> <span>&#9181;</span> </td> <tr><td> <code title="">Union;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">UnionPlus;</code> </td> <td> U+0228E </td> <td> <span>&#8846;</span> </td> <tr><td> <code title="">Uogon;</code> </td> <td> U+00172 </td> <td> <span>&#370;</span> </td> <tr><td> <code title="">Uopf;</code> </td> <td> U+1D54C </td> <td> <span>&#120140;</span> </td> <tr><td> <code title="">UpArrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">UpArrowBar;</code> </td> <td> U+02912 </td> <td> <span>&#10514;</span> </td> <tr><td> <code title="">UpArrowDownArrow;</code> </td> <td> U+021C5 </td> <td> <span>&#8645;</span> </td> <tr><td> <code title="">UpDownArrow;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">UpEquilibrium;</code> </td> <td> U+0296E </td> <td> <span>&#10606;</span> </td> <tr><td> <code title="">UpTee;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">UpTeeArrow;</code> </td> <td> U+021A5 </td> <td> <span>&#8613;</span> </td> <tr><td> <code title="">Uparrow;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">Updownarrow;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">UpperLeftArrow;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">UpperRightArrow;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">Upsi;</code> </td> <td> U+003D2 </td> <td> <span>&upsih;</span> </td> <tr><td> <code title="">Upsilon;</code> </td> <td> U+003A5 </td> <td> <span>&Upsilon;</span> </td> <tr><td> <code title="">Uring;</code> </td> <td> U+0016E </td> <td> <span>&#366;</span> </td> <tr><td> <code title="">Uscr;</code> </td> <td> U+1D4B0 </td> <td> <span>&#119984;</span> </td> <tr><td> <code title="">Utilde;</code> </td> <td> U+00168 </td> <td> <span>&#360;</span> </td> <tr><td> <code title="">Uuml;</code> </td> <td> U+000DC </td> <td> <span>&Uuml;</span> </td> <tr class=impl><td> <code title="">Uuml</code> </td> <td> U+000DC </td> <td> <span title="">&Uuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">VDash;</code> </td> <td> U+022AB </td> <td> <span>&#8875;</span> </td> <tr><td> <code title="">Vbar;</code> </td> <td> U+02AEB </td> <td> <span>&#10987;</span> </td> <tr><td> <code title="">Vcy;</code> </td> <td> U+00412 </td> <td> <span>&#1042;</span> </td> <tr><td> <code title="">Vdash;</code> </td> <td> U+022A9 </td> <td> <span>&#8873;</span> </td> <tr><td> <code title="">Vdashl;</code> </td> <td> U+02AE6 </td> <td> <span>&#10982;</span> </td> <tr><td> <code title="">Vee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">Verbar;</code> </td> <td> U+02016 </td> <td> <span>&#8214;</span> </td> <tr><td> <code title="">Vert;</code> </td> <td> U+02016 </td> <td> <span>&#8214;</span> </td> <tr><td> <code title="">VerticalBar;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">VerticalLine;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">VerticalSeparator;</code> </td> <td> U+02758 </td> <td> <span>&#10072;</span> </td> <tr><td> <code title="">VerticalTilde;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">VeryThinSpace;</code> </td> <td> U+0200A </td> <td> <span>&#8202;</span> </td> <tr><td> <code title="">Vfr;</code> </td> <td> U+1D519 </td> <td> <span>&#120089;</span> </td> <tr><td> <code title="">Vopf;</code> </td> <td> U+1D54D </td> <td> <span>&#120141;</span> </td> <tr><td> <code title="">Vscr;</code> </td> <td> U+1D4B1 </td> <td> <span>&#119985;</span> </td> <tr><td> <code title="">Vvdash;</code> </td> <td> U+022AA </td> <td> <span>&#8874;</span> </td> <tr><td> <code title="">Wcirc;</code> </td> <td> U+00174 </td> <td> <span>&#372;</span> </td> <tr><td> <code title="">Wedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">Wfr;</code> </td> <td> U+1D51A </td> <td> <span>&#120090;</span> </td> <tr><td> <code title="">Wopf;</code> </td> <td> U+1D54E </td> <td> <span>&#120142;</span> </td> <tr><td> <code title="">Wscr;</code> </td> <td> U+1D4B2 </td> <td> <span>&#119986;</span> </td> <tr><td> <code title="">Xfr;</code> </td> <td> U+1D51B </td> <td> <span>&#120091;</span> </td> <tr><td> <code title="">Xi;</code> </td> <td> U+0039E </td> <td> <span>&Xi;</span> </td> <tr><td> <code title="">Xopf;</code> </td> <td> U+1D54F </td> <td> <span>&#120143;</span> </td> <tr><td> <code title="">Xscr;</code> </td> <td> U+1D4B3 </td> <td> <span>&#119987;</span> </td> <tr><td> <code title="">YAcy;</code> </td> <td> U+0042F </td> <td> <span>&#1071;</span> </td> <tr><td> <code title="">YIcy;</code> </td> <td> U+00407 </td> <td> <span>&#1031;</span> </td> <tr><td> <code title="">YUcy;</code> </td> <td> U+0042E </td> <td> <span>&#1070;</span> </td> <tr><td> <code title="">Yacute;</code> </td> <td> U+000DD </td> <td> <span>&Yacute;</span> </td> <tr class=impl><td> <code title="">Yacute</code> </td> <td> U+000DD </td> <td> <span title="">&Yacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">Ycirc;</code> </td> <td> U+00176 </td> <td> <span>&#374;</span> </td> <tr><td> <code title="">Ycy;</code> </td> <td> U+0042B </td> <td> <span>&#1067;</span> </td> <tr><td> <code title="">Yfr;</code> </td> <td> U+1D51C </td> <td> <span>&#120092;</span> </td> <tr><td> <code title="">Yopf;</code> </td> <td> U+1D550 </td> <td> <span>&#120144;</span> </td> <tr><td> <code title="">Yscr;</code> </td> <td> U+1D4B4 </td> <td> <span>&#119988;</span> </td> <tr><td> <code title="">Yuml;</code> </td> <td> U+00178 </td> <td> <span>&Yuml;</span> </td> <tr><td> <code title="">ZHcy;</code> </td> <td> U+00416 </td> <td> <span>&#1046;</span> </td> <tr><td> <code title="">Zacute;</code> </td> <td> U+00179 </td> <td> <span>&#377;</span> </td> <tr><td> <code title="">Zcaron;</code> </td> <td> U+0017D </td> <td> <span>&#381;</span> </td> <tr><td> <code title="">Zcy;</code> </td> <td> U+00417 </td> <td> <span>&#1047;</span> </td> <tr><td> <code title="">Zdot;</code> </td> <td> U+0017B </td> <td> <span>&#379;</span> </td> <tr><td> <code title="">ZeroWidthSpace;</code> </td> <td> U+0200B </td> <td> <span>&#8203;</span> </td> <tr><td> <code title="">Zeta;</code> </td> <td> U+00396 </td> <td> <span>&Zeta;</span> </td> <tr><td> <code title="">Zfr;</code> </td> <td> U+02128 </td> <td> <span>&#8488;</span> </td> <tr><td> <code title="">Zopf;</code> </td> <td> U+02124 </td> <td> <span>&#8484;</span> </td> <tr><td> <code title="">Zscr;</code> </td> <td> U+1D4B5 </td> <td> <span>&#119989;</span> </td> <tr><td> <code title="">aacute;</code> </td> <td> U+000E1 </td> <td> <span>&aacute;</span> </td> <tr class=impl><td> <code title="">aacute</code> </td> <td> U+000E1 </td> <td> <span title="">&aacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">abreve;</code> </td> <td> U+00103 </td> <td> <span>&#259;</span> </td> <tr><td> <code title="">ac;</code> </td> <td> U+0223E </td> <td> <span>&#8766;</span> </td> <tr><td> <code title="">acd;</code> </td> <td> U+0223F </td> <td> <span>&#8767;</span> </td> <tr><td> <code title="">acirc;</code> </td> <td> U+000E2 </td> <td> <span>&acirc;</span> </td> <tr class=impl><td> <code title="">acirc</code> </td> <td> U+000E2 </td> <td> <span title="">&acirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">acute;</code> </td> <td> U+000B4 </td> <td> <span>&acute;</span> </td> <tr class=impl><td> <code title="">acute</code> </td> <td> U+000B4 </td> <td> <span title="">&acute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">acy;</code> </td> <td> U+00430 </td> <td> <span>&#1072;</span> </td> <tr><td> <code title="">aelig;</code> </td> <td> U+000E6 </td> <td> <span>&aelig;</span> </td> <tr class=impl><td> <code title="">aelig</code> </td> <td> U+000E6 </td> <td> <span title="">&aelig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">af;</code> </td> <td> U+02061 </td> <td> <span>&#8289;</span> </td> <tr><td> <code title="">afr;</code> </td> <td> U+1D51E </td> <td> <span>&#120094;</span> </td> <tr><td> <code title="">agrave;</code> </td> <td> U+000E0 </td> <td> <span>&agrave;</span> </td> <tr class=impl><td> <code title="">agrave</code> </td> <td> U+000E0 </td> <td> <span title="">&agrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">alefsym;</code> </td> <td> U+02135 </td> <td> <span>&alefsym;</span> </td> <tr><td> <code title="">aleph;</code> </td> <td> U+02135 </td> <td> <span>&alefsym;</span> </td> <tr><td> <code title="">alpha;</code> </td> <td> U+003B1 </td> <td> <span>&alpha;</span> </td> <tr><td> <code title="">amacr;</code> </td> <td> U+00101 </td> <td> <span>&#257;</span> </td> <tr><td> <code title="">amalg;</code> </td> <td> U+02A3F </td> <td> <span>&#10815;</span> </td> <tr><td> <code title="">amp;</code> </td> <td> U+00026 </td> <td> <span>&amp;</span> </td> <tr class=impl><td> <code title="">amp</code> </td> <td> U+00026 </td> <td> <span title="">&amp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">and;</code> </td> <td> U+02227 </td> <td> <span>&and;</span> </td> <tr><td> <code title="">andand;</code> </td> <td> U+02A55 </td> <td> <span>&#10837;</span> </td> <tr><td> <code title="">andd;</code> </td> <td> U+02A5C </td> <td> <span>&#10844;</span> </td> <tr><td> <code title="">andslope;</code> </td> <td> U+02A58 </td> <td> <span>&#10840;</span> </td> <tr><td> <code title="">andv;</code> </td> <td> U+02A5A </td> <td> <span>&#10842;</span> </td> <tr><td> <code title="">ang;</code> </td> <td> U+02220 </td> <td> <span>&ang;</span> </td> <tr><td> <code title="">ange;</code> </td> <td> U+029A4 </td> <td> <span>&#10660;</span> </td> <tr><td> <code title="">angle;</code> </td> <td> U+02220 </td> <td> <span>&ang;</span> </td> <tr><td> <code title="">angmsd;</code> </td> <td> U+02221 </td> <td> <span>&#8737;</span> </td> <tr><td> <code title="">angmsdaa;</code> </td> <td> U+029A8 </td> <td> <span>&#10664;</span> </td> <tr><td> <code title="">angmsdab;</code> </td> <td> U+029A9 </td> <td> <span>&#10665;</span> </td> <tr><td> <code title="">angmsdac;</code> </td> <td> U+029AA </td> <td> <span>&#10666;</span> </td> <tr><td> <code title="">angmsdad;</code> </td> <td> U+029AB </td> <td> <span>&#10667;</span> </td> <tr><td> <code title="">angmsdae;</code> </td> <td> U+029AC </td> <td> <span>&#10668;</span> </td> <tr><td> <code title="">angmsdaf;</code> </td> <td> U+029AD </td> <td> <span>&#10669;</span> </td> <tr><td> <code title="">angmsdag;</code> </td> <td> U+029AE </td> <td> <span>&#10670;</span> </td> <tr><td> <code title="">angmsdah;</code> </td> <td> U+029AF </td> <td> <span>&#10671;</span> </td> <tr><td> <code title="">angrt;</code> </td> <td> U+0221F </td> <td> <span>&#8735;</span> </td> <tr><td> <code title="">angrtvb;</code> </td> <td> U+022BE </td> <td> <span>&#8894;</span> </td> <tr><td> <code title="">angrtvbd;</code> </td> <td> U+0299D </td> <td> <span>&#10653;</span> </td> <tr><td> <code title="">angsph;</code> </td> <td> U+02222 </td> <td> <span>&#8738;</span> </td> <tr><td> <code title="">angst;</code> </td> <td> U+000C5 </td> <td> <span>&Aring;</span> </td> <tr><td> <code title="">angzarr;</code> </td> <td> U+0237C </td> <td> <span>&#9084;</span> </td> <tr><td> <code title="">aogon;</code> </td> <td> U+00105 </td> <td> <span>&#261;</span> </td> <tr><td> <code title="">aopf;</code> </td> <td> U+1D552 </td> <td> <span>&#120146;</span> </td> <tr><td> <code title="">ap;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">apE;</code> </td> <td> U+02A70 </td> <td> <span>&#10864;</span> </td> <tr><td> <code title="">apacir;</code> </td> <td> U+02A6F </td> <td> <span>&#10863;</span> </td> <tr><td> <code title="">ape;</code> </td> <td> U+0224A </td> <td> <span>&#8778;</span> </td> <tr><td> <code title="">apid;</code> </td> <td> U+0224B </td> <td> <span>&#8779;</span> </td> <tr><td> <code title="">apos;</code> </td> <td> U+00027 </td> <td> <span>'</span> </td> <tr><td> <code title="">approx;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">approxeq;</code> </td> <td> U+0224A </td> <td> <span>&#8778;</span> </td> <tr><td> <code title="">aring;</code> </td> <td> U+000E5 </td> <td> <span>&aring;</span> </td> <tr class=impl><td> <code title="">aring</code> </td> <td> U+000E5 </td> <td> <span title="">&aring;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ascr;</code> </td> <td> U+1D4B6 </td> <td> <span>&#119990;</span> </td> <tr><td> <code title="">ast;</code> </td> <td> U+0002A </td> <td> <span>*</span> </td> <tr><td> <code title="">asymp;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">asympeq;</code> </td> <td> U+0224D </td> <td> <span>&#8781;</span> </td> <tr><td> <code title="">atilde;</code> </td> <td> U+000E3 </td> <td> <span>&atilde;</span> </td> <tr class=impl><td> <code title="">atilde</code> </td> <td> U+000E3 </td> <td> <span title="">&atilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">auml;</code> </td> <td> U+000E4 </td> <td> <span>&auml;</span> </td> <tr class=impl><td> <code title="">auml</code> </td> <td> U+000E4 </td> <td> <span title="">&auml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">awconint;</code> </td> <td> U+02233 </td> <td> <span>&#8755;</span> </td> <tr><td> <code title="">awint;</code> </td> <td> U+02A11 </td> <td> <span>&#10769;</span> </td> <tr><td> <code title="">bNot;</code> </td> <td> U+02AED </td> <td> <span>&#10989;</span> </td> <tr><td> <code title="">backcong;</code> </td> <td> U+0224C </td> <td> <span>&#8780;</span> </td> <tr><td> <code title="">backepsilon;</code> </td> <td> U+003F6 </td> <td> <span>&#1014;</span> </td> <tr><td> <code title="">backprime;</code> </td> <td> U+02035 </td> <td> <span>&#8245;</span> </td> <tr><td> <code title="">backsim;</code> </td> <td> U+0223D </td> <td> <span>&#8765;</span> </td> <tr><td> <code title="">backsimeq;</code> </td> <td> U+022CD </td> <td> <span>&#8909;</span> </td> <tr><td> <code title="">barvee;</code> </td> <td> U+022BD </td> <td> <span>&#8893;</span> </td> <tr><td> <code title="">barwed;</code> </td> <td> U+02305 </td> <td> <span>&#8965;</span> </td> <tr><td> <code title="">barwedge;</code> </td> <td> U+02305 </td> <td> <span>&#8965;</span> </td> <tr><td> <code title="">bbrk;</code> </td> <td> U+023B5 </td> <td> <span>&#9141;</span> </td> <tr><td> <code title="">bbrktbrk;</code> </td> <td> U+023B6 </td> <td> <span>&#9142;</span> </td> <tr><td> <code title="">bcong;</code> </td> <td> U+0224C </td> <td> <span>&#8780;</span> </td> <tr><td> <code title="">bcy;</code> </td> <td> U+00431 </td> <td> <span>&#1073;</span> </td> <tr><td> <code title="">bdquo;</code> </td> <td> U+0201E </td> <td> <span>&bdquo;</span> </td> <tr><td> <code title="">becaus;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">because;</code> </td> <td> U+02235 </td> <td> <span>&#8757;</span> </td> <tr><td> <code title="">bemptyv;</code> </td> <td> U+029B0 </td> <td> <span>&#10672;</span> </td> <tr><td> <code title="">bepsi;</code> </td> <td> U+003F6 </td> <td> <span>&#1014;</span> </td> <tr><td> <code title="">bernou;</code> </td> <td> U+0212C </td> <td> <span>&#8492;</span> </td> <tr><td> <code title="">beta;</code> </td> <td> U+003B2 </td> <td> <span>&beta;</span> </td> <tr><td> <code title="">beth;</code> </td> <td> U+02136 </td> <td> <span>&#8502;</span> </td> <tr><td> <code title="">between;</code> </td> <td> U+0226C </td> <td> <span>&#8812;</span> </td> <tr><td> <code title="">bfr;</code> </td> <td> U+1D51F </td> <td> <span>&#120095;</span> </td> <tr><td> <code title="">bigcap;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">bigcirc;</code> </td> <td> U+025EF </td> <td> <span>&#9711;</span> </td> <tr><td> <code title="">bigcup;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">bigodot;</code> </td> <td> U+02A00 </td> <td> <span>&#10752;</span> </td> <tr><td> <code title="">bigoplus;</code> </td> <td> U+02A01 </td> <td> <span>&#10753;</span> </td> <tr><td> <code title="">bigotimes;</code> </td> <td> U+02A02 </td> <td> <span>&#10754;</span> </td> <tr><td> <code title="">bigsqcup;</code> </td> <td> U+02A06 </td> <td> <span>&#10758;</span> </td> <tr><td> <code title="">bigstar;</code> </td> <td> U+02605 </td> <td> <span>&#9733;</span> </td> <tr><td> <code title="">bigtriangledown;</code> </td> <td> U+025BD </td> <td> <span>&#9661;</span> </td> <tr><td> <code title="">bigtriangleup;</code> </td> <td> U+025B3 </td> <td> <span>&#9651;</span> </td> <tr><td> <code title="">biguplus;</code> </td> <td> U+02A04 </td> <td> <span>&#10756;</span> </td> <tr><td> <code title="">bigvee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">bigwedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">bkarow;</code> </td> <td> U+0290D </td> <td> <span>&#10509;</span> </td> <tr><td> <code title="">blacklozenge;</code> </td> <td> U+029EB </td> <td> <span>&#10731;</span> </td> <tr><td> <code title="">blacksquare;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">blacktriangle;</code> </td> <td> U+025B4 </td> <td> <span>&#9652;</span> </td> <tr><td> <code title="">blacktriangledown;</code> </td> <td> U+025BE </td> <td> <span>&#9662;</span> </td> <tr><td> <code title="">blacktriangleleft;</code> </td> <td> U+025C2 </td> <td> <span>&#9666;</span> </td> <tr><td> <code title="">blacktriangleright;</code> </td> <td> U+025B8 </td> <td> <span>&#9656;</span> </td> <tr><td> <code title="">blank;</code> </td> <td> U+02423 </td> <td> <span>&#9251;</span> </td> <tr><td> <code title="">blk12;</code> </td> <td> U+02592 </td> <td> <span>&#9618;</span> </td> <tr><td> <code title="">blk14;</code> </td> <td> U+02591 </td> <td> <span>&#9617;</span> </td> <tr><td> <code title="">blk34;</code> </td> <td> U+02593 </td> <td> <span>&#9619;</span> </td> <tr><td> <code title="">block;</code> </td> <td> U+02588 </td> <td> <span>&#9608;</span> </td> <tr><td> <code title="">bnot;</code> </td> <td> U+02310 </td> <td> <span>&#8976;</span> </td> <tr><td> <code title="">bopf;</code> </td> <td> U+1D553 </td> <td> <span>&#120147;</span> </td> <tr><td> <code title="">bot;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">bottom;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">bowtie;</code> </td> <td> U+022C8 </td> <td> <span>&#8904;</span> </td> <tr><td> <code title="">boxDL;</code> </td> <td> U+02557 </td> <td> <span>&#9559;</span> </td> <tr><td> <code title="">boxDR;</code> </td> <td> U+02554 </td> <td> <span>&#9556;</span> </td> <tr><td> <code title="">boxDl;</code> </td> <td> U+02556 </td> <td> <span>&#9558;</span> </td> <tr><td> <code title="">boxDr;</code> </td> <td> U+02553 </td> <td> <span>&#9555;</span> </td> <tr><td> <code title="">boxH;</code> </td> <td> U+02550 </td> <td> <span>&#9552;</span> </td> <tr><td> <code title="">boxHD;</code> </td> <td> U+02566 </td> <td> <span>&#9574;</span> </td> <tr><td> <code title="">boxHU;</code> </td> <td> U+02569 </td> <td> <span>&#9577;</span> </td> <tr><td> <code title="">boxHd;</code> </td> <td> U+02564 </td> <td> <span>&#9572;</span> </td> <tr><td> <code title="">boxHu;</code> </td> <td> U+02567 </td> <td> <span>&#9575;</span> </td> <tr><td> <code title="">boxUL;</code> </td> <td> U+0255D </td> <td> <span>&#9565;</span> </td> <tr><td> <code title="">boxUR;</code> </td> <td> U+0255A </td> <td> <span>&#9562;</span> </td> <tr><td> <code title="">boxUl;</code> </td> <td> U+0255C </td> <td> <span>&#9564;</span> </td> <tr><td> <code title="">boxUr;</code> </td> <td> U+02559 </td> <td> <span>&#9561;</span> </td> <tr><td> <code title="">boxV;</code> </td> <td> U+02551 </td> <td> <span>&#9553;</span> </td> <tr><td> <code title="">boxVH;</code> </td> <td> U+0256C </td> <td> <span>&#9580;</span> </td> <tr><td> <code title="">boxVL;</code> </td> <td> U+02563 </td> <td> <span>&#9571;</span> </td> <tr><td> <code title="">boxVR;</code> </td> <td> U+02560 </td> <td> <span>&#9568;</span> </td> <tr><td> <code title="">boxVh;</code> </td> <td> U+0256B </td> <td> <span>&#9579;</span> </td> <tr><td> <code title="">boxVl;</code> </td> <td> U+02562 </td> <td> <span>&#9570;</span> </td> <tr><td> <code title="">boxVr;</code> </td> <td> U+0255F </td> <td> <span>&#9567;</span> </td> <tr><td> <code title="">boxbox;</code> </td> <td> U+029C9 </td> <td> <span>&#10697;</span> </td> <tr><td> <code title="">boxdL;</code> </td> <td> U+02555 </td> <td> <span>&#9557;</span> </td> <tr><td> <code title="">boxdR;</code> </td> <td> U+02552 </td> <td> <span>&#9554;</span> </td> <tr><td> <code title="">boxdl;</code> </td> <td> U+02510 </td> <td> <span>&#9488;</span> </td> <tr><td> <code title="">boxdr;</code> </td> <td> U+0250C </td> <td> <span>&#9484;</span> </td> <tr><td> <code title="">boxh;</code> </td> <td> U+02500 </td> <td> <span>&#9472;</span> </td> <tr><td> <code title="">boxhD;</code> </td> <td> U+02565 </td> <td> <span>&#9573;</span> </td> <tr><td> <code title="">boxhU;</code> </td> <td> U+02568 </td> <td> <span>&#9576;</span> </td> <tr><td> <code title="">boxhd;</code> </td> <td> U+0252C </td> <td> <span>&#9516;</span> </td> <tr><td> <code title="">boxhu;</code> </td> <td> U+02534 </td> <td> <span>&#9524;</span> </td> <tr><td> <code title="">boxminus;</code> </td> <td> U+0229F </td> <td> <span>&#8863;</span> </td> <tr><td> <code title="">boxplus;</code> </td> <td> U+0229E </td> <td> <span>&#8862;</span> </td> <tr><td> <code title="">boxtimes;</code> </td> <td> U+022A0 </td> <td> <span>&#8864;</span> </td> <tr><td> <code title="">boxuL;</code> </td> <td> U+0255B </td> <td> <span>&#9563;</span> </td> <tr><td> <code title="">boxuR;</code> </td> <td> U+02558 </td> <td> <span>&#9560;</span> </td> <tr><td> <code title="">boxul;</code> </td> <td> U+02518 </td> <td> <span>&#9496;</span> </td> <tr><td> <code title="">boxur;</code> </td> <td> U+02514 </td> <td> <span>&#9492;</span> </td> <tr><td> <code title="">boxv;</code> </td> <td> U+02502 </td> <td> <span>&#9474;</span> </td> <tr><td> <code title="">boxvH;</code> </td> <td> U+0256A </td> <td> <span>&#9578;</span> </td> <tr><td> <code title="">boxvL;</code> </td> <td> U+02561 </td> <td> <span>&#9569;</span> </td> <tr><td> <code title="">boxvR;</code> </td> <td> U+0255E </td> <td> <span>&#9566;</span> </td> <tr><td> <code title="">boxvh;</code> </td> <td> U+0253C </td> <td> <span>&#9532;</span> </td> <tr><td> <code title="">boxvl;</code> </td> <td> U+02524 </td> <td> <span>&#9508;</span> </td> <tr><td> <code title="">boxvr;</code> </td> <td> U+0251C </td> <td> <span>&#9500;</span> </td> <tr><td> <code title="">bprime;</code> </td> <td> U+02035 </td> <td> <span>&#8245;</span> </td> <tr><td> <code title="">breve;</code> </td> <td> U+002D8 </td> <td> <span>&#728;</span> </td> <tr><td> <code title="">brvbar;</code> </td> <td> U+000A6 </td> <td> <span>&brvbar;</span> </td> <tr class=impl><td> <code title="">brvbar</code> </td> <td> U+000A6 </td> <td> <span title="">&brvbar;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">bscr;</code> </td> <td> U+1D4B7 </td> <td> <span>&#119991;</span> </td> <tr><td> <code title="">bsemi;</code> </td> <td> U+0204F </td> <td> <span>&#8271;</span> </td> <tr><td> <code title="">bsim;</code> </td> <td> U+0223D </td> <td> <span>&#8765;</span> </td> <tr><td> <code title="">bsime;</code> </td> <td> U+022CD </td> <td> <span>&#8909;</span> </td> <tr><td> <code title="">bsol;</code> </td> <td> U+0005C </td> <td> <span>\</span> </td> <tr><td> <code title="">bsolb;</code> </td> <td> U+029C5 </td> <td> <span>&#10693;</span> </td> <tr><td> <code title="">bsolhsub;</code> </td> <td> U+027C8 </td> <td> <span>&#10184;</span> </td> <tr><td> <code title="">bull;</code> </td> <td> U+02022 </td> <td> <span>&bull;</span> </td> <tr><td> <code title="">bullet;</code> </td> <td> U+02022 </td> <td> <span>&bull;</span> </td> <tr><td> <code title="">bump;</code> </td> <td> U+0224E </td> <td> <span>&#8782;</span> </td> <tr><td> <code title="">bumpE;</code> </td> <td> U+02AAE </td> <td> <span>&#10926;</span> </td> <tr><td> <code title="">bumpe;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">bumpeq;</code> </td> <td> U+0224F </td> <td> <span>&#8783;</span> </td> <tr><td> <code title="">cacute;</code> </td> <td> U+00107 </td> <td> <span>&#263;</span> </td> <tr><td> <code title="">cap;</code> </td> <td> U+02229 </td> <td> <span>&cap;</span> </td> <tr><td> <code title="">capand;</code> </td> <td> U+02A44 </td> <td> <span>&#10820;</span> </td> <tr><td> <code title="">capbrcup;</code> </td> <td> U+02A49 </td> <td> <span>&#10825;</span> </td> <tr><td> <code title="">capcap;</code> </td> <td> U+02A4B </td> <td> <span>&#10827;</span> </td> <tr><td> <code title="">capcup;</code> </td> <td> U+02A47 </td> <td> <span>&#10823;</span> </td> <tr><td> <code title="">capdot;</code> </td> <td> U+02A40 </td> <td> <span>&#10816;</span> </td> <tr><td> <code title="">caret;</code> </td> <td> U+02041 </td> <td> <span>&#8257;</span> </td> <tr><td> <code title="">caron;</code> </td> <td> U+002C7 </td> <td> <span>&#711;</span> </td> <tr><td> <code title="">ccaps;</code> </td> <td> U+02A4D </td> <td> <span>&#10829;</span> </td> <tr><td> <code title="">ccaron;</code> </td> <td> U+0010D </td> <td> <span>&#269;</span> </td> <tr><td> <code title="">ccedil;</code> </td> <td> U+000E7 </td> <td> <span>&ccedil;</span> </td> <tr class=impl><td> <code title="">ccedil</code> </td> <td> U+000E7 </td> <td> <span title="">&ccedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ccirc;</code> </td> <td> U+00109 </td> <td> <span>&#265;</span> </td> <tr><td> <code title="">ccups;</code> </td> <td> U+02A4C </td> <td> <span>&#10828;</span> </td> <tr><td> <code title="">ccupssm;</code> </td> <td> U+02A50 </td> <td> <span>&#10832;</span> </td> <tr><td> <code title="">cdot;</code> </td> <td> U+0010B </td> <td> <span>&#267;</span> </td> <tr><td> <code title="">cedil;</code> </td> <td> U+000B8 </td> <td> <span>&cedil;</span> </td> <tr class=impl><td> <code title="">cedil</code> </td> <td> U+000B8 </td> <td> <span title="">&cedil;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">cemptyv;</code> </td> <td> U+029B2 </td> <td> <span>&#10674;</span> </td> <tr><td> <code title="">cent;</code> </td> <td> U+000A2 </td> <td> <span>&cent;</span> </td> <tr class=impl><td> <code title="">cent</code> </td> <td> U+000A2 </td> <td> <span title="">&cent;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">centerdot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr><td> <code title="">cfr;</code> </td> <td> U+1D520 </td> <td> <span>&#120096;</span> </td> <tr><td> <code title="">chcy;</code> </td> <td> U+00447 </td> <td> <span>&#1095;</span> </td> <tr><td> <code title="">check;</code> </td> <td> U+02713 </td> <td> <span>&#10003;</span> </td> <tr><td> <code title="">checkmark;</code> </td> <td> U+02713 </td> <td> <span>&#10003;</span> </td> <tr><td> <code title="">chi;</code> </td> <td> U+003C7 </td> <td> <span>&chi;</span> </td> <tr><td> <code title="">cir;</code> </td> <td> U+025CB </td> <td> <span>&#9675;</span> </td> <tr><td> <code title="">cirE;</code> </td> <td> U+029C3 </td> <td> <span>&#10691;</span> </td> <tr><td> <code title="">circ;</code> </td> <td> U+002C6 </td> <td> <span>&circ;</span> </td> <tr><td> <code title="">circeq;</code> </td> <td> U+02257 </td> <td> <span>&#8791;</span> </td> <tr><td> <code title="">circlearrowleft;</code> </td> <td> U+021BA </td> <td> <span>&#8634;</span> </td> <tr><td> <code title="">circlearrowright;</code> </td> <td> U+021BB </td> <td> <span>&#8635;</span> </td> <tr><td> <code title="">circledR;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr><td> <code title="">circledS;</code> </td> <td> U+024C8 </td> <td> <span>&#9416;</span> </td> <tr><td> <code title="">circledast;</code> </td> <td> U+0229B </td> <td> <span>&#8859;</span> </td> <tr><td> <code title="">circledcirc;</code> </td> <td> U+0229A </td> <td> <span>&#8858;</span> </td> <tr><td> <code title="">circleddash;</code> </td> <td> U+0229D </td> <td> <span>&#8861;</span> </td> <tr><td> <code title="">cire;</code> </td> <td> U+02257 </td> <td> <span>&#8791;</span> </td> <tr><td> <code title="">cirfnint;</code> </td> <td> U+02A10 </td> <td> <span>&#10768;</span> </td> <tr><td> <code title="">cirmid;</code> </td> <td> U+02AEF </td> <td> <span>&#10991;</span> </td> <tr><td> <code title="">cirscir;</code> </td> <td> U+029C2 </td> <td> <span>&#10690;</span> </td> <tr><td> <code title="">clubs;</code> </td> <td> U+02663 </td> <td> <span>&clubs;</span> </td> <tr><td> <code title="">clubsuit;</code> </td> <td> U+02663 </td> <td> <span>&clubs;</span> </td> <tr><td> <code title="">colon;</code> </td> <td> U+0003A </td> <td> <span>:</span> </td> <tr><td> <code title="">colone;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">coloneq;</code> </td> <td> U+02254 </td> <td> <span>&#8788;</span> </td> <tr><td> <code title="">comma;</code> </td> <td> U+0002C </td> <td> <span>,</span> </td> <tr><td> <code title="">commat;</code> </td> <td> U+00040 </td> <td> <span>@</span> </td> <tr><td> <code title="">comp;</code> </td> <td> U+02201 </td> <td> <span>&#8705;</span> </td> <tr><td> <code title="">compfn;</code> </td> <td> U+02218 </td> <td> <span>&#8728;</span> </td> <tr><td> <code title="">complement;</code> </td> <td> U+02201 </td> <td> <span>&#8705;</span> </td> <tr><td> <code title="">complexes;</code> </td> <td> U+02102 </td> <td> <span>&#8450;</span> </td> <tr><td> <code title="">cong;</code> </td> <td> U+02245 </td> <td> <span>&cong;</span> </td> <tr><td> <code title="">congdot;</code> </td> <td> U+02A6D </td> <td> <span>&#10861;</span> </td> <tr><td> <code title="">conint;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">copf;</code> </td> <td> U+1D554 </td> <td> <span>&#120148;</span> </td> <tr><td> <code title="">coprod;</code> </td> <td> U+02210 </td> <td> <span>&#8720;</span> </td> <tr><td> <code title="">copy;</code> </td> <td> U+000A9 </td> <td> <span>&copy;</span> </td> <tr class=impl><td> <code title="">copy</code> </td> <td> U+000A9 </td> <td> <span title="">&copy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">copysr;</code> </td> <td> U+02117 </td> <td> <span>&#8471;</span> </td> <tr><td> <code title="">crarr;</code> </td> <td> U+021B5 </td> <td> <span>&crarr;</span> </td> <tr><td> <code title="">cross;</code> </td> <td> U+02717 </td> <td> <span>&#10007;</span> </td> <tr><td> <code title="">cscr;</code> </td> <td> U+1D4B8 </td> <td> <span>&#119992;</span> </td> <tr><td> <code title="">csub;</code> </td> <td> U+02ACF </td> <td> <span>&#10959;</span> </td> <tr><td> <code title="">csube;</code> </td> <td> U+02AD1 </td> <td> <span>&#10961;</span> </td> <tr><td> <code title="">csup;</code> </td> <td> U+02AD0 </td> <td> <span>&#10960;</span> </td> <tr><td> <code title="">csupe;</code> </td> <td> U+02AD2 </td> <td> <span>&#10962;</span> </td> <tr><td> <code title="">ctdot;</code> </td> <td> U+022EF </td> <td> <span>&#8943;</span> </td> <tr><td> <code title="">cudarrl;</code> </td> <td> U+02938 </td> <td> <span>&#10552;</span> </td> <tr><td> <code title="">cudarrr;</code> </td> <td> U+02935 </td> <td> <span>&#10549;</span> </td> <tr><td> <code title="">cuepr;</code> </td> <td> U+022DE </td> <td> <span>&#8926;</span> </td> <tr><td> <code title="">cuesc;</code> </td> <td> U+022DF </td> <td> <span>&#8927;</span> </td> <tr><td> <code title="">cularr;</code> </td> <td> U+021B6 </td> <td> <span>&#8630;</span> </td> <tr><td> <code title="">cularrp;</code> </td> <td> U+0293D </td> <td> <span>&#10557;</span> </td> <tr><td> <code title="">cup;</code> </td> <td> U+0222A </td> <td> <span>&cup;</span> </td> <tr><td> <code title="">cupbrcap;</code> </td> <td> U+02A48 </td> <td> <span>&#10824;</span> </td> <tr><td> <code title="">cupcap;</code> </td> <td> U+02A46 </td> <td> <span>&#10822;</span> </td> <tr><td> <code title="">cupcup;</code> </td> <td> U+02A4A </td> <td> <span>&#10826;</span> </td> <tr><td> <code title="">cupdot;</code> </td> <td> U+0228D </td> <td> <span>&#8845;</span> </td> <tr><td> <code title="">cupor;</code> </td> <td> U+02A45 </td> <td> <span>&#10821;</span> </td> <tr><td> <code title="">curarr;</code> </td> <td> U+021B7 </td> <td> <span>&#8631;</span> </td> <tr><td> <code title="">curarrm;</code> </td> <td> U+0293C </td> <td> <span>&#10556;</span> </td> <tr><td> <code title="">curlyeqprec;</code> </td> <td> U+022DE </td> <td> <span>&#8926;</span> </td> <tr><td> <code title="">curlyeqsucc;</code> </td> <td> U+022DF </td> <td> <span>&#8927;</span> </td> <tr><td> <code title="">curlyvee;</code> </td> <td> U+022CE </td> <td> <span>&#8910;</span> </td> <tr><td> <code title="">curlywedge;</code> </td> <td> U+022CF </td> <td> <span>&#8911;</span> </td> <tr><td> <code title="">curren;</code> </td> <td> U+000A4 </td> <td> <span>&curren;</span> </td> <tr class=impl><td> <code title="">curren</code> </td> <td> U+000A4 </td> <td> <span title="">&curren;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">curvearrowleft;</code> </td> <td> U+021B6 </td> <td> <span>&#8630;</span> </td> <tr><td> <code title="">curvearrowright;</code> </td> <td> U+021B7 </td> <td> <span>&#8631;</span> </td> <tr><td> <code title="">cuvee;</code> </td> <td> U+022CE </td> <td> <span>&#8910;</span> </td> <tr><td> <code title="">cuwed;</code> </td> <td> U+022CF </td> <td> <span>&#8911;</span> </td> <tr><td> <code title="">cwconint;</code> </td> <td> U+02232 </td> <td> <span>&#8754;</span> </td> <tr><td> <code title="">cwint;</code> </td> <td> U+02231 </td> <td> <span>&#8753;</span> </td> <tr><td> <code title="">cylcty;</code> </td> <td> U+0232D </td> <td> <span>&#9005;</span> </td> <tr><td> <code title="">dArr;</code> </td> <td> U+021D3 </td> <td> <span>&dArr;</span> </td> <tr><td> <code title="">dHar;</code> </td> <td> U+02965 </td> <td> <span>&#10597;</span> </td> <tr><td> <code title="">dagger;</code> </td> <td> U+02020 </td> <td> <span>&dagger;</span> </td> <tr><td> <code title="">daleth;</code> </td> <td> U+02138 </td> <td> <span>&#8504;</span> </td> <tr><td> <code title="">darr;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">dash;</code> </td> <td> U+02010 </td> <td> <span>&#8208;</span> </td> <tr><td> <code title="">dashv;</code> </td> <td> U+022A3 </td> <td> <span>&#8867;</span> </td> <tr><td> <code title="">dbkarow;</code> </td> <td> U+0290F </td> <td> <span>&#10511;</span> </td> <tr><td> <code title="">dblac;</code> </td> <td> U+002DD </td> <td> <span>&#733;</span> </td> <tr><td> <code title="">dcaron;</code> </td> <td> U+0010F </td> <td> <span>&#271;</span> </td> <tr><td> <code title="">dcy;</code> </td> <td> U+00434 </td> <td> <span>&#1076;</span> </td> <tr><td> <code title="">dd;</code> </td> <td> U+02146 </td> <td> <span>&#8518;</span> </td> <tr><td> <code title="">ddagger;</code> </td> <td> U+02021 </td> <td> <span>&Dagger;</span> </td> <tr><td> <code title="">ddarr;</code> </td> <td> U+021CA </td> <td> <span>&#8650;</span> </td> <tr><td> <code title="">ddotseq;</code> </td> <td> U+02A77 </td> <td> <span>&#10871;</span> </td> <tr><td> <code title="">deg;</code> </td> <td> U+000B0 </td> <td> <span>&deg;</span> </td> <tr class=impl><td> <code title="">deg</code> </td> <td> U+000B0 </td> <td> <span title="">&deg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">delta;</code> </td> <td> U+003B4 </td> <td> <span>&delta;</span> </td> <tr><td> <code title="">demptyv;</code> </td> <td> U+029B1 </td> <td> <span>&#10673;</span> </td> <tr><td> <code title="">dfisht;</code> </td> <td> U+0297F </td> <td> <span>&#10623;</span> </td> <tr><td> <code title="">dfr;</code> </td> <td> U+1D521 </td> <td> <span>&#120097;</span> </td> <tr><td> <code title="">dharl;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">dharr;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">diam;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">diamond;</code> </td> <td> U+022C4 </td> <td> <span>&#8900;</span> </td> <tr><td> <code title="">diamondsuit;</code> </td> <td> U+02666 </td> <td> <span>&diams;</span> </td> <tr><td> <code title="">diams;</code> </td> <td> U+02666 </td> <td> <span>&diams;</span> </td> <tr><td> <code title="">die;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr><td> <code title="">digamma;</code> </td> <td> U+003DD </td> <td> <span>&#989;</span> </td> <tr><td> <code title="">disin;</code> </td> <td> U+022F2 </td> <td> <span>&#8946;</span> </td> <tr><td> <code title="">div;</code> </td> <td> U+000F7 </td> <td> <span>&divide;</span> </td> <tr><td> <code title="">divide;</code> </td> <td> U+000F7 </td> <td> <span>&divide;</span> </td> <tr class=impl><td> <code title="">divide</code> </td> <td> U+000F7 </td> <td> <span title="">&divide;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">divideontimes;</code> </td> <td> U+022C7 </td> <td> <span>&#8903;</span> </td> <tr><td> <code title="">divonx;</code> </td> <td> U+022C7 </td> <td> <span>&#8903;</span> </td> <tr><td> <code title="">djcy;</code> </td> <td> U+00452 </td> <td> <span>&#1106;</span> </td> <tr><td> <code title="">dlcorn;</code> </td> <td> U+0231E </td> <td> <span>&#8990;</span> </td> <tr><td> <code title="">dlcrop;</code> </td> <td> U+0230D </td> <td> <span>&#8973;</span> </td> <tr><td> <code title="">dollar;</code> </td> <td> U+00024 </td> <td> <span>$</span> </td> <tr><td> <code title="">dopf;</code> </td> <td> U+1D555 </td> <td> <span>&#120149;</span> </td> <tr><td> <code title="">dot;</code> </td> <td> U+002D9 </td> <td> <span>&#729;</span> </td> <tr><td> <code title="">doteq;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">doteqdot;</code> </td> <td> U+02251 </td> <td> <span>&#8785;</span> </td> <tr><td> <code title="">dotminus;</code> </td> <td> U+02238 </td> <td> <span>&#8760;</span> </td> <tr><td> <code title="">dotplus;</code> </td> <td> U+02214 </td> <td> <span>&#8724;</span> </td> <tr><td> <code title="">dotsquare;</code> </td> <td> U+022A1 </td> <td> <span>&#8865;</span> </td> <tr><td> <code title="">doublebarwedge;</code> </td> <td> U+02306 </td> <td> <span>&#8966;</span> </td> <tr><td> <code title="">downarrow;</code> </td> <td> U+02193 </td> <td> <span>&darr;</span> </td> <tr><td> <code title="">downdownarrows;</code> </td> <td> U+021CA </td> <td> <span>&#8650;</span> </td> <tr><td> <code title="">downharpoonleft;</code> </td> <td> U+021C3 </td> <td> <span>&#8643;</span> </td> <tr><td> <code title="">downharpoonright;</code> </td> <td> U+021C2 </td> <td> <span>&#8642;</span> </td> <tr><td> <code title="">drbkarow;</code> </td> <td> U+02910 </td> <td> <span>&#10512;</span> </td> <tr><td> <code title="">drcorn;</code> </td> <td> U+0231F </td> <td> <span>&#8991;</span> </td> <tr><td> <code title="">drcrop;</code> </td> <td> U+0230C </td> <td> <span>&#8972;</span> </td> <tr><td> <code title="">dscr;</code> </td> <td> U+1D4B9 </td> <td> <span>&#119993;</span> </td> <tr><td> <code title="">dscy;</code> </td> <td> U+00455 </td> <td> <span>&#1109;</span> </td> <tr><td> <code title="">dsol;</code> </td> <td> U+029F6 </td> <td> <span>&#10742;</span> </td> <tr><td> <code title="">dstrok;</code> </td> <td> U+00111 </td> <td> <span>&#273;</span> </td> <tr><td> <code title="">dtdot;</code> </td> <td> U+022F1 </td> <td> <span>&#8945;</span> </td> <tr><td> <code title="">dtri;</code> </td> <td> U+025BF </td> <td> <span>&#9663;</span> </td> <tr><td> <code title="">dtrif;</code> </td> <td> U+025BE </td> <td> <span>&#9662;</span> </td> <tr><td> <code title="">duarr;</code> </td> <td> U+021F5 </td> <td> <span>&#8693;</span> </td> <tr><td> <code title="">duhar;</code> </td> <td> U+0296F </td> <td> <span>&#10607;</span> </td> <tr><td> <code title="">dwangle;</code> </td> <td> U+029A6 </td> <td> <span>&#10662;</span> </td> <tr><td> <code title="">dzcy;</code> </td> <td> U+0045F </td> <td> <span>&#1119;</span> </td> <tr><td> <code title="">dzigrarr;</code> </td> <td> U+027FF </td> <td> <span>&#10239;</span> </td> <tr><td> <code title="">eDDot;</code> </td> <td> U+02A77 </td> <td> <span>&#10871;</span> </td> <tr><td> <code title="">eDot;</code> </td> <td> U+02251 </td> <td> <span>&#8785;</span> </td> <tr><td> <code title="">eacute;</code> </td> <td> U+000E9 </td> <td> <span>&eacute;</span> </td> <tr class=impl><td> <code title="">eacute</code> </td> <td> U+000E9 </td> <td> <span title="">&eacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">easter;</code> </td> <td> U+02A6E </td> <td> <span>&#10862;</span> </td> <tr><td> <code title="">ecaron;</code> </td> <td> U+0011B </td> <td> <span>&#283;</span> </td> <tr><td> <code title="">ecir;</code> </td> <td> U+02256 </td> <td> <span>&#8790;</span> </td> <tr><td> <code title="">ecirc;</code> </td> <td> U+000EA </td> <td> <span>&ecirc;</span> </td> <tr class=impl><td> <code title="">ecirc</code> </td> <td> U+000EA </td> <td> <span title="">&ecirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ecolon;</code> </td> <td> U+02255 </td> <td> <span>&#8789;</span> </td> <tr><td> <code title="">ecy;</code> </td> <td> U+0044D </td> <td> <span>&#1101;</span> </td> <tr><td> <code title="">edot;</code> </td> <td> U+00117 </td> <td> <span>&#279;</span> </td> <tr><td> <code title="">ee;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">efDot;</code> </td> <td> U+02252 </td> <td> <span>&#8786;</span> </td> <tr><td> <code title="">efr;</code> </td> <td> U+1D522 </td> <td> <span>&#120098;</span> </td> <tr><td> <code title="">eg;</code> </td> <td> U+02A9A </td> <td> <span>&#10906;</span> </td> <tr><td> <code title="">egrave;</code> </td> <td> U+000E8 </td> <td> <span>&egrave;</span> </td> <tr class=impl><td> <code title="">egrave</code> </td> <td> U+000E8 </td> <td> <span title="">&egrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">egs;</code> </td> <td> U+02A96 </td> <td> <span>&#10902;</span> </td> <tr><td> <code title="">egsdot;</code> </td> <td> U+02A98 </td> <td> <span>&#10904;</span> </td> <tr><td> <code title="">el;</code> </td> <td> U+02A99 </td> <td> <span>&#10905;</span> </td> <tr><td> <code title="">elinters;</code> </td> <td> U+023E7 </td> <td> <span>&#9191;</span> </td> <tr><td> <code title="">ell;</code> </td> <td> U+02113 </td> <td> <span>&#8467;</span> </td> <tr><td> <code title="">els;</code> </td> <td> U+02A95 </td> <td> <span>&#10901;</span> </td> <tr><td> <code title="">elsdot;</code> </td> <td> U+02A97 </td> <td> <span>&#10903;</span> </td> <tr><td> <code title="">emacr;</code> </td> <td> U+00113 </td> <td> <span>&#275;</span> </td> <tr><td> <code title="">empty;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emptyset;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emptyv;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">emsp13;</code> </td> <td> U+02004 </td> <td> <span>&#8196;</span> </td> <tr><td> <code title="">emsp14;</code> </td> <td> U+02005 </td> <td> <span>&#8197;</span> </td> <tr><td> <code title="">emsp;</code> </td> <td> U+02003 </td> <td> <span>&emsp;</span> </td> <tr><td> <code title="">eng;</code> </td> <td> U+0014B </td> <td> <span>&#331;</span> </td> <tr><td> <code title="">ensp;</code> </td> <td> U+02002 </td> <td> <span>&ensp;</span> </td> <tr><td> <code title="">eogon;</code> </td> <td> U+00119 </td> <td> <span>&#281;</span> </td> <tr><td> <code title="">eopf;</code> </td> <td> U+1D556 </td> <td> <span>&#120150;</span> </td> <tr><td> <code title="">epar;</code> </td> <td> U+022D5 </td> <td> <span>&#8917;</span> </td> <tr><td> <code title="">eparsl;</code> </td> <td> U+029E3 </td> <td> <span>&#10723;</span> </td> <tr><td> <code title="">eplus;</code> </td> <td> U+02A71 </td> <td> <span>&#10865;</span> </td> <tr><td> <code title="">epsi;</code> </td> <td> U+003B5 </td> <td> <span>&epsilon;</span> </td> <tr><td> <code title="">epsilon;</code> </td> <td> U+003B5 </td> <td> <span>&epsilon;</span> </td> <tr><td> <code title="">epsiv;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">eqcirc;</code> </td> <td> U+02256 </td> <td> <span>&#8790;</span> </td> <tr><td> <code title="">eqcolon;</code> </td> <td> U+02255 </td> <td> <span>&#8789;</span> </td> <tr><td> <code title="">eqsim;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">eqslantgtr;</code> </td> <td> U+02A96 </td> <td> <span>&#10902;</span> </td> <tr><td> <code title="">eqslantless;</code> </td> <td> U+02A95 </td> <td> <span>&#10901;</span> </td> <tr><td> <code title="">equals;</code> </td> <td> U+0003D </td> <td> <span>=</span> </td> <tr><td> <code title="">equest;</code> </td> <td> U+0225F </td> <td> <span>&#8799;</span> </td> <tr><td> <code title="">equiv;</code> </td> <td> U+02261 </td> <td> <span>&equiv;</span> </td> <tr><td> <code title="">equivDD;</code> </td> <td> U+02A78 </td> <td> <span>&#10872;</span> </td> <tr><td> <code title="">eqvparsl;</code> </td> <td> U+029E5 </td> <td> <span>&#10725;</span> </td> <tr><td> <code title="">erDot;</code> </td> <td> U+02253 </td> <td> <span>&#8787;</span> </td> <tr><td> <code title="">erarr;</code> </td> <td> U+02971 </td> <td> <span>&#10609;</span> </td> <tr><td> <code title="">escr;</code> </td> <td> U+0212F </td> <td> <span>&#8495;</span> </td> <tr><td> <code title="">esdot;</code> </td> <td> U+02250 </td> <td> <span>&#8784;</span> </td> <tr><td> <code title="">esim;</code> </td> <td> U+02242 </td> <td> <span>&#8770;</span> </td> <tr><td> <code title="">eta;</code> </td> <td> U+003B7 </td> <td> <span>&eta;</span> </td> <tr><td> <code title="">eth;</code> </td> <td> U+000F0 </td> <td> <span>&eth;</span> </td> <tr class=impl><td> <code title="">eth</code> </td> <td> U+000F0 </td> <td> <span title="">&eth;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">euml;</code> </td> <td> U+000EB </td> <td> <span>&euml;</span> </td> <tr class=impl><td> <code title="">euml</code> </td> <td> U+000EB </td> <td> <span title="">&euml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">euro;</code> </td> <td> U+020AC </td> <td> <span>&euro;</span> </td> <tr><td> <code title="">excl;</code> </td> <td> U+00021 </td> <td> <span>!</span> </td> <tr><td> <code title="">exist;</code> </td> <td> U+02203 </td> <td> <span>&exist;</span> </td> <tr><td> <code title="">expectation;</code> </td> <td> U+02130 </td> <td> <span>&#8496;</span> </td> <tr><td> <code title="">exponentiale;</code> </td> <td> U+02147 </td> <td> <span>&#8519;</span> </td> <tr><td> <code title="">fallingdotseq;</code> </td> <td> U+02252 </td> <td> <span>&#8786;</span> </td> <tr><td> <code title="">fcy;</code> </td> <td> U+00444 </td> <td> <span>&#1092;</span> </td> <tr><td> <code title="">female;</code> </td> <td> U+02640 </td> <td> <span>&#9792;</span> </td> <tr><td> <code title="">ffilig;</code> </td> <td> U+0FB03 </td> <td> <span>&#64259;</span> </td> <tr><td> <code title="">fflig;</code> </td> <td> U+0FB00 </td> <td> <span>&#64256;</span> </td> <tr><td> <code title="">ffllig;</code> </td> <td> U+0FB04 </td> <td> <span>&#64260;</span> </td> <tr><td> <code title="">ffr;</code> </td> <td> U+1D523 </td> <td> <span>&#120099;</span> </td> <tr><td> <code title="">filig;</code> </td> <td> U+0FB01 </td> <td> <span>&#64257;</span> </td> <tr><td> <code title="">flat;</code> </td> <td> U+0266D </td> <td> <span>&#9837;</span> </td> <tr><td> <code title="">fllig;</code> </td> <td> U+0FB02 </td> <td> <span>&#64258;</span> </td> <tr><td> <code title="">fltns;</code> </td> <td> U+025B1 </td> <td> <span>&#9649;</span> </td> <tr><td> <code title="">fnof;</code> </td> <td> U+00192 </td> <td> <span>&fnof;</span> </td> <tr><td> <code title="">fopf;</code> </td> <td> U+1D557 </td> <td> <span>&#120151;</span> </td> <tr><td> <code title="">forall;</code> </td> <td> U+02200 </td> <td> <span>&forall;</span> </td> <tr><td> <code title="">fork;</code> </td> <td> U+022D4 </td> <td> <span>&#8916;</span> </td> <tr><td> <code title="">forkv;</code> </td> <td> U+02AD9 </td> <td> <span>&#10969;</span> </td> <tr><td> <code title="">fpartint;</code> </td> <td> U+02A0D </td> <td> <span>&#10765;</span> </td> <tr><td> <code title="">frac12;</code> </td> <td> U+000BD </td> <td> <span>&frac12;</span> </td> <tr class=impl><td> <code title="">frac12</code> </td> <td> U+000BD </td> <td> <span title="">&frac12;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac13;</code> </td> <td> U+02153 </td> <td> <span>&#8531;</span> </td> <tr><td> <code title="">frac14;</code> </td> <td> U+000BC </td> <td> <span>&frac14;</span> </td> <tr class=impl><td> <code title="">frac14</code> </td> <td> U+000BC </td> <td> <span title="">&frac14;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac15;</code> </td> <td> U+02155 </td> <td> <span>&#8533;</span> </td> <tr><td> <code title="">frac16;</code> </td> <td> U+02159 </td> <td> <span>&#8537;</span> </td> <tr><td> <code title="">frac18;</code> </td> <td> U+0215B </td> <td> <span>&#8539;</span> </td> <tr><td> <code title="">frac23;</code> </td> <td> U+02154 </td> <td> <span>&#8532;</span> </td> <tr><td> <code title="">frac25;</code> </td> <td> U+02156 </td> <td> <span>&#8534;</span> </td> <tr><td> <code title="">frac34;</code> </td> <td> U+000BE </td> <td> <span>&frac34;</span> </td> <tr class=impl><td> <code title="">frac34</code> </td> <td> U+000BE </td> <td> <span title="">&frac34;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">frac35;</code> </td> <td> U+02157 </td> <td> <span>&#8535;</span> </td> <tr><td> <code title="">frac38;</code> </td> <td> U+0215C </td> <td> <span>&#8540;</span> </td> <tr><td> <code title="">frac45;</code> </td> <td> U+02158 </td> <td> <span>&#8536;</span> </td> <tr><td> <code title="">frac56;</code> </td> <td> U+0215A </td> <td> <span>&#8538;</span> </td> <tr><td> <code title="">frac58;</code> </td> <td> U+0215D </td> <td> <span>&#8541;</span> </td> <tr><td> <code title="">frac78;</code> </td> <td> U+0215E </td> <td> <span>&#8542;</span> </td> <tr><td> <code title="">frasl;</code> </td> <td> U+02044 </td> <td> <span>&frasl;</span> </td> <tr><td> <code title="">frown;</code> </td> <td> U+02322 </td> <td> <span>&#8994;</span> </td> <tr><td> <code title="">fscr;</code> </td> <td> U+1D4BB </td> <td> <span>&#119995;</span> </td> <tr><td> <code title="">gE;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">gEl;</code> </td> <td> U+02A8C </td> <td> <span>&#10892;</span> </td> <tr><td> <code title="">gacute;</code> </td> <td> U+001F5 </td> <td> <span>&#501;</span> </td> <tr><td> <code title="">gamma;</code> </td> <td> U+003B3 </td> <td> <span>&gamma;</span> </td> <tr><td> <code title="">gammad;</code> </td> <td> U+003DD </td> <td> <span>&#989;</span> </td> <tr><td> <code title="">gap;</code> </td> <td> U+02A86 </td> <td> <span>&#10886;</span> </td> <tr><td> <code title="">gbreve;</code> </td> <td> U+0011F </td> <td> <span>&#287;</span> </td> <tr><td> <code title="">gcirc;</code> </td> <td> U+0011D </td> <td> <span>&#285;</span> </td> <tr><td> <code title="">gcy;</code> </td> <td> U+00433 </td> <td> <span>&#1075;</span> </td> <tr><td> <code title="">gdot;</code> </td> <td> U+00121 </td> <td> <span>&#289;</span> </td> <tr><td> <code title="">ge;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">gel;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">geq;</code> </td> <td> U+02265 </td> <td> <span>&ge;</span> </td> <tr><td> <code title="">geqq;</code> </td> <td> U+02267 </td> <td> <span>&#8807;</span> </td> <tr><td> <code title="">geqslant;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">ges;</code> </td> <td> U+02A7E </td> <td> <span>&#10878;</span> </td> <tr><td> <code title="">gescc;</code> </td> <td> U+02AA9 </td> <td> <span>&#10921;</span> </td> <tr><td> <code title="">gesdot;</code> </td> <td> U+02A80 </td> <td> <span>&#10880;</span> </td> <tr><td> <code title="">gesdoto;</code> </td> <td> U+02A82 </td> <td> <span>&#10882;</span> </td> <tr><td> <code title="">gesdotol;</code> </td> <td> U+02A84 </td> <td> <span>&#10884;</span> </td> <tr><td> <code title="">gesles;</code> </td> <td> U+02A94 </td> <td> <span>&#10900;</span> </td> <tr><td> <code title="">gfr;</code> </td> <td> U+1D524 </td> <td> <span>&#120100;</span> </td> <tr><td> <code title="">gg;</code> </td> <td> U+0226B </td> <td> <span>&#8811;</span> </td> <tr><td> <code title="">ggg;</code> </td> <td> U+022D9 </td> <td> <span>&#8921;</span> </td> <tr><td> <code title="">gimel;</code> </td> <td> U+02137 </td> <td> <span>&#8503;</span> </td> <tr><td> <code title="">gjcy;</code> </td> <td> U+00453 </td> <td> <span>&#1107;</span> </td> <tr><td> <code title="">gl;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">glE;</code> </td> <td> U+02A92 </td> <td> <span>&#10898;</span> </td> <tr><td> <code title="">gla;</code> </td> <td> U+02AA5 </td> <td> <span>&#10917;</span> </td> <tr><td> <code title="">glj;</code> </td> <td> U+02AA4 </td> <td> <span>&#10916;</span> </td> <tr><td> <code title="">gnE;</code> </td> <td> U+02269 </td> <td> <span>&#8809;</span> </td> <tr><td> <code title="">gnap;</code> </td> <td> U+02A8A </td> <td> <span>&#10890;</span> </td> <tr><td> <code title="">gnapprox;</code> </td> <td> U+02A8A </td> <td> <span>&#10890;</span> </td> <tr><td> <code title="">gne;</code> </td> <td> U+02A88 </td> <td> <span>&#10888;</span> </td> <tr><td> <code title="">gneq;</code> </td> <td> U+02A88 </td> <td> <span>&#10888;</span> </td> <tr><td> <code title="">gneqq;</code> </td> <td> U+02269 </td> <td> <span>&#8809;</span> </td> <tr><td> <code title="">gnsim;</code> </td> <td> U+022E7 </td> <td> <span>&#8935;</span> </td> <tr><td> <code title="">gopf;</code> </td> <td> U+1D558 </td> <td> <span>&#120152;</span> </td> <tr><td> <code title="">grave;</code> </td> <td> U+00060 </td> <td> <span>`</span> </td> <tr><td> <code title="">gscr;</code> </td> <td> U+0210A </td> <td> <span>&#8458;</span> </td> <tr><td> <code title="">gsim;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">gsime;</code> </td> <td> U+02A8E </td> <td> <span>&#10894;</span> </td> <tr><td> <code title="">gsiml;</code> </td> <td> U+02A90 </td> <td> <span>&#10896;</span> </td> <tr><td> <code title="">gt;</code> </td> <td> U+0003E </td> <td> <span>&gt;</span> </td> <tr class=impl><td> <code title="">gt</code> </td> <td> U+0003E </td> <td> <span title="">&gt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">gtcc;</code> </td> <td> U+02AA7 </td> <td> <span>&#10919;</span> </td> <tr><td> <code title="">gtcir;</code> </td> <td> U+02A7A </td> <td> <span>&#10874;</span> </td> <tr><td> <code title="">gtdot;</code> </td> <td> U+022D7 </td> <td> <span>&#8919;</span> </td> <tr><td> <code title="">gtlPar;</code> </td> <td> U+02995 </td> <td> <span>&#10645;</span> </td> <tr><td> <code title="">gtquest;</code> </td> <td> U+02A7C </td> <td> <span>&#10876;</span> </td> <tr><td> <code title="">gtrapprox;</code> </td> <td> U+02A86 </td> <td> <span>&#10886;</span> </td> <tr><td> <code title="">gtrarr;</code> </td> <td> U+02978 </td> <td> <span>&#10616;</span> </td> <tr><td> <code title="">gtrdot;</code> </td> <td> U+022D7 </td> <td> <span>&#8919;</span> </td> <tr><td> <code title="">gtreqless;</code> </td> <td> U+022DB </td> <td> <span>&#8923;</span> </td> <tr><td> <code title="">gtreqqless;</code> </td> <td> U+02A8C </td> <td> <span>&#10892;</span> </td> <tr><td> <code title="">gtrless;</code> </td> <td> U+02277 </td> <td> <span>&#8823;</span> </td> <tr><td> <code title="">gtrsim;</code> </td> <td> U+02273 </td> <td> <span>&#8819;</span> </td> <tr><td> <code title="">hArr;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">hairsp;</code> </td> <td> U+0200A </td> <td> <span>&#8202;</span> </td> <tr><td> <code title="">half;</code> </td> <td> U+000BD </td> <td> <span>&frac12;</span> </td> <tr><td> <code title="">hamilt;</code> </td> <td> U+0210B </td> <td> <span>&#8459;</span> </td> <tr><td> <code title="">hardcy;</code> </td> <td> U+0044A </td> <td> <span>&#1098;</span> </td> <tr><td> <code title="">harr;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">harrcir;</code> </td> <td> U+02948 </td> <td> <span>&#10568;</span> </td> <tr><td> <code title="">harrw;</code> </td> <td> U+021AD </td> <td> <span>&#8621;</span> </td> <tr><td> <code title="">hbar;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">hcirc;</code> </td> <td> U+00125 </td> <td> <span>&#293;</span> </td> <tr><td> <code title="">hearts;</code> </td> <td> U+02665 </td> <td> <span>&hearts;</span> </td> <tr><td> <code title="">heartsuit;</code> </td> <td> U+02665 </td> <td> <span>&hearts;</span> </td> <tr><td> <code title="">hellip;</code> </td> <td> U+02026 </td> <td> <span>&hellip;</span> </td> <tr><td> <code title="">hercon;</code> </td> <td> U+022B9 </td> <td> <span>&#8889;</span> </td> <tr><td> <code title="">hfr;</code> </td> <td> U+1D525 </td> <td> <span>&#120101;</span> </td> <tr><td> <code title="">hksearow;</code> </td> <td> U+02925 </td> <td> <span>&#10533;</span> </td> <tr><td> <code title="">hkswarow;</code> </td> <td> U+02926 </td> <td> <span>&#10534;</span> </td> <tr><td> <code title="">hoarr;</code> </td> <td> U+021FF </td> <td> <span>&#8703;</span> </td> <tr><td> <code title="">homtht;</code> </td> <td> U+0223B </td> <td> <span>&#8763;</span> </td> <tr><td> <code title="">hookleftarrow;</code> </td> <td> U+021A9 </td> <td> <span>&#8617;</span> </td> <tr><td> <code title="">hookrightarrow;</code> </td> <td> U+021AA </td> <td> <span>&#8618;</span> </td> <tr><td> <code title="">hopf;</code> </td> <td> U+1D559 </td> <td> <span>&#120153;</span> </td> <tr><td> <code title="">horbar;</code> </td> <td> U+02015 </td> <td> <span>&#8213;</span> </td> <tr><td> <code title="">hscr;</code> </td> <td> U+1D4BD </td> <td> <span>&#119997;</span> </td> <tr><td> <code title="">hslash;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">hstrok;</code> </td> <td> U+00127 </td> <td> <span>&#295;</span> </td> <tr><td> <code title="">hybull;</code> </td> <td> U+02043 </td> <td> <span>&#8259;</span> </td> <tr><td> <code title="">hyphen;</code> </td> <td> U+02010 </td> <td> <span>&#8208;</span> </td> <tr><td> <code title="">iacute;</code> </td> <td> U+000ED </td> <td> <span>&iacute;</span> </td> <tr class=impl><td> <code title="">iacute</code> </td> <td> U+000ED </td> <td> <span title="">&iacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ic;</code> </td> <td> U+02063 </td> <td> <span>&#8291;</span> </td> <tr><td> <code title="">icirc;</code> </td> <td> U+000EE </td> <td> <span>&icirc;</span> </td> <tr class=impl><td> <code title="">icirc</code> </td> <td> U+000EE </td> <td> <span title="">&icirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">icy;</code> </td> <td> U+00438 </td> <td> <span>&#1080;</span> </td> <tr><td> <code title="">iecy;</code> </td> <td> U+00435 </td> <td> <span>&#1077;</span> </td> <tr><td> <code title="">iexcl;</code> </td> <td> U+000A1 </td> <td> <span>&iexcl;</span> </td> <tr class=impl><td> <code title="">iexcl</code> </td> <td> U+000A1 </td> <td> <span title="">&iexcl;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">iff;</code> </td> <td> U+021D4 </td> <td> <span>&hArr;</span> </td> <tr><td> <code title="">ifr;</code> </td> <td> U+1D526 </td> <td> <span>&#120102;</span> </td> <tr><td> <code title="">igrave;</code> </td> <td> U+000EC </td> <td> <span>&igrave;</span> </td> <tr class=impl><td> <code title="">igrave</code> </td> <td> U+000EC </td> <td> <span title="">&igrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ii;</code> </td> <td> U+02148 </td> <td> <span>&#8520;</span> </td> <tr><td> <code title="">iiiint;</code> </td> <td> U+02A0C </td> <td> <span>&#10764;</span> </td> <tr><td> <code title="">iiint;</code> </td> <td> U+0222D </td> <td> <span>&#8749;</span> </td> <tr><td> <code title="">iinfin;</code> </td> <td> U+029DC </td> <td> <span>&#10716;</span> </td> <tr><td> <code title="">iiota;</code> </td> <td> U+02129 </td> <td> <span>&#8489;</span> </td> <tr><td> <code title="">ijlig;</code> </td> <td> U+00133 </td> <td> <span>&#307;</span> </td> <tr><td> <code title="">imacr;</code> </td> <td> U+0012B </td> <td> <span>&#299;</span> </td> <tr><td> <code title="">image;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">imagline;</code> </td> <td> U+02110 </td> <td> <span>&#8464;</span> </td> <tr><td> <code title="">imagpart;</code> </td> <td> U+02111 </td> <td> <span>&image;</span> </td> <tr><td> <code title="">imath;</code> </td> <td> U+00131 </td> <td> <span>&#305;</span> </td> <tr><td> <code title="">imof;</code> </td> <td> U+022B7 </td> <td> <span>&#8887;</span> </td> <tr><td> <code title="">imped;</code> </td> <td> U+001B5 </td> <td> <span>&#437;</span> </td> <tr><td> <code title="">in;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">incare;</code> </td> <td> U+02105 </td> <td> <span>&#8453;</span> </td> <tr><td> <code title="">infin;</code> </td> <td> U+0221E </td> <td> <span>&infin;</span> </td> <tr><td> <code title="">infintie;</code> </td> <td> U+029DD </td> <td> <span>&#10717;</span> </td> <tr><td> <code title="">inodot;</code> </td> <td> U+00131 </td> <td> <span>&#305;</span> </td> <tr><td> <code title="">int;</code> </td> <td> U+0222B </td> <td> <span>&int;</span> </td> <tr><td> <code title="">intcal;</code> </td> <td> U+022BA </td> <td> <span>&#8890;</span> </td> <tr><td> <code title="">integers;</code> </td> <td> U+02124 </td> <td> <span>&#8484;</span> </td> <tr><td> <code title="">intercal;</code> </td> <td> U+022BA </td> <td> <span>&#8890;</span> </td> <tr><td> <code title="">intlarhk;</code> </td> <td> U+02A17 </td> <td> <span>&#10775;</span> </td> <tr><td> <code title="">intprod;</code> </td> <td> U+02A3C </td> <td> <span>&#10812;</span> </td> <tr><td> <code title="">iocy;</code> </td> <td> U+00451 </td> <td> <span>&#1105;</span> </td> <tr><td> <code title="">iogon;</code> </td> <td> U+0012F </td> <td> <span>&#303;</span> </td> <tr><td> <code title="">iopf;</code> </td> <td> U+1D55A </td> <td> <span>&#120154;</span> </td> <tr><td> <code title="">iota;</code> </td> <td> U+003B9 </td> <td> <span>&iota;</span> </td> <tr><td> <code title="">iprod;</code> </td> <td> U+02A3C </td> <td> <span>&#10812;</span> </td> <tr><td> <code title="">iquest;</code> </td> <td> U+000BF </td> <td> <span>&iquest;</span> </td> <tr class=impl><td> <code title="">iquest</code> </td> <td> U+000BF </td> <td> <span title="">&iquest;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">iscr;</code> </td> <td> U+1D4BE </td> <td> <span>&#119998;</span> </td> <tr><td> <code title="">isin;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">isinE;</code> </td> <td> U+022F9 </td> <td> <span>&#8953;</span> </td> <tr><td> <code title="">isindot;</code> </td> <td> U+022F5 </td> <td> <span>&#8949;</span> </td> <tr><td> <code title="">isins;</code> </td> <td> U+022F4 </td> <td> <span>&#8948;</span> </td> <tr><td> <code title="">isinsv;</code> </td> <td> U+022F3 </td> <td> <span>&#8947;</span> </td> <tr><td> <code title="">isinv;</code> </td> <td> U+02208 </td> <td> <span>&isin;</span> </td> <tr><td> <code title="">it;</code> </td> <td> U+02062 </td> <td> <span>&#8290;</span> </td> <tr><td> <code title="">itilde;</code> </td> <td> U+00129 </td> <td> <span>&#297;</span> </td> <tr><td> <code title="">iukcy;</code> </td> <td> U+00456 </td> <td> <span>&#1110;</span> </td> <tr><td> <code title="">iuml;</code> </td> <td> U+000EF </td> <td> <span>&iuml;</span> </td> <tr class=impl><td> <code title="">iuml</code> </td> <td> U+000EF </td> <td> <span title="">&iuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">jcirc;</code> </td> <td> U+00135 </td> <td> <span>&#309;</span> </td> <tr><td> <code title="">jcy;</code> </td> <td> U+00439 </td> <td> <span>&#1081;</span> </td> <tr><td> <code title="">jfr;</code> </td> <td> U+1D527 </td> <td> <span>&#120103;</span> </td> <tr><td> <code title="">jmath;</code> </td> <td> U+00237 </td> <td> <span>&#567;</span> </td> <tr><td> <code title="">jopf;</code> </td> <td> U+1D55B </td> <td> <span>&#120155;</span> </td> <tr><td> <code title="">jscr;</code> </td> <td> U+1D4BF </td> <td> <span>&#119999;</span> </td> <tr><td> <code title="">jsercy;</code> </td> <td> U+00458 </td> <td> <span>&#1112;</span> </td> <tr><td> <code title="">jukcy;</code> </td> <td> U+00454 </td> <td> <span>&#1108;</span> </td> <tr><td> <code title="">kappa;</code> </td> <td> U+003BA </td> <td> <span>&kappa;</span> </td> <tr><td> <code title="">kappav;</code> </td> <td> U+003F0 </td> <td> <span>&#1008;</span> </td> <tr><td> <code title="">kcedil;</code> </td> <td> U+00137 </td> <td> <span>&#311;</span> </td> <tr><td> <code title="">kcy;</code> </td> <td> U+0043A </td> <td> <span>&#1082;</span> </td> <tr><td> <code title="">kfr;</code> </td> <td> U+1D528 </td> <td> <span>&#120104;</span> </td> <tr><td> <code title="">kgreen;</code> </td> <td> U+00138 </td> <td> <span>&#312;</span> </td> <tr><td> <code title="">khcy;</code> </td> <td> U+00445 </td> <td> <span>&#1093;</span> </td> <tr><td> <code title="">kjcy;</code> </td> <td> U+0045C </td> <td> <span>&#1116;</span> </td> <tr><td> <code title="">kopf;</code> </td> <td> U+1D55C </td> <td> <span>&#120156;</span> </td> <tr><td> <code title="">kscr;</code> </td> <td> U+1D4C0 </td> <td> <span>&#120000;</span> </td> <tr><td> <code title="">lAarr;</code> </td> <td> U+021DA </td> <td> <span>&#8666;</span> </td> <tr><td> <code title="">lArr;</code> </td> <td> U+021D0 </td> <td> <span>&lArr;</span> </td> <tr><td> <code title="">lAtail;</code> </td> <td> U+0291B </td> <td> <span>&#10523;</span> </td> <tr><td> <code title="">lBarr;</code> </td> <td> U+0290E </td> <td> <span>&#10510;</span> </td> <tr><td> <code title="">lE;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">lEg;</code> </td> <td> U+02A8B </td> <td> <span>&#10891;</span> </td> <tr><td> <code title="">lHar;</code> </td> <td> U+02962 </td> <td> <span>&#10594;</span> </td> <tr><td> <code title="">lacute;</code> </td> <td> U+0013A </td> <td> <span>&#314;</span> </td> <tr><td> <code title="">laemptyv;</code> </td> <td> U+029B4 </td> <td> <span>&#10676;</span> </td> <tr><td> <code title="">lagran;</code> </td> <td> U+02112 </td> <td> <span>&#8466;</span> </td> <tr><td> <code title="">lambda;</code> </td> <td> U+003BB </td> <td> <span>&lambda;</span> </td> <tr><td> <code title="">lang;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">langd;</code> </td> <td> U+02991 </td> <td> <span>&#10641;</span> </td> <tr><td> <code title="">langle;</code> </td> <td> U+027E8 </td> <td> <span>&lang;</span> </td> <tr><td> <code title="">lap;</code> </td> <td> U+02A85 </td> <td> <span>&#10885;</span> </td> <tr><td> <code title="">laquo;</code> </td> <td> U+000AB </td> <td> <span>&laquo;</span> </td> <tr class=impl><td> <code title="">laquo</code> </td> <td> U+000AB </td> <td> <span title="">&laquo;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">larr;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">larrb;</code> </td> <td> U+021E4 </td> <td> <span>&#8676;</span> </td> <tr><td> <code title="">larrbfs;</code> </td> <td> U+0291F </td> <td> <span>&#10527;</span> </td> <tr><td> <code title="">larrfs;</code> </td> <td> U+0291D </td> <td> <span>&#10525;</span> </td> <tr><td> <code title="">larrhk;</code> </td> <td> U+021A9 </td> <td> <span>&#8617;</span> </td> <tr><td> <code title="">larrlp;</code> </td> <td> U+021AB </td> <td> <span>&#8619;</span> </td> <tr><td> <code title="">larrpl;</code> </td> <td> U+02939 </td> <td> <span>&#10553;</span> </td> <tr><td> <code title="">larrsim;</code> </td> <td> U+02973 </td> <td> <span>&#10611;</span> </td> <tr><td> <code title="">larrtl;</code> </td> <td> U+021A2 </td> <td> <span>&#8610;</span> </td> <tr><td> <code title="">lat;</code> </td> <td> U+02AAB </td> <td> <span>&#10923;</span> </td> <tr><td> <code title="">latail;</code> </td> <td> U+02919 </td> <td> <span>&#10521;</span> </td> <tr><td> <code title="">late;</code> </td> <td> U+02AAD </td> <td> <span>&#10925;</span> </td> <tr><td> <code title="">lbarr;</code> </td> <td> U+0290C </td> <td> <span>&#10508;</span> </td> <tr><td> <code title="">lbbrk;</code> </td> <td> U+02772 </td> <td> <span>&#10098;</span> </td> <tr><td> <code title="">lbrace;</code> </td> <td> U+0007B </td> <td> <span>{</span> </td> <tr><td> <code title="">lbrack;</code> </td> <td> U+0005B </td> <td> <span>[</span> </td> <tr><td> <code title="">lbrke;</code> </td> <td> U+0298B </td> <td> <span>&#10635;</span> </td> <tr><td> <code title="">lbrksld;</code> </td> <td> U+0298F </td> <td> <span>&#10639;</span> </td> <tr><td> <code title="">lbrkslu;</code> </td> <td> U+0298D </td> <td> <span>&#10637;</span> </td> <tr><td> <code title="">lcaron;</code> </td> <td> U+0013E </td> <td> <span>&#318;</span> </td> <tr><td> <code title="">lcedil;</code> </td> <td> U+0013C </td> <td> <span>&#316;</span> </td> <tr><td> <code title="">lceil;</code> </td> <td> U+02308 </td> <td> <span>&lceil;</span> </td> <tr><td> <code title="">lcub;</code> </td> <td> U+0007B </td> <td> <span>{</span> </td> <tr><td> <code title="">lcy;</code> </td> <td> U+0043B </td> <td> <span>&#1083;</span> </td> <tr><td> <code title="">ldca;</code> </td> <td> U+02936 </td> <td> <span>&#10550;</span> </td> <tr><td> <code title="">ldquo;</code> </td> <td> U+0201C </td> <td> <span>&ldquo;</span> </td> <tr><td> <code title="">ldquor;</code> </td> <td> U+0201E </td> <td> <span>&bdquo;</span> </td> <tr><td> <code title="">ldrdhar;</code> </td> <td> U+02967 </td> <td> <span>&#10599;</span> </td> <tr><td> <code title="">ldrushar;</code> </td> <td> U+0294B </td> <td> <span>&#10571;</span> </td> <tr><td> <code title="">ldsh;</code> </td> <td> U+021B2 </td> <td> <span>&#8626;</span> </td> <tr><td> <code title="">le;</code> </td> <td> U+02264 </td> <td> <span>&le;</span> </td> <tr><td> <code title="">leftarrow;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">leftarrowtail;</code> </td> <td> U+021A2 </td> <td> <span>&#8610;</span> </td> <tr><td> <code title="">leftharpoondown;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">leftharpoonup;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">leftleftarrows;</code> </td> <td> U+021C7 </td> <td> <span>&#8647;</span> </td> <tr><td> <code title="">leftrightarrow;</code> </td> <td> U+02194 </td> <td> <span>&harr;</span> </td> <tr><td> <code title="">leftrightarrows;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">leftrightharpoons;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">leftrightsquigarrow;</code> </td> <td> U+021AD </td> <td> <span>&#8621;</span> </td> <tr><td> <code title="">leftthreetimes;</code> </td> <td> U+022CB </td> <td> <span>&#8907;</span> </td> <tr><td> <code title="">leg;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">leq;</code> </td> <td> U+02264 </td> <td> <span>&le;</span> </td> <tr><td> <code title="">leqq;</code> </td> <td> U+02266 </td> <td> <span>&#8806;</span> </td> <tr><td> <code title="">leqslant;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">les;</code> </td> <td> U+02A7D </td> <td> <span>&#10877;</span> </td> <tr><td> <code title="">lescc;</code> </td> <td> U+02AA8 </td> <td> <span>&#10920;</span> </td> <tr><td> <code title="">lesdot;</code> </td> <td> U+02A7F </td> <td> <span>&#10879;</span> </td> <tr><td> <code title="">lesdoto;</code> </td> <td> U+02A81 </td> <td> <span>&#10881;</span> </td> <tr><td> <code title="">lesdotor;</code> </td> <td> U+02A83 </td> <td> <span>&#10883;</span> </td> <tr><td> <code title="">lesges;</code> </td> <td> U+02A93 </td> <td> <span>&#10899;</span> </td> <tr><td> <code title="">lessapprox;</code> </td> <td> U+02A85 </td> <td> <span>&#10885;</span> </td> <tr><td> <code title="">lessdot;</code> </td> <td> U+022D6 </td> <td> <span>&#8918;</span> </td> <tr><td> <code title="">lesseqgtr;</code> </td> <td> U+022DA </td> <td> <span>&#8922;</span> </td> <tr><td> <code title="">lesseqqgtr;</code> </td> <td> U+02A8B </td> <td> <span>&#10891;</span> </td> <tr><td> <code title="">lessgtr;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">lesssim;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">lfisht;</code> </td> <td> U+0297C </td> <td> <span>&#10620;</span> </td> <tr><td> <code title="">lfloor;</code> </td> <td> U+0230A </td> <td> <span>&lfloor;</span> </td> <tr><td> <code title="">lfr;</code> </td> <td> U+1D529 </td> <td> <span>&#120105;</span> </td> <tr><td> <code title="">lg;</code> </td> <td> U+02276 </td> <td> <span>&#8822;</span> </td> <tr><td> <code title="">lgE;</code> </td> <td> U+02A91 </td> <td> <span>&#10897;</span> </td> <tr><td> <code title="">lhard;</code> </td> <td> U+021BD </td> <td> <span>&#8637;</span> </td> <tr><td> <code title="">lharu;</code> </td> <td> U+021BC </td> <td> <span>&#8636;</span> </td> <tr><td> <code title="">lharul;</code> </td> <td> U+0296A </td> <td> <span>&#10602;</span> </td> <tr><td> <code title="">lhblk;</code> </td> <td> U+02584 </td> <td> <span>&#9604;</span> </td> <tr><td> <code title="">ljcy;</code> </td> <td> U+00459 </td> <td> <span>&#1113;</span> </td> <tr><td> <code title="">ll;</code> </td> <td> U+0226A </td> <td> <span>&#8810;</span> </td> <tr><td> <code title="">llarr;</code> </td> <td> U+021C7 </td> <td> <span>&#8647;</span> </td> <tr><td> <code title="">llcorner;</code> </td> <td> U+0231E </td> <td> <span>&#8990;</span> </td> <tr><td> <code title="">llhard;</code> </td> <td> U+0296B </td> <td> <span>&#10603;</span> </td> <tr><td> <code title="">lltri;</code> </td> <td> U+025FA </td> <td> <span>&#9722;</span> </td> <tr><td> <code title="">lmidot;</code> </td> <td> U+00140 </td> <td> <span>&#320;</span> </td> <tr><td> <code title="">lmoust;</code> </td> <td> U+023B0 </td> <td> <span>&#9136;</span> </td> <tr><td> <code title="">lmoustache;</code> </td> <td> U+023B0 </td> <td> <span>&#9136;</span> </td> <tr><td> <code title="">lnE;</code> </td> <td> U+02268 </td> <td> <span>&#8808;</span> </td> <tr><td> <code title="">lnap;</code> </td> <td> U+02A89 </td> <td> <span>&#10889;</span> </td> <tr><td> <code title="">lnapprox;</code> </td> <td> U+02A89 </td> <td> <span>&#10889;</span> </td> <tr><td> <code title="">lne;</code> </td> <td> U+02A87 </td> <td> <span>&#10887;</span> </td> <tr><td> <code title="">lneq;</code> </td> <td> U+02A87 </td> <td> <span>&#10887;</span> </td> <tr><td> <code title="">lneqq;</code> </td> <td> U+02268 </td> <td> <span>&#8808;</span> </td> <tr><td> <code title="">lnsim;</code> </td> <td> U+022E6 </td> <td> <span>&#8934;</span> </td> <tr><td> <code title="">loang;</code> </td> <td> U+027EC </td> <td> <span>&#10220;</span> </td> <tr><td> <code title="">loarr;</code> </td> <td> U+021FD </td> <td> <span>&#8701;</span> </td> <tr><td> <code title="">lobrk;</code> </td> <td> U+027E6 </td> <td> <span>&#10214;</span> </td> <tr><td> <code title="">longleftarrow;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">longleftrightarrow;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">longmapsto;</code> </td> <td> U+027FC </td> <td> <span>&#10236;</span> </td> <tr><td> <code title="">longrightarrow;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">looparrowleft;</code> </td> <td> U+021AB </td> <td> <span>&#8619;</span> </td> <tr><td> <code title="">looparrowright;</code> </td> <td> U+021AC </td> <td> <span>&#8620;</span> </td> <tr><td> <code title="">lopar;</code> </td> <td> U+02985 </td> <td> <span>&#10629;</span> </td> <tr><td> <code title="">lopf;</code> </td> <td> U+1D55D </td> <td> <span>&#120157;</span> </td> <tr><td> <code title="">loplus;</code> </td> <td> U+02A2D </td> <td> <span>&#10797;</span> </td> <tr><td> <code title="">lotimes;</code> </td> <td> U+02A34 </td> <td> <span>&#10804;</span> </td> <tr><td> <code title="">lowast;</code> </td> <td> U+02217 </td> <td> <span>&lowast;</span> </td> <tr><td> <code title="">lowbar;</code> </td> <td> U+0005F </td> <td> <span>_</span> </td> <tr><td> <code title="">loz;</code> </td> <td> U+025CA </td> <td> <span>&loz;</span> </td> <tr><td> <code title="">lozenge;</code> </td> <td> U+025CA </td> <td> <span>&loz;</span> </td> <tr><td> <code title="">lozf;</code> </td> <td> U+029EB </td> <td> <span>&#10731;</span> </td> <tr><td> <code title="">lpar;</code> </td> <td> U+00028 </td> <td> <span>(</span> </td> <tr><td> <code title="">lparlt;</code> </td> <td> U+02993 </td> <td> <span>&#10643;</span> </td> <tr><td> <code title="">lrarr;</code> </td> <td> U+021C6 </td> <td> <span>&#8646;</span> </td> <tr><td> <code title="">lrcorner;</code> </td> <td> U+0231F </td> <td> <span>&#8991;</span> </td> <tr><td> <code title="">lrhar;</code> </td> <td> U+021CB </td> <td> <span>&#8651;</span> </td> <tr><td> <code title="">lrhard;</code> </td> <td> U+0296D </td> <td> <span>&#10605;</span> </td> <tr><td> <code title="">lrm;</code> </td> <td> U+0200E </td> <td> <span>&lrm;</span> </td> <tr><td> <code title="">lrtri;</code> </td> <td> U+022BF </td> <td> <span>&#8895;</span> </td> <tr><td> <code title="">lsaquo;</code> </td> <td> U+02039 </td> <td> <span>&lsaquo;</span> </td> <tr><td> <code title="">lscr;</code> </td> <td> U+1D4C1 </td> <td> <span>&#120001;</span> </td> <tr><td> <code title="">lsh;</code> </td> <td> U+021B0 </td> <td> <span>&#8624;</span> </td> <tr><td> <code title="">lsim;</code> </td> <td> U+02272 </td> <td> <span>&#8818;</span> </td> <tr><td> <code title="">lsime;</code> </td> <td> U+02A8D </td> <td> <span>&#10893;</span> </td> <tr><td> <code title="">lsimg;</code> </td> <td> U+02A8F </td> <td> <span>&#10895;</span> </td> <tr><td> <code title="">lsqb;</code> </td> <td> U+0005B </td> <td> <span>[</span> </td> <tr><td> <code title="">lsquo;</code> </td> <td> U+02018 </td> <td> <span>&lsquo;</span> </td> <tr><td> <code title="">lsquor;</code> </td> <td> U+0201A </td> <td> <span>&sbquo;</span> </td> <tr><td> <code title="">lstrok;</code> </td> <td> U+00142 </td> <td> <span>&#322;</span> </td> <tr><td> <code title="">lt;</code> </td> <td> U+0003C </td> <td> <span>&lt;</span> </td> <tr class=impl><td> <code title="">lt</code> </td> <td> U+0003C </td> <td> <span title="">&lt;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ltcc;</code> </td> <td> U+02AA6 </td> <td> <span>&#10918;</span> </td> <tr><td> <code title="">ltcir;</code> </td> <td> U+02A79 </td> <td> <span>&#10873;</span> </td> <tr><td> <code title="">ltdot;</code> </td> <td> U+022D6 </td> <td> <span>&#8918;</span> </td> <tr><td> <code title="">lthree;</code> </td> <td> U+022CB </td> <td> <span>&#8907;</span> </td> <tr><td> <code title="">ltimes;</code> </td> <td> U+022C9 </td> <td> <span>&#8905;</span> </td> <tr><td> <code title="">ltlarr;</code> </td> <td> U+02976 </td> <td> <span>&#10614;</span> </td> <tr><td> <code title="">ltquest;</code> </td> <td> U+02A7B </td> <td> <span>&#10875;</span> </td> <tr><td> <code title="">ltrPar;</code> </td> <td> U+02996 </td> <td> <span>&#10646;</span> </td> <tr><td> <code title="">ltri;</code> </td> <td> U+025C3 </td> <td> <span>&#9667;</span> </td> <tr><td> <code title="">ltrie;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">ltrif;</code> </td> <td> U+025C2 </td> <td> <span>&#9666;</span> </td> <tr><td> <code title="">lurdshar;</code> </td> <td> U+0294A </td> <td> <span>&#10570;</span> </td> <tr><td> <code title="">luruhar;</code> </td> <td> U+02966 </td> <td> <span>&#10598;</span> </td> <tr><td> <code title="">mDDot;</code> </td> <td> U+0223A </td> <td> <span>&#8762;</span> </td> <tr><td> <code title="">macr;</code> </td> <td> U+000AF </td> <td> <span>&macr;</span> </td> <tr class=impl><td> <code title="">macr</code> </td> <td> U+000AF </td> <td> <span title="">&macr;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">male;</code> </td> <td> U+02642 </td> <td> <span>&#9794;</span> </td> <tr><td> <code title="">malt;</code> </td> <td> U+02720 </td> <td> <span>&#10016;</span> </td> <tr><td> <code title="">maltese;</code> </td> <td> U+02720 </td> <td> <span>&#10016;</span> </td> <tr><td> <code title="">map;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">mapsto;</code> </td> <td> U+021A6 </td> <td> <span>&#8614;</span> </td> <tr><td> <code title="">mapstodown;</code> </td> <td> U+021A7 </td> <td> <span>&#8615;</span> </td> <tr><td> <code title="">mapstoleft;</code> </td> <td> U+021A4 </td> <td> <span>&#8612;</span> </td> <tr><td> <code title="">mapstoup;</code> </td> <td> U+021A5 </td> <td> <span>&#8613;</span> </td> <tr><td> <code title="">marker;</code> </td> <td> U+025AE </td> <td> <span>&#9646;</span> </td> <tr><td> <code title="">mcomma;</code> </td> <td> U+02A29 </td> <td> <span>&#10793;</span> </td> <tr><td> <code title="">mcy;</code> </td> <td> U+0043C </td> <td> <span>&#1084;</span> </td> <tr><td> <code title="">mdash;</code> </td> <td> U+02014 </td> <td> <span>&mdash;</span> </td> <tr><td> <code title="">measuredangle;</code> </td> <td> U+02221 </td> <td> <span>&#8737;</span> </td> <tr><td> <code title="">mfr;</code> </td> <td> U+1D52A </td> <td> <span>&#120106;</span> </td> <tr><td> <code title="">mho;</code> </td> <td> U+02127 </td> <td> <span>&#8487;</span> </td> <tr><td> <code title="">micro;</code> </td> <td> U+000B5 </td> <td> <span>&micro;</span> </td> <tr class=impl><td> <code title="">micro</code> </td> <td> U+000B5 </td> <td> <span title="">&micro;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">mid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">midast;</code> </td> <td> U+0002A </td> <td> <span>*</span> </td> <tr><td> <code title="">midcir;</code> </td> <td> U+02AF0 </td> <td> <span>&#10992;</span> </td> <tr><td> <code title="">middot;</code> </td> <td> U+000B7 </td> <td> <span>&middot;</span> </td> <tr class=impl><td> <code title="">middot</code> </td> <td> U+000B7 </td> <td> <span title="">&middot;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">minus;</code> </td> <td> U+02212 </td> <td> <span>&minus;</span> </td> <tr><td> <code title="">minusb;</code> </td> <td> U+0229F </td> <td> <span>&#8863;</span> </td> <tr><td> <code title="">minusd;</code> </td> <td> U+02238 </td> <td> <span>&#8760;</span> </td> <tr><td> <code title="">minusdu;</code> </td> <td> U+02A2A </td> <td> <span>&#10794;</span> </td> <tr><td> <code title="">mlcp;</code> </td> <td> U+02ADB </td> <td> <span>&#10971;</span> </td> <tr><td> <code title="">mldr;</code> </td> <td> U+02026 </td> <td> <span>&hellip;</span> </td> <tr><td> <code title="">mnplus;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">models;</code> </td> <td> U+022A7 </td> <td> <span>&#8871;</span> </td> <tr><td> <code title="">mopf;</code> </td> <td> U+1D55E </td> <td> <span>&#120158;</span> </td> <tr><td> <code title="">mp;</code> </td> <td> U+02213 </td> <td> <span>&#8723;</span> </td> <tr><td> <code title="">mscr;</code> </td> <td> U+1D4C2 </td> <td> <span>&#120002;</span> </td> <tr><td> <code title="">mstpos;</code> </td> <td> U+0223E </td> <td> <span>&#8766;</span> </td> <tr><td> <code title="">mu;</code> </td> <td> U+003BC </td> <td> <span>&mu;</span> </td> <tr><td> <code title="">multimap;</code> </td> <td> U+022B8 </td> <td> <span>&#8888;</span> </td> <tr><td> <code title="">mumap;</code> </td> <td> U+022B8 </td> <td> <span>&#8888;</span> </td> <tr><td> <code title="">nLeftarrow;</code> </td> <td> U+021CD </td> <td> <span>&#8653;</span> </td> <tr><td> <code title="">nLeftrightarrow;</code> </td> <td> U+021CE </td> <td> <span>&#8654;</span> </td> <tr><td> <code title="">nRightarrow;</code> </td> <td> U+021CF </td> <td> <span>&#8655;</span> </td> <tr><td> <code title="">nVDash;</code> </td> <td> U+022AF </td> <td> <span>&#8879;</span> </td> <tr><td> <code title="">nVdash;</code> </td> <td> U+022AE </td> <td> <span>&#8878;</span> </td> <tr><td> <code title="">nabla;</code> </td> <td> U+02207 </td> <td> <span>&nabla;</span> </td> <tr><td> <code title="">nacute;</code> </td> <td> U+00144 </td> <td> <span>&#324;</span> </td> <tr><td> <code title="">nap;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">napos;</code> </td> <td> U+00149 </td> <td> <span>&#329;</span> </td> <tr><td> <code title="">napprox;</code> </td> <td> U+02249 </td> <td> <span>&#8777;</span> </td> <tr><td> <code title="">natur;</code> </td> <td> U+0266E </td> <td> <span>&#9838;</span> </td> <tr><td> <code title="">natural;</code> </td> <td> U+0266E </td> <td> <span>&#9838;</span> </td> <tr><td> <code title="">naturals;</code> </td> <td> U+02115 </td> <td> <span>&#8469;</span> </td> <tr><td> <code title="">nbsp;</code> </td> <td> U+000A0 </td> <td> <span>&nbsp;</span> </td> <tr class=impl><td> <code title="">nbsp</code> </td> <td> U+000A0 </td> <td> <span title="">&nbsp;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ncap;</code> </td> <td> U+02A43 </td> <td> <span>&#10819;</span> </td> <tr><td> <code title="">ncaron;</code> </td> <td> U+00148 </td> <td> <span>&#328;</span> </td> <tr><td> <code title="">ncedil;</code> </td> <td> U+00146 </td> <td> <span>&#326;</span> </td> <tr><td> <code title="">ncong;</code> </td> <td> U+02247 </td> <td> <span>&#8775;</span> </td> <tr><td> <code title="">ncup;</code> </td> <td> U+02A42 </td> <td> <span>&#10818;</span> </td> <tr><td> <code title="">ncy;</code> </td> <td> U+0043D </td> <td> <span>&#1085;</span> </td> <tr><td> <code title="">ndash;</code> </td> <td> U+02013 </td> <td> <span>&ndash;</span> </td> <tr><td> <code title="">ne;</code> </td> <td> U+02260 </td> <td> <span>&ne;</span> </td> <tr><td> <code title="">neArr;</code> </td> <td> U+021D7 </td> <td> <span>&#8663;</span> </td> <tr><td> <code title="">nearhk;</code> </td> <td> U+02924 </td> <td> <span>&#10532;</span> </td> <tr><td> <code title="">nearr;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">nearrow;</code> </td> <td> U+02197 </td> <td> <span>&#8599;</span> </td> <tr><td> <code title="">nequiv;</code> </td> <td> U+02262 </td> <td> <span>&#8802;</span> </td> <tr><td> <code title="">nesear;</code> </td> <td> U+02928 </td> <td> <span>&#10536;</span> </td> <tr><td> <code title="">nexist;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">nexists;</code> </td> <td> U+02204 </td> <td> <span>&#8708;</span> </td> <tr><td> <code title="">nfr;</code> </td> <td> U+1D52B </td> <td> <span>&#120107;</span> </td> <tr><td> <code title="">nge;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">ngeq;</code> </td> <td> U+02271 </td> <td> <span>&#8817;</span> </td> <tr><td> <code title="">ngsim;</code> </td> <td> U+02275 </td> <td> <span>&#8821;</span> </td> <tr><td> <code title="">ngt;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">ngtr;</code> </td> <td> U+0226F </td> <td> <span>&#8815;</span> </td> <tr><td> <code title="">nhArr;</code> </td> <td> U+021CE </td> <td> <span>&#8654;</span> </td> <tr><td> <code title="">nharr;</code> </td> <td> U+021AE </td> <td> <span>&#8622;</span> </td> <tr><td> <code title="">nhpar;</code> </td> <td> U+02AF2 </td> <td> <span>&#10994;</span> </td> <tr><td> <code title="">ni;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">nis;</code> </td> <td> U+022FC </td> <td> <span>&#8956;</span> </td> <tr><td> <code title="">nisd;</code> </td> <td> U+022FA </td> <td> <span>&#8954;</span> </td> <tr><td> <code title="">niv;</code> </td> <td> U+0220B </td> <td> <span>&ni;</span> </td> <tr><td> <code title="">njcy;</code> </td> <td> U+0045A </td> <td> <span>&#1114;</span> </td> <tr><td> <code title="">nlArr;</code> </td> <td> U+021CD </td> <td> <span>&#8653;</span> </td> <tr><td> <code title="">nlarr;</code> </td> <td> U+0219A </td> <td> <span>&#8602;</span> </td> <tr><td> <code title="">nldr;</code> </td> <td> U+02025 </td> <td> <span>&#8229;</span> </td> <tr><td> <code title="">nle;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">nleftarrow;</code> </td> <td> U+0219A </td> <td> <span>&#8602;</span> </td> <tr><td> <code title="">nleftrightarrow;</code> </td> <td> U+021AE </td> <td> <span>&#8622;</span> </td> <tr><td> <code title="">nleq;</code> </td> <td> U+02270 </td> <td> <span>&#8816;</span> </td> <tr><td> <code title="">nless;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">nlsim;</code> </td> <td> U+02274 </td> <td> <span>&#8820;</span> </td> <tr><td> <code title="">nlt;</code> </td> <td> U+0226E </td> <td> <span>&#8814;</span> </td> <tr><td> <code title="">nltri;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">nltrie;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">nmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nopf;</code> </td> <td> U+1D55F </td> <td> <span>&#120159;</span> </td> <tr><td> <code title="">not;</code> </td> <td> U+000AC </td> <td> <span>&not;</span> </td> <tr class=impl><td> <code title="">not</code> </td> <td> U+000AC </td> <td> <span title="">&not;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">notin;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">notinva;</code> </td> <td> U+02209 </td> <td> <span>&notin;</span> </td> <tr><td> <code title="">notinvb;</code> </td> <td> U+022F7 </td> <td> <span>&#8951;</span> </td> <tr><td> <code title="">notinvc;</code> </td> <td> U+022F6 </td> <td> <span>&#8950;</span> </td> <tr><td> <code title="">notni;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">notniva;</code> </td> <td> U+0220C </td> <td> <span>&#8716;</span> </td> <tr><td> <code title="">notnivb;</code> </td> <td> U+022FE </td> <td> <span>&#8958;</span> </td> <tr><td> <code title="">notnivc;</code> </td> <td> U+022FD </td> <td> <span>&#8957;</span> </td> <tr><td> <code title="">npar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nparallel;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">npolint;</code> </td> <td> U+02A14 </td> <td> <span>&#10772;</span> </td> <tr><td> <code title="">npr;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">nprcue;</code> </td> <td> U+022E0 </td> <td> <span>&#8928;</span> </td> <tr><td> <code title="">nprec;</code> </td> <td> U+02280 </td> <td> <span>&#8832;</span> </td> <tr><td> <code title="">nrArr;</code> </td> <td> U+021CF </td> <td> <span>&#8655;</span> </td> <tr><td> <code title="">nrarr;</code> </td> <td> U+0219B </td> <td> <span>&#8603;</span> </td> <tr><td> <code title="">nrightarrow;</code> </td> <td> U+0219B </td> <td> <span>&#8603;</span> </td> <tr><td> <code title="">nrtri;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">nrtrie;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">nsc;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">nsccue;</code> </td> <td> U+022E1 </td> <td> <span>&#8929;</span> </td> <tr><td> <code title="">nscr;</code> </td> <td> U+1D4C3 </td> <td> <span>&#120003;</span> </td> <tr><td> <code title="">nshortmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nshortparallel;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nsim;</code> </td> <td> U+02241 </td> <td> <span>&#8769;</span> </td> <tr><td> <code title="">nsime;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">nsimeq;</code> </td> <td> U+02244 </td> <td> <span>&#8772;</span> </td> <tr><td> <code title="">nsmid;</code> </td> <td> U+02224 </td> <td> <span>&#8740;</span> </td> <tr><td> <code title="">nspar;</code> </td> <td> U+02226 </td> <td> <span>&#8742;</span> </td> <tr><td> <code title="">nsqsube;</code> </td> <td> U+022E2 </td> <td> <span>&#8930;</span> </td> <tr><td> <code title="">nsqsupe;</code> </td> <td> U+022E3 </td> <td> <span>&#8931;</span> </td> <tr><td> <code title="">nsub;</code> </td> <td> U+02284 </td> <td> <span>&nsub;</span> </td> <tr><td> <code title="">nsube;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">nsubseteq;</code> </td> <td> U+02288 </td> <td> <span>&#8840;</span> </td> <tr><td> <code title="">nsucc;</code> </td> <td> U+02281 </td> <td> <span>&#8833;</span> </td> <tr><td> <code title="">nsup;</code> </td> <td> U+02285 </td> <td> <span>&#8837;</span> </td> <tr><td> <code title="">nsupe;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">nsupseteq;</code> </td> <td> U+02289 </td> <td> <span>&#8841;</span> </td> <tr><td> <code title="">ntgl;</code> </td> <td> U+02279 </td> <td> <span>&#8825;</span> </td> <tr><td> <code title="">ntilde;</code> </td> <td> U+000F1 </td> <td> <span>&ntilde;</span> </td> <tr class=impl><td> <code title="">ntilde</code> </td> <td> U+000F1 </td> <td> <span title="">&ntilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ntlg;</code> </td> <td> U+02278 </td> <td> <span>&#8824;</span> </td> <tr><td> <code title="">ntriangleleft;</code> </td> <td> U+022EA </td> <td> <span>&#8938;</span> </td> <tr><td> <code title="">ntrianglelefteq;</code> </td> <td> U+022EC </td> <td> <span>&#8940;</span> </td> <tr><td> <code title="">ntriangleright;</code> </td> <td> U+022EB </td> <td> <span>&#8939;</span> </td> <tr><td> <code title="">ntrianglerighteq;</code> </td> <td> U+022ED </td> <td> <span>&#8941;</span> </td> <tr><td> <code title="">nu;</code> </td> <td> U+003BD </td> <td> <span>&nu;</span> </td> <tr><td> <code title="">num;</code> </td> <td> U+00023 </td> <td> <span>#</span> </td> <tr><td> <code title="">numero;</code> </td> <td> U+02116 </td> <td> <span>&#8470;</span> </td> <tr><td> <code title="">numsp;</code> </td> <td> U+02007 </td> <td> <span>&#8199;</span> </td> <tr><td> <code title="">nvDash;</code> </td> <td> U+022AD </td> <td> <span>&#8877;</span> </td> <tr><td> <code title="">nvHarr;</code> </td> <td> U+02904 </td> <td> <span>&#10500;</span> </td> <tr><td> <code title="">nvdash;</code> </td> <td> U+022AC </td> <td> <span>&#8876;</span> </td> <tr><td> <code title="">nvinfin;</code> </td> <td> U+029DE </td> <td> <span>&#10718;</span> </td> <tr><td> <code title="">nvlArr;</code> </td> <td> U+02902 </td> <td> <span>&#10498;</span> </td> <tr><td> <code title="">nvrArr;</code> </td> <td> U+02903 </td> <td> <span>&#10499;</span> </td> <tr><td> <code title="">nwArr;</code> </td> <td> U+021D6 </td> <td> <span>&#8662;</span> </td> <tr><td> <code title="">nwarhk;</code> </td> <td> U+02923 </td> <td> <span>&#10531;</span> </td> <tr><td> <code title="">nwarr;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">nwarrow;</code> </td> <td> U+02196 </td> <td> <span>&#8598;</span> </td> <tr><td> <code title="">nwnear;</code> </td> <td> U+02927 </td> <td> <span>&#10535;</span> </td> <tr><td> <code title="">oS;</code> </td> <td> U+024C8 </td> <td> <span>&#9416;</span> </td> <tr><td> <code title="">oacute;</code> </td> <td> U+000F3 </td> <td> <span>&oacute;</span> </td> <tr class=impl><td> <code title="">oacute</code> </td> <td> U+000F3 </td> <td> <span title="">&oacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">oast;</code> </td> <td> U+0229B </td> <td> <span>&#8859;</span> </td> <tr><td> <code title="">ocir;</code> </td> <td> U+0229A </td> <td> <span>&#8858;</span> </td> <tr><td> <code title="">ocirc;</code> </td> <td> U+000F4 </td> <td> <span>&ocirc;</span> </td> <tr class=impl><td> <code title="">ocirc</code> </td> <td> U+000F4 </td> <td> <span title="">&ocirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ocy;</code> </td> <td> U+0043E </td> <td> <span>&#1086;</span> </td> <tr><td> <code title="">odash;</code> </td> <td> U+0229D </td> <td> <span>&#8861;</span> </td> <tr><td> <code title="">odblac;</code> </td> <td> U+00151 </td> <td> <span>&#337;</span> </td> <tr><td> <code title="">odiv;</code> </td> <td> U+02A38 </td> <td> <span>&#10808;</span> </td> <tr><td> <code title="">odot;</code> </td> <td> U+02299 </td> <td> <span>&#8857;</span> </td> <tr><td> <code title="">odsold;</code> </td> <td> U+029BC </td> <td> <span>&#10684;</span> </td> <tr><td> <code title="">oelig;</code> </td> <td> U+00153 </td> <td> <span>&oelig;</span> </td> <tr><td> <code title="">ofcir;</code> </td> <td> U+029BF </td> <td> <span>&#10687;</span> </td> <tr><td> <code title="">ofr;</code> </td> <td> U+1D52C </td> <td> <span>&#120108;</span> </td> <tr><td> <code title="">ogon;</code> </td> <td> U+002DB </td> <td> <span>&#731;</span> </td> <tr><td> <code title="">ograve;</code> </td> <td> U+000F2 </td> <td> <span>&ograve;</span> </td> <tr class=impl><td> <code title="">ograve</code> </td> <td> U+000F2 </td> <td> <span title="">&ograve;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ogt;</code> </td> <td> U+029C1 </td> <td> <span>&#10689;</span> </td> <tr><td> <code title="">ohbar;</code> </td> <td> U+029B5 </td> <td> <span>&#10677;</span> </td> <tr><td> <code title="">ohm;</code> </td> <td> U+003A9 </td> <td> <span>&Omega;</span> </td> <tr><td> <code title="">oint;</code> </td> <td> U+0222E </td> <td> <span>&#8750;</span> </td> <tr><td> <code title="">olarr;</code> </td> <td> U+021BA </td> <td> <span>&#8634;</span> </td> <tr><td> <code title="">olcir;</code> </td> <td> U+029BE </td> <td> <span>&#10686;</span> </td> <tr><td> <code title="">olcross;</code> </td> <td> U+029BB </td> <td> <span>&#10683;</span> </td> <tr><td> <code title="">oline;</code> </td> <td> U+0203E </td> <td> <span>&oline;</span> </td> <tr><td> <code title="">olt;</code> </td> <td> U+029C0 </td> <td> <span>&#10688;</span> </td> <tr><td> <code title="">omacr;</code> </td> <td> U+0014D </td> <td> <span>&#333;</span> </td> <tr><td> <code title="">omega;</code> </td> <td> U+003C9 </td> <td> <span>&omega;</span> </td> <tr><td> <code title="">omicron;</code> </td> <td> U+003BF </td> <td> <span>&omicron;</span> </td> <tr><td> <code title="">omid;</code> </td> <td> U+029B6 </td> <td> <span>&#10678;</span> </td> <tr><td> <code title="">ominus;</code> </td> <td> U+02296 </td> <td> <span>&#8854;</span> </td> <tr><td> <code title="">oopf;</code> </td> <td> U+1D560 </td> <td> <span>&#120160;</span> </td> <tr><td> <code title="">opar;</code> </td> <td> U+029B7 </td> <td> <span>&#10679;</span> </td> <tr><td> <code title="">operp;</code> </td> <td> U+029B9 </td> <td> <span>&#10681;</span> </td> <tr><td> <code title="">oplus;</code> </td> <td> U+02295 </td> <td> <span>&oplus;</span> </td> <tr><td> <code title="">or;</code> </td> <td> U+02228 </td> <td> <span>&or;</span> </td> <tr><td> <code title="">orarr;</code> </td> <td> U+021BB </td> <td> <span>&#8635;</span> </td> <tr><td> <code title="">ord;</code> </td> <td> U+02A5D </td> <td> <span>&#10845;</span> </td> <tr><td> <code title="">order;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">orderof;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">ordf;</code> </td> <td> U+000AA </td> <td> <span>&ordf;</span> </td> <tr class=impl><td> <code title="">ordf</code> </td> <td> U+000AA </td> <td> <span title="">&ordf;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ordm;</code> </td> <td> U+000BA </td> <td> <span>&ordm;</span> </td> <tr class=impl><td> <code title="">ordm</code> </td> <td> U+000BA </td> <td> <span title="">&ordm;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">origof;</code> </td> <td> U+022B6 </td> <td> <span>&#8886;</span> </td> <tr><td> <code title="">oror;</code> </td> <td> U+02A56 </td> <td> <span>&#10838;</span> </td> <tr><td> <code title="">orslope;</code> </td> <td> U+02A57 </td> <td> <span>&#10839;</span> </td> <tr><td> <code title="">orv;</code> </td> <td> U+02A5B </td> <td> <span>&#10843;</span> </td> <tr><td> <code title="">oscr;</code> </td> <td> U+02134 </td> <td> <span>&#8500;</span> </td> <tr><td> <code title="">oslash;</code> </td> <td> U+000F8 </td> <td> <span>&oslash;</span> </td> <tr class=impl><td> <code title="">oslash</code> </td> <td> U+000F8 </td> <td> <span title="">&oslash;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">osol;</code> </td> <td> U+02298 </td> <td> <span>&#8856;</span> </td> <tr><td> <code title="">otilde;</code> </td> <td> U+000F5 </td> <td> <span>&otilde;</span> </td> <tr class=impl><td> <code title="">otilde</code> </td> <td> U+000F5 </td> <td> <span title="">&otilde;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">otimes;</code> </td> <td> U+02297 </td> <td> <span>&otimes;</span> </td> <tr><td> <code title="">otimesas;</code> </td> <td> U+02A36 </td> <td> <span>&#10806;</span> </td> <tr><td> <code title="">ouml;</code> </td> <td> U+000F6 </td> <td> <span>&ouml;</span> </td> <tr class=impl><td> <code title="">ouml</code> </td> <td> U+000F6 </td> <td> <span title="">&ouml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ovbar;</code> </td> <td> U+0233D </td> <td> <span>&#9021;</span> </td> <tr><td> <code title="">par;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">para;</code> </td> <td> U+000B6 </td> <td> <span>&para;</span> </td> <tr class=impl><td> <code title="">para</code> </td> <td> U+000B6 </td> <td> <span title="">&para;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">parallel;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">parsim;</code> </td> <td> U+02AF3 </td> <td> <span>&#10995;</span> </td> <tr><td> <code title="">parsl;</code> </td> <td> U+02AFD </td> <td> <span>&#11005;</span> </td> <tr><td> <code title="">part;</code> </td> <td> U+02202 </td> <td> <span>&part;</span> </td> <tr><td> <code title="">pcy;</code> </td> <td> U+0043F </td> <td> <span>&#1087;</span> </td> <tr><td> <code title="">percnt;</code> </td> <td> U+00025 </td> <td> <span>%</span> </td> <tr><td> <code title="">period;</code> </td> <td> U+0002E </td> <td> <span>.</span> </td> <tr><td> <code title="">permil;</code> </td> <td> U+02030 </td> <td> <span>&permil;</span> </td> <tr><td> <code title="">perp;</code> </td> <td> U+022A5 </td> <td> <span>&perp;</span> </td> <tr><td> <code title="">pertenk;</code> </td> <td> U+02031 </td> <td> <span>&#8241;</span> </td> <tr><td> <code title="">pfr;</code> </td> <td> U+1D52D </td> <td> <span>&#120109;</span> </td> <tr><td> <code title="">phi;</code> </td> <td> U+003C6 </td> <td> <span>&phi;</span> </td> <tr><td> <code title="">phiv;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">phmmat;</code> </td> <td> U+02133 </td> <td> <span>&#8499;</span> </td> <tr><td> <code title="">phone;</code> </td> <td> U+0260E </td> <td> <span>&#9742;</span> </td> <tr><td> <code title="">pi;</code> </td> <td> U+003C0 </td> <td> <span>&pi;</span> </td> <tr><td> <code title="">pitchfork;</code> </td> <td> U+022D4 </td> <td> <span>&#8916;</span> </td> <tr><td> <code title="">piv;</code> </td> <td> U+003D6 </td> <td> <span>&piv;</span> </td> <tr><td> <code title="">planck;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">planckh;</code> </td> <td> U+0210E </td> <td> <span>&#8462;</span> </td> <tr><td> <code title="">plankv;</code> </td> <td> U+0210F </td> <td> <span>&#8463;</span> </td> <tr><td> <code title="">plus;</code> </td> <td> U+0002B </td> <td> <span>+</span> </td> <tr><td> <code title="">plusacir;</code> </td> <td> U+02A23 </td> <td> <span>&#10787;</span> </td> <tr><td> <code title="">plusb;</code> </td> <td> U+0229E </td> <td> <span>&#8862;</span> </td> <tr><td> <code title="">pluscir;</code> </td> <td> U+02A22 </td> <td> <span>&#10786;</span> </td> <tr><td> <code title="">plusdo;</code> </td> <td> U+02214 </td> <td> <span>&#8724;</span> </td> <tr><td> <code title="">plusdu;</code> </td> <td> U+02A25 </td> <td> <span>&#10789;</span> </td> <tr><td> <code title="">pluse;</code> </td> <td> U+02A72 </td> <td> <span>&#10866;</span> </td> <tr><td> <code title="">plusmn;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr class=impl><td> <code title="">plusmn</code> </td> <td> U+000B1 </td> <td> <span title="">&plusmn;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">plussim;</code> </td> <td> U+02A26 </td> <td> <span>&#10790;</span> </td> <tr><td> <code title="">plustwo;</code> </td> <td> U+02A27 </td> <td> <span>&#10791;</span> </td> <tr><td> <code title="">pm;</code> </td> <td> U+000B1 </td> <td> <span>&plusmn;</span> </td> <tr><td> <code title="">pointint;</code> </td> <td> U+02A15 </td> <td> <span>&#10773;</span> </td> <tr><td> <code title="">popf;</code> </td> <td> U+1D561 </td> <td> <span>&#120161;</span> </td> <tr><td> <code title="">pound;</code> </td> <td> U+000A3 </td> <td> <span>&pound;</span> </td> <tr class=impl><td> <code title="">pound</code> </td> <td> U+000A3 </td> <td> <span title="">&pound;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">pr;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">prE;</code> </td> <td> U+02AB3 </td> <td> <span>&#10931;</span> </td> <tr><td> <code title="">prap;</code> </td> <td> U+02AB7 </td> <td> <span>&#10935;</span> </td> <tr><td> <code title="">prcue;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">pre;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">prec;</code> </td> <td> U+0227A </td> <td> <span>&#8826;</span> </td> <tr><td> <code title="">precapprox;</code> </td> <td> U+02AB7 </td> <td> <span>&#10935;</span> </td> <tr><td> <code title="">preccurlyeq;</code> </td> <td> U+0227C </td> <td> <span>&#8828;</span> </td> <tr><td> <code title="">preceq;</code> </td> <td> U+02AAF </td> <td> <span>&#10927;</span> </td> <tr><td> <code title="">precnapprox;</code> </td> <td> U+02AB9 </td> <td> <span>&#10937;</span> </td> <tr><td> <code title="">precneqq;</code> </td> <td> U+02AB5 </td> <td> <span>&#10933;</span> </td> <tr><td> <code title="">precnsim;</code> </td> <td> U+022E8 </td> <td> <span>&#8936;</span> </td> <tr><td> <code title="">precsim;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">prime;</code> </td> <td> U+02032 </td> <td> <span>&prime;</span> </td> <tr><td> <code title="">primes;</code> </td> <td> U+02119 </td> <td> <span>&#8473;</span> </td> <tr><td> <code title="">prnE;</code> </td> <td> U+02AB5 </td> <td> <span>&#10933;</span> </td> <tr><td> <code title="">prnap;</code> </td> <td> U+02AB9 </td> <td> <span>&#10937;</span> </td> <tr><td> <code title="">prnsim;</code> </td> <td> U+022E8 </td> <td> <span>&#8936;</span> </td> <tr><td> <code title="">prod;</code> </td> <td> U+0220F </td> <td> <span>&prod;</span> </td> <tr><td> <code title="">profalar;</code> </td> <td> U+0232E </td> <td> <span>&#9006;</span> </td> <tr><td> <code title="">profline;</code> </td> <td> U+02312 </td> <td> <span>&#8978;</span> </td> <tr><td> <code title="">profsurf;</code> </td> <td> U+02313 </td> <td> <span>&#8979;</span> </td> <tr><td> <code title="">prop;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">propto;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">prsim;</code> </td> <td> U+0227E </td> <td> <span>&#8830;</span> </td> <tr><td> <code title="">prurel;</code> </td> <td> U+022B0 </td> <td> <span>&#8880;</span> </td> <tr><td> <code title="">pscr;</code> </td> <td> U+1D4C5 </td> <td> <span>&#120005;</span> </td> <tr><td> <code title="">psi;</code> </td> <td> U+003C8 </td> <td> <span>&psi;</span> </td> <tr><td> <code title="">puncsp;</code> </td> <td> U+02008 </td> <td> <span>&#8200;</span> </td> <tr><td> <code title="">qfr;</code> </td> <td> U+1D52E </td> <td> <span>&#120110;</span> </td> <tr><td> <code title="">qint;</code> </td> <td> U+02A0C </td> <td> <span>&#10764;</span> </td> <tr><td> <code title="">qopf;</code> </td> <td> U+1D562 </td> <td> <span>&#120162;</span> </td> <tr><td> <code title="">qprime;</code> </td> <td> U+02057 </td> <td> <span>&#8279;</span> </td> <tr><td> <code title="">qscr;</code> </td> <td> U+1D4C6 </td> <td> <span>&#120006;</span> </td> <tr><td> <code title="">quaternions;</code> </td> <td> U+0210D </td> <td> <span>&#8461;</span> </td> <tr><td> <code title="">quatint;</code> </td> <td> U+02A16 </td> <td> <span>&#10774;</span> </td> <tr><td> <code title="">quest;</code> </td> <td> U+0003F </td> <td> <span>?</span> </td> <tr><td> <code title="">questeq;</code> </td> <td> U+0225F </td> <td> <span>&#8799;</span> </td> <tr><td> <code title="">quot;</code> </td> <td> U+00022 </td> <td> <span>"</span> </td> <tr class=impl><td> <code title="">quot</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rAarr;</code> </td> <td> U+021DB </td> <td> <span>&#8667;</span> </td> <tr><td> <code title="">rArr;</code> </td> <td> U+021D2 </td> <td> <span>&rArr;</span> </td> <tr><td> <code title="">rAtail;</code> </td> <td> U+0291C </td> <td> <span>&#10524;</span> </td> <tr><td> <code title="">rBarr;</code> </td> <td> U+0290F </td> <td> <span>&#10511;</span> </td> <tr><td> <code title="">rHar;</code> </td> <td> U+02964 </td> <td> <span>&#10596;</span> </td> <tr><td> <code title="">racute;</code> </td> <td> U+00155 </td> <td> <span>&#341;</span> </td> <tr><td> <code title="">radic;</code> </td> <td> U+0221A </td> <td> <span>&radic;</span> </td> <tr><td> <code title="">raemptyv;</code> </td> <td> U+029B3 </td> <td> <span>&#10675;</span> </td> <tr><td> <code title="">rang;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">rangd;</code> </td> <td> U+02992 </td> <td> <span>&#10642;</span> </td> <tr><td> <code title="">range;</code> </td> <td> U+029A5 </td> <td> <span>&#10661;</span> </td> <tr><td> <code title="">rangle;</code> </td> <td> U+027E9 </td> <td> <span>&rang;</span> </td> <tr><td> <code title="">raquo;</code> </td> <td> U+000BB </td> <td> <span>&raquo;</span> </td> <tr class=impl><td> <code title="">raquo</code> </td> <td> U+000BB </td> <td> <span title="">&raquo;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rarr;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">rarrap;</code> </td> <td> U+02975 </td> <td> <span>&#10613;</span> </td> <tr><td> <code title="">rarrb;</code> </td> <td> U+021E5 </td> <td> <span>&#8677;</span> </td> <tr><td> <code title="">rarrbfs;</code> </td> <td> U+02920 </td> <td> <span>&#10528;</span> </td> <tr><td> <code title="">rarrc;</code> </td> <td> U+02933 </td> <td> <span>&#10547;</span> </td> <tr><td> <code title="">rarrfs;</code> </td> <td> U+0291E </td> <td> <span>&#10526;</span> </td> <tr><td> <code title="">rarrhk;</code> </td> <td> U+021AA </td> <td> <span>&#8618;</span> </td> <tr><td> <code title="">rarrlp;</code> </td> <td> U+021AC </td> <td> <span>&#8620;</span> </td> <tr><td> <code title="">rarrpl;</code> </td> <td> U+02945 </td> <td> <span>&#10565;</span> </td> <tr><td> <code title="">rarrsim;</code> </td> <td> U+02974 </td> <td> <span>&#10612;</span> </td> <tr><td> <code title="">rarrtl;</code> </td> <td> U+021A3 </td> <td> <span>&#8611;</span> </td> <tr><td> <code title="">rarrw;</code> </td> <td> U+0219D </td> <td> <span>&#8605;</span> </td> <tr><td> <code title="">ratail;</code> </td> <td> U+0291A </td> <td> <span>&#10522;</span> </td> <tr><td> <code title="">ratio;</code> </td> <td> U+02236 </td> <td> <span>&#8758;</span> </td> <tr><td> <code title="">rationals;</code> </td> <td> U+0211A </td> <td> <span>&#8474;</span> </td> <tr><td> <code title="">rbarr;</code> </td> <td> U+0290D </td> <td> <span>&#10509;</span> </td> <tr><td> <code title="">rbbrk;</code> </td> <td> U+02773 </td> <td> <span>&#10099;</span> </td> <tr><td> <code title="">rbrace;</code> </td> <td> U+0007D </td> <td> <span>}</span> </td> <tr><td> <code title="">rbrack;</code> </td> <td> U+0005D </td> <td> <span>]</span> </td> <tr><td> <code title="">rbrke;</code> </td> <td> U+0298C </td> <td> <span>&#10636;</span> </td> <tr><td> <code title="">rbrksld;</code> </td> <td> U+0298E </td> <td> <span>&#10638;</span> </td> <tr><td> <code title="">rbrkslu;</code> </td> <td> U+02990 </td> <td> <span>&#10640;</span> </td> <tr><td> <code title="">rcaron;</code> </td> <td> U+00159 </td> <td> <span>&#345;</span> </td> <tr><td> <code title="">rcedil;</code> </td> <td> U+00157 </td> <td> <span>&#343;</span> </td> <tr><td> <code title="">rceil;</code> </td> <td> U+02309 </td> <td> <span>&rceil;</span> </td> <tr><td> <code title="">rcub;</code> </td> <td> U+0007D </td> <td> <span>}</span> </td> <tr><td> <code title="">rcy;</code> </td> <td> U+00440 </td> <td> <span>&#1088;</span> </td> <tr><td> <code title="">rdca;</code> </td> <td> U+02937 </td> <td> <span>&#10551;</span> </td> <tr><td> <code title="">rdldhar;</code> </td> <td> U+02969 </td> <td> <span>&#10601;</span> </td> <tr><td> <code title="">rdquo;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">rdquor;</code> </td> <td> U+0201D </td> <td> <span>&rdquo;</span> </td> <tr><td> <code title="">rdsh;</code> </td> <td> U+021B3 </td> <td> <span>&#8627;</span> </td> <tr><td> <code title="">real;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">realine;</code> </td> <td> U+0211B </td> <td> <span>&#8475;</span> </td> <tr><td> <code title="">realpart;</code> </td> <td> U+0211C </td> <td> <span>&real;</span> </td> <tr><td> <code title="">reals;</code> </td> <td> U+0211D </td> <td> <span>&#8477;</span> </td> <tr><td> <code title="">rect;</code> </td> <td> U+025AD </td> <td> <span>&#9645;</span> </td> <tr><td> <code title="">reg;</code> </td> <td> U+000AE </td> <td> <span>&reg;</span> </td> <tr class=impl><td> <code title="">reg</code> </td> <td> U+000AE </td> <td> <span title="">&reg;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">rfisht;</code> </td> <td> U+0297D </td> <td> <span>&#10621;</span> </td> <tr><td> <code title="">rfloor;</code> </td> <td> U+0230B </td> <td> <span>&rfloor;</span> </td> <tr><td> <code title="">rfr;</code> </td> <td> U+1D52F </td> <td> <span>&#120111;</span> </td> <tr><td> <code title="">rhard;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">rharu;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">rharul;</code> </td> <td> U+0296C </td> <td> <span>&#10604;</span> </td> <tr><td> <code title="">rho;</code> </td> <td> U+003C1 </td> <td> <span>&rho;</span> </td> <tr><td> <code title="">rhov;</code> </td> <td> U+003F1 </td> <td> <span>&#1009;</span> </td> <tr><td> <code title="">rightarrow;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">rightarrowtail;</code> </td> <td> U+021A3 </td> <td> <span>&#8611;</span> </td> <tr><td> <code title="">rightharpoondown;</code> </td> <td> U+021C1 </td> <td> <span>&#8641;</span> </td> <tr><td> <code title="">rightharpoonup;</code> </td> <td> U+021C0 </td> <td> <span>&#8640;</span> </td> <tr><td> <code title="">rightleftarrows;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">rightleftharpoons;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">rightrightarrows;</code> </td> <td> U+021C9 </td> <td> <span>&#8649;</span> </td> <tr><td> <code title="">rightsquigarrow;</code> </td> <td> U+0219D </td> <td> <span>&#8605;</span> </td> <tr><td> <code title="">rightthreetimes;</code> </td> <td> U+022CC </td> <td> <span>&#8908;</span> </td> <tr><td> <code title="">ring;</code> </td> <td> U+002DA </td> <td> <span>&#730;</span> </td> <tr><td> <code title="">risingdotseq;</code> </td> <td> U+02253 </td> <td> <span>&#8787;</span> </td> <tr><td> <code title="">rlarr;</code> </td> <td> U+021C4 </td> <td> <span>&#8644;</span> </td> <tr><td> <code title="">rlhar;</code> </td> <td> U+021CC </td> <td> <span>&#8652;</span> </td> <tr><td> <code title="">rlm;</code> </td> <td> U+0200F </td> <td> <span>&rlm;</span> </td> <tr><td> <code title="">rmoust;</code> </td> <td> U+023B1 </td> <td> <span>&#9137;</span> </td> <tr><td> <code title="">rmoustache;</code> </td> <td> U+023B1 </td> <td> <span>&#9137;</span> </td> <tr><td> <code title="">rnmid;</code> </td> <td> U+02AEE </td> <td> <span>&#10990;</span> </td> <tr><td> <code title="">roang;</code> </td> <td> U+027ED </td> <td> <span>&#10221;</span> </td> <tr><td> <code title="">roarr;</code> </td> <td> U+021FE </td> <td> <span>&#8702;</span> </td> <tr><td> <code title="">robrk;</code> </td> <td> U+027E7 </td> <td> <span>&#10215;</span> </td> <tr><td> <code title="">ropar;</code> </td> <td> U+02986 </td> <td> <span>&#10630;</span> </td> <tr><td> <code title="">ropf;</code> </td> <td> U+1D563 </td> <td> <span>&#120163;</span> </td> <tr><td> <code title="">roplus;</code> </td> <td> U+02A2E </td> <td> <span>&#10798;</span> </td> <tr><td> <code title="">rotimes;</code> </td> <td> U+02A35 </td> <td> <span>&#10805;</span> </td> <tr><td> <code title="">rpar;</code> </td> <td> U+00029 </td> <td> <span>)</span> </td> <tr><td> <code title="">rpargt;</code> </td> <td> U+02994 </td> <td> <span>&#10644;</span> </td> <tr><td> <code title="">rppolint;</code> </td> <td> U+02A12 </td> <td> <span>&#10770;</span> </td> <tr><td> <code title="">rrarr;</code> </td> <td> U+021C9 </td> <td> <span>&#8649;</span> </td> <tr><td> <code title="">rsaquo;</code> </td> <td> U+0203A </td> <td> <span>&rsaquo;</span> </td> <tr><td> <code title="">rscr;</code> </td> <td> U+1D4C7 </td> <td> <span>&#120007;</span> </td> <tr><td> <code title="">rsh;</code> </td> <td> U+021B1 </td> <td> <span>&#8625;</span> </td> <tr><td> <code title="">rsqb;</code> </td> <td> U+0005D </td> <td> <span>]</span> </td> <tr><td> <code title="">rsquo;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">rsquor;</code> </td> <td> U+02019 </td> <td> <span>&rsquo;</span> </td> <tr><td> <code title="">rthree;</code> </td> <td> U+022CC </td> <td> <span>&#8908;</span> </td> <tr><td> <code title="">rtimes;</code> </td> <td> U+022CA </td> <td> <span>&#8906;</span> </td> <tr><td> <code title="">rtri;</code> </td> <td> U+025B9 </td> <td> <span>&#9657;</span> </td> <tr><td> <code title="">rtrie;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">rtrif;</code> </td> <td> U+025B8 </td> <td> <span>&#9656;</span> </td> <tr><td> <code title="">rtriltri;</code> </td> <td> U+029CE </td> <td> <span>&#10702;</span> </td> <tr><td> <code title="">ruluhar;</code> </td> <td> U+02968 </td> <td> <span>&#10600;</span> </td> <tr><td> <code title="">rx;</code> </td> <td> U+0211E </td> <td> <span>&#8478;</span> </td> <tr><td> <code title="">sacute;</code> </td> <td> U+0015B </td> <td> <span>&#347;</span> </td> <tr><td> <code title="">sbquo;</code> </td> <td> U+0201A </td> <td> <span>&sbquo;</span> </td> <tr><td> <code title="">sc;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">scE;</code> </td> <td> U+02AB4 </td> <td> <span>&#10932;</span> </td> <tr><td> <code title="">scap;</code> </td> <td> U+02AB8 </td> <td> <span>&#10936;</span> </td> <tr><td> <code title="">scaron;</code> </td> <td> U+00161 </td> <td> <span>&scaron;</span> </td> <tr><td> <code title="">sccue;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">sce;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">scedil;</code> </td> <td> U+0015F </td> <td> <span>&#351;</span> </td> <tr><td> <code title="">scirc;</code> </td> <td> U+0015D </td> <td> <span>&#349;</span> </td> <tr><td> <code title="">scnE;</code> </td> <td> U+02AB6 </td> <td> <span>&#10934;</span> </td> <tr><td> <code title="">scnap;</code> </td> <td> U+02ABA </td> <td> <span>&#10938;</span> </td> <tr><td> <code title="">scnsim;</code> </td> <td> U+022E9 </td> <td> <span>&#8937;</span> </td> <tr><td> <code title="">scpolint;</code> </td> <td> U+02A13 </td> <td> <span>&#10771;</span> </td> <tr><td> <code title="">scsim;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">scy;</code> </td> <td> U+00441 </td> <td> <span>&#1089;</span> </td> <tr><td> <code title="">sdot;</code> </td> <td> U+022C5 </td> <td> <span>&sdot;</span> </td> <tr><td> <code title="">sdotb;</code> </td> <td> U+022A1 </td> <td> <span>&#8865;</span> </td> <tr><td> <code title="">sdote;</code> </td> <td> U+02A66 </td> <td> <span>&#10854;</span> </td> <tr><td> <code title="">seArr;</code> </td> <td> U+021D8 </td> <td> <span>&#8664;</span> </td> <tr><td> <code title="">searhk;</code> </td> <td> U+02925 </td> <td> <span>&#10533;</span> </td> <tr><td> <code title="">searr;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">searrow;</code> </td> <td> U+02198 </td> <td> <span>&#8600;</span> </td> <tr><td> <code title="">sect;</code> </td> <td> U+000A7 </td> <td> <span>&sect;</span> </td> <tr class=impl><td> <code title="">sect</code> </td> <td> U+000A7 </td> <td> <span title="">&sect;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">semi;</code> </td> <td> U+0003B </td> <td> <span>;</span> </td> <tr><td> <code title="">seswar;</code> </td> <td> U+02929 </td> <td> <span>&#10537;</span> </td> <tr><td> <code title="">setminus;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">setmn;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">sext;</code> </td> <td> U+02736 </td> <td> <span>&#10038;</span> </td> <tr><td> <code title="">sfr;</code> </td> <td> U+1D530 </td> <td> <span>&#120112;</span> </td> <tr><td> <code title="">sfrown;</code> </td> <td> U+02322 </td> <td> <span>&#8994;</span> </td> <tr><td> <code title="">sharp;</code> </td> <td> U+0266F </td> <td> <span>&#9839;</span> </td> <tr><td> <code title="">shchcy;</code> </td> <td> U+00449 </td> <td> <span>&#1097;</span> </td> <tr><td> <code title="">shcy;</code> </td> <td> U+00448 </td> <td> <span>&#1096;</span> </td> <tr><td> <code title="">shortmid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">shortparallel;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">shy;</code> </td> <td> U+000AD </td> <td> <span>&shy;</span> </td> <tr class=impl><td> <code title="">shy</code> </td> <td> U+000AD </td> <td> <span title="">&shy;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sigma;</code> </td> <td> U+003C3 </td> <td> <span>&sigma;</span> </td> <tr><td> <code title="">sigmaf;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">sigmav;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">sim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">simdot;</code> </td> <td> U+02A6A </td> <td> <span>&#10858;</span> </td> <tr><td> <code title="">sime;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">simeq;</code> </td> <td> U+02243 </td> <td> <span>&#8771;</span> </td> <tr><td> <code title="">simg;</code> </td> <td> U+02A9E </td> <td> <span>&#10910;</span> </td> <tr><td> <code title="">simgE;</code> </td> <td> U+02AA0 </td> <td> <span>&#10912;</span> </td> <tr><td> <code title="">siml;</code> </td> <td> U+02A9D </td> <td> <span>&#10909;</span> </td> <tr><td> <code title="">simlE;</code> </td> <td> U+02A9F </td> <td> <span>&#10911;</span> </td> <tr><td> <code title="">simne;</code> </td> <td> U+02246 </td> <td> <span>&#8774;</span> </td> <tr><td> <code title="">simplus;</code> </td> <td> U+02A24 </td> <td> <span>&#10788;</span> </td> <tr><td> <code title="">simrarr;</code> </td> <td> U+02972 </td> <td> <span>&#10610;</span> </td> <tr><td> <code title="">slarr;</code> </td> <td> U+02190 </td> <td> <span>&larr;</span> </td> <tr><td> <code title="">smallsetminus;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">smashp;</code> </td> <td> U+02A33 </td> <td> <span>&#10803;</span> </td> <tr><td> <code title="">smeparsl;</code> </td> <td> U+029E4 </td> <td> <span>&#10724;</span> </td> <tr><td> <code title="">smid;</code> </td> <td> U+02223 </td> <td> <span>&#8739;</span> </td> <tr><td> <code title="">smile;</code> </td> <td> U+02323 </td> <td> <span>&#8995;</span> </td> <tr><td> <code title="">smt;</code> </td> <td> U+02AAA </td> <td> <span>&#10922;</span> </td> <tr><td> <code title="">smte;</code> </td> <td> U+02AAC </td> <td> <span>&#10924;</span> </td> <tr><td> <code title="">softcy;</code> </td> <td> U+0044C </td> <td> <span>&#1100;</span> </td> <tr><td> <code title="">sol;</code> </td> <td> U+0002F </td> <td> <span>/</span> </td> <tr><td> <code title="">solb;</code> </td> <td> U+029C4 </td> <td> <span>&#10692;</span> </td> <tr><td> <code title="">solbar;</code> </td> <td> U+0233F </td> <td> <span>&#9023;</span> </td> <tr><td> <code title="">sopf;</code> </td> <td> U+1D564 </td> <td> <span>&#120164;</span> </td> <tr><td> <code title="">spades;</code> </td> <td> U+02660 </td> <td> <span>&spades;</span> </td> <tr><td> <code title="">spadesuit;</code> </td> <td> U+02660 </td> <td> <span>&spades;</span> </td> <tr><td> <code title="">spar;</code> </td> <td> U+02225 </td> <td> <span>&#8741;</span> </td> <tr><td> <code title="">sqcap;</code> </td> <td> U+02293 </td> <td> <span>&#8851;</span> </td> <tr><td> <code title="">sqcup;</code> </td> <td> U+02294 </td> <td> <span>&#8852;</span> </td> <tr><td> <code title="">sqsub;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">sqsube;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">sqsubset;</code> </td> <td> U+0228F </td> <td> <span>&#8847;</span> </td> <tr><td> <code title="">sqsubseteq;</code> </td> <td> U+02291 </td> <td> <span>&#8849;</span> </td> <tr><td> <code title="">sqsup;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">sqsupe;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">sqsupset;</code> </td> <td> U+02290 </td> <td> <span>&#8848;</span> </td> <tr><td> <code title="">sqsupseteq;</code> </td> <td> U+02292 </td> <td> <span>&#8850;</span> </td> <tr><td> <code title="">squ;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">square;</code> </td> <td> U+025A1 </td> <td> <span>&#9633;</span> </td> <tr><td> <code title="">squarf;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">squf;</code> </td> <td> U+025AA </td> <td> <span>&#9642;</span> </td> <tr><td> <code title="">srarr;</code> </td> <td> U+02192 </td> <td> <span>&rarr;</span> </td> <tr><td> <code title="">sscr;</code> </td> <td> U+1D4C8 </td> <td> <span>&#120008;</span> </td> <tr><td> <code title="">ssetmn;</code> </td> <td> U+02216 </td> <td> <span>&#8726;</span> </td> <tr><td> <code title="">ssmile;</code> </td> <td> U+02323 </td> <td> <span>&#8995;</span> </td> <tr><td> <code title="">sstarf;</code> </td> <td> U+022C6 </td> <td> <span>&#8902;</span> </td> <tr><td> <code title="">star;</code> </td> <td> U+02606 </td> <td> <span>&#9734;</span> </td> <tr><td> <code title="">starf;</code> </td> <td> U+02605 </td> <td> <span>&#9733;</span> </td> <tr><td> <code title="">straightepsilon;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">straightphi;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">strns;</code> </td> <td> U+000AF </td> <td> <span>&macr;</span> </td> <tr><td> <code title="">sub;</code> </td> <td> U+02282 </td> <td> <span>&sub;</span> </td> <tr><td> <code title="">subE;</code> </td> <td> U+02AC5 </td> <td> <span>&#10949;</span> </td> <tr><td> <code title="">subdot;</code> </td> <td> U+02ABD </td> <td> <span>&#10941;</span> </td> <tr><td> <code title="">sube;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">subedot;</code> </td> <td> U+02AC3 </td> <td> <span>&#10947;</span> </td> <tr><td> <code title="">submult;</code> </td> <td> U+02AC1 </td> <td> <span>&#10945;</span> </td> <tr><td> <code title="">subnE;</code> </td> <td> U+02ACB </td> <td> <span>&#10955;</span> </td> <tr><td> <code title="">subne;</code> </td> <td> U+0228A </td> <td> <span>&#8842;</span> </td> <tr><td> <code title="">subplus;</code> </td> <td> U+02ABF </td> <td> <span>&#10943;</span> </td> <tr><td> <code title="">subrarr;</code> </td> <td> U+02979 </td> <td> <span>&#10617;</span> </td> <tr><td> <code title="">subset;</code> </td> <td> U+02282 </td> <td> <span>&sub;</span> </td> <tr><td> <code title="">subseteq;</code> </td> <td> U+02286 </td> <td> <span>&sube;</span> </td> <tr><td> <code title="">subseteqq;</code> </td> <td> U+02AC5 </td> <td> <span>&#10949;</span> </td> <tr><td> <code title="">subsetneq;</code> </td> <td> U+0228A </td> <td> <span>&#8842;</span> </td> <tr><td> <code title="">subsetneqq;</code> </td> <td> U+02ACB </td> <td> <span>&#10955;</span> </td> <tr><td> <code title="">subsim;</code> </td> <td> U+02AC7 </td> <td> <span>&#10951;</span> </td> <tr><td> <code title="">subsub;</code> </td> <td> U+02AD5 </td> <td> <span>&#10965;</span> </td> <tr><td> <code title="">subsup;</code> </td> <td> U+02AD3 </td> <td> <span>&#10963;</span> </td> <tr><td> <code title="">succ;</code> </td> <td> U+0227B </td> <td> <span>&#8827;</span> </td> <tr><td> <code title="">succapprox;</code> </td> <td> U+02AB8 </td> <td> <span>&#10936;</span> </td> <tr><td> <code title="">succcurlyeq;</code> </td> <td> U+0227D </td> <td> <span>&#8829;</span> </td> <tr><td> <code title="">succeq;</code> </td> <td> U+02AB0 </td> <td> <span>&#10928;</span> </td> <tr><td> <code title="">succnapprox;</code> </td> <td> U+02ABA </td> <td> <span>&#10938;</span> </td> <tr><td> <code title="">succneqq;</code> </td> <td> U+02AB6 </td> <td> <span>&#10934;</span> </td> <tr><td> <code title="">succnsim;</code> </td> <td> U+022E9 </td> <td> <span>&#8937;</span> </td> <tr><td> <code title="">succsim;</code> </td> <td> U+0227F </td> <td> <span>&#8831;</span> </td> <tr><td> <code title="">sum;</code> </td> <td> U+02211 </td> <td> <span>&sum;</span> </td> <tr><td> <code title="">sung;</code> </td> <td> U+0266A </td> <td> <span>&#9834;</span> </td> <tr><td> <code title="">sup1;</code> </td> <td> U+000B9 </td> <td> <span>&sup1;</span> </td> <tr class=impl><td> <code title="">sup1</code> </td> <td> U+000B9 </td> <td> <span title="">&sup1;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup2;</code> </td> <td> U+000B2 </td> <td> <span>&sup2;</span> </td> <tr class=impl><td> <code title="">sup2</code> </td> <td> U+000B2 </td> <td> <span title="">&sup2;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup3;</code> </td> <td> U+000B3 </td> <td> <span>&sup3;</span> </td> <tr class=impl><td> <code title="">sup3</code> </td> <td> U+000B3 </td> <td> <span title="">&sup3;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">sup;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">supE;</code> </td> <td> U+02AC6 </td> <td> <span>&#10950;</span> </td> <tr><td> <code title="">supdot;</code> </td> <td> U+02ABE </td> <td> <span>&#10942;</span> </td> <tr><td> <code title="">supdsub;</code> </td> <td> U+02AD8 </td> <td> <span>&#10968;</span> </td> <tr><td> <code title="">supe;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">supedot;</code> </td> <td> U+02AC4 </td> <td> <span>&#10948;</span> </td> <tr><td> <code title="">suphsol;</code> </td> <td> U+027C9 </td> <td> <span>&#10185;</span> </td> <tr><td> <code title="">suphsub;</code> </td> <td> U+02AD7 </td> <td> <span>&#10967;</span> </td> <tr><td> <code title="">suplarr;</code> </td> <td> U+0297B </td> <td> <span>&#10619;</span> </td> <tr><td> <code title="">supmult;</code> </td> <td> U+02AC2 </td> <td> <span>&#10946;</span> </td> <tr><td> <code title="">supnE;</code> </td> <td> U+02ACC </td> <td> <span>&#10956;</span> </td> <tr><td> <code title="">supne;</code> </td> <td> U+0228B </td> <td> <span>&#8843;</span> </td> <tr><td> <code title="">supplus;</code> </td> <td> U+02AC0 </td> <td> <span>&#10944;</span> </td> <tr><td> <code title="">supset;</code> </td> <td> U+02283 </td> <td> <span>&sup;</span> </td> <tr><td> <code title="">supseteq;</code> </td> <td> U+02287 </td> <td> <span>&supe;</span> </td> <tr><td> <code title="">supseteqq;</code> </td> <td> U+02AC6 </td> <td> <span>&#10950;</span> </td> <tr><td> <code title="">supsetneq;</code> </td> <td> U+0228B </td> <td> <span>&#8843;</span> </td> <tr><td> <code title="">supsetneqq;</code> </td> <td> U+02ACC </td> <td> <span>&#10956;</span> </td> <tr><td> <code title="">supsim;</code> </td> <td> U+02AC8 </td> <td> <span>&#10952;</span> </td> <tr><td> <code title="">supsub;</code> </td> <td> U+02AD4 </td> <td> <span>&#10964;</span> </td> <tr><td> <code title="">supsup;</code> </td> <td> U+02AD6 </td> <td> <span>&#10966;</span> </td> <tr><td> <code title="">swArr;</code> </td> <td> U+021D9 </td> <td> <span>&#8665;</span> </td> <tr><td> <code title="">swarhk;</code> </td> <td> U+02926 </td> <td> <span>&#10534;</span> </td> <tr><td> <code title="">swarr;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">swarrow;</code> </td> <td> U+02199 </td> <td> <span>&#8601;</span> </td> <tr><td> <code title="">swnwar;</code> </td> <td> U+0292A </td> <td> <span>&#10538;</span> </td> <tr><td> <code title="">szlig;</code> </td> <td> U+000DF </td> <td> <span>&szlig;</span> </td> <tr class=impl><td> <code title="">szlig</code> </td> <td> U+000DF </td> <td> <span title="">&szlig;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">target;</code> </td> <td> U+02316 </td> <td> <span>&#8982;</span> </td> <tr><td> <code title="">tau;</code> </td> <td> U+003C4 </td> <td> <span>&tau;</span> </td> <tr><td> <code title="">tbrk;</code> </td> <td> U+023B4 </td> <td> <span>&#9140;</span> </td> <tr><td> <code title="">tcaron;</code> </td> <td> U+00165 </td> <td> <span>&#357;</span> </td> <tr><td> <code title="">tcedil;</code> </td> <td> U+00163 </td> <td> <span>&#355;</span> </td> <tr><td> <code title="">tcy;</code> </td> <td> U+00442 </td> <td> <span>&#1090;</span> </td> <tr><td> <code title="">tdot;</code> </td> <td> U+020DB </td> <td> <span>&#9676;&#8411;</span> </td> <tr><td> <code title="">telrec;</code> </td> <td> U+02315 </td> <td> <span>&#8981;</span> </td> <tr><td> <code title="">tfr;</code> </td> <td> U+1D531 </td> <td> <span>&#120113;</span> </td> <tr><td> <code title="">there4;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">therefore;</code> </td> <td> U+02234 </td> <td> <span>&there4;</span> </td> <tr><td> <code title="">theta;</code> </td> <td> U+003B8 </td> <td> <span>&theta;</span> </td> <tr><td> <code title="">thetasym;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">thetav;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">thickapprox;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">thicksim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">thinsp;</code> </td> <td> U+02009 </td> <td> <span>&thinsp;</span> </td> <tr><td> <code title="">thkap;</code> </td> <td> U+02248 </td> <td> <span>&asymp;</span> </td> <tr><td> <code title="">thksim;</code> </td> <td> U+0223C </td> <td> <span>&sim;</span> </td> <tr><td> <code title="">thorn;</code> </td> <td> U+000FE </td> <td> <span>&thorn;</span> </td> <tr class=impl><td> <code title="">thorn</code> </td> <td> U+000FE </td> <td> <span title="">&thorn;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">tilde;</code> </td> <td> U+002DC </td> <td> <span>&tilde;</span> </td> <tr><td> <code title="">times;</code> </td> <td> U+000D7 </td> <td> <span>&times;</span> </td> <tr class=impl><td> <code title="">times</code> </td> <td> U+000D7 </td> <td> <span title="">&times;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">timesb;</code> </td> <td> U+022A0 </td> <td> <span>&#8864;</span> </td> <tr><td> <code title="">timesbar;</code> </td> <td> U+02A31 </td> <td> <span>&#10801;</span> </td> <tr><td> <code title="">timesd;</code> </td> <td> U+02A30 </td> <td> <span>&#10800;</span> </td> <tr><td> <code title="">tint;</code> </td> <td> U+0222D </td> <td> <span>&#8749;</span> </td> <tr><td> <code title="">toea;</code> </td> <td> U+02928 </td> <td> <span>&#10536;</span> </td> <tr><td> <code title="">top;</code> </td> <td> U+022A4 </td> <td> <span>&#8868;</span> </td> <tr><td> <code title="">topbot;</code> </td> <td> U+02336 </td> <td> <span>&#9014;</span> </td> <tr><td> <code title="">topcir;</code> </td> <td> U+02AF1 </td> <td> <span>&#10993;</span> </td> <tr><td> <code title="">topf;</code> </td> <td> U+1D565 </td> <td> <span>&#120165;</span> </td> <tr><td> <code title="">topfork;</code> </td> <td> U+02ADA </td> <td> <span>&#10970;</span> </td> <tr><td> <code title="">tosa;</code> </td> <td> U+02929 </td> <td> <span>&#10537;</span> </td> <tr><td> <code title="">tprime;</code> </td> <td> U+02034 </td> <td> <span>&#8244;</span> </td> <tr><td> <code title="">trade;</code> </td> <td> U+02122 </td> <td> <span>&trade;</span> </td> <tr><td> <code title="">triangle;</code> </td> <td> U+025B5 </td> <td> <span>&#9653;</span> </td> <tr><td> <code title="">triangledown;</code> </td> <td> U+025BF </td> <td> <span>&#9663;</span> </td> <tr><td> <code title="">triangleleft;</code> </td> <td> U+025C3 </td> <td> <span>&#9667;</span> </td> <tr><td> <code title="">trianglelefteq;</code> </td> <td> U+022B4 </td> <td> <span>&#8884;</span> </td> <tr><td> <code title="">triangleq;</code> </td> <td> U+0225C </td> <td> <span>&#8796;</span> </td> <tr><td> <code title="">triangleright;</code> </td> <td> U+025B9 </td> <td> <span>&#9657;</span> </td> <tr><td> <code title="">trianglerighteq;</code> </td> <td> U+022B5 </td> <td> <span>&#8885;</span> </td> <tr><td> <code title="">tridot;</code> </td> <td> U+025EC </td> <td> <span>&#9708;</span> </td> <tr><td> <code title="">trie;</code> </td> <td> U+0225C </td> <td> <span>&#8796;</span> </td> <tr><td> <code title="">triminus;</code> </td> <td> U+02A3A </td> <td> <span>&#10810;</span> </td> <tr><td> <code title="">triplus;</code> </td> <td> U+02A39 </td> <td> <span>&#10809;</span> </td> <tr><td> <code title="">trisb;</code> </td> <td> U+029CD </td> <td> <span>&#10701;</span> </td> <tr><td> <code title="">tritime;</code> </td> <td> U+02A3B </td> <td> <span>&#10811;</span> </td> <tr><td> <code title="">trpezium;</code> </td> <td> U+023E2 </td> <td> <span>&#9186;</span> </td> <tr><td> <code title="">tscr;</code> </td> <td> U+1D4C9 </td> <td> <span>&#120009;</span> </td> <tr><td> <code title="">tscy;</code> </td> <td> U+00446 </td> <td> <span>&#1094;</span> </td> <tr><td> <code title="">tshcy;</code> </td> <td> U+0045B </td> <td> <span>&#1115;</span> </td> <tr><td> <code title="">tstrok;</code> </td> <td> U+00167 </td> <td> <span>&#359;</span> </td> <tr><td> <code title="">twixt;</code> </td> <td> U+0226C </td> <td> <span>&#8812;</span> </td> <tr><td> <code title="">twoheadleftarrow;</code> </td> <td> U+0219E </td> <td> <span>&#8606;</span> </td> <tr><td> <code title="">twoheadrightarrow;</code> </td> <td> U+021A0 </td> <td> <span>&#8608;</span> </td> <tr><td> <code title="">uArr;</code> </td> <td> U+021D1 </td> <td> <span>&uArr;</span> </td> <tr><td> <code title="">uHar;</code> </td> <td> U+02963 </td> <td> <span>&#10595;</span> </td> <tr><td> <code title="">uacute;</code> </td> <td> U+000FA </td> <td> <span>&uacute;</span> </td> <tr class=impl><td> <code title="">uacute</code> </td> <td> U+000FA </td> <td> <span title="">&uacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uarr;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">ubrcy;</code> </td> <td> U+0045E </td> <td> <span>&#1118;</span> </td> <tr><td> <code title="">ubreve;</code> </td> <td> U+0016D </td> <td> <span>&#365;</span> </td> <tr><td> <code title="">ucirc;</code> </td> <td> U+000FB </td> <td> <span>&ucirc;</span> </td> <tr class=impl><td> <code title="">ucirc</code> </td> <td> U+000FB </td> <td> <span title="">&ucirc;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">ucy;</code> </td> <td> U+00443 </td> <td> <span>&#1091;</span> </td> <tr><td> <code title="">udarr;</code> </td> <td> U+021C5 </td> <td> <span>&#8645;</span> </td> <tr><td> <code title="">udblac;</code> </td> <td> U+00171 </td> <td> <span>&#369;</span> </td> <tr><td> <code title="">udhar;</code> </td> <td> U+0296E </td> <td> <span>&#10606;</span> </td> <tr><td> <code title="">ufisht;</code> </td> <td> U+0297E </td> <td> <span>&#10622;</span> </td> <tr><td> <code title="">ufr;</code> </td> <td> U+1D532 </td> <td> <span>&#120114;</span> </td> <tr><td> <code title="">ugrave;</code> </td> <td> U+000F9 </td> <td> <span>&ugrave;</span> </td> <tr class=impl><td> <code title="">ugrave</code> </td> <td> U+000F9 </td> <td> <span title="">&ugrave;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uharl;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">uharr;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">uhblk;</code> </td> <td> U+02580 </td> <td> <span>&#9600;</span> </td> <tr><td> <code title="">ulcorn;</code> </td> <td> U+0231C </td> <td> <span>&#8988;</span> </td> <tr><td> <code title="">ulcorner;</code> </td> <td> U+0231C </td> <td> <span>&#8988;</span> </td> <tr><td> <code title="">ulcrop;</code> </td> <td> U+0230F </td> <td> <span>&#8975;</span> </td> <tr><td> <code title="">ultri;</code> </td> <td> U+025F8 </td> <td> <span>&#9720;</span> </td> <tr><td> <code title="">umacr;</code> </td> <td> U+0016B </td> <td> <span>&#363;</span> </td> <tr><td> <code title="">uml;</code> </td> <td> U+000A8 </td> <td> <span>&uml;</span> </td> <tr class=impl><td> <code title="">uml</code> </td> <td> U+000A8 </td> <td> <span title="">&uml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uogon;</code> </td> <td> U+00173 </td> <td> <span>&#371;</span> </td> <tr><td> <code title="">uopf;</code> </td> <td> U+1D566 </td> <td> <span>&#120166;</span> </td> <tr><td> <code title="">uparrow;</code> </td> <td> U+02191 </td> <td> <span>&uarr;</span> </td> <tr><td> <code title="">updownarrow;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">upharpoonleft;</code> </td> <td> U+021BF </td> <td> <span>&#8639;</span> </td> <tr><td> <code title="">upharpoonright;</code> </td> <td> U+021BE </td> <td> <span>&#8638;</span> </td> <tr><td> <code title="">uplus;</code> </td> <td> U+0228E </td> <td> <span>&#8846;</span> </td> <tr><td> <code title="">upsi;</code> </td> <td> U+003C5 </td> <td> <span>&upsilon;</span> </td> <tr><td> <code title="">upsih;</code> </td> <td> U+003D2 </td> <td> <span>&upsih;</span> </td> <tr><td> <code title="">upsilon;</code> </td> <td> U+003C5 </td> <td> <span>&upsilon;</span> </td> <tr><td> <code title="">upuparrows;</code> </td> <td> U+021C8 </td> <td> <span>&#8648;</span> </td> <tr><td> <code title="">urcorn;</code> </td> <td> U+0231D </td> <td> <span>&#8989;</span> </td> <tr><td> <code title="">urcorner;</code> </td> <td> U+0231D </td> <td> <span>&#8989;</span> </td> <tr><td> <code title="">urcrop;</code> </td> <td> U+0230E </td> <td> <span>&#8974;</span> </td> <tr><td> <code title="">uring;</code> </td> <td> U+0016F </td> <td> <span>&#367;</span> </td> <tr><td> <code title="">urtri;</code> </td> <td> U+025F9 </td> <td> <span>&#9721;</span> </td> <tr><td> <code title="">uscr;</code> </td> <td> U+1D4CA </td> <td> <span>&#120010;</span> </td> <tr><td> <code title="">utdot;</code> </td> <td> U+022F0 </td> <td> <span>&#8944;</span> </td> <tr><td> <code title="">utilde;</code> </td> <td> U+00169 </td> <td> <span>&#361;</span> </td> <tr><td> <code title="">utri;</code> </td> <td> U+025B5 </td> <td> <span>&#9653;</span> </td> <tr><td> <code title="">utrif;</code> </td> <td> U+025B4 </td> <td> <span>&#9652;</span> </td> <tr><td> <code title="">uuarr;</code> </td> <td> U+021C8 </td> <td> <span>&#8648;</span> </td> <tr><td> <code title="">uuml;</code> </td> <td> U+000FC </td> <td> <span>&uuml;</span> </td> <tr class=impl><td> <code title="">uuml</code> </td> <td> U+000FC </td> <td> <span title="">&uuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">uwangle;</code> </td> <td> U+029A7 </td> <td> <span>&#10663;</span> </td> <tr><td> <code title="">vArr;</code> </td> <td> U+021D5 </td> <td> <span>&#8661;</span> </td> <tr><td> <code title="">vBar;</code> </td> <td> U+02AE8 </td> <td> <span>&#10984;</span> </td> <tr><td> <code title="">vBarv;</code> </td> <td> U+02AE9 </td> <td> <span>&#10985;</span> </td> <tr><td> <code title="">vDash;</code> </td> <td> U+022A8 </td> <td> <span>&#8872;</span> </td> <tr><td> <code title="">vangrt;</code> </td> <td> U+0299C </td> <td> <span>&#10652;</span> </td> <tr><td> <code title="">varepsilon;</code> </td> <td> U+003F5 </td> <td> <span>&#1013;</span> </td> <tr><td> <code title="">varkappa;</code> </td> <td> U+003F0 </td> <td> <span>&#1008;</span> </td> <tr><td> <code title="">varnothing;</code> </td> <td> U+02205 </td> <td> <span>&empty;</span> </td> <tr><td> <code title="">varphi;</code> </td> <td> U+003D5 </td> <td> <span>&#981;</span> </td> <tr><td> <code title="">varpi;</code> </td> <td> U+003D6 </td> <td> <span>&piv;</span> </td> <tr><td> <code title="">varpropto;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">varr;</code> </td> <td> U+02195 </td> <td> <span>&#8597;</span> </td> <tr><td> <code title="">varrho;</code> </td> <td> U+003F1 </td> <td> <span>&#1009;</span> </td> <tr><td> <code title="">varsigma;</code> </td> <td> U+003C2 </td> <td> <span>&sigmaf;</span> </td> <tr><td> <code title="">vartheta;</code> </td> <td> U+003D1 </td> <td> <span>&thetasym;</span> </td> <tr><td> <code title="">vartriangleleft;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">vartriangleright;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">vcy;</code> </td> <td> U+00432 </td> <td> <span>&#1074;</span> </td> <tr><td> <code title="">vdash;</code> </td> <td> U+022A2 </td> <td> <span>&#8866;</span> </td> <tr><td> <code title="">vee;</code> </td> <td> U+02228 </td> <td> <span>&or;</span> </td> <tr><td> <code title="">veebar;</code> </td> <td> U+022BB </td> <td> <span>&#8891;</span> </td> <tr><td> <code title="">veeeq;</code> </td> <td> U+0225A </td> <td> <span>&#8794;</span> </td> <tr><td> <code title="">vellip;</code> </td> <td> U+022EE </td> <td> <span>&#8942;</span> </td> <tr><td> <code title="">verbar;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">vert;</code> </td> <td> U+0007C </td> <td> <span>|</span> </td> <tr><td> <code title="">vfr;</code> </td> <td> U+1D533 </td> <td> <span>&#120115;</span> </td> <tr><td> <code title="">vltri;</code> </td> <td> U+022B2 </td> <td> <span>&#8882;</span> </td> <tr><td> <code title="">vopf;</code> </td> <td> U+1D567 </td> <td> <span>&#120167;</span> </td> <tr><td> <code title="">vprop;</code> </td> <td> U+0221D </td> <td> <span>&prop;</span> </td> <tr><td> <code title="">vrtri;</code> </td> <td> U+022B3 </td> <td> <span>&#8883;</span> </td> <tr><td> <code title="">vscr;</code> </td> <td> U+1D4CB </td> <td> <span>&#120011;</span> </td> <tr><td> <code title="">vzigzag;</code> </td> <td> U+0299A </td> <td> <span>&#10650;</span> </td> <tr><td> <code title="">wcirc;</code> </td> <td> U+00175 </td> <td> <span>&#373;</span> </td> <tr><td> <code title="">wedbar;</code> </td> <td> U+02A5F </td> <td> <span>&#10847;</span> </td> <tr><td> <code title="">wedge;</code> </td> <td> U+02227 </td> <td> <span>&and;</span> </td> <tr><td> <code title="">wedgeq;</code> </td> <td> U+02259 </td> <td> <span>&#8793;</span> </td> <tr><td> <code title="">weierp;</code> </td> <td> U+02118 </td> <td> <span>&weierp;</span> </td> <tr><td> <code title="">wfr;</code> </td> <td> U+1D534 </td> <td> <span>&#120116;</span> </td> <tr><td> <code title="">wopf;</code> </td> <td> U+1D568 </td> <td> <span>&#120168;</span> </td> <tr><td> <code title="">wp;</code> </td> <td> U+02118 </td> <td> <span>&weierp;</span> </td> <tr><td> <code title="">wr;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">wreath;</code> </td> <td> U+02240 </td> <td> <span>&#8768;</span> </td> <tr><td> <code title="">wscr;</code> </td> <td> U+1D4CC </td> <td> <span>&#120012;</span> </td> <tr><td> <code title="">xcap;</code> </td> <td> U+022C2 </td> <td> <span>&#8898;</span> </td> <tr><td> <code title="">xcirc;</code> </td> <td> U+025EF </td> <td> <span>&#9711;</span> </td> <tr><td> <code title="">xcup;</code> </td> <td> U+022C3 </td> <td> <span>&#8899;</span> </td> <tr><td> <code title="">xdtri;</code> </td> <td> U+025BD </td> <td> <span>&#9661;</span> </td> <tr><td> <code title="">xfr;</code> </td> <td> U+1D535 </td> <td> <span>&#120117;</span> </td> <tr><td> <code title="">xhArr;</code> </td> <td> U+027FA </td> <td> <span>&#10234;</span> </td> <tr><td> <code title="">xharr;</code> </td> <td> U+027F7 </td> <td> <span>&#10231;</span> </td> <tr><td> <code title="">xi;</code> </td> <td> U+003BE </td> <td> <span>&xi;</span> </td> <tr><td> <code title="">xlArr;</code> </td> <td> U+027F8 </td> <td> <span>&#10232;</span> </td> <tr><td> <code title="">xlarr;</code> </td> <td> U+027F5 </td> <td> <span>&#10229;</span> </td> <tr><td> <code title="">xmap;</code> </td> <td> U+027FC </td> <td> <span>&#10236;</span> </td> <tr><td> <code title="">xnis;</code> </td> <td> U+022FB </td> <td> <span>&#8955;</span> </td> <tr><td> <code title="">xodot;</code> </td> <td> U+02A00 </td> <td> <span>&#10752;</span> </td> <tr><td> <code title="">xopf;</code> </td> <td> U+1D569 </td> <td> <span>&#120169;</span> </td> <tr><td> <code title="">xoplus;</code> </td> <td> U+02A01 </td> <td> <span>&#10753;</span> </td> <tr><td> <code title="">xotime;</code> </td> <td> U+02A02 </td> <td> <span>&#10754;</span> </td> <tr><td> <code title="">xrArr;</code> </td> <td> U+027F9 </td> <td> <span>&#10233;</span> </td> <tr><td> <code title="">xrarr;</code> </td> <td> U+027F6 </td> <td> <span>&#10230;</span> </td> <tr><td> <code title="">xscr;</code> </td> <td> U+1D4CD </td> <td> <span>&#120013;</span> </td> <tr><td> <code title="">xsqcup;</code> </td> <td> U+02A06 </td> <td> <span>&#10758;</span> </td> <tr><td> <code title="">xuplus;</code> </td> <td> U+02A04 </td> <td> <span>&#10756;</span> </td> <tr><td> <code title="">xutri;</code> </td> <td> U+025B3 </td> <td> <span>&#9651;</span> </td> <tr><td> <code title="">xvee;</code> </td> <td> U+022C1 </td> <td> <span>&#8897;</span> </td> <tr><td> <code title="">xwedge;</code> </td> <td> U+022C0 </td> <td> <span>&#8896;</span> </td> <tr><td> <code title="">yacute;</code> </td> <td> U+000FD </td> <td> <span>&yacute;</span> </td> <tr class=impl><td> <code title="">yacute</code> </td> <td> U+000FD </td> <td> <span title="">&yacute;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">yacy;</code> </td> <td> U+0044F </td> <td> <span>&#1103;</span> </td> <tr><td> <code title="">ycirc;</code> </td> <td> U+00177 </td> <td> <span>&#375;</span> </td> <tr><td> <code title="">ycy;</code> </td> <td> U+0044B </td> <td> <span>&#1099;</span> </td> <tr><td> <code title="">yen;</code> </td> <td> U+000A5 </td> <td> <span>&yen;</span> </td> <tr class=impl><td> <code title="">yen</code> </td> <td> U+000A5 </td> <td> <span title="">&yen;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">yfr;</code> </td> <td> U+1D536 </td> <td> <span>&#120118;</span> </td> <tr><td> <code title="">yicy;</code> </td> <td> U+00457 </td> <td> <span>&#1111;</span> </td> <tr><td> <code title="">yopf;</code> </td> <td> U+1D56A </td> <td> <span>&#120170;</span> </td> <tr><td> <code title="">yscr;</code> </td> <td> U+1D4CE </td> <td> <span>&#120014;</span> </td> <tr><td> <code title="">yucy;</code> </td> <td> U+0044E </td> <td> <span>&#1102;</span> </td> <tr><td> <code title="">yuml;</code> </td> <td> U+000FF </td> <td> <span>&yuml;</span> </td> <tr class=impl><td> <code title="">yuml</code> </td> <td> U+000FF </td> <td> <span title="">&yuml;</span> </td> </tr><!-- (invalid entity with missing semicolon for legacy support only) --><tr><td> <code title="">zacute;</code> </td> <td> U+0017A </td> <td> <span>&#378;</span> </td> <tr><td> <code title="">zcaron;</code> </td> <td> U+0017E </td> <td> <span>&#382;</span> </td> <tr><td> <code title="">zcy;</code> </td> <td> U+00437 </td> <td> <span>&#1079;</span> </td> <tr><td> <code title="">zdot;</code> </td> <td> U+0017C </td> <td> <span>&#380;</span> </td> <tr><td> <code title="">zeetrf;</code> </td> <td> U+02128 </td> <td> <span>&#8488;</span> </td> <tr><td> <code title="">zeta;</code> </td> <td> U+003B6 </td> <td> <span>&zeta;</span> </td> <tr><td> <code title="">zfr;</code> </td> <td> U+1D537 </td> <td> <span>&#120119;</span> </td> <tr><td> <code title="">zhcy;</code> </td> <td> U+00436 </td> <td> <span>&#1078;</span> </td> <tr><td> <code title="">zigrarr;</code> </td> <td> U+021DD </td> <td> <span>&#8669;</span> </td> <tr><td> <code title="">zopf;</code> </td> <td> U+1D56B </td> <td> <span>&#120171;</span> </td> <tr><td> <code title="">zscr;</code> </td> <td> U+1D4CF </td> <td> <span>&#120015;</span> </td> <tr><td> <code title="">zwj;</code> </td> <td> U+0200D </td> <td> <span>&zwj;</span> </td> <tr><td> <code title="">zwnj;</code> </td> <td> U+0200C </td> <td> <span>&zwnj;</span> </td> </table><!--
   75993    If we want to add character references, Almorca suggests:
   75994    > I would add &sub1; (character U+2081), &sub2;
   75995    > (character U+2082) and &sub3; (character U+2083). They
   75996    > would are the equivalent to &sup1;, &sup2;, and &sup3;.
   75997    See also: http://www.w3.org/2003/entities/
   75998   --></div>
   75999 
   76000   <p><i>The glyphs displayed above are non-normative. Refer to the
   76001   Unicode specifications for formal definitions of the characters
   76002   listed above.</i></p>
   76003 
   76004 
   76005 
   76006   <h2 id=the-xhtml-syntax><span class=secno>11 </span><dfn id=xhtml>The XHTML syntax</dfn></h2>
   76007 
   76008   <p class=note>This section only describes the rules for XML
   76009   resources. Rules for <code><a href=#text/html>text/html</a></code> resources are discussed
   76010   in the section above entitled "<a href=#syntax>The HTML syntax</a>".</p>
   76011 
   76012 
   76013   <div class=impl>
   76014 
   76015   <h3 id=writing-xhtml-documents><span class=secno>11.1 </span>Writing XHTML documents</h3>
   76016 
   76017   </div>
   76018 
   76019   <p>The syntax for using HTML with XML, whether in XHTML documents or
   76020   embedded in other XML documents, is defined in the XML and
   76021   Namespaces in XML specifications. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>
   76022 
   76023   <p>This specification does not define any syntax-level requirements
   76024   beyond those defined for XML proper.</p>
   76025 
   76026   <p>XML documents may contain a <code>DOCTYPE</code> if desired, but
   76027   this is not required to conform to this specification. This
   76028   specification does not define a public or system identifier, nor
   76029   provide a format DTD.</p>
   76030 
   76031   <p class=note>According to the XML specification, XML processors
   76032   are not guaranteed to process the external DTD subset referenced in
   76033   the DOCTYPE. This means, for example, that using entity references
   76034   for characters in XHTML documents is unsafe if they are defined in
   76035   an external file (except for <code title="">&amp;lt;</code>, <code title="">&amp;gt;</code>, <code title="">&amp;amp;</code>, <code title="">&amp;quot;</code> and <code title="">&amp;apos;</code>).</p>
   76036 
   76037 
   76038   <div class=impl>
   76039 
   76040   <h3 id=parsing-xhtml-documents><span class=secno>11.2 </span>Parsing XHTML documents</h3>
   76041 
   76042   <p>This section describes the relationship between XML and the DOM,
   76043   with a particular emphasis on how this interacts with HTML.</p>
   76044 
   76045   <p>An <dfn id=xml-parser>XML parser</dfn>, for the purposes of this specification,
   76046   is a construct that follows the rules given in the XML specification
   76047   to map a string of bytes or characters into a <code><a href=#document>Document</a></code>
   76048   object.</p>
   76049 
   76050   <p>An <a href=#xml-parser>XML parser</a> is either associated with a
   76051   <code><a href=#document>Document</a></code> object when it is created, or creates one
   76052   implicitly.</p>
   76053 
   76054   <p>This <code><a href=#document>Document</a></code> must then be populated with DOM nodes
   76055   that represent the tree structure of the input passed to the parser,
   76056   as defined by the XML specification, the Namespaces in XML
   76057   specification, and the DOM Core specification. DOM mutation events
   76058   must not fire for the operations that the <a href=#xml-parser>XML parser</a>
   76059   performs on the <code><a href=#document>Document</a></code>'s tree, but the user agent
   76060   must act as if elements and attributes were individually appended
   76061   and set respectively so as to trigger rules in this specification
   76062   regarding what happens when an element in inserted into a document
   76063   or has its attributes set. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a> <a href=#refsDOMCORE>[DOMCORE]</a>
   76064   <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
   76065 
   76066   <p>Between the time an element's start tag is parsed and the time
   76067   either the element's end tag is parsed on the parser detects a
   76068   well-formedness error, the user agent must act as if the element was
   76069   in a <a href=#stack-of-open-elements>stack of open elements</a>.</p>
   76070 
   76071   <p class=note>This is used by the <code><a href=#the-object-element>object</a></code> element to
   76072   avoid instantiating plugins before the <code><a href=#the-param-element>param</a></code> element
   76073   children have been parsed.</p>
   76074 
   76075   <p>This specification provides the following additional information
   76076   that user agents should use when retrieving an external entity: the
   76077   public identifiers given in the following list all correspond to <a href=data:application/xml-dtd;base64,PCFFTlRJVFkgVGFiICImI3g5OyI%2BPCFFTlRJVFkgTmV3TGluZSAiJiN4QTsiPjwhRU5USVRZIGV4Y2wgIiYjeDIxOyI%2BPCFFTlRJVFkgcXVvdCAiJiN4MjI7Ij48IUVOVElUWSBRVU9UICImI3gyMjsiPjwhRU5USVRZIG51bSAiJiN4MjM7Ij48IUVOVElUWSBkb2xsYXIgIiYjeDI0OyI%2BPCFFTlRJVFkgcGVyY250ICImI3gyNTsiPjwhRU5USVRZIGFtcCAiJiN4MjY7Ij48IUVOVElUWSBBTVAgIiYjeDI2OyI%2BPCFFTlRJVFkgYXBvcyAiJiN4Mjc7Ij48IUVOVElUWSBscGFyICImI3gyODsiPjwhRU5USVRZIHJwYXIgIiYjeDI5OyI%2BPCFFTlRJVFkgYXN0ICImI3gyQTsiPjwhRU5USVRZIG1pZGFzdCAiJiN4MkE7Ij48IUVOVElUWSBwbHVzICImI3gyQjsiPjwhRU5USVRZIGNvbW1hICImI3gyQzsiPjwhRU5USVRZIHBlcmlvZCAiJiN4MkU7Ij48IUVOVElUWSBzb2wgIiYjeDJGOyI%2BPCFFTlRJVFkgY29sb24gIiYjeDNBOyI%2BPCFFTlRJVFkgc2VtaSAiJiN4M0I7Ij48IUVOVElUWSBsdCAiJiN4M0M7Ij48IUVOVElUWSBMVCAiJiN4M0M7Ij48IUVOVElUWSBlcXVhbHMgIiYjeDNEOyI%2BPCFFTlRJVFkgZ3QgIiYjeDNFOyI%2BPCFFTlRJVFkgR1QgIiYjeDNFOyI%2BPCFFTlRJVFkgcXVlc3QgIiYjeDNGOyI%2BPCFFTlRJVFkgY29tbWF0ICImI3g0MDsiPjwhRU5USVRZIGxzcWIgIiYjeDVCOyI%2BPCFFTlRJVFkgbGJyYWNrICImI3g1QjsiPjwhRU5USVRZIGJzb2wgIiYjeDVDOyI%2BPCFFTlRJVFkgcnNxYiAiJiN4NUQ7Ij48IUVOVElUWSByYnJhY2sgIiYjeDVEOyI%2BPCFFTlRJVFkgSGF0ICImI3g1RTsiPjwhRU5USVRZIGxvd2JhciAiJiN4NUY7Ij48IUVOVElUWSBVbmRlckJhciAiJiN4NUY7Ij48IUVOVElUWSBncmF2ZSAiJiN4NjA7Ij48IUVOVElUWSBEaWFjcml0aWNhbEdyYXZlICImI3g2MDsiPjwhRU5USVRZIGxjdWIgIiYjeDdCOyI%2BPCFFTlRJVFkgbGJyYWNlICImI3g3QjsiPjwhRU5USVRZIHZlcmJhciAiJiN4N0M7Ij48IUVOVElUWSB2ZXJ0ICImI3g3QzsiPjwhRU5USVRZIFZlcnRpY2FsTGluZSAiJiN4N0M7Ij48IUVOVElUWSByY3ViICImI3g3RDsiPjwhRU5USVRZIHJicmFjZSAiJiN4N0Q7Ij48IUVOVElUWSBuYnNwICImI3hBMDsiPjwhRU5USVRZIE5vbkJyZWFraW5nU3BhY2UgIiYjeEEwOyI%2BPCFFTlRJVFkgaWV4Y2wgIiYjeEExOyI%2BPCFFTlRJVFkgY2VudCAiJiN4QTI7Ij48IUVOVElUWSBwb3VuZCAiJiN4QTM7Ij48IUVOVElUWSBjdXJyZW4gIiYjeEE0OyI%2BPCFFTlRJVFkgeWVuICImI3hBNTsiPjwhRU5USVRZIGJydmJhciAiJiN4QTY7Ij48IUVOVElUWSBzZWN0ICImI3hBNzsiPjwhRU5USVRZIERvdCAiJiN4QTg7Ij48IUVOVElUWSBkaWUgIiYjeEE4OyI%2BPCFFTlRJVFkgRG91YmxlRG90ICImI3hBODsiPjwhRU5USVRZIHVtbCAiJiN4QTg7Ij48IUVOVElUWSBjb3B5ICImI3hBOTsiPjwhRU5USVRZIENPUFkgIiYjeEE5OyI%2BPCFFTlRJVFkgb3JkZiAiJiN4QUE7Ij48IUVOVElUWSBsYXF1byAiJiN4QUI7Ij48IUVOVElUWSBub3QgIiYjeEFDOyI%2BPCFFTlRJVFkgc2h5ICImI3hBRDsiPjwhRU5USVRZIHJlZyAiJiN4QUU7Ij48IUVOVElUWSBjaXJjbGVkUiAiJiN4QUU7Ij48IUVOVElUWSBSRUcgIiYjeEFFOyI%2BPCFFTlRJVFkgbWFjciAiJiN4QUY7Ij48IUVOVElUWSBzdHJucyAiJiN4QUY7Ij48IUVOVElUWSBkZWcgIiYjeEIwOyI%2BPCFFTlRJVFkgcGx1c21uICImI3hCMTsiPjwhRU5USVRZIHBtICImI3hCMTsiPjwhRU5USVRZIFBsdXNNaW51cyAiJiN4QjE7Ij48IUVOVElUWSBzdXAyICImI3hCMjsiPjwhRU5USVRZIHN1cDMgIiYjeEIzOyI%2BPCFFTlRJVFkgYWN1dGUgIiYjeEI0OyI%2BPCFFTlRJVFkgRGlhY3JpdGljYWxBY3V0ZSAiJiN4QjQ7Ij48IUVOVElUWSBtaWNybyAiJiN4QjU7Ij48IUVOVElUWSBwYXJhICImI3hCNjsiPjwhRU5USVRZIG1pZGRvdCAiJiN4Qjc7Ij48IUVOVElUWSBjZW50ZXJkb3QgIiYjeEI3OyI%2BPCFFTlRJVFkgQ2VudGVyRG90ICImI3hCNzsiPjwhRU5USVRZIGNlZGlsICImI3hCODsiPjwhRU5USVRZIENlZGlsbGEgIiYjeEI4OyI%2BPCFFTlRJVFkgc3VwMSAiJiN4Qjk7Ij48IUVOVElUWSBvcmRtICImI3hCQTsiPjwhRU5USVRZIHJhcXVvICImI3hCQjsiPjwhRU5USVRZIGZyYWMxNCAiJiN4QkM7Ij48IUVOVElUWSBmcmFjMTIgIiYjeEJEOyI%2BPCFFTlRJVFkgaGFsZiAiJiN4QkQ7Ij48IUVOVElUWSBmcmFjMzQgIiYjeEJFOyI%2BPCFFTlRJVFkgaXF1ZXN0ICImI3hCRjsiPjwhRU5USVRZIEFncmF2ZSAiJiN4QzA7Ij48IUVOVElUWSBBYWN1dGUgIiYjeEMxOyI%2BPCFFTlRJVFkgQWNpcmMgIiYjeEMyOyI%2BPCFFTlRJVFkgQXRpbGRlICImI3hDMzsiPjwhRU5USVRZIEF1bWwgIiYjeEM0OyI%2BPCFFTlRJVFkgQXJpbmcgIiYjeEM1OyI%2BPCFFTlRJVFkgYW5nc3QgIiYjeEM1OyI%2BPCFFTlRJVFkgQUVsaWcgIiYjeEM2OyI%2BPCFFTlRJVFkgQ2NlZGlsICImI3hDNzsiPjwhRU5USVRZIEVncmF2ZSAiJiN4Qzg7Ij48IUVOVElUWSBFYWN1dGUgIiYjeEM5OyI%2BPCFFTlRJVFkgRWNpcmMgIiYjeENBOyI%2BPCFFTlRJVFkgRXVtbCAiJiN4Q0I7Ij48IUVOVElUWSBJZ3JhdmUgIiYjeENDOyI%2BPCFFTlRJVFkgSWFjdXRlICImI3hDRDsiPjwhRU5USVRZIEljaXJjICImI3hDRTsiPjwhRU5USVRZIEl1bWwgIiYjeENGOyI%2BPCFFTlRJVFkgRVRIICImI3hEMDsiPjwhRU5USVRZIE50aWxkZSAiJiN4RDE7Ij48IUVOVElUWSBPZ3JhdmUgIiYjeEQyOyI%2BPCFFTlRJVFkgT2FjdXRlICImI3hEMzsiPjwhRU5USVRZIE9jaXJjICImI3hENDsiPjwhRU5USVRZIE90aWxkZSAiJiN4RDU7Ij48IUVOVElUWSBPdW1sICImI3hENjsiPjwhRU5USVRZIHRpbWVzICImI3hENzsiPjwhRU5USVRZIE9zbGFzaCAiJiN4RDg7Ij48IUVOVElUWSBVZ3JhdmUgIiYjeEQ5OyI%2BPCFFTlRJVFkgVWFjdXRlICImI3hEQTsiPjwhRU5USVRZIFVjaXJjICImI3hEQjsiPjwhRU5USVRZIFV1bWwgIiYjeERDOyI%2BPCFFTlRJVFkgWWFjdXRlICImI3hERDsiPjwhRU5USVRZIFRIT1JOICImI3hERTsiPjwhRU5USVRZIHN6bGlnICImI3hERjsiPjwhRU5USVRZIGFncmF2ZSAiJiN4RTA7Ij48IUVOVElUWSBhYWN1dGUgIiYjeEUxOyI%2BPCFFTlRJVFkgYWNpcmMgIiYjeEUyOyI%2BPCFFTlRJVFkgYXRpbGRlICImI3hFMzsiPjwhRU5USVRZIGF1bWwgIiYjeEU0OyI%2BPCFFTlRJVFkgYXJpbmcgIiYjeEU1OyI%2BPCFFTlRJVFkgYWVsaWcgIiYjeEU2OyI%2BPCFFTlRJVFkgY2NlZGlsICImI3hFNzsiPjwhRU5USVRZIGVncmF2ZSAiJiN4RTg7Ij48IUVOVElUWSBlYWN1dGUgIiYjeEU5OyI%2BPCFFTlRJVFkgZWNpcmMgIiYjeEVBOyI%2BPCFFTlRJVFkgZXVtbCAiJiN4RUI7Ij48IUVOVElUWSBpZ3JhdmUgIiYjeEVDOyI%2BPCFFTlRJVFkgaWFjdXRlICImI3hFRDsiPjwhRU5USVRZIGljaXJjICImI3hFRTsiPjwhRU5USVRZIGl1bWwgIiYjeEVGOyI%2BPCFFTlRJVFkgZXRoICImI3hGMDsiPjwhRU5USVRZIG50aWxkZSAiJiN4RjE7Ij48IUVOVElUWSBvZ3JhdmUgIiYjeEYyOyI%2BPCFFTlRJVFkgb2FjdXRlICImI3hGMzsiPjwhRU5USVRZIG9jaXJjICImI3hGNDsiPjwhRU5USVRZIG90aWxkZSAiJiN4RjU7Ij48IUVOVElUWSBvdW1sICImI3hGNjsiPjwhRU5USVRZIGRpdmlkZSAiJiN4Rjc7Ij48IUVOVElUWSBkaXYgIiYjeEY3OyI%2BPCFFTlRJVFkgb3NsYXNoICImI3hGODsiPjwhRU5USVRZIHVncmF2ZSAiJiN4Rjk7Ij48IUVOVElUWSB1YWN1dGUgIiYjeEZBOyI%2BPCFFTlRJVFkgdWNpcmMgIiYjeEZCOyI%2BPCFFTlRJVFkgdXVtbCAiJiN4RkM7Ij48IUVOVElUWSB5YWN1dGUgIiYjeEZEOyI%2BPCFFTlRJVFkgdGhvcm4gIiYjeEZFOyI%2BPCFFTlRJVFkgeXVtbCAiJiN4RkY7Ij48IUVOVElUWSBBbWFjciAiJiN4MTAwOyI%2BPCFFTlRJVFkgYW1hY3IgIiYjeDEwMTsiPjwhRU5USVRZIEFicmV2ZSAiJiN4MTAyOyI%2BPCFFTlRJVFkgYWJyZXZlICImI3gxMDM7Ij48IUVOVElUWSBBb2dvbiAiJiN4MTA0OyI%2BPCFFTlRJVFkgYW9nb24gIiYjeDEwNTsiPjwhRU5USVRZIENhY3V0ZSAiJiN4MTA2OyI%2BPCFFTlRJVFkgY2FjdXRlICImI3gxMDc7Ij48IUVOVElUWSBDY2lyYyAiJiN4MTA4OyI%2BPCFFTlRJVFkgY2NpcmMgIiYjeDEwOTsiPjwhRU5USVRZIENkb3QgIiYjeDEwQTsiPjwhRU5USVRZIGNkb3QgIiYjeDEwQjsiPjwhRU5USVRZIENjYXJvbiAiJiN4MTBDOyI%2BPCFFTlRJVFkgY2Nhcm9uICImI3gxMEQ7Ij48IUVOVElUWSBEY2Fyb24gIiYjeDEwRTsiPjwhRU5USVRZIGRjYXJvbiAiJiN4MTBGOyI%2BPCFFTlRJVFkgRHN0cm9rICImI3gxMTA7Ij48IUVOVElUWSBkc3Ryb2sgIiYjeDExMTsiPjwhRU5USVRZIEVtYWNyICImI3gxMTI7Ij48IUVOVElUWSBlbWFjciAiJiN4MTEzOyI%2BPCFFTlRJVFkgRWRvdCAiJiN4MTE2OyI%2BPCFFTlRJVFkgZWRvdCAiJiN4MTE3OyI%2BPCFFTlRJVFkgRW9nb24gIiYjeDExODsiPjwhRU5USVRZIGVvZ29uICImI3gxMTk7Ij48IUVOVElUWSBFY2Fyb24gIiYjeDExQTsiPjwhRU5USVRZIGVjYXJvbiAiJiN4MTFCOyI%2BPCFFTlRJVFkgR2NpcmMgIiYjeDExQzsiPjwhRU5USVRZIGdjaXJjICImI3gxMUQ7Ij48IUVOVElUWSBHYnJldmUgIiYjeDExRTsiPjwhRU5USVRZIGdicmV2ZSAiJiN4MTFGOyI%2BPCFFTlRJVFkgR2RvdCAiJiN4MTIwOyI%2BPCFFTlRJVFkgZ2RvdCAiJiN4MTIxOyI%2BPCFFTlRJVFkgR2NlZGlsICImI3gxMjI7Ij48IUVOVElUWSBIY2lyYyAiJiN4MTI0OyI%2BPCFFTlRJVFkgaGNpcmMgIiYjeDEyNTsiPjwhRU5USVRZIEhzdHJvayAiJiN4MTI2OyI%2BPCFFTlRJVFkgaHN0cm9rICImI3gxMjc7Ij48IUVOVElUWSBJdGlsZGUgIiYjeDEyODsiPjwhRU5USVRZIGl0aWxkZSAiJiN4MTI5OyI%2BPCFFTlRJVFkgSW1hY3IgIiYjeDEyQTsiPjwhRU5USVRZIGltYWNyICImI3gxMkI7Ij48IUVOVElUWSBJb2dvbiAiJiN4MTJFOyI%2BPCFFTlRJVFkgaW9nb24gIiYjeDEyRjsiPjwhRU5USVRZIElkb3QgIiYjeDEzMDsiPjwhRU5USVRZIGltYXRoICImI3gxMzE7Ij48IUVOVElUWSBpbm9kb3QgIiYjeDEzMTsiPjwhRU5USVRZIElKbGlnICImI3gxMzI7Ij48IUVOVElUWSBpamxpZyAiJiN4MTMzOyI%2BPCFFTlRJVFkgSmNpcmMgIiYjeDEzNDsiPjwhRU5USVRZIGpjaXJjICImI3gxMzU7Ij48IUVOVElUWSBLY2VkaWwgIiYjeDEzNjsiPjwhRU5USVRZIGtjZWRpbCAiJiN4MTM3OyI%2BPCFFTlRJVFkga2dyZWVuICImI3gxMzg7Ij48IUVOVElUWSBMYWN1dGUgIiYjeDEzOTsiPjwhRU5USVRZIGxhY3V0ZSAiJiN4MTNBOyI%2BPCFFTlRJVFkgTGNlZGlsICImI3gxM0I7Ij48IUVOVElUWSBsY2VkaWwgIiYjeDEzQzsiPjwhRU5USVRZIExjYXJvbiAiJiN4MTNEOyI%2BPCFFTlRJVFkgbGNhcm9uICImI3gxM0U7Ij48IUVOVElUWSBMbWlkb3QgIiYjeDEzRjsiPjwhRU5USVRZIGxtaWRvdCAiJiN4MTQwOyI%2BPCFFTlRJVFkgTHN0cm9rICImI3gxNDE7Ij48IUVOVElUWSBsc3Ryb2sgIiYjeDE0MjsiPjwhRU5USVRZIE5hY3V0ZSAiJiN4MTQzOyI%2BPCFFTlRJVFkgbmFjdXRlICImI3gxNDQ7Ij48IUVOVElUWSBOY2VkaWwgIiYjeDE0NTsiPjwhRU5USVRZIG5jZWRpbCAiJiN4MTQ2OyI%2BPCFFTlRJVFkgTmNhcm9uICImI3gxNDc7Ij48IUVOVElUWSBuY2Fyb24gIiYjeDE0ODsiPjwhRU5USVRZIG5hcG9zICImI3gxNDk7Ij48IUVOVElUWSBFTkcgIiYjeDE0QTsiPjwhRU5USVRZIGVuZyAiJiN4MTRCOyI%2BPCFFTlRJVFkgT21hY3IgIiYjeDE0QzsiPjwhRU5USVRZIG9tYWNyICImI3gxNEQ7Ij48IUVOVElUWSBPZGJsYWMgIiYjeDE1MDsiPjwhRU5USVRZIG9kYmxhYyAiJiN4MTUxOyI%2BPCFFTlRJVFkgT0VsaWcgIiYjeDE1MjsiPjwhRU5USVRZIG9lbGlnICImI3gxNTM7Ij48IUVOVElUWSBSYWN1dGUgIiYjeDE1NDsiPjwhRU5USVRZIHJhY3V0ZSAiJiN4MTU1OyI%2BPCFFTlRJVFkgUmNlZGlsICImI3gxNTY7Ij48IUVOVElUWSByY2VkaWwgIiYjeDE1NzsiPjwhRU5USVRZIFJjYXJvbiAiJiN4MTU4OyI%2BPCFFTlRJVFkgcmNhcm9uICImI3gxNTk7Ij48IUVOVElUWSBTYWN1dGUgIiYjeDE1QTsiPjwhRU5USVRZIHNhY3V0ZSAiJiN4MTVCOyI%2BPCFFTlRJVFkgU2NpcmMgIiYjeDE1QzsiPjwhRU5USVRZIHNjaXJjICImI3gxNUQ7Ij48IUVOVElUWSBTY2VkaWwgIiYjeDE1RTsiPjwhRU5USVRZIHNjZWRpbCAiJiN4MTVGOyI%2BPCFFTlRJVFkgU2Nhcm9uICImI3gxNjA7Ij48IUVOVElUWSBzY2Fyb24gIiYjeDE2MTsiPjwhRU5USVRZIFRjZWRpbCAiJiN4MTYyOyI%2BPCFFTlRJVFkgdGNlZGlsICImI3gxNjM7Ij48IUVOVElUWSBUY2Fyb24gIiYjeDE2NDsiPjwhRU5USVRZIHRjYXJvbiAiJiN4MTY1OyI%2BPCFFTlRJVFkgVHN0cm9rICImI3gxNjY7Ij48IUVOVElUWSB0c3Ryb2sgIiYjeDE2NzsiPjwhRU5USVRZIFV0aWxkZSAiJiN4MTY4OyI%2BPCFFTlRJVFkgdXRpbGRlICImI3gxNjk7Ij48IUVOVElUWSBVbWFjciAiJiN4MTZBOyI%2BPCFFTlRJVFkgdW1hY3IgIiYjeDE2QjsiPjwhRU5USVRZIFVicmV2ZSAiJiN4MTZDOyI%2BPCFFTlRJVFkgdWJyZXZlICImI3gxNkQ7Ij48IUVOVElUWSBVcmluZyAiJiN4MTZFOyI%2BPCFFTlRJVFkgdXJpbmcgIiYjeDE2RjsiPjwhRU5USVRZIFVkYmxhYyAiJiN4MTcwOyI%2BPCFFTlRJVFkgdWRibGFjICImI3gxNzE7Ij48IUVOVElUWSBVb2dvbiAiJiN4MTcyOyI%2BPCFFTlRJVFkgdW9nb24gIiYjeDE3MzsiPjwhRU5USVRZIFdjaXJjICImI3gxNzQ7Ij48IUVOVElUWSB3Y2lyYyAiJiN4MTc1OyI%2BPCFFTlRJVFkgWWNpcmMgIiYjeDE3NjsiPjwhRU5USVRZIHljaXJjICImI3gxNzc7Ij48IUVOVElUWSBZdW1sICImI3gxNzg7Ij48IUVOVElUWSBaYWN1dGUgIiYjeDE3OTsiPjwhRU5USVRZIHphY3V0ZSAiJiN4MTdBOyI%2BPCFFTlRJVFkgWmRvdCAiJiN4MTdCOyI%2BPCFFTlRJVFkgemRvdCAiJiN4MTdDOyI%2BPCFFTlRJVFkgWmNhcm9uICImI3gxN0Q7Ij48IUVOVElUWSB6Y2Fyb24gIiYjeDE3RTsiPjwhRU5USVRZIGZub2YgIiYjeDE5MjsiPjwhRU5USVRZIGltcGVkICImI3gxQjU7Ij48IUVOVElUWSBnYWN1dGUgIiYjeDFGNTsiPjwhRU5USVRZIGptYXRoICImI3gyMzc7Ij48IUVOVElUWSBjaXJjICImI3gyQzY7Ij48IUVOVElUWSBjYXJvbiAiJiN4MkM3OyI%2BPCFFTlRJVFkgSGFjZWsgIiYjeDJDNzsiPjwhRU5USVRZIGJyZXZlICImI3gyRDg7Ij48IUVOVElUWSBCcmV2ZSAiJiN4MkQ4OyI%2BPCFFTlRJVFkgZG90ICImI3gyRDk7Ij48IUVOVElUWSBEaWFjcml0aWNhbERvdCAiJiN4MkQ5OyI%2BPCFFTlRJVFkgcmluZyAiJiN4MkRBOyI%2BPCFFTlRJVFkgb2dvbiAiJiN4MkRCOyI%2BPCFFTlRJVFkgdGlsZGUgIiYjeDJEQzsiPjwhRU5USVRZIERpYWNyaXRpY2FsVGlsZGUgIiYjeDJEQzsiPjwhRU5USVRZIGRibGFjICImI3gyREQ7Ij48IUVOVElUWSBEaWFjcml0aWNhbERvdWJsZUFjdXRlICImI3gyREQ7Ij48IUVOVElUWSBEb3duQnJldmUgIiYjeDMxMTsiPjwhRU5USVRZIEFscGhhICImI3gzOTE7Ij48IUVOVElUWSBCZXRhICImI3gzOTI7Ij48IUVOVElUWSBHYW1tYSAiJiN4MzkzOyI%2BPCFFTlRJVFkgRGVsdGEgIiYjeDM5NDsiPjwhRU5USVRZIEVwc2lsb24gIiYjeDM5NTsiPjwhRU5USVRZIFpldGEgIiYjeDM5NjsiPjwhRU5USVRZIEV0YSAiJiN4Mzk3OyI%2BPCFFTlRJVFkgVGhldGEgIiYjeDM5ODsiPjwhRU5USVRZIElvdGEgIiYjeDM5OTsiPjwhRU5USVRZIEthcHBhICImI3gzOUE7Ij48IUVOVElUWSBMYW1iZGEgIiYjeDM5QjsiPjwhRU5USVRZIE11ICImI3gzOUM7Ij48IUVOVElUWSBOdSAiJiN4MzlEOyI%2BPCFFTlRJVFkgWGkgIiYjeDM5RTsiPjwhRU5USVRZIE9taWNyb24gIiYjeDM5RjsiPjwhRU5USVRZIFBpICImI3gzQTA7Ij48IUVOVElUWSBSaG8gIiYjeDNBMTsiPjwhRU5USVRZIFNpZ21hICImI3gzQTM7Ij48IUVOVElUWSBUYXUgIiYjeDNBNDsiPjwhRU5USVRZIFVwc2lsb24gIiYjeDNBNTsiPjwhRU5USVRZIFBoaSAiJiN4M0E2OyI%2BPCFFTlRJVFkgQ2hpICImI3gzQTc7Ij48IUVOVElUWSBQc2kgIiYjeDNBODsiPjwhRU5USVRZIE9tZWdhICImI3gzQTk7Ij48IUVOVElUWSBvaG0gIiYjeDNBOTsiPjwhRU5USVRZIGFscGhhICImI3gzQjE7Ij48IUVOVElUWSBiZXRhICImI3gzQjI7Ij48IUVOVElUWSBnYW1tYSAiJiN4M0IzOyI%2BPCFFTlRJVFkgZGVsdGEgIiYjeDNCNDsiPjwhRU5USVRZIGVwc2kgIiYjeDNCNTsiPjwhRU5USVRZIGVwc2lsb24gIiYjeDNCNTsiPjwhRU5USVRZIHpldGEgIiYjeDNCNjsiPjwhRU5USVRZIGV0YSAiJiN4M0I3OyI%2BPCFFTlRJVFkgdGhldGEgIiYjeDNCODsiPjwhRU5USVRZIGlvdGEgIiYjeDNCOTsiPjwhRU5USVRZIGthcHBhICImI3gzQkE7Ij48IUVOVElUWSBsYW1iZGEgIiYjeDNCQjsiPjwhRU5USVRZIG11ICImI3gzQkM7Ij48IUVOVElUWSBudSAiJiN4M0JEOyI%2BPCFFTlRJVFkgeGkgIiYjeDNCRTsiPjwhRU5USVRZIG9taWNyb24gIiYjeDNCRjsiPjwhRU5USVRZIHBpICImI3gzQzA7Ij48IUVOVElUWSByaG8gIiYjeDNDMTsiPjwhRU5USVRZIHNpZ21hdiAiJiN4M0MyOyI%2BPCFFTlRJVFkgdmFyc2lnbWEgIiYjeDNDMjsiPjwhRU5USVRZIHNpZ21hZiAiJiN4M0MyOyI%2BPCFFTlRJVFkgc2lnbWEgIiYjeDNDMzsiPjwhRU5USVRZIHRhdSAiJiN4M0M0OyI%2BPCFFTlRJVFkgdXBzaSAiJiN4M0M1OyI%2BPCFFTlRJVFkgdXBzaWxvbiAiJiN4M0M1OyI%2BPCFFTlRJVFkgcGhpICImI3gzQzY7Ij48IUVOVElUWSBjaGkgIiYjeDNDNzsiPjwhRU5USVRZIHBzaSAiJiN4M0M4OyI%2BPCFFTlRJVFkgb21lZ2EgIiYjeDNDOTsiPjwhRU5USVRZIHRoZXRhdiAiJiN4M0QxOyI%2BPCFFTlRJVFkgdmFydGhldGEgIiYjeDNEMTsiPjwhRU5USVRZIHRoZXRhc3ltICImI3gzRDE7Ij48IUVOVElUWSBVcHNpICImI3gzRDI7Ij48IUVOVElUWSB1cHNpaCAiJiN4M0QyOyI%2BPCFFTlRJVFkgc3RyYWlnaHRwaGkgIiYjeDNENTsiPjwhRU5USVRZIHBoaXYgIiYjeDNENTsiPjwhRU5USVRZIHZhcnBoaSAiJiN4M0Q1OyI%2BPCFFTlRJVFkgcGl2ICImI3gzRDY7Ij48IUVOVElUWSB2YXJwaSAiJiN4M0Q2OyI%2BPCFFTlRJVFkgR2FtbWFkICImI3gzREM7Ij48IUVOVElUWSBnYW1tYWQgIiYjeDNERDsiPjwhRU5USVRZIGRpZ2FtbWEgIiYjeDNERDsiPjwhRU5USVRZIGthcHBhdiAiJiN4M0YwOyI%2BPCFFTlRJVFkgdmFya2FwcGEgIiYjeDNGMDsiPjwhRU5USVRZIHJob3YgIiYjeDNGMTsiPjwhRU5USVRZIHZhcnJobyAiJiN4M0YxOyI%2BPCFFTlRJVFkgZXBzaXYgIiYjeDNGNTsiPjwhRU5USVRZIHN0cmFpZ2h0ZXBzaWxvbiAiJiN4M0Y1OyI%2BPCFFTlRJVFkgdmFyZXBzaWxvbiAiJiN4M0Y1OyI%2BPCFFTlRJVFkgYmVwc2kgIiYjeDNGNjsiPjwhRU5USVRZIGJhY2tlcHNpbG9uICImI3gzRjY7Ij48IUVOVElUWSBJT2N5ICImI3g0MDE7Ij48IUVOVElUWSBESmN5ICImI3g0MDI7Ij48IUVOVElUWSBHSmN5ICImI3g0MDM7Ij48IUVOVElUWSBKdWtjeSAiJiN4NDA0OyI%2BPCFFTlRJVFkgRFNjeSAiJiN4NDA1OyI%2BPCFFTlRJVFkgSXVrY3kgIiYjeDQwNjsiPjwhRU5USVRZIFlJY3kgIiYjeDQwNzsiPjwhRU5USVRZIEpzZXJjeSAiJiN4NDA4OyI%2BPCFFTlRJVFkgTEpjeSAiJiN4NDA5OyI%2BPCFFTlRJVFkgTkpjeSAiJiN4NDBBOyI%2BPCFFTlRJVFkgVFNIY3kgIiYjeDQwQjsiPjwhRU5USVRZIEtKY3kgIiYjeDQwQzsiPjwhRU5USVRZIFVicmN5ICImI3g0MEU7Ij48IUVOVElUWSBEWmN5ICImI3g0MEY7Ij48IUVOVElUWSBBY3kgIiYjeDQxMDsiPjwhRU5USVRZIEJjeSAiJiN4NDExOyI%2BPCFFTlRJVFkgVmN5ICImI3g0MTI7Ij48IUVOVElUWSBHY3kgIiYjeDQxMzsiPjwhRU5USVRZIERjeSAiJiN4NDE0OyI%2BPCFFTlRJVFkgSUVjeSAiJiN4NDE1OyI%2BPCFFTlRJVFkgWkhjeSAiJiN4NDE2OyI%2BPCFFTlRJVFkgWmN5ICImI3g0MTc7Ij48IUVOVElUWSBJY3kgIiYjeDQxODsiPjwhRU5USVRZIEpjeSAiJiN4NDE5OyI%2BPCFFTlRJVFkgS2N5ICImI3g0MUE7Ij48IUVOVElUWSBMY3kgIiYjeDQxQjsiPjwhRU5USVRZIE1jeSAiJiN4NDFDOyI%2BPCFFTlRJVFkgTmN5ICImI3g0MUQ7Ij48IUVOVElUWSBPY3kgIiYjeDQxRTsiPjwhRU5USVRZIFBjeSAiJiN4NDFGOyI%2BPCFFTlRJVFkgUmN5ICImI3g0MjA7Ij48IUVOVElUWSBTY3kgIiYjeDQyMTsiPjwhRU5USVRZIFRjeSAiJiN4NDIyOyI%2BPCFFTlRJVFkgVWN5ICImI3g0MjM7Ij48IUVOVElUWSBGY3kgIiYjeDQyNDsiPjwhRU5USVRZIEtIY3kgIiYjeDQyNTsiPjwhRU5USVRZIFRTY3kgIiYjeDQyNjsiPjwhRU5USVRZIENIY3kgIiYjeDQyNzsiPjwhRU5USVRZIFNIY3kgIiYjeDQyODsiPjwhRU5USVRZIFNIQ0hjeSAiJiN4NDI5OyI%2BPCFFTlRJVFkgSEFSRGN5ICImI3g0MkE7Ij48IUVOVElUWSBZY3kgIiYjeDQyQjsiPjwhRU5USVRZIFNPRlRjeSAiJiN4NDJDOyI%2BPCFFTlRJVFkgRWN5ICImI3g0MkQ7Ij48IUVOVElUWSBZVWN5ICImI3g0MkU7Ij48IUVOVElUWSBZQWN5ICImI3g0MkY7Ij48IUVOVElUWSBhY3kgIiYjeDQzMDsiPjwhRU5USVRZIGJjeSAiJiN4NDMxOyI%2BPCFFTlRJVFkgdmN5ICImI3g0MzI7Ij48IUVOVElUWSBnY3kgIiYjeDQzMzsiPjwhRU5USVRZIGRjeSAiJiN4NDM0OyI%2BPCFFTlRJVFkgaWVjeSAiJiN4NDM1OyI%2BPCFFTlRJVFkgemhjeSAiJiN4NDM2OyI%2BPCFFTlRJVFkgemN5ICImI3g0Mzc7Ij48IUVOVElUWSBpY3kgIiYjeDQzODsiPjwhRU5USVRZIGpjeSAiJiN4NDM5OyI%2BPCFFTlRJVFkga2N5ICImI3g0M0E7Ij48IUVOVElUWSBsY3kgIiYjeDQzQjsiPjwhRU5USVRZIG1jeSAiJiN4NDNDOyI%2BPCFFTlRJVFkgbmN5ICImI3g0M0Q7Ij48IUVOVElUWSBvY3kgIiYjeDQzRTsiPjwhRU5USVRZIHBjeSAiJiN4NDNGOyI%2BPCFFTlRJVFkgcmN5ICImI3g0NDA7Ij48IUVOVElUWSBzY3kgIiYjeDQ0MTsiPjwhRU5USVRZIHRjeSAiJiN4NDQyOyI%2BPCFFTlRJVFkgdWN5ICImI3g0NDM7Ij48IUVOVElUWSBmY3kgIiYjeDQ0NDsiPjwhRU5USVRZIGtoY3kgIiYjeDQ0NTsiPjwhRU5USVRZIHRzY3kgIiYjeDQ0NjsiPjwhRU5USVRZIGNoY3kgIiYjeDQ0NzsiPjwhRU5USVRZIHNoY3kgIiYjeDQ0ODsiPjwhRU5USVRZIHNoY2hjeSAiJiN4NDQ5OyI%2BPCFFTlRJVFkgaGFyZGN5ICImI3g0NEE7Ij48IUVOVElUWSB5Y3kgIiYjeDQ0QjsiPjwhRU5USVRZIHNvZnRjeSAiJiN4NDRDOyI%2BPCFFTlRJVFkgZWN5ICImI3g0NEQ7Ij48IUVOVElUWSB5dWN5ICImI3g0NEU7Ij48IUVOVElUWSB5YWN5ICImI3g0NEY7Ij48IUVOVElUWSBpb2N5ICImI3g0NTE7Ij48IUVOVElUWSBkamN5ICImI3g0NTI7Ij48IUVOVElUWSBnamN5ICImI3g0NTM7Ij48IUVOVElUWSBqdWtjeSAiJiN4NDU0OyI%2BPCFFTlRJVFkgZHNjeSAiJiN4NDU1OyI%2BPCFFTlRJVFkgaXVrY3kgIiYjeDQ1NjsiPjwhRU5USVRZIHlpY3kgIiYjeDQ1NzsiPjwhRU5USVRZIGpzZXJjeSAiJiN4NDU4OyI%2BPCFFTlRJVFkgbGpjeSAiJiN4NDU5OyI%2BPCFFTlRJVFkgbmpjeSAiJiN4NDVBOyI%2BPCFFTlRJVFkgdHNoY3kgIiYjeDQ1QjsiPjwhRU5USVRZIGtqY3kgIiYjeDQ1QzsiPjwhRU5USVRZIHVicmN5ICImI3g0NUU7Ij48IUVOVElUWSBkemN5ICImI3g0NUY7Ij48IUVOVElUWSBlbnNwICImI3gyMDAyOyI%2BPCFFTlRJVFkgZW1zcCAiJiN4MjAwMzsiPjwhRU5USVRZIGVtc3AxMyAiJiN4MjAwNDsiPjwhRU5USVRZIGVtc3AxNCAiJiN4MjAwNTsiPjwhRU5USVRZIG51bXNwICImI3gyMDA3OyI%2BPCFFTlRJVFkgcHVuY3NwICImI3gyMDA4OyI%2BPCFFTlRJVFkgdGhpbnNwICImI3gyMDA5OyI%2BPCFFTlRJVFkgVGhpblNwYWNlICImI3gyMDA5OyI%2BPCFFTlRJVFkgaGFpcnNwICImI3gyMDBBOyI%2BPCFFTlRJVFkgVmVyeVRoaW5TcGFjZSAiJiN4MjAwQTsiPjwhRU5USVRZIFplcm9XaWR0aFNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVWZXJ5VGhpblNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVUaGluU3BhY2UgIiYjeDIwMEI7Ij48IUVOVElUWSBOZWdhdGl2ZU1lZGl1bVNwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgTmVnYXRpdmVUaGlja1NwYWNlICImI3gyMDBCOyI%2BPCFFTlRJVFkgenduaiAiJiN4MjAwQzsiPjwhRU5USVRZIHp3aiAiJiN4MjAwRDsiPjwhRU5USVRZIGxybSAiJiN4MjAwRTsiPjwhRU5USVRZIHJsbSAiJiN4MjAwRjsiPjwhRU5USVRZIGh5cGhlbiAiJiN4MjAxMDsiPjwhRU5USVRZIGRhc2ggIiYjeDIwMTA7Ij48IUVOVElUWSBuZGFzaCAiJiN4MjAxMzsiPjwhRU5USVRZIG1kYXNoICImI3gyMDE0OyI%2BPCFFTlRJVFkgaG9yYmFyICImI3gyMDE1OyI%2BPCFFTlRJVFkgVmVyYmFyICImI3gyMDE2OyI%2BPCFFTlRJVFkgVmVydCAiJiN4MjAxNjsiPjwhRU5USVRZIGxzcXVvICImI3gyMDE4OyI%2BPCFFTlRJVFkgT3BlbkN1cmx5UXVvdGUgIiYjeDIwMTg7Ij48IUVOVElUWSByc3F1byAiJiN4MjAxOTsiPjwhRU5USVRZIHJzcXVvciAiJiN4MjAxOTsiPjwhRU5USVRZIENsb3NlQ3VybHlRdW90ZSAiJiN4MjAxOTsiPjwhRU5USVRZIGxzcXVvciAiJiN4MjAxQTsiPjwhRU5USVRZIHNicXVvICImI3gyMDFBOyI%2BPCFFTlRJVFkgbGRxdW8gIiYjeDIwMUM7Ij48IUVOVElUWSBPcGVuQ3VybHlEb3VibGVRdW90ZSAiJiN4MjAxQzsiPjwhRU5USVRZIHJkcXVvICImI3gyMDFEOyI%2BPCFFTlRJVFkgcmRxdW9yICImI3gyMDFEOyI%2BPCFFTlRJVFkgQ2xvc2VDdXJseURvdWJsZVF1b3RlICImI3gyMDFEOyI%2BPCFFTlRJVFkgbGRxdW9yICImI3gyMDFFOyI%2BPCFFTlRJVFkgYmRxdW8gIiYjeDIwMUU7Ij48IUVOVElUWSBkYWdnZXIgIiYjeDIwMjA7Ij48IUVOVElUWSBEYWdnZXIgIiYjeDIwMjE7Ij48IUVOVElUWSBkZGFnZ2VyICImI3gyMDIxOyI%2BPCFFTlRJVFkgYnVsbCAiJiN4MjAyMjsiPjwhRU5USVRZIGJ1bGxldCAiJiN4MjAyMjsiPjwhRU5USVRZIG5sZHIgIiYjeDIwMjU7Ij48IUVOVElUWSBoZWxsaXAgIiYjeDIwMjY7Ij48IUVOVElUWSBtbGRyICImI3gyMDI2OyI%2BPCFFTlRJVFkgcGVybWlsICImI3gyMDMwOyI%2BPCFFTlRJVFkgcGVydGVuayAiJiN4MjAzMTsiPjwhRU5USVRZIHByaW1lICImI3gyMDMyOyI%2BPCFFTlRJVFkgUHJpbWUgIiYjeDIwMzM7Ij48IUVOVElUWSB0cHJpbWUgIiYjeDIwMzQ7Ij48IUVOVElUWSBicHJpbWUgIiYjeDIwMzU7Ij48IUVOVElUWSBiYWNrcHJpbWUgIiYjeDIwMzU7Ij48IUVOVElUWSBsc2FxdW8gIiYjeDIwMzk7Ij48IUVOVElUWSByc2FxdW8gIiYjeDIwM0E7Ij48IUVOVElUWSBvbGluZSAiJiN4MjAzRTsiPjwhRU5USVRZIE92ZXJCYXIgIiYjeDIwM0U7Ij48IUVOVElUWSBjYXJldCAiJiN4MjA0MTsiPjwhRU5USVRZIGh5YnVsbCAiJiN4MjA0MzsiPjwhRU5USVRZIGZyYXNsICImI3gyMDQ0OyI%2BPCFFTlRJVFkgYnNlbWkgIiYjeDIwNEY7Ij48IUVOVElUWSBxcHJpbWUgIiYjeDIwNTc7Ij48IUVOVElUWSBNZWRpdW1TcGFjZSAiJiN4MjA1RjsiPjwhRU5USVRZIE5vQnJlYWsgIiYjeDIwNjA7Ij48IUVOVElUWSBBcHBseUZ1bmN0aW9uICImI3gyMDYxOyI%2BPCFFTlRJVFkgYWYgIiYjeDIwNjE7Ij48IUVOVElUWSBJbnZpc2libGVUaW1lcyAiJiN4MjA2MjsiPjwhRU5USVRZIGl0ICImI3gyMDYyOyI%2BPCFFTlRJVFkgSW52aXNpYmxlQ29tbWEgIiYjeDIwNjM7Ij48IUVOVElUWSBpYyAiJiN4MjA2MzsiPjwhRU5USVRZIGV1cm8gIiYjeDIwQUM7Ij48IUVOVElUWSB0ZG90ICImI3gyMERCOyI%2BPCFFTlRJVFkgVHJpcGxlRG90ICImI3gyMERCOyI%2BPCFFTlRJVFkgRG90RG90ICImI3gyMERDOyI%2BPCFFTlRJVFkgQ29wZiAiJiN4MjEwMjsiPjwhRU5USVRZIGNvbXBsZXhlcyAiJiN4MjEwMjsiPjwhRU5USVRZIGluY2FyZSAiJiN4MjEwNTsiPjwhRU5USVRZIGdzY3IgIiYjeDIxMEE7Ij48IUVOVElUWSBoYW1pbHQgIiYjeDIxMEI7Ij48IUVOVElUWSBIaWxiZXJ0U3BhY2UgIiYjeDIxMEI7Ij48IUVOVElUWSBIc2NyICImI3gyMTBCOyI%2BPCFFTlRJVFkgSGZyICImI3gyMTBDOyI%2BPCFFTlRJVFkgUG9pbmNhcmVwbGFuZSAiJiN4MjEwQzsiPjwhRU5USVRZIHF1YXRlcm5pb25zICImI3gyMTBEOyI%2BPCFFTlRJVFkgSG9wZiAiJiN4MjEwRDsiPjwhRU5USVRZIHBsYW5ja2ggIiYjeDIxMEU7Ij48IUVOVElUWSBwbGFuY2sgIiYjeDIxMEY7Ij48IUVOVElUWSBoYmFyICImI3gyMTBGOyI%2BPCFFTlRJVFkgcGxhbmt2ICImI3gyMTBGOyI%2BPCFFTlRJVFkgaHNsYXNoICImI3gyMTBGOyI%2BPCFFTlRJVFkgSXNjciAiJiN4MjExMDsiPjwhRU5USVRZIGltYWdsaW5lICImI3gyMTEwOyI%2BPCFFTlRJVFkgaW1hZ2UgIiYjeDIxMTE7Ij48IUVOVElUWSBJbSAiJiN4MjExMTsiPjwhRU5USVRZIGltYWdwYXJ0ICImI3gyMTExOyI%2BPCFFTlRJVFkgSWZyICImI3gyMTExOyI%2BPCFFTlRJVFkgTHNjciAiJiN4MjExMjsiPjwhRU5USVRZIGxhZ3JhbiAiJiN4MjExMjsiPjwhRU5USVRZIExhcGxhY2V0cmYgIiYjeDIxMTI7Ij48IUVOVElUWSBlbGwgIiYjeDIxMTM7Ij48IUVOVElUWSBOb3BmICImI3gyMTE1OyI%2BPCFFTlRJVFkgbmF0dXJhbHMgIiYjeDIxMTU7Ij48IUVOVElUWSBudW1lcm8gIiYjeDIxMTY7Ij48IUVOVElUWSBjb3B5c3IgIiYjeDIxMTc7Ij48IUVOVElUWSB3ZWllcnAgIiYjeDIxMTg7Ij48IUVOVElUWSB3cCAiJiN4MjExODsiPjwhRU5USVRZIFBvcGYgIiYjeDIxMTk7Ij48IUVOVElUWSBwcmltZXMgIiYjeDIxMTk7Ij48IUVOVElUWSByYXRpb25hbHMgIiYjeDIxMUE7Ij48IUVOVElUWSBRb3BmICImI3gyMTFBOyI%2BPCFFTlRJVFkgUnNjciAiJiN4MjExQjsiPjwhRU5USVRZIHJlYWxpbmUgIiYjeDIxMUI7Ij48IUVOVElUWSByZWFsICImI3gyMTFDOyI%2BPCFFTlRJVFkgUmUgIiYjeDIxMUM7Ij48IUVOVElUWSByZWFscGFydCAiJiN4MjExQzsiPjwhRU5USVRZIFJmciAiJiN4MjExQzsiPjwhRU5USVRZIHJlYWxzICImI3gyMTFEOyI%2BPCFFTlRJVFkgUm9wZiAiJiN4MjExRDsiPjwhRU5USVRZIHJ4ICImI3gyMTFFOyI%2BPCFFTlRJVFkgdHJhZGUgIiYjeDIxMjI7Ij48IUVOVElUWSBUUkFERSAiJiN4MjEyMjsiPjwhRU5USVRZIGludGVnZXJzICImI3gyMTI0OyI%2BPCFFTlRJVFkgWm9wZiAiJiN4MjEyNDsiPjwhRU5USVRZIG1obyAiJiN4MjEyNzsiPjwhRU5USVRZIFpmciAiJiN4MjEyODsiPjwhRU5USVRZIHplZXRyZiAiJiN4MjEyODsiPjwhRU5USVRZIGlpb3RhICImI3gyMTI5OyI%2BPCFFTlRJVFkgYmVybm91ICImI3gyMTJDOyI%2BPCFFTlRJVFkgQmVybm91bGxpcyAiJiN4MjEyQzsiPjwhRU5USVRZIEJzY3IgIiYjeDIxMkM7Ij48IUVOVElUWSBDZnIgIiYjeDIxMkQ7Ij48IUVOVElUWSBDYXlsZXlzICImI3gyMTJEOyI%2BPCFFTlRJVFkgZXNjciAiJiN4MjEyRjsiPjwhRU5USVRZIEVzY3IgIiYjeDIxMzA7Ij48IUVOVElUWSBleHBlY3RhdGlvbiAiJiN4MjEzMDsiPjwhRU5USVRZIEZzY3IgIiYjeDIxMzE7Ij48IUVOVElUWSBGb3VyaWVydHJmICImI3gyMTMxOyI%2BPCFFTlRJVFkgcGhtbWF0ICImI3gyMTMzOyI%2BPCFFTlRJVFkgTWVsbGludHJmICImI3gyMTMzOyI%2BPCFFTlRJVFkgTXNjciAiJiN4MjEzMzsiPjwhRU5USVRZIG9yZGVyICImI3gyMTM0OyI%2BPCFFTlRJVFkgb3JkZXJvZiAiJiN4MjEzNDsiPjwhRU5USVRZIG9zY3IgIiYjeDIxMzQ7Ij48IUVOVElUWSBhbGVmc3ltICImI3gyMTM1OyI%2BPCFFTlRJVFkgYWxlcGggIiYjeDIxMzU7Ij48IUVOVElUWSBiZXRoICImI3gyMTM2OyI%2BPCFFTlRJVFkgZ2ltZWwgIiYjeDIxMzc7Ij48IUVOVElUWSBkYWxldGggIiYjeDIxMzg7Ij48IUVOVElUWSBDYXBpdGFsRGlmZmVyZW50aWFsRCAiJiN4MjE0NTsiPjwhRU5USVRZIEREICImI3gyMTQ1OyI%2BPCFFTlRJVFkgRGlmZmVyZW50aWFsRCAiJiN4MjE0NjsiPjwhRU5USVRZIGRkICImI3gyMTQ2OyI%2BPCFFTlRJVFkgRXhwb25lbnRpYWxFICImI3gyMTQ3OyI%2BPCFFTlRJVFkgZXhwb25lbnRpYWxlICImI3gyMTQ3OyI%2BPCFFTlRJVFkgZWUgIiYjeDIxNDc7Ij48IUVOVElUWSBJbWFnaW5hcnlJICImI3gyMTQ4OyI%2BPCFFTlRJVFkgaWkgIiYjeDIxNDg7Ij48IUVOVElUWSBmcmFjMTMgIiYjeDIxNTM7Ij48IUVOVElUWSBmcmFjMjMgIiYjeDIxNTQ7Ij48IUVOVElUWSBmcmFjMTUgIiYjeDIxNTU7Ij48IUVOVElUWSBmcmFjMjUgIiYjeDIxNTY7Ij48IUVOVElUWSBmcmFjMzUgIiYjeDIxNTc7Ij48IUVOVElUWSBmcmFjNDUgIiYjeDIxNTg7Ij48IUVOVElUWSBmcmFjMTYgIiYjeDIxNTk7Ij48IUVOVElUWSBmcmFjNTYgIiYjeDIxNUE7Ij48IUVOVElUWSBmcmFjMTggIiYjeDIxNUI7Ij48IUVOVElUWSBmcmFjMzggIiYjeDIxNUM7Ij48IUVOVElUWSBmcmFjNTggIiYjeDIxNUQ7Ij48IUVOVElUWSBmcmFjNzggIiYjeDIxNUU7Ij48IUVOVElUWSBsYXJyICImI3gyMTkwOyI%2BPCFFTlRJVFkgbGVmdGFycm93ICImI3gyMTkwOyI%2BPCFFTlRJVFkgTGVmdEFycm93ICImI3gyMTkwOyI%2BPCFFTlRJVFkgc2xhcnIgIiYjeDIxOTA7Ij48IUVOVElUWSBTaG9ydExlZnRBcnJvdyAiJiN4MjE5MDsiPjwhRU5USVRZIHVhcnIgIiYjeDIxOTE7Ij48IUVOVElUWSB1cGFycm93ICImI3gyMTkxOyI%2BPCFFTlRJVFkgVXBBcnJvdyAiJiN4MjE5MTsiPjwhRU5USVRZIFNob3J0VXBBcnJvdyAiJiN4MjE5MTsiPjwhRU5USVRZIHJhcnIgIiYjeDIxOTI7Ij48IUVOVElUWSByaWdodGFycm93ICImI3gyMTkyOyI%2BPCFFTlRJVFkgUmlnaHRBcnJvdyAiJiN4MjE5MjsiPjwhRU5USVRZIHNyYXJyICImI3gyMTkyOyI%2BPCFFTlRJVFkgU2hvcnRSaWdodEFycm93ICImI3gyMTkyOyI%2BPCFFTlRJVFkgZGFyciAiJiN4MjE5MzsiPjwhRU5USVRZIGRvd25hcnJvdyAiJiN4MjE5MzsiPjwhRU5USVRZIERvd25BcnJvdyAiJiN4MjE5MzsiPjwhRU5USVRZIFNob3J0RG93bkFycm93ICImI3gyMTkzOyI%2BPCFFTlRJVFkgaGFyciAiJiN4MjE5NDsiPjwhRU5USVRZIGxlZnRyaWdodGFycm93ICImI3gyMTk0OyI%2BPCFFTlRJVFkgTGVmdFJpZ2h0QXJyb3cgIiYjeDIxOTQ7Ij48IUVOVElUWSB2YXJyICImI3gyMTk1OyI%2BPCFFTlRJVFkgdXBkb3duYXJyb3cgIiYjeDIxOTU7Ij48IUVOVElUWSBVcERvd25BcnJvdyAiJiN4MjE5NTsiPjwhRU5USVRZIG53YXJyICImI3gyMTk2OyI%2BPCFFTlRJVFkgVXBwZXJMZWZ0QXJyb3cgIiYjeDIxOTY7Ij48IUVOVElUWSBud2Fycm93ICImI3gyMTk2OyI%2BPCFFTlRJVFkgbmVhcnIgIiYjeDIxOTc7Ij48IUVOVElUWSBVcHBlclJpZ2h0QXJyb3cgIiYjeDIxOTc7Ij48IUVOVElUWSBuZWFycm93ICImI3gyMTk3OyI%2BPCFFTlRJVFkgc2VhcnIgIiYjeDIxOTg7Ij48IUVOVElUWSBzZWFycm93ICImI3gyMTk4OyI%2BPCFFTlRJVFkgTG93ZXJSaWdodEFycm93ICImI3gyMTk4OyI%2BPCFFTlRJVFkgc3dhcnIgIiYjeDIxOTk7Ij48IUVOVElUWSBzd2Fycm93ICImI3gyMTk5OyI%2BPCFFTlRJVFkgTG93ZXJMZWZ0QXJyb3cgIiYjeDIxOTk7Ij48IUVOVElUWSBubGFyciAiJiN4MjE5QTsiPjwhRU5USVRZIG5sZWZ0YXJyb3cgIiYjeDIxOUE7Ij48IUVOVElUWSBucmFyciAiJiN4MjE5QjsiPjwhRU5USVRZIG5yaWdodGFycm93ICImI3gyMTlCOyI%2BPCFFTlRJVFkgcmFycncgIiYjeDIxOUQ7Ij48IUVOVElUWSByaWdodHNxdWlnYXJyb3cgIiYjeDIxOUQ7Ij48IUVOVElUWSBMYXJyICImI3gyMTlFOyI%2BPCFFTlRJVFkgdHdvaGVhZGxlZnRhcnJvdyAiJiN4MjE5RTsiPjwhRU5USVRZIFVhcnIgIiYjeDIxOUY7Ij48IUVOVElUWSBSYXJyICImI3gyMUEwOyI%2BPCFFTlRJVFkgdHdvaGVhZHJpZ2h0YXJyb3cgIiYjeDIxQTA7Ij48IUVOVElUWSBEYXJyICImI3gyMUExOyI%2BPCFFTlRJVFkgbGFycnRsICImI3gyMUEyOyI%2BPCFFTlRJVFkgbGVmdGFycm93dGFpbCAiJiN4MjFBMjsiPjwhRU5USVRZIHJhcnJ0bCAiJiN4MjFBMzsiPjwhRU5USVRZIHJpZ2h0YXJyb3d0YWlsICImI3gyMUEzOyI%2BPCFFTlRJVFkgTGVmdFRlZUFycm93ICImI3gyMUE0OyI%2BPCFFTlRJVFkgbWFwc3RvbGVmdCAiJiN4MjFBNDsiPjwhRU5USVRZIFVwVGVlQXJyb3cgIiYjeDIxQTU7Ij48IUVOVElUWSBtYXBzdG91cCAiJiN4MjFBNTsiPjwhRU5USVRZIG1hcCAiJiN4MjFBNjsiPjwhRU5USVRZIFJpZ2h0VGVlQXJyb3cgIiYjeDIxQTY7Ij48IUVOVElUWSBtYXBzdG8gIiYjeDIxQTY7Ij48IUVOVElUWSBEb3duVGVlQXJyb3cgIiYjeDIxQTc7Ij48IUVOVElUWSBtYXBzdG9kb3duICImI3gyMUE3OyI%2BPCFFTlRJVFkgbGFycmhrICImI3gyMUE5OyI%2BPCFFTlRJVFkgaG9va2xlZnRhcnJvdyAiJiN4MjFBOTsiPjwhRU5USVRZIHJhcnJoayAiJiN4MjFBQTsiPjwhRU5USVRZIGhvb2tyaWdodGFycm93ICImI3gyMUFBOyI%2BPCFFTlRJVFkgbGFycmxwICImI3gyMUFCOyI%2BPCFFTlRJVFkgbG9vcGFycm93bGVmdCAiJiN4MjFBQjsiPjwhRU5USVRZIHJhcnJscCAiJiN4MjFBQzsiPjwhRU5USVRZIGxvb3BhcnJvd3JpZ2h0ICImI3gyMUFDOyI%2BPCFFTlRJVFkgaGFycncgIiYjeDIxQUQ7Ij48IUVOVElUWSBsZWZ0cmlnaHRzcXVpZ2Fycm93ICImI3gyMUFEOyI%2BPCFFTlRJVFkgbmhhcnIgIiYjeDIxQUU7Ij48IUVOVElUWSBubGVmdHJpZ2h0YXJyb3cgIiYjeDIxQUU7Ij48IUVOVElUWSBsc2ggIiYjeDIxQjA7Ij48IUVOVElUWSBMc2ggIiYjeDIxQjA7Ij48IUVOVElUWSByc2ggIiYjeDIxQjE7Ij48IUVOVElUWSBSc2ggIiYjeDIxQjE7Ij48IUVOVElUWSBsZHNoICImI3gyMUIyOyI%2BPCFFTlRJVFkgcmRzaCAiJiN4MjFCMzsiPjwhRU5USVRZIGNyYXJyICImI3gyMUI1OyI%2BPCFFTlRJVFkgY3VsYXJyICImI3gyMUI2OyI%2BPCFFTlRJVFkgY3VydmVhcnJvd2xlZnQgIiYjeDIxQjY7Ij48IUVOVElUWSBjdXJhcnIgIiYjeDIxQjc7Ij48IUVOVElUWSBjdXJ2ZWFycm93cmlnaHQgIiYjeDIxQjc7Ij48IUVOVElUWSBvbGFyciAiJiN4MjFCQTsiPjwhRU5USVRZIGNpcmNsZWFycm93bGVmdCAiJiN4MjFCQTsiPjwhRU5USVRZIG9yYXJyICImI3gyMUJCOyI%2BPCFFTlRJVFkgY2lyY2xlYXJyb3dyaWdodCAiJiN4MjFCQjsiPjwhRU5USVRZIGxoYXJ1ICImI3gyMUJDOyI%2BPCFFTlRJVFkgTGVmdFZlY3RvciAiJiN4MjFCQzsiPjwhRU5USVRZIGxlZnRoYXJwb29udXAgIiYjeDIxQkM7Ij48IUVOVElUWSBsaGFyZCAiJiN4MjFCRDsiPjwhRU5USVRZIGxlZnRoYXJwb29uZG93biAiJiN4MjFCRDsiPjwhRU5USVRZIERvd25MZWZ0VmVjdG9yICImI3gyMUJEOyI%2BPCFFTlRJVFkgdWhhcnIgIiYjeDIxQkU7Ij48IUVOVElUWSB1cGhhcnBvb25yaWdodCAiJiN4MjFCRTsiPjwhRU5USVRZIFJpZ2h0VXBWZWN0b3IgIiYjeDIxQkU7Ij48IUVOVElUWSB1aGFybCAiJiN4MjFCRjsiPjwhRU5USVRZIHVwaGFycG9vbmxlZnQgIiYjeDIxQkY7Ij48IUVOVElUWSBMZWZ0VXBWZWN0b3IgIiYjeDIxQkY7Ij48IUVOVElUWSByaGFydSAiJiN4MjFDMDsiPjwhRU5USVRZIFJpZ2h0VmVjdG9yICImI3gyMUMwOyI%2BPCFFTlRJVFkgcmlnaHRoYXJwb29udXAgIiYjeDIxQzA7Ij48IUVOVElUWSByaGFyZCAiJiN4MjFDMTsiPjwhRU5USVRZIHJpZ2h0aGFycG9vbmRvd24gIiYjeDIxQzE7Ij48IUVOVElUWSBEb3duUmlnaHRWZWN0b3IgIiYjeDIxQzE7Ij48IUVOVElUWSBkaGFyciAiJiN4MjFDMjsiPjwhRU5USVRZIFJpZ2h0RG93blZlY3RvciAiJiN4MjFDMjsiPjwhRU5USVRZIGRvd25oYXJwb29ucmlnaHQgIiYjeDIxQzI7Ij48IUVOVElUWSBkaGFybCAiJiN4MjFDMzsiPjwhRU5USVRZIExlZnREb3duVmVjdG9yICImI3gyMUMzOyI%2BPCFFTlRJVFkgZG93bmhhcnBvb25sZWZ0ICImI3gyMUMzOyI%2BPCFFTlRJVFkgcmxhcnIgIiYjeDIxQzQ7Ij48IUVOVElUWSByaWdodGxlZnRhcnJvd3MgIiYjeDIxQzQ7Ij48IUVOVElUWSBSaWdodEFycm93TGVmdEFycm93ICImI3gyMUM0OyI%2BPCFFTlRJVFkgdWRhcnIgIiYjeDIxQzU7Ij48IUVOVElUWSBVcEFycm93RG93bkFycm93ICImI3gyMUM1OyI%2BPCFFTlRJVFkgbHJhcnIgIiYjeDIxQzY7Ij48IUVOVElUWSBsZWZ0cmlnaHRhcnJvd3MgIiYjeDIxQzY7Ij48IUVOVElUWSBMZWZ0QXJyb3dSaWdodEFycm93ICImI3gyMUM2OyI%2BPCFFTlRJVFkgbGxhcnIgIiYjeDIxQzc7Ij48IUVOVElUWSBsZWZ0bGVmdGFycm93cyAiJiN4MjFDNzsiPjwhRU5USVRZIHV1YXJyICImI3gyMUM4OyI%2BPCFFTlRJVFkgdXB1cGFycm93cyAiJiN4MjFDODsiPjwhRU5USVRZIHJyYXJyICImI3gyMUM5OyI%2BPCFFTlRJVFkgcmlnaHRyaWdodGFycm93cyAiJiN4MjFDOTsiPjwhRU5USVRZIGRkYXJyICImI3gyMUNBOyI%2BPCFFTlRJVFkgZG93bmRvd25hcnJvd3MgIiYjeDIxQ0E7Ij48IUVOVElUWSBscmhhciAiJiN4MjFDQjsiPjwhRU5USVRZIFJldmVyc2VFcXVpbGlicml1bSAiJiN4MjFDQjsiPjwhRU5USVRZIGxlZnRyaWdodGhhcnBvb25zICImI3gyMUNCOyI%2BPCFFTlRJVFkgcmxoYXIgIiYjeDIxQ0M7Ij48IUVOVElUWSByaWdodGxlZnRoYXJwb29ucyAiJiN4MjFDQzsiPjwhRU5USVRZIEVxdWlsaWJyaXVtICImI3gyMUNDOyI%2BPCFFTlRJVFkgbmxBcnIgIiYjeDIxQ0Q7Ij48IUVOVElUWSBuTGVmdGFycm93ICImI3gyMUNEOyI%2BPCFFTlRJVFkgbmhBcnIgIiYjeDIxQ0U7Ij48IUVOVElUWSBuTGVmdHJpZ2h0YXJyb3cgIiYjeDIxQ0U7Ij48IUVOVElUWSBuckFyciAiJiN4MjFDRjsiPjwhRU5USVRZIG5SaWdodGFycm93ICImI3gyMUNGOyI%2BPCFFTlRJVFkgbEFyciAiJiN4MjFEMDsiPjwhRU5USVRZIExlZnRhcnJvdyAiJiN4MjFEMDsiPjwhRU5USVRZIERvdWJsZUxlZnRBcnJvdyAiJiN4MjFEMDsiPjwhRU5USVRZIHVBcnIgIiYjeDIxRDE7Ij48IUVOVElUWSBVcGFycm93ICImI3gyMUQxOyI%2BPCFFTlRJVFkgRG91YmxlVXBBcnJvdyAiJiN4MjFEMTsiPjwhRU5USVRZIHJBcnIgIiYjeDIxRDI7Ij48IUVOVElUWSBSaWdodGFycm93ICImI3gyMUQyOyI%2BPCFFTlRJVFkgSW1wbGllcyAiJiN4MjFEMjsiPjwhRU5USVRZIERvdWJsZVJpZ2h0QXJyb3cgIiYjeDIxRDI7Ij48IUVOVElUWSBkQXJyICImI3gyMUQzOyI%2BPCFFTlRJVFkgRG93bmFycm93ICImI3gyMUQzOyI%2BPCFFTlRJVFkgRG91YmxlRG93bkFycm93ICImI3gyMUQzOyI%2BPCFFTlRJVFkgaEFyciAiJiN4MjFENDsiPjwhRU5USVRZIExlZnRyaWdodGFycm93ICImI3gyMUQ0OyI%2BPCFFTlRJVFkgRG91YmxlTGVmdFJpZ2h0QXJyb3cgIiYjeDIxRDQ7Ij48IUVOVElUWSBpZmYgIiYjeDIxRDQ7Ij48IUVOVElUWSB2QXJyICImI3gyMUQ1OyI%2BPCFFTlRJVFkgVXBkb3duYXJyb3cgIiYjeDIxRDU7Ij48IUVOVElUWSBEb3VibGVVcERvd25BcnJvdyAiJiN4MjFENTsiPjwhRU5USVRZIG53QXJyICImI3gyMUQ2OyI%2BPCFFTlRJVFkgbmVBcnIgIiYjeDIxRDc7Ij48IUVOVElUWSBzZUFyciAiJiN4MjFEODsiPjwhRU5USVRZIHN3QXJyICImI3gyMUQ5OyI%2BPCFFTlRJVFkgbEFhcnIgIiYjeDIxREE7Ij48IUVOVElUWSBMbGVmdGFycm93ICImI3gyMURBOyI%2BPCFFTlRJVFkgckFhcnIgIiYjeDIxREI7Ij48IUVOVElUWSBScmlnaHRhcnJvdyAiJiN4MjFEQjsiPjwhRU5USVRZIHppZ3JhcnIgIiYjeDIxREQ7Ij48IUVOVElUWSBsYXJyYiAiJiN4MjFFNDsiPjwhRU5USVRZIExlZnRBcnJvd0JhciAiJiN4MjFFNDsiPjwhRU5USVRZIHJhcnJiICImI3gyMUU1OyI%2BPCFFTlRJVFkgUmlnaHRBcnJvd0JhciAiJiN4MjFFNTsiPjwhRU5USVRZIGR1YXJyICImI3gyMUY1OyI%2BPCFFTlRJVFkgRG93bkFycm93VXBBcnJvdyAiJiN4MjFGNTsiPjwhRU5USVRZIGxvYXJyICImI3gyMUZEOyI%2BPCFFTlRJVFkgcm9hcnIgIiYjeDIxRkU7Ij48IUVOVElUWSBob2FyciAiJiN4MjFGRjsiPjwhRU5USVRZIGZvcmFsbCAiJiN4MjIwMDsiPjwhRU5USVRZIEZvckFsbCAiJiN4MjIwMDsiPjwhRU5USVRZIGNvbXAgIiYjeDIyMDE7Ij48IUVOVElUWSBjb21wbGVtZW50ICImI3gyMjAxOyI%2BPCFFTlRJVFkgcGFydCAiJiN4MjIwMjsiPjwhRU5USVRZIFBhcnRpYWxEICImI3gyMjAyOyI%2BPCFFTlRJVFkgZXhpc3QgIiYjeDIyMDM7Ij48IUVOVElUWSBFeGlzdHMgIiYjeDIyMDM7Ij48IUVOVElUWSBuZXhpc3QgIiYjeDIyMDQ7Ij48IUVOVElUWSBOb3RFeGlzdHMgIiYjeDIyMDQ7Ij48IUVOVElUWSBuZXhpc3RzICImI3gyMjA0OyI%2BPCFFTlRJVFkgZW1wdHkgIiYjeDIyMDU7Ij48IUVOVElUWSBlbXB0eXNldCAiJiN4MjIwNTsiPjwhRU5USVRZIGVtcHR5diAiJiN4MjIwNTsiPjwhRU5USVRZIHZhcm5vdGhpbmcgIiYjeDIyMDU7Ij48IUVOVElUWSBuYWJsYSAiJiN4MjIwNzsiPjwhRU5USVRZIERlbCAiJiN4MjIwNzsiPjwhRU5USVRZIGlzaW4gIiYjeDIyMDg7Ij48IUVOVElUWSBpc2ludiAiJiN4MjIwODsiPjwhRU5USVRZIEVsZW1lbnQgIiYjeDIyMDg7Ij48IUVOVElUWSBpbiAiJiN4MjIwODsiPjwhRU5USVRZIG5vdGluICImI3gyMjA5OyI%2BPCFFTlRJVFkgTm90RWxlbWVudCAiJiN4MjIwOTsiPjwhRU5USVRZIG5vdGludmEgIiYjeDIyMDk7Ij48IUVOVElUWSBuaXYgIiYjeDIyMEI7Ij48IUVOVElUWSBSZXZlcnNlRWxlbWVudCAiJiN4MjIwQjsiPjwhRU5USVRZIG5pICImI3gyMjBCOyI%2BPCFFTlRJVFkgU3VjaFRoYXQgIiYjeDIyMEI7Ij48IUVOVElUWSBub3RuaSAiJiN4MjIwQzsiPjwhRU5USVRZIG5vdG5pdmEgIiYjeDIyMEM7Ij48IUVOVElUWSBOb3RSZXZlcnNlRWxlbWVudCAiJiN4MjIwQzsiPjwhRU5USVRZIHByb2QgIiYjeDIyMEY7Ij48IUVOVElUWSBQcm9kdWN0ICImI3gyMjBGOyI%2BPCFFTlRJVFkgY29wcm9kICImI3gyMjEwOyI%2BPCFFTlRJVFkgQ29wcm9kdWN0ICImI3gyMjEwOyI%2BPCFFTlRJVFkgc3VtICImI3gyMjExOyI%2BPCFFTlRJVFkgU3VtICImI3gyMjExOyI%2BPCFFTlRJVFkgbWludXMgIiYjeDIyMTI7Ij48IUVOVElUWSBtbnBsdXMgIiYjeDIyMTM7Ij48IUVOVElUWSBtcCAiJiN4MjIxMzsiPjwhRU5USVRZIE1pbnVzUGx1cyAiJiN4MjIxMzsiPjwhRU5USVRZIHBsdXNkbyAiJiN4MjIxNDsiPjwhRU5USVRZIGRvdHBsdXMgIiYjeDIyMTQ7Ij48IUVOVElUWSBzZXRtbiAiJiN4MjIxNjsiPjwhRU5USVRZIHNldG1pbnVzICImI3gyMjE2OyI%2BPCFFTlRJVFkgQmFja3NsYXNoICImI3gyMjE2OyI%2BPCFFTlRJVFkgc3NldG1uICImI3gyMjE2OyI%2BPCFFTlRJVFkgc21hbGxzZXRtaW51cyAiJiN4MjIxNjsiPjwhRU5USVRZIGxvd2FzdCAiJiN4MjIxNzsiPjwhRU5USVRZIGNvbXBmbiAiJiN4MjIxODsiPjwhRU5USVRZIFNtYWxsQ2lyY2xlICImI3gyMjE4OyI%2BPCFFTlRJVFkgcmFkaWMgIiYjeDIyMUE7Ij48IUVOVElUWSBTcXJ0ICImI3gyMjFBOyI%2BPCFFTlRJVFkgcHJvcCAiJiN4MjIxRDsiPjwhRU5USVRZIHByb3B0byAiJiN4MjIxRDsiPjwhRU5USVRZIFByb3BvcnRpb25hbCAiJiN4MjIxRDsiPjwhRU5USVRZIHZwcm9wICImI3gyMjFEOyI%2BPCFFTlRJVFkgdmFycHJvcHRvICImI3gyMjFEOyI%2BPCFFTlRJVFkgaW5maW4gIiYjeDIyMUU7Ij48IUVOVElUWSBhbmdydCAiJiN4MjIxRjsiPjwhRU5USVRZIGFuZyAiJiN4MjIyMDsiPjwhRU5USVRZIGFuZ2xlICImI3gyMjIwOyI%2BPCFFTlRJVFkgYW5nbXNkICImI3gyMjIxOyI%2BPCFFTlRJVFkgbWVhc3VyZWRhbmdsZSAiJiN4MjIyMTsiPjwhRU5USVRZIGFuZ3NwaCAiJiN4MjIyMjsiPjwhRU5USVRZIG1pZCAiJiN4MjIyMzsiPjwhRU5USVRZIFZlcnRpY2FsQmFyICImI3gyMjIzOyI%2BPCFFTlRJVFkgc21pZCAiJiN4MjIyMzsiPjwhRU5USVRZIHNob3J0bWlkICImI3gyMjIzOyI%2BPCFFTlRJVFkgbm1pZCAiJiN4MjIyNDsiPjwhRU5USVRZIE5vdFZlcnRpY2FsQmFyICImI3gyMjI0OyI%2BPCFFTlRJVFkgbnNtaWQgIiYjeDIyMjQ7Ij48IUVOVElUWSBuc2hvcnRtaWQgIiYjeDIyMjQ7Ij48IUVOVElUWSBwYXIgIiYjeDIyMjU7Ij48IUVOVElUWSBwYXJhbGxlbCAiJiN4MjIyNTsiPjwhRU5USVRZIERvdWJsZVZlcnRpY2FsQmFyICImI3gyMjI1OyI%2BPCFFTlRJVFkgc3BhciAiJiN4MjIyNTsiPjwhRU5USVRZIHNob3J0cGFyYWxsZWwgIiYjeDIyMjU7Ij48IUVOVElUWSBucGFyICImI3gyMjI2OyI%2BPCFFTlRJVFkgbnBhcmFsbGVsICImI3gyMjI2OyI%2BPCFFTlRJVFkgTm90RG91YmxlVmVydGljYWxCYXIgIiYjeDIyMjY7Ij48IUVOVElUWSBuc3BhciAiJiN4MjIyNjsiPjwhRU5USVRZIG5zaG9ydHBhcmFsbGVsICImI3gyMjI2OyI%2BPCFFTlRJVFkgYW5kICImI3gyMjI3OyI%2BPCFFTlRJVFkgd2VkZ2UgIiYjeDIyMjc7Ij48IUVOVElUWSBvciAiJiN4MjIyODsiPjwhRU5USVRZIHZlZSAiJiN4MjIyODsiPjwhRU5USVRZIGNhcCAiJiN4MjIyOTsiPjwhRU5USVRZIGN1cCAiJiN4MjIyQTsiPjwhRU5USVRZIGludCAiJiN4MjIyQjsiPjwhRU5USVRZIEludGVncmFsICImI3gyMjJCOyI%2BPCFFTlRJVFkgSW50ICImI3gyMjJDOyI%2BPCFFTlRJVFkgdGludCAiJiN4MjIyRDsiPjwhRU5USVRZIGlpaW50ICImI3gyMjJEOyI%2BPCFFTlRJVFkgY29uaW50ICImI3gyMjJFOyI%2BPCFFTlRJVFkgb2ludCAiJiN4MjIyRTsiPjwhRU5USVRZIENvbnRvdXJJbnRlZ3JhbCAiJiN4MjIyRTsiPjwhRU5USVRZIENvbmludCAiJiN4MjIyRjsiPjwhRU5USVRZIERvdWJsZUNvbnRvdXJJbnRlZ3JhbCAiJiN4MjIyRjsiPjwhRU5USVRZIENjb25pbnQgIiYjeDIyMzA7Ij48IUVOVElUWSBjd2ludCAiJiN4MjIzMTsiPjwhRU5USVRZIGN3Y29uaW50ICImI3gyMjMyOyI%2BPCFFTlRJVFkgQ2xvY2t3aXNlQ29udG91ckludGVncmFsICImI3gyMjMyOyI%2BPCFFTlRJVFkgYXdjb25pbnQgIiYjeDIyMzM7Ij48IUVOVElUWSBDb3VudGVyQ2xvY2t3aXNlQ29udG91ckludGVncmFsICImI3gyMjMzOyI%2BPCFFTlRJVFkgdGhlcmU0ICImI3gyMjM0OyI%2BPCFFTlRJVFkgdGhlcmVmb3JlICImI3gyMjM0OyI%2BPCFFTlRJVFkgVGhlcmVmb3JlICImI3gyMjM0OyI%2BPCFFTlRJVFkgYmVjYXVzICImI3gyMjM1OyI%2BPCFFTlRJVFkgYmVjYXVzZSAiJiN4MjIzNTsiPjwhRU5USVRZIEJlY2F1c2UgIiYjeDIyMzU7Ij48IUVOVElUWSByYXRpbyAiJiN4MjIzNjsiPjwhRU5USVRZIENvbG9uICImI3gyMjM3OyI%2BPCFFTlRJVFkgUHJvcG9ydGlvbiAiJiN4MjIzNzsiPjwhRU5USVRZIG1pbnVzZCAiJiN4MjIzODsiPjwhRU5USVRZIGRvdG1pbnVzICImI3gyMjM4OyI%2BPCFFTlRJVFkgbUREb3QgIiYjeDIyM0E7Ij48IUVOVElUWSBob210aHQgIiYjeDIyM0I7Ij48IUVOVElUWSBzaW0gIiYjeDIyM0M7Ij48IUVOVElUWSBUaWxkZSAiJiN4MjIzQzsiPjwhRU5USVRZIHRoa3NpbSAiJiN4MjIzQzsiPjwhRU5USVRZIHRoaWNrc2ltICImI3gyMjNDOyI%2BPCFFTlRJVFkgYnNpbSAiJiN4MjIzRDsiPjwhRU5USVRZIGJhY2tzaW0gIiYjeDIyM0Q7Ij48IUVOVElUWSBhYyAiJiN4MjIzRTsiPjwhRU5USVRZIG1zdHBvcyAiJiN4MjIzRTsiPjwhRU5USVRZIGFjZCAiJiN4MjIzRjsiPjwhRU5USVRZIHdyZWF0aCAiJiN4MjI0MDsiPjwhRU5USVRZIFZlcnRpY2FsVGlsZGUgIiYjeDIyNDA7Ij48IUVOVElUWSB3ciAiJiN4MjI0MDsiPjwhRU5USVRZIG5zaW0gIiYjeDIyNDE7Ij48IUVOVElUWSBOb3RUaWxkZSAiJiN4MjI0MTsiPjwhRU5USVRZIGVzaW0gIiYjeDIyNDI7Ij48IUVOVElUWSBFcXVhbFRpbGRlICImI3gyMjQyOyI%2BPCFFTlRJVFkgZXFzaW0gIiYjeDIyNDI7Ij48IUVOVElUWSBzaW1lICImI3gyMjQzOyI%2BPCFFTlRJVFkgVGlsZGVFcXVhbCAiJiN4MjI0MzsiPjwhRU5USVRZIHNpbWVxICImI3gyMjQzOyI%2BPCFFTlRJVFkgbnNpbWUgIiYjeDIyNDQ7Ij48IUVOVElUWSBuc2ltZXEgIiYjeDIyNDQ7Ij48IUVOVElUWSBOb3RUaWxkZUVxdWFsICImI3gyMjQ0OyI%2BPCFFTlRJVFkgY29uZyAiJiN4MjI0NTsiPjwhRU5USVRZIFRpbGRlRnVsbEVxdWFsICImI3gyMjQ1OyI%2BPCFFTlRJVFkgc2ltbmUgIiYjeDIyNDY7Ij48IUVOVElUWSBuY29uZyAiJiN4MjI0NzsiPjwhRU5USVRZIE5vdFRpbGRlRnVsbEVxdWFsICImI3gyMjQ3OyI%2BPCFFTlRJVFkgYXN5bXAgIiYjeDIyNDg7Ij48IUVOVElUWSBhcCAiJiN4MjI0ODsiPjwhRU5USVRZIFRpbGRlVGlsZGUgIiYjeDIyNDg7Ij48IUVOVElUWSBhcHByb3ggIiYjeDIyNDg7Ij48IUVOVElUWSB0aGthcCAiJiN4MjI0ODsiPjwhRU5USVRZIHRoaWNrYXBwcm94ICImI3gyMjQ4OyI%2BPCFFTlRJVFkgbmFwICImI3gyMjQ5OyI%2BPCFFTlRJVFkgTm90VGlsZGVUaWxkZSAiJiN4MjI0OTsiPjwhRU5USVRZIG5hcHByb3ggIiYjeDIyNDk7Ij48IUVOVElUWSBhcGUgIiYjeDIyNEE7Ij48IUVOVElUWSBhcHByb3hlcSAiJiN4MjI0QTsiPjwhRU5USVRZIGFwaWQgIiYjeDIyNEI7Ij48IUVOVElUWSBiY29uZyAiJiN4MjI0QzsiPjwhRU5USVRZIGJhY2tjb25nICImI3gyMjRDOyI%2BPCFFTlRJVFkgYXN5bXBlcSAiJiN4MjI0RDsiPjwhRU5USVRZIEN1cENhcCAiJiN4MjI0RDsiPjwhRU5USVRZIGJ1bXAgIiYjeDIyNEU7Ij48IUVOVElUWSBIdW1wRG93bkh1bXAgIiYjeDIyNEU7Ij48IUVOVElUWSBCdW1wZXEgIiYjeDIyNEU7Ij48IUVOVElUWSBidW1wZSAiJiN4MjI0RjsiPjwhRU5USVRZIEh1bXBFcXVhbCAiJiN4MjI0RjsiPjwhRU5USVRZIGJ1bXBlcSAiJiN4MjI0RjsiPjwhRU5USVRZIGVzZG90ICImI3gyMjUwOyI%2BPCFFTlRJVFkgRG90RXF1YWwgIiYjeDIyNTA7Ij48IUVOVElUWSBkb3RlcSAiJiN4MjI1MDsiPjwhRU5USVRZIGVEb3QgIiYjeDIyNTE7Ij48IUVOVElUWSBkb3RlcWRvdCAiJiN4MjI1MTsiPjwhRU5USVRZIGVmRG90ICImI3gyMjUyOyI%2BPCFFTlRJVFkgZmFsbGluZ2RvdHNlcSAiJiN4MjI1MjsiPjwhRU5USVRZIGVyRG90ICImI3gyMjUzOyI%2BPCFFTlRJVFkgcmlzaW5nZG90c2VxICImI3gyMjUzOyI%2BPCFFTlRJVFkgY29sb25lICImI3gyMjU0OyI%2BPCFFTlRJVFkgY29sb25lcSAiJiN4MjI1NDsiPjwhRU5USVRZIEFzc2lnbiAiJiN4MjI1NDsiPjwhRU5USVRZIGVjb2xvbiAiJiN4MjI1NTsiPjwhRU5USVRZIGVxY29sb24gIiYjeDIyNTU7Ij48IUVOVElUWSBlY2lyICImI3gyMjU2OyI%2BPCFFTlRJVFkgZXFjaXJjICImI3gyMjU2OyI%2BPCFFTlRJVFkgY2lyZSAiJiN4MjI1NzsiPjwhRU5USVRZIGNpcmNlcSAiJiN4MjI1NzsiPjwhRU5USVRZIHdlZGdlcSAiJiN4MjI1OTsiPjwhRU5USVRZIHZlZWVxICImI3gyMjVBOyI%2BPCFFTlRJVFkgdHJpZSAiJiN4MjI1QzsiPjwhRU5USVRZIHRyaWFuZ2xlcSAiJiN4MjI1QzsiPjwhRU5USVRZIGVxdWVzdCAiJiN4MjI1RjsiPjwhRU5USVRZIHF1ZXN0ZXEgIiYjeDIyNUY7Ij48IUVOVElUWSBuZSAiJiN4MjI2MDsiPjwhRU5USVRZIE5vdEVxdWFsICImI3gyMjYwOyI%2BPCFFTlRJVFkgZXF1aXYgIiYjeDIyNjE7Ij48IUVOVElUWSBDb25ncnVlbnQgIiYjeDIyNjE7Ij48IUVOVElUWSBuZXF1aXYgIiYjeDIyNjI7Ij48IUVOVElUWSBOb3RDb25ncnVlbnQgIiYjeDIyNjI7Ij48IUVOVElUWSBsZSAiJiN4MjI2NDsiPjwhRU5USVRZIGxlcSAiJiN4MjI2NDsiPjwhRU5USVRZIGdlICImI3gyMjY1OyI%2BPCFFTlRJVFkgR3JlYXRlckVxdWFsICImI3gyMjY1OyI%2BPCFFTlRJVFkgZ2VxICImI3gyMjY1OyI%2BPCFFTlRJVFkgbEUgIiYjeDIyNjY7Ij48IUVOVElUWSBMZXNzRnVsbEVxdWFsICImI3gyMjY2OyI%2BPCFFTlRJVFkgbGVxcSAiJiN4MjI2NjsiPjwhRU5USVRZIGdFICImI3gyMjY3OyI%2BPCFFTlRJVFkgR3JlYXRlckZ1bGxFcXVhbCAiJiN4MjI2NzsiPjwhRU5USVRZIGdlcXEgIiYjeDIyNjc7Ij48IUVOVElUWSBsbkUgIiYjeDIyNjg7Ij48IUVOVElUWSBsbmVxcSAiJiN4MjI2ODsiPjwhRU5USVRZIGduRSAiJiN4MjI2OTsiPjwhRU5USVRZIGduZXFxICImI3gyMjY5OyI%2BPCFFTlRJVFkgTHQgIiYjeDIyNkE7Ij48IUVOVElUWSBOZXN0ZWRMZXNzTGVzcyAiJiN4MjI2QTsiPjwhRU5USVRZIGxsICImI3gyMjZBOyI%2BPCFFTlRJVFkgR3QgIiYjeDIyNkI7Ij48IUVOVElUWSBOZXN0ZWRHcmVhdGVyR3JlYXRlciAiJiN4MjI2QjsiPjwhRU5USVRZIGdnICImI3gyMjZCOyI%2BPCFFTlRJVFkgdHdpeHQgIiYjeDIyNkM7Ij48IUVOVElUWSBiZXR3ZWVuICImI3gyMjZDOyI%2BPCFFTlRJVFkgTm90Q3VwQ2FwICImI3gyMjZEOyI%2BPCFFTlRJVFkgbmx0ICImI3gyMjZFOyI%2BPCFFTlRJVFkgTm90TGVzcyAiJiN4MjI2RTsiPjwhRU5USVRZIG5sZXNzICImI3gyMjZFOyI%2BPCFFTlRJVFkgbmd0ICImI3gyMjZGOyI%2BPCFFTlRJVFkgTm90R3JlYXRlciAiJiN4MjI2RjsiPjwhRU5USVRZIG5ndHIgIiYjeDIyNkY7Ij48IUVOVElUWSBubGUgIiYjeDIyNzA7Ij48IUVOVElUWSBOb3RMZXNzRXF1YWwgIiYjeDIyNzA7Ij48IUVOVElUWSBubGVxICImI3gyMjcwOyI%2BPCFFTlRJVFkgbmdlICImI3gyMjcxOyI%2BPCFFTlRJVFkgTm90R3JlYXRlckVxdWFsICImI3gyMjcxOyI%2BPCFFTlRJVFkgbmdlcSAiJiN4MjI3MTsiPjwhRU5USVRZIGxzaW0gIiYjeDIyNzI7Ij48IUVOVElUWSBMZXNzVGlsZGUgIiYjeDIyNzI7Ij48IUVOVElUWSBsZXNzc2ltICImI3gyMjcyOyI%2BPCFFTlRJVFkgZ3NpbSAiJiN4MjI3MzsiPjwhRU5USVRZIGd0cnNpbSAiJiN4MjI3MzsiPjwhRU5USVRZIEdyZWF0ZXJUaWxkZSAiJiN4MjI3MzsiPjwhRU5USVRZIG5sc2ltICImI3gyMjc0OyI%2BPCFFTlRJVFkgTm90TGVzc1RpbGRlICImI3gyMjc0OyI%2BPCFFTlRJVFkgbmdzaW0gIiYjeDIyNzU7Ij48IUVOVElUWSBOb3RHcmVhdGVyVGlsZGUgIiYjeDIyNzU7Ij48IUVOVElUWSBsZyAiJiN4MjI3NjsiPjwhRU5USVRZIGxlc3NndHIgIiYjeDIyNzY7Ij48IUVOVElUWSBMZXNzR3JlYXRlciAiJiN4MjI3NjsiPjwhRU5USVRZIGdsICImI3gyMjc3OyI%2BPCFFTlRJVFkgZ3RybGVzcyAiJiN4MjI3NzsiPjwhRU5USVRZIEdyZWF0ZXJMZXNzICImI3gyMjc3OyI%2BPCFFTlRJVFkgbnRsZyAiJiN4MjI3ODsiPjwhRU5USVRZIE5vdExlc3NHcmVhdGVyICImI3gyMjc4OyI%2BPCFFTlRJVFkgbnRnbCAiJiN4MjI3OTsiPjwhRU5USVRZIE5vdEdyZWF0ZXJMZXNzICImI3gyMjc5OyI%2BPCFFTlRJVFkgcHIgIiYjeDIyN0E7Ij48IUVOVElUWSBQcmVjZWRlcyAiJiN4MjI3QTsiPjwhRU5USVRZIHByZWMgIiYjeDIyN0E7Ij48IUVOVElUWSBzYyAiJiN4MjI3QjsiPjwhRU5USVRZIFN1Y2NlZWRzICImI3gyMjdCOyI%2BPCFFTlRJVFkgc3VjYyAiJiN4MjI3QjsiPjwhRU5USVRZIHByY3VlICImI3gyMjdDOyI%2BPCFFTlRJVFkgUHJlY2VkZXNTbGFudEVxdWFsICImI3gyMjdDOyI%2BPCFFTlRJVFkgcHJlY2N1cmx5ZXEgIiYjeDIyN0M7Ij48IUVOVElUWSBzY2N1ZSAiJiN4MjI3RDsiPjwhRU5USVRZIFN1Y2NlZWRzU2xhbnRFcXVhbCAiJiN4MjI3RDsiPjwhRU5USVRZIHN1Y2NjdXJseWVxICImI3gyMjdEOyI%2BPCFFTlRJVFkgcHJzaW0gIiYjeDIyN0U7Ij48IUVOVElUWSBwcmVjc2ltICImI3gyMjdFOyI%2BPCFFTlRJVFkgUHJlY2VkZXNUaWxkZSAiJiN4MjI3RTsiPjwhRU5USVRZIHNjc2ltICImI3gyMjdGOyI%2BPCFFTlRJVFkgc3VjY3NpbSAiJiN4MjI3RjsiPjwhRU5USVRZIFN1Y2NlZWRzVGlsZGUgIiYjeDIyN0Y7Ij48IUVOVElUWSBucHIgIiYjeDIyODA7Ij48IUVOVElUWSBucHJlYyAiJiN4MjI4MDsiPjwhRU5USVRZIE5vdFByZWNlZGVzICImI3gyMjgwOyI%2BPCFFTlRJVFkgbnNjICImI3gyMjgxOyI%2BPCFFTlRJVFkgbnN1Y2MgIiYjeDIyODE7Ij48IUVOVElUWSBOb3RTdWNjZWVkcyAiJiN4MjI4MTsiPjwhRU5USVRZIHN1YiAiJiN4MjI4MjsiPjwhRU5USVRZIHN1YnNldCAiJiN4MjI4MjsiPjwhRU5USVRZIHN1cCAiJiN4MjI4MzsiPjwhRU5USVRZIHN1cHNldCAiJiN4MjI4MzsiPjwhRU5USVRZIFN1cGVyc2V0ICImI3gyMjgzOyI%2BPCFFTlRJVFkgbnN1YiAiJiN4MjI4NDsiPjwhRU5USVRZIG5zdXAgIiYjeDIyODU7Ij48IUVOVElUWSBzdWJlICImI3gyMjg2OyI%2BPCFFTlRJVFkgU3Vic2V0RXF1YWwgIiYjeDIyODY7Ij48IUVOVElUWSBzdWJzZXRlcSAiJiN4MjI4NjsiPjwhRU5USVRZIHN1cGUgIiYjeDIyODc7Ij48IUVOVElUWSBzdXBzZXRlcSAiJiN4MjI4NzsiPjwhRU5USVRZIFN1cGVyc2V0RXF1YWwgIiYjeDIyODc7Ij48IUVOVElUWSBuc3ViZSAiJiN4MjI4ODsiPjwhRU5USVRZIG5zdWJzZXRlcSAiJiN4MjI4ODsiPjwhRU5USVRZIE5vdFN1YnNldEVxdWFsICImI3gyMjg4OyI%2BPCFFTlRJVFkgbnN1cGUgIiYjeDIyODk7Ij48IUVOVElUWSBuc3Vwc2V0ZXEgIiYjeDIyODk7Ij48IUVOVElUWSBOb3RTdXBlcnNldEVxdWFsICImI3gyMjg5OyI%2BPCFFTlRJVFkgc3VibmUgIiYjeDIyOEE7Ij48IUVOVElUWSBzdWJzZXRuZXEgIiYjeDIyOEE7Ij48IUVOVElUWSBzdXBuZSAiJiN4MjI4QjsiPjwhRU5USVRZIHN1cHNldG5lcSAiJiN4MjI4QjsiPjwhRU5USVRZIGN1cGRvdCAiJiN4MjI4RDsiPjwhRU5USVRZIHVwbHVzICImI3gyMjhFOyI%2BPCFFTlRJVFkgVW5pb25QbHVzICImI3gyMjhFOyI%2BPCFFTlRJVFkgc3FzdWIgIiYjeDIyOEY7Ij48IUVOVElUWSBTcXVhcmVTdWJzZXQgIiYjeDIyOEY7Ij48IUVOVElUWSBzcXN1YnNldCAiJiN4MjI4RjsiPjwhRU5USVRZIHNxc3VwICImI3gyMjkwOyI%2BPCFFTlRJVFkgU3F1YXJlU3VwZXJzZXQgIiYjeDIyOTA7Ij48IUVOVElUWSBzcXN1cHNldCAiJiN4MjI5MDsiPjwhRU5USVRZIHNxc3ViZSAiJiN4MjI5MTsiPjwhRU5USVRZIFNxdWFyZVN1YnNldEVxdWFsICImI3gyMjkxOyI%2BPCFFTlRJVFkgc3FzdWJzZXRlcSAiJiN4MjI5MTsiPjwhRU5USVRZIHNxc3VwZSAiJiN4MjI5MjsiPjwhRU5USVRZIFNxdWFyZVN1cGVyc2V0RXF1YWwgIiYjeDIyOTI7Ij48IUVOVElUWSBzcXN1cHNldGVxICImI3gyMjkyOyI%2BPCFFTlRJVFkgc3FjYXAgIiYjeDIyOTM7Ij48IUVOVElUWSBTcXVhcmVJbnRlcnNlY3Rpb24gIiYjeDIyOTM7Ij48IUVOVElUWSBzcWN1cCAiJiN4MjI5NDsiPjwhRU5USVRZIFNxdWFyZVVuaW9uICImI3gyMjk0OyI%2BPCFFTlRJVFkgb3BsdXMgIiYjeDIyOTU7Ij48IUVOVElUWSBDaXJjbGVQbHVzICImI3gyMjk1OyI%2BPCFFTlRJVFkgb21pbnVzICImI3gyMjk2OyI%2BPCFFTlRJVFkgQ2lyY2xlTWludXMgIiYjeDIyOTY7Ij48IUVOVElUWSBvdGltZXMgIiYjeDIyOTc7Ij48IUVOVElUWSBDaXJjbGVUaW1lcyAiJiN4MjI5NzsiPjwhRU5USVRZIG9zb2wgIiYjeDIyOTg7Ij48IUVOVElUWSBvZG90ICImI3gyMjk5OyI%2BPCFFTlRJVFkgQ2lyY2xlRG90ICImI3gyMjk5OyI%2BPCFFTlRJVFkgb2NpciAiJiN4MjI5QTsiPjwhRU5USVRZIGNpcmNsZWRjaXJjICImI3gyMjlBOyI%2BPCFFTlRJVFkgb2FzdCAiJiN4MjI5QjsiPjwhRU5USVRZIGNpcmNsZWRhc3QgIiYjeDIyOUI7Ij48IUVOVElUWSBvZGFzaCAiJiN4MjI5RDsiPjwhRU5USVRZIGNpcmNsZWRkYXNoICImI3gyMjlEOyI%2BPCFFTlRJVFkgcGx1c2IgIiYjeDIyOUU7Ij48IUVOVElUWSBib3hwbHVzICImI3gyMjlFOyI%2BPCFFTlRJVFkgbWludXNiICImI3gyMjlGOyI%2BPCFFTlRJVFkgYm94bWludXMgIiYjeDIyOUY7Ij48IUVOVElUWSB0aW1lc2IgIiYjeDIyQTA7Ij48IUVOVElUWSBib3h0aW1lcyAiJiN4MjJBMDsiPjwhRU5USVRZIHNkb3RiICImI3gyMkExOyI%2BPCFFTlRJVFkgZG90c3F1YXJlICImI3gyMkExOyI%2BPCFFTlRJVFkgdmRhc2ggIiYjeDIyQTI7Ij48IUVOVElUWSBSaWdodFRlZSAiJiN4MjJBMjsiPjwhRU5USVRZIGRhc2h2ICImI3gyMkEzOyI%2BPCFFTlRJVFkgTGVmdFRlZSAiJiN4MjJBMzsiPjwhRU5USVRZIHRvcCAiJiN4MjJBNDsiPjwhRU5USVRZIERvd25UZWUgIiYjeDIyQTQ7Ij48IUVOVElUWSBib3R0b20gIiYjeDIyQTU7Ij48IUVOVElUWSBib3QgIiYjeDIyQTU7Ij48IUVOVElUWSBwZXJwICImI3gyMkE1OyI%2BPCFFTlRJVFkgVXBUZWUgIiYjeDIyQTU7Ij48IUVOVElUWSBtb2RlbHMgIiYjeDIyQTc7Ij48IUVOVElUWSB2RGFzaCAiJiN4MjJBODsiPjwhRU5USVRZIERvdWJsZVJpZ2h0VGVlICImI3gyMkE4OyI%2BPCFFTlRJVFkgVmRhc2ggIiYjeDIyQTk7Ij48IUVOVElUWSBWdmRhc2ggIiYjeDIyQUE7Ij48IUVOVElUWSBWRGFzaCAiJiN4MjJBQjsiPjwhRU5USVRZIG52ZGFzaCAiJiN4MjJBQzsiPjwhRU5USVRZIG52RGFzaCAiJiN4MjJBRDsiPjwhRU5USVRZIG5WZGFzaCAiJiN4MjJBRTsiPjwhRU5USVRZIG5WRGFzaCAiJiN4MjJBRjsiPjwhRU5USVRZIHBydXJlbCAiJiN4MjJCMDsiPjwhRU5USVRZIHZsdHJpICImI3gyMkIyOyI%2BPCFFTlRJVFkgdmFydHJpYW5nbGVsZWZ0ICImI3gyMkIyOyI%2BPCFFTlRJVFkgTGVmdFRyaWFuZ2xlICImI3gyMkIyOyI%2BPCFFTlRJVFkgdnJ0cmkgIiYjeDIyQjM7Ij48IUVOVElUWSB2YXJ0cmlhbmdsZXJpZ2h0ICImI3gyMkIzOyI%2BPCFFTlRJVFkgUmlnaHRUcmlhbmdsZSAiJiN4MjJCMzsiPjwhRU5USVRZIGx0cmllICImI3gyMkI0OyI%2BPCFFTlRJVFkgdHJpYW5nbGVsZWZ0ZXEgIiYjeDIyQjQ7Ij48IUVOVElUWSBMZWZ0VHJpYW5nbGVFcXVhbCAiJiN4MjJCNDsiPjwhRU5USVRZIHJ0cmllICImI3gyMkI1OyI%2BPCFFTlRJVFkgdHJpYW5nbGVyaWdodGVxICImI3gyMkI1OyI%2BPCFFTlRJVFkgUmlnaHRUcmlhbmdsZUVxdWFsICImI3gyMkI1OyI%2BPCFFTlRJVFkgb3JpZ29mICImI3gyMkI2OyI%2BPCFFTlRJVFkgaW1vZiAiJiN4MjJCNzsiPjwhRU5USVRZIG11bWFwICImI3gyMkI4OyI%2BPCFFTlRJVFkgbXVsdGltYXAgIiYjeDIyQjg7Ij48IUVOVElUWSBoZXJjb24gIiYjeDIyQjk7Ij48IUVOVElUWSBpbnRjYWwgIiYjeDIyQkE7Ij48IUVOVElUWSBpbnRlcmNhbCAiJiN4MjJCQTsiPjwhRU5USVRZIHZlZWJhciAiJiN4MjJCQjsiPjwhRU5USVRZIGJhcnZlZSAiJiN4MjJCRDsiPjwhRU5USVRZIGFuZ3J0dmIgIiYjeDIyQkU7Ij48IUVOVElUWSBscnRyaSAiJiN4MjJCRjsiPjwhRU5USVRZIHh3ZWRnZSAiJiN4MjJDMDsiPjwhRU5USVRZIFdlZGdlICImI3gyMkMwOyI%2BPCFFTlRJVFkgYmlnd2VkZ2UgIiYjeDIyQzA7Ij48IUVOVElUWSB4dmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgVmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgYmlndmVlICImI3gyMkMxOyI%2BPCFFTlRJVFkgeGNhcCAiJiN4MjJDMjsiPjwhRU5USVRZIEludGVyc2VjdGlvbiAiJiN4MjJDMjsiPjwhRU5USVRZIGJpZ2NhcCAiJiN4MjJDMjsiPjwhRU5USVRZIHhjdXAgIiYjeDIyQzM7Ij48IUVOVElUWSBVbmlvbiAiJiN4MjJDMzsiPjwhRU5USVRZIGJpZ2N1cCAiJiN4MjJDMzsiPjwhRU5USVRZIGRpYW0gIiYjeDIyQzQ7Ij48IUVOVElUWSBkaWFtb25kICImI3gyMkM0OyI%2BPCFFTlRJVFkgRGlhbW9uZCAiJiN4MjJDNDsiPjwhRU5USVRZIHNkb3QgIiYjeDIyQzU7Ij48IUVOVElUWSBzc3RhcmYgIiYjeDIyQzY7Ij48IUVOVElUWSBTdGFyICImI3gyMkM2OyI%2BPCFFTlRJVFkgZGl2b254ICImI3gyMkM3OyI%2BPCFFTlRJVFkgZGl2aWRlb250aW1lcyAiJiN4MjJDNzsiPjwhRU5USVRZIGJvd3RpZSAiJiN4MjJDODsiPjwhRU5USVRZIGx0aW1lcyAiJiN4MjJDOTsiPjwhRU5USVRZIHJ0aW1lcyAiJiN4MjJDQTsiPjwhRU5USVRZIGx0aHJlZSAiJiN4MjJDQjsiPjwhRU5USVRZIGxlZnR0aHJlZXRpbWVzICImI3gyMkNCOyI%2BPCFFTlRJVFkgcnRocmVlICImI3gyMkNDOyI%2BPCFFTlRJVFkgcmlnaHR0aHJlZXRpbWVzICImI3gyMkNDOyI%2BPCFFTlRJVFkgYnNpbWUgIiYjeDIyQ0Q7Ij48IUVOVElUWSBiYWNrc2ltZXEgIiYjeDIyQ0Q7Ij48IUVOVElUWSBjdXZlZSAiJiN4MjJDRTsiPjwhRU5USVRZIGN1cmx5dmVlICImI3gyMkNFOyI%2BPCFFTlRJVFkgY3V3ZWQgIiYjeDIyQ0Y7Ij48IUVOVElUWSBjdXJseXdlZGdlICImI3gyMkNGOyI%2BPCFFTlRJVFkgU3ViICImI3gyMkQwOyI%2BPCFFTlRJVFkgU3Vic2V0ICImI3gyMkQwOyI%2BPCFFTlRJVFkgU3VwICImI3gyMkQxOyI%2BPCFFTlRJVFkgU3Vwc2V0ICImI3gyMkQxOyI%2BPCFFTlRJVFkgQ2FwICImI3gyMkQyOyI%2BPCFFTlRJVFkgQ3VwICImI3gyMkQzOyI%2BPCFFTlRJVFkgZm9yayAiJiN4MjJENDsiPjwhRU5USVRZIHBpdGNoZm9yayAiJiN4MjJENDsiPjwhRU5USVRZIGVwYXIgIiYjeDIyRDU7Ij48IUVOVElUWSBsdGRvdCAiJiN4MjJENjsiPjwhRU5USVRZIGxlc3Nkb3QgIiYjeDIyRDY7Ij48IUVOVElUWSBndGRvdCAiJiN4MjJENzsiPjwhRU5USVRZIGd0cmRvdCAiJiN4MjJENzsiPjwhRU5USVRZIExsICImI3gyMkQ4OyI%2BPCFFTlRJVFkgR2cgIiYjeDIyRDk7Ij48IUVOVElUWSBnZ2cgIiYjeDIyRDk7Ij48IUVOVElUWSBsZWcgIiYjeDIyREE7Ij48IUVOVElUWSBMZXNzRXF1YWxHcmVhdGVyICImI3gyMkRBOyI%2BPCFFTlRJVFkgbGVzc2VxZ3RyICImI3gyMkRBOyI%2BPCFFTlRJVFkgZ2VsICImI3gyMkRCOyI%2BPCFFTlRJVFkgZ3RyZXFsZXNzICImI3gyMkRCOyI%2BPCFFTlRJVFkgR3JlYXRlckVxdWFsTGVzcyAiJiN4MjJEQjsiPjwhRU5USVRZIGN1ZXByICImI3gyMkRFOyI%2BPCFFTlRJVFkgY3VybHllcXByZWMgIiYjeDIyREU7Ij48IUVOVElUWSBjdWVzYyAiJiN4MjJERjsiPjwhRU5USVRZIGN1cmx5ZXFzdWNjICImI3gyMkRGOyI%2BPCFFTlRJVFkgbnByY3VlICImI3gyMkUwOyI%2BPCFFTlRJVFkgTm90UHJlY2VkZXNTbGFudEVxdWFsICImI3gyMkUwOyI%2BPCFFTlRJVFkgbnNjY3VlICImI3gyMkUxOyI%2BPCFFTlRJVFkgTm90U3VjY2VlZHNTbGFudEVxdWFsICImI3gyMkUxOyI%2BPCFFTlRJVFkgbnNxc3ViZSAiJiN4MjJFMjsiPjwhRU5USVRZIE5vdFNxdWFyZVN1YnNldEVxdWFsICImI3gyMkUyOyI%2BPCFFTlRJVFkgbnNxc3VwZSAiJiN4MjJFMzsiPjwhRU5USVRZIE5vdFNxdWFyZVN1cGVyc2V0RXF1YWwgIiYjeDIyRTM7Ij48IUVOVElUWSBsbnNpbSAiJiN4MjJFNjsiPjwhRU5USVRZIGduc2ltICImI3gyMkU3OyI%2BPCFFTlRJVFkgcHJuc2ltICImI3gyMkU4OyI%2BPCFFTlRJVFkgcHJlY25zaW0gIiYjeDIyRTg7Ij48IUVOVElUWSBzY25zaW0gIiYjeDIyRTk7Ij48IUVOVElUWSBzdWNjbnNpbSAiJiN4MjJFOTsiPjwhRU5USVRZIG5sdHJpICImI3gyMkVBOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlbGVmdCAiJiN4MjJFQTsiPjwhRU5USVRZIE5vdExlZnRUcmlhbmdsZSAiJiN4MjJFQTsiPjwhRU5USVRZIG5ydHJpICImI3gyMkVCOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlcmlnaHQgIiYjeDIyRUI7Ij48IUVOVElUWSBOb3RSaWdodFRyaWFuZ2xlICImI3gyMkVCOyI%2BPCFFTlRJVFkgbmx0cmllICImI3gyMkVDOyI%2BPCFFTlRJVFkgbnRyaWFuZ2xlbGVmdGVxICImI3gyMkVDOyI%2BPCFFTlRJVFkgTm90TGVmdFRyaWFuZ2xlRXF1YWwgIiYjeDIyRUM7Ij48IUVOVElUWSBucnRyaWUgIiYjeDIyRUQ7Ij48IUVOVElUWSBudHJpYW5nbGVyaWdodGVxICImI3gyMkVEOyI%2BPCFFTlRJVFkgTm90UmlnaHRUcmlhbmdsZUVxdWFsICImI3gyMkVEOyI%2BPCFFTlRJVFkgdmVsbGlwICImI3gyMkVFOyI%2BPCFFTlRJVFkgY3Rkb3QgIiYjeDIyRUY7Ij48IUVOVElUWSB1dGRvdCAiJiN4MjJGMDsiPjwhRU5USVRZIGR0ZG90ICImI3gyMkYxOyI%2BPCFFTlRJVFkgZGlzaW4gIiYjeDIyRjI7Ij48IUVOVElUWSBpc2luc3YgIiYjeDIyRjM7Ij48IUVOVElUWSBpc2lucyAiJiN4MjJGNDsiPjwhRU5USVRZIGlzaW5kb3QgIiYjeDIyRjU7Ij48IUVOVElUWSBub3RpbnZjICImI3gyMkY2OyI%2BPCFFTlRJVFkgbm90aW52YiAiJiN4MjJGNzsiPjwhRU5USVRZIGlzaW5FICImI3gyMkY5OyI%2BPCFFTlRJVFkgbmlzZCAiJiN4MjJGQTsiPjwhRU5USVRZIHhuaXMgIiYjeDIyRkI7Ij48IUVOVElUWSBuaXMgIiYjeDIyRkM7Ij48IUVOVElUWSBub3RuaXZjICImI3gyMkZEOyI%2BPCFFTlRJVFkgbm90bml2YiAiJiN4MjJGRTsiPjwhRU5USVRZIGJhcndlZCAiJiN4MjMwNTsiPjwhRU5USVRZIGJhcndlZGdlICImI3gyMzA1OyI%2BPCFFTlRJVFkgQmFyd2VkICImI3gyMzA2OyI%2BPCFFTlRJVFkgZG91YmxlYmFyd2VkZ2UgIiYjeDIzMDY7Ij48IUVOVElUWSBsY2VpbCAiJiN4MjMwODsiPjwhRU5USVRZIExlZnRDZWlsaW5nICImI3gyMzA4OyI%2BPCFFTlRJVFkgcmNlaWwgIiYjeDIzMDk7Ij48IUVOVElUWSBSaWdodENlaWxpbmcgIiYjeDIzMDk7Ij48IUVOVElUWSBsZmxvb3IgIiYjeDIzMEE7Ij48IUVOVElUWSBMZWZ0Rmxvb3IgIiYjeDIzMEE7Ij48IUVOVElUWSByZmxvb3IgIiYjeDIzMEI7Ij48IUVOVElUWSBSaWdodEZsb29yICImI3gyMzBCOyI%2BPCFFTlRJVFkgZHJjcm9wICImI3gyMzBDOyI%2BPCFFTlRJVFkgZGxjcm9wICImI3gyMzBEOyI%2BPCFFTlRJVFkgdXJjcm9wICImI3gyMzBFOyI%2BPCFFTlRJVFkgdWxjcm9wICImI3gyMzBGOyI%2BPCFFTlRJVFkgYm5vdCAiJiN4MjMxMDsiPjwhRU5USVRZIHByb2ZsaW5lICImI3gyMzEyOyI%2BPCFFTlRJVFkgcHJvZnN1cmYgIiYjeDIzMTM7Ij48IUVOVElUWSB0ZWxyZWMgIiYjeDIzMTU7Ij48IUVOVElUWSB0YXJnZXQgIiYjeDIzMTY7Ij48IUVOVElUWSB1bGNvcm4gIiYjeDIzMUM7Ij48IUVOVElUWSB1bGNvcm5lciAiJiN4MjMxQzsiPjwhRU5USVRZIHVyY29ybiAiJiN4MjMxRDsiPjwhRU5USVRZIHVyY29ybmVyICImI3gyMzFEOyI%2BPCFFTlRJVFkgZGxjb3JuICImI3gyMzFFOyI%2BPCFFTlRJVFkgbGxjb3JuZXIgIiYjeDIzMUU7Ij48IUVOVElUWSBkcmNvcm4gIiYjeDIzMUY7Ij48IUVOVElUWSBscmNvcm5lciAiJiN4MjMxRjsiPjwhRU5USVRZIGZyb3duICImI3gyMzIyOyI%2BPCFFTlRJVFkgc2Zyb3duICImI3gyMzIyOyI%2BPCFFTlRJVFkgc21pbGUgIiYjeDIzMjM7Ij48IUVOVElUWSBzc21pbGUgIiYjeDIzMjM7Ij48IUVOVElUWSBjeWxjdHkgIiYjeDIzMkQ7Ij48IUVOVElUWSBwcm9mYWxhciAiJiN4MjMyRTsiPjwhRU5USVRZIHRvcGJvdCAiJiN4MjMzNjsiPjwhRU5USVRZIG92YmFyICImI3gyMzNEOyI%2BPCFFTlRJVFkgc29sYmFyICImI3gyMzNGOyI%2BPCFFTlRJVFkgYW5nemFyciAiJiN4MjM3QzsiPjwhRU5USVRZIGxtb3VzdCAiJiN4MjNCMDsiPjwhRU5USVRZIGxtb3VzdGFjaGUgIiYjeDIzQjA7Ij48IUVOVElUWSBybW91c3QgIiYjeDIzQjE7Ij48IUVOVElUWSBybW91c3RhY2hlICImI3gyM0IxOyI%2BPCFFTlRJVFkgdGJyayAiJiN4MjNCNDsiPjwhRU5USVRZIE92ZXJCcmFja2V0ICImI3gyM0I0OyI%2BPCFFTlRJVFkgYmJyayAiJiN4MjNCNTsiPjwhRU5USVRZIFVuZGVyQnJhY2tldCAiJiN4MjNCNTsiPjwhRU5USVRZIGJicmt0YnJrICImI3gyM0I2OyI%2BPCFFTlRJVFkgT3ZlclBhcmVudGhlc2lzICImI3gyM0RDOyI%2BPCFFTlRJVFkgVW5kZXJQYXJlbnRoZXNpcyAiJiN4MjNERDsiPjwhRU5USVRZIE92ZXJCcmFjZSAiJiN4MjNERTsiPjwhRU5USVRZIFVuZGVyQnJhY2UgIiYjeDIzREY7Ij48IUVOVElUWSB0cnBleml1bSAiJiN4MjNFMjsiPjwhRU5USVRZIGVsaW50ZXJzICImI3gyM0U3OyI%2BPCFFTlRJVFkgYmxhbmsgIiYjeDI0MjM7Ij48IUVOVElUWSBvUyAiJiN4MjRDODsiPjwhRU5USVRZIGNpcmNsZWRTICImI3gyNEM4OyI%2BPCFFTlRJVFkgYm94aCAiJiN4MjUwMDsiPjwhRU5USVRZIEhvcml6b250YWxMaW5lICImI3gyNTAwOyI%2BPCFFTlRJVFkgYm94diAiJiN4MjUwMjsiPjwhRU5USVRZIGJveGRyICImI3gyNTBDOyI%2BPCFFTlRJVFkgYm94ZGwgIiYjeDI1MTA7Ij48IUVOVElUWSBib3h1ciAiJiN4MjUxNDsiPjwhRU5USVRZIGJveHVsICImI3gyNTE4OyI%2BPCFFTlRJVFkgYm94dnIgIiYjeDI1MUM7Ij48IUVOVElUWSBib3h2bCAiJiN4MjUyNDsiPjwhRU5USVRZIGJveGhkICImI3gyNTJDOyI%2BPCFFTlRJVFkgYm94aHUgIiYjeDI1MzQ7Ij48IUVOVElUWSBib3h2aCAiJiN4MjUzQzsiPjwhRU5USVRZIGJveEggIiYjeDI1NTA7Ij48IUVOVElUWSBib3hWICImI3gyNTUxOyI%2BPCFFTlRJVFkgYm94ZFIgIiYjeDI1NTI7Ij48IUVOVElUWSBib3hEciAiJiN4MjU1MzsiPjwhRU5USVRZIGJveERSICImI3gyNTU0OyI%2BPCFFTlRJVFkgYm94ZEwgIiYjeDI1NTU7Ij48IUVOVElUWSBib3hEbCAiJiN4MjU1NjsiPjwhRU5USVRZIGJveERMICImI3gyNTU3OyI%2BPCFFTlRJVFkgYm94dVIgIiYjeDI1NTg7Ij48IUVOVElUWSBib3hVciAiJiN4MjU1OTsiPjwhRU5USVRZIGJveFVSICImI3gyNTVBOyI%2BPCFFTlRJVFkgYm94dUwgIiYjeDI1NUI7Ij48IUVOVElUWSBib3hVbCAiJiN4MjU1QzsiPjwhRU5USVRZIGJveFVMICImI3gyNTVEOyI%2BPCFFTlRJVFkgYm94dlIgIiYjeDI1NUU7Ij48IUVOVElUWSBib3hWciAiJiN4MjU1RjsiPjwhRU5USVRZIGJveFZSICImI3gyNTYwOyI%2BPCFFTlRJVFkgYm94dkwgIiYjeDI1NjE7Ij48IUVOVElUWSBib3hWbCAiJiN4MjU2MjsiPjwhRU5USVRZIGJveFZMICImI3gyNTYzOyI%2BPCFFTlRJVFkgYm94SGQgIiYjeDI1NjQ7Ij48IUVOVElUWSBib3hoRCAiJiN4MjU2NTsiPjwhRU5USVRZIGJveEhEICImI3gyNTY2OyI%2BPCFFTlRJVFkgYm94SHUgIiYjeDI1Njc7Ij48IUVOVElUWSBib3hoVSAiJiN4MjU2ODsiPjwhRU5USVRZIGJveEhVICImI3gyNTY5OyI%2BPCFFTlRJVFkgYm94dkggIiYjeDI1NkE7Ij48IUVOVElUWSBib3hWaCAiJiN4MjU2QjsiPjwhRU5USVRZIGJveFZIICImI3gyNTZDOyI%2BPCFFTlRJVFkgdWhibGsgIiYjeDI1ODA7Ij48IUVOVElUWSBsaGJsayAiJiN4MjU4NDsiPjwhRU5USVRZIGJsb2NrICImI3gyNTg4OyI%2BPCFFTlRJVFkgYmxrMTQgIiYjeDI1OTE7Ij48IUVOVElUWSBibGsxMiAiJiN4MjU5MjsiPjwhRU5USVRZIGJsazM0ICImI3gyNTkzOyI%2BPCFFTlRJVFkgc3F1ICImI3gyNUExOyI%2BPCFFTlRJVFkgc3F1YXJlICImI3gyNUExOyI%2BPCFFTlRJVFkgU3F1YXJlICImI3gyNUExOyI%2BPCFFTlRJVFkgc3F1ZiAiJiN4MjVBQTsiPjwhRU5USVRZIHNxdWFyZiAiJiN4MjVBQTsiPjwhRU5USVRZIGJsYWNrc3F1YXJlICImI3gyNUFBOyI%2BPCFFTlRJVFkgRmlsbGVkVmVyeVNtYWxsU3F1YXJlICImI3gyNUFBOyI%2BPCFFTlRJVFkgRW1wdHlWZXJ5U21hbGxTcXVhcmUgIiYjeDI1QUI7Ij48IUVOVElUWSByZWN0ICImI3gyNUFEOyI%2BPCFFTlRJVFkgbWFya2VyICImI3gyNUFFOyI%2BPCFFTlRJVFkgZmx0bnMgIiYjeDI1QjE7Ij48IUVOVElUWSB4dXRyaSAiJiN4MjVCMzsiPjwhRU5USVRZIGJpZ3RyaWFuZ2xldXAgIiYjeDI1QjM7Ij48IUVOVElUWSB1dHJpZiAiJiN4MjVCNDsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGUgIiYjeDI1QjQ7Ij48IUVOVElUWSB1dHJpICImI3gyNUI1OyI%2BPCFFTlRJVFkgdHJpYW5nbGUgIiYjeDI1QjU7Ij48IUVOVElUWSBydHJpZiAiJiN4MjVCODsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGVyaWdodCAiJiN4MjVCODsiPjwhRU5USVRZIHJ0cmkgIiYjeDI1Qjk7Ij48IUVOVElUWSB0cmlhbmdsZXJpZ2h0ICImI3gyNUI5OyI%2BPCFFTlRJVFkgeGR0cmkgIiYjeDI1QkQ7Ij48IUVOVElUWSBiaWd0cmlhbmdsZWRvd24gIiYjeDI1QkQ7Ij48IUVOVElUWSBkdHJpZiAiJiN4MjVCRTsiPjwhRU5USVRZIGJsYWNrdHJpYW5nbGVkb3duICImI3gyNUJFOyI%2BPCFFTlRJVFkgZHRyaSAiJiN4MjVCRjsiPjwhRU5USVRZIHRyaWFuZ2xlZG93biAiJiN4MjVCRjsiPjwhRU5USVRZIGx0cmlmICImI3gyNUMyOyI%2BPCFFTlRJVFkgYmxhY2t0cmlhbmdsZWxlZnQgIiYjeDI1QzI7Ij48IUVOVElUWSBsdHJpICImI3gyNUMzOyI%2BPCFFTlRJVFkgdHJpYW5nbGVsZWZ0ICImI3gyNUMzOyI%2BPCFFTlRJVFkgbG96ICImI3gyNUNBOyI%2BPCFFTlRJVFkgbG96ZW5nZSAiJiN4MjVDQTsiPjwhRU5USVRZIGNpciAiJiN4MjVDQjsiPjwhRU5USVRZIHRyaWRvdCAiJiN4MjVFQzsiPjwhRU5USVRZIHhjaXJjICImI3gyNUVGOyI%2BPCFFTlRJVFkgYmlnY2lyYyAiJiN4MjVFRjsiPjwhRU5USVRZIHVsdHJpICImI3gyNUY4OyI%2BPCFFTlRJVFkgdXJ0cmkgIiYjeDI1Rjk7Ij48IUVOVElUWSBsbHRyaSAiJiN4MjVGQTsiPjwhRU5USVRZIEVtcHR5U21hbGxTcXVhcmUgIiYjeDI1RkI7Ij48IUVOVElUWSBGaWxsZWRTbWFsbFNxdWFyZSAiJiN4MjVGQzsiPjwhRU5USVRZIHN0YXJmICImI3gyNjA1OyI%2BPCFFTlRJVFkgYmlnc3RhciAiJiN4MjYwNTsiPjwhRU5USVRZIHN0YXIgIiYjeDI2MDY7Ij48IUVOVElUWSBwaG9uZSAiJiN4MjYwRTsiPjwhRU5USVRZIGZlbWFsZSAiJiN4MjY0MDsiPjwhRU5USVRZIG1hbGUgIiYjeDI2NDI7Ij48IUVOVElUWSBzcGFkZXMgIiYjeDI2NjA7Ij48IUVOVElUWSBzcGFkZXN1aXQgIiYjeDI2NjA7Ij48IUVOVElUWSBjbHVicyAiJiN4MjY2MzsiPjwhRU5USVRZIGNsdWJzdWl0ICImI3gyNjYzOyI%2BPCFFTlRJVFkgaGVhcnRzICImI3gyNjY1OyI%2BPCFFTlRJVFkgaGVhcnRzdWl0ICImI3gyNjY1OyI%2BPCFFTlRJVFkgZGlhbXMgIiYjeDI2NjY7Ij48IUVOVElUWSBkaWFtb25kc3VpdCAiJiN4MjY2NjsiPjwhRU5USVRZIHN1bmcgIiYjeDI2NkE7Ij48IUVOVElUWSBmbGF0ICImI3gyNjZEOyI%2BPCFFTlRJVFkgbmF0dXIgIiYjeDI2NkU7Ij48IUVOVElUWSBuYXR1cmFsICImI3gyNjZFOyI%2BPCFFTlRJVFkgc2hhcnAgIiYjeDI2NkY7Ij48IUVOVElUWSBjaGVjayAiJiN4MjcxMzsiPjwhRU5USVRZIGNoZWNrbWFyayAiJiN4MjcxMzsiPjwhRU5USVRZIGNyb3NzICImI3gyNzE3OyI%2BPCFFTlRJVFkgbWFsdCAiJiN4MjcyMDsiPjwhRU5USVRZIG1hbHRlc2UgIiYjeDI3MjA7Ij48IUVOVElUWSBzZXh0ICImI3gyNzM2OyI%2BPCFFTlRJVFkgVmVydGljYWxTZXBhcmF0b3IgIiYjeDI3NTg7Ij48IUVOVElUWSBsYmJyayAiJiN4Mjc3MjsiPjwhRU5USVRZIHJiYnJrICImI3gyNzczOyI%2BPCFFTlRJVFkgYnNvbGhzdWIgIiYjeDI3Qzg7Ij48IUVOVElUWSBzdXBoc29sICImI3gyN0M5OyI%2BPCFFTlRJVFkgbG9icmsgIiYjeDI3RTY7Ij48IUVOVElUWSBMZWZ0RG91YmxlQnJhY2tldCAiJiN4MjdFNjsiPjwhRU5USVRZIHJvYnJrICImI3gyN0U3OyI%2BPCFFTlRJVFkgUmlnaHREb3VibGVCcmFja2V0ICImI3gyN0U3OyI%2BPCFFTlRJVFkgbGFuZyAiJiN4MjdFODsiPjwhRU5USVRZIExlZnRBbmdsZUJyYWNrZXQgIiYjeDI3RTg7Ij48IUVOVElUWSBsYW5nbGUgIiYjeDI3RTg7Ij48IUVOVElUWSByYW5nICImI3gyN0U5OyI%2BPCFFTlRJVFkgUmlnaHRBbmdsZUJyYWNrZXQgIiYjeDI3RTk7Ij48IUVOVElUWSByYW5nbGUgIiYjeDI3RTk7Ij48IUVOVElUWSBMYW5nICImI3gyN0VBOyI%2BPCFFTlRJVFkgUmFuZyAiJiN4MjdFQjsiPjwhRU5USVRZIGxvYW5nICImI3gyN0VDOyI%2BPCFFTlRJVFkgcm9hbmcgIiYjeDI3RUQ7Ij48IUVOVElUWSB4bGFyciAiJiN4MjdGNTsiPjwhRU5USVRZIGxvbmdsZWZ0YXJyb3cgIiYjeDI3RjU7Ij48IUVOVElUWSBMb25nTGVmdEFycm93ICImI3gyN0Y1OyI%2BPCFFTlRJVFkgeHJhcnIgIiYjeDI3RjY7Ij48IUVOVElUWSBsb25ncmlnaHRhcnJvdyAiJiN4MjdGNjsiPjwhRU5USVRZIExvbmdSaWdodEFycm93ICImI3gyN0Y2OyI%2BPCFFTlRJVFkgeGhhcnIgIiYjeDI3Rjc7Ij48IUVOVElUWSBsb25nbGVmdHJpZ2h0YXJyb3cgIiYjeDI3Rjc7Ij48IUVOVElUWSBMb25nTGVmdFJpZ2h0QXJyb3cgIiYjeDI3Rjc7Ij48IUVOVElUWSB4bEFyciAiJiN4MjdGODsiPjwhRU5USVRZIExvbmdsZWZ0YXJyb3cgIiYjeDI3Rjg7Ij48IUVOVElUWSBEb3VibGVMb25nTGVmdEFycm93ICImI3gyN0Y4OyI%2BPCFFTlRJVFkgeHJBcnIgIiYjeDI3Rjk7Ij48IUVOVElUWSBMb25ncmlnaHRhcnJvdyAiJiN4MjdGOTsiPjwhRU5USVRZIERvdWJsZUxvbmdSaWdodEFycm93ICImI3gyN0Y5OyI%2BPCFFTlRJVFkgeGhBcnIgIiYjeDI3RkE7Ij48IUVOVElUWSBMb25nbGVmdHJpZ2h0YXJyb3cgIiYjeDI3RkE7Ij48IUVOVElUWSBEb3VibGVMb25nTGVmdFJpZ2h0QXJyb3cgIiYjeDI3RkE7Ij48IUVOVElUWSB4bWFwICImI3gyN0ZDOyI%2BPCFFTlRJVFkgbG9uZ21hcHN0byAiJiN4MjdGQzsiPjwhRU5USVRZIGR6aWdyYXJyICImI3gyN0ZGOyI%2BPCFFTlRJVFkgbnZsQXJyICImI3gyOTAyOyI%2BPCFFTlRJVFkgbnZyQXJyICImI3gyOTAzOyI%2BPCFFTlRJVFkgbnZIYXJyICImI3gyOTA0OyI%2BPCFFTlRJVFkgTWFwICImI3gyOTA1OyI%2BPCFFTlRJVFkgbGJhcnIgIiYjeDI5MEM7Ij48IUVOVElUWSByYmFyciAiJiN4MjkwRDsiPjwhRU5USVRZIGJrYXJvdyAiJiN4MjkwRDsiPjwhRU5USVRZIGxCYXJyICImI3gyOTBFOyI%2BPCFFTlRJVFkgckJhcnIgIiYjeDI5MEY7Ij48IUVOVElUWSBkYmthcm93ICImI3gyOTBGOyI%2BPCFFTlRJVFkgUkJhcnIgIiYjeDI5MTA7Ij48IUVOVElUWSBkcmJrYXJvdyAiJiN4MjkxMDsiPjwhRU5USVRZIEREb3RyYWhkICImI3gyOTExOyI%2BPCFFTlRJVFkgVXBBcnJvd0JhciAiJiN4MjkxMjsiPjwhRU5USVRZIERvd25BcnJvd0JhciAiJiN4MjkxMzsiPjwhRU5USVRZIFJhcnJ0bCAiJiN4MjkxNjsiPjwhRU5USVRZIGxhdGFpbCAiJiN4MjkxOTsiPjwhRU5USVRZIHJhdGFpbCAiJiN4MjkxQTsiPjwhRU5USVRZIGxBdGFpbCAiJiN4MjkxQjsiPjwhRU5USVRZIHJBdGFpbCAiJiN4MjkxQzsiPjwhRU5USVRZIGxhcnJmcyAiJiN4MjkxRDsiPjwhRU5USVRZIHJhcnJmcyAiJiN4MjkxRTsiPjwhRU5USVRZIGxhcnJiZnMgIiYjeDI5MUY7Ij48IUVOVElUWSByYXJyYmZzICImI3gyOTIwOyI%2BPCFFTlRJVFkgbndhcmhrICImI3gyOTIzOyI%2BPCFFTlRJVFkgbmVhcmhrICImI3gyOTI0OyI%2BPCFFTlRJVFkgc2VhcmhrICImI3gyOTI1OyI%2BPCFFTlRJVFkgaGtzZWFyb3cgIiYjeDI5MjU7Ij48IUVOVElUWSBzd2FyaGsgIiYjeDI5MjY7Ij48IUVOVElUWSBoa3N3YXJvdyAiJiN4MjkyNjsiPjwhRU5USVRZIG53bmVhciAiJiN4MjkyNzsiPjwhRU5USVRZIG5lc2VhciAiJiN4MjkyODsiPjwhRU5USVRZIHRvZWEgIiYjeDI5Mjg7Ij48IUVOVElUWSBzZXN3YXIgIiYjeDI5Mjk7Ij48IUVOVElUWSB0b3NhICImI3gyOTI5OyI%2BPCFFTlRJVFkgc3dud2FyICImI3gyOTJBOyI%2BPCFFTlRJVFkgcmFycmMgIiYjeDI5MzM7Ij48IUVOVElUWSBjdWRhcnJyICImI3gyOTM1OyI%2BPCFFTlRJVFkgbGRjYSAiJiN4MjkzNjsiPjwhRU5USVRZIHJkY2EgIiYjeDI5Mzc7Ij48IUVOVElUWSBjdWRhcnJsICImI3gyOTM4OyI%2BPCFFTlRJVFkgbGFycnBsICImI3gyOTM5OyI%2BPCFFTlRJVFkgY3VyYXJybSAiJiN4MjkzQzsiPjwhRU5USVRZIGN1bGFycnAgIiYjeDI5M0Q7Ij48IUVOVElUWSByYXJycGwgIiYjeDI5NDU7Ij48IUVOVElUWSBoYXJyY2lyICImI3gyOTQ4OyI%2BPCFFTlRJVFkgVWFycm9jaXIgIiYjeDI5NDk7Ij48IUVOVElUWSBsdXJkc2hhciAiJiN4Mjk0QTsiPjwhRU5USVRZIGxkcnVzaGFyICImI3gyOTRCOyI%2BPCFFTlRJVFkgTGVmdFJpZ2h0VmVjdG9yICImI3gyOTRFOyI%2BPCFFTlRJVFkgUmlnaHRVcERvd25WZWN0b3IgIiYjeDI5NEY7Ij48IUVOVElUWSBEb3duTGVmdFJpZ2h0VmVjdG9yICImI3gyOTUwOyI%2BPCFFTlRJVFkgTGVmdFVwRG93blZlY3RvciAiJiN4Mjk1MTsiPjwhRU5USVRZIExlZnRWZWN0b3JCYXIgIiYjeDI5NTI7Ij48IUVOVElUWSBSaWdodFZlY3RvckJhciAiJiN4Mjk1MzsiPjwhRU5USVRZIFJpZ2h0VXBWZWN0b3JCYXIgIiYjeDI5NTQ7Ij48IUVOVElUWSBSaWdodERvd25WZWN0b3JCYXIgIiYjeDI5NTU7Ij48IUVOVElUWSBEb3duTGVmdFZlY3RvckJhciAiJiN4Mjk1NjsiPjwhRU5USVRZIERvd25SaWdodFZlY3RvckJhciAiJiN4Mjk1NzsiPjwhRU5USVRZIExlZnRVcFZlY3RvckJhciAiJiN4Mjk1ODsiPjwhRU5USVRZIExlZnREb3duVmVjdG9yQmFyICImI3gyOTU5OyI%2BPCFFTlRJVFkgTGVmdFRlZVZlY3RvciAiJiN4Mjk1QTsiPjwhRU5USVRZIFJpZ2h0VGVlVmVjdG9yICImI3gyOTVCOyI%2BPCFFTlRJVFkgUmlnaHRVcFRlZVZlY3RvciAiJiN4Mjk1QzsiPjwhRU5USVRZIFJpZ2h0RG93blRlZVZlY3RvciAiJiN4Mjk1RDsiPjwhRU5USVRZIERvd25MZWZ0VGVlVmVjdG9yICImI3gyOTVFOyI%2BPCFFTlRJVFkgRG93blJpZ2h0VGVlVmVjdG9yICImI3gyOTVGOyI%2BPCFFTlRJVFkgTGVmdFVwVGVlVmVjdG9yICImI3gyOTYwOyI%2BPCFFTlRJVFkgTGVmdERvd25UZWVWZWN0b3IgIiYjeDI5NjE7Ij48IUVOVElUWSBsSGFyICImI3gyOTYyOyI%2BPCFFTlRJVFkgdUhhciAiJiN4Mjk2MzsiPjwhRU5USVRZIHJIYXIgIiYjeDI5NjQ7Ij48IUVOVElUWSBkSGFyICImI3gyOTY1OyI%2BPCFFTlRJVFkgbHVydWhhciAiJiN4Mjk2NjsiPjwhRU5USVRZIGxkcmRoYXIgIiYjeDI5Njc7Ij48IUVOVElUWSBydWx1aGFyICImI3gyOTY4OyI%2BPCFFTlRJVFkgcmRsZGhhciAiJiN4Mjk2OTsiPjwhRU5USVRZIGxoYXJ1bCAiJiN4Mjk2QTsiPjwhRU5USVRZIGxsaGFyZCAiJiN4Mjk2QjsiPjwhRU5USVRZIHJoYXJ1bCAiJiN4Mjk2QzsiPjwhRU5USVRZIGxyaGFyZCAiJiN4Mjk2RDsiPjwhRU5USVRZIHVkaGFyICImI3gyOTZFOyI%2BPCFFTlRJVFkgVXBFcXVpbGlicml1bSAiJiN4Mjk2RTsiPjwhRU5USVRZIGR1aGFyICImI3gyOTZGOyI%2BPCFFTlRJVFkgUmV2ZXJzZVVwRXF1aWxpYnJpdW0gIiYjeDI5NkY7Ij48IUVOVElUWSBSb3VuZEltcGxpZXMgIiYjeDI5NzA7Ij48IUVOVElUWSBlcmFyciAiJiN4Mjk3MTsiPjwhRU5USVRZIHNpbXJhcnIgIiYjeDI5NzI7Ij48IUVOVElUWSBsYXJyc2ltICImI3gyOTczOyI%2BPCFFTlRJVFkgcmFycnNpbSAiJiN4Mjk3NDsiPjwhRU5USVRZIHJhcnJhcCAiJiN4Mjk3NTsiPjwhRU5USVRZIGx0bGFyciAiJiN4Mjk3NjsiPjwhRU5USVRZIGd0cmFyciAiJiN4Mjk3ODsiPjwhRU5USVRZIHN1YnJhcnIgIiYjeDI5Nzk7Ij48IUVOVElUWSBzdXBsYXJyICImI3gyOTdCOyI%2BPCFFTlRJVFkgbGZpc2h0ICImI3gyOTdDOyI%2BPCFFTlRJVFkgcmZpc2h0ICImI3gyOTdEOyI%2BPCFFTlRJVFkgdWZpc2h0ICImI3gyOTdFOyI%2BPCFFTlRJVFkgZGZpc2h0ICImI3gyOTdGOyI%2BPCFFTlRJVFkgbG9wYXIgIiYjeDI5ODU7Ij48IUVOVElUWSByb3BhciAiJiN4Mjk4NjsiPjwhRU5USVRZIGxicmtlICImI3gyOThCOyI%2BPCFFTlRJVFkgcmJya2UgIiYjeDI5OEM7Ij48IUVOVElUWSBsYnJrc2x1ICImI3gyOThEOyI%2BPCFFTlRJVFkgcmJya3NsZCAiJiN4Mjk4RTsiPjwhRU5USVRZIGxicmtzbGQgIiYjeDI5OEY7Ij48IUVOVElUWSByYnJrc2x1ICImI3gyOTkwOyI%2BPCFFTlRJVFkgbGFuZ2QgIiYjeDI5OTE7Ij48IUVOVElUWSByYW5nZCAiJiN4Mjk5MjsiPjwhRU5USVRZIGxwYXJsdCAiJiN4Mjk5MzsiPjwhRU5USVRZIHJwYXJndCAiJiN4Mjk5NDsiPjwhRU5USVRZIGd0bFBhciAiJiN4Mjk5NTsiPjwhRU5USVRZIGx0clBhciAiJiN4Mjk5NjsiPjwhRU5USVRZIHZ6aWd6YWcgIiYjeDI5OUE7Ij48IUVOVElUWSB2YW5ncnQgIiYjeDI5OUM7Ij48IUVOVElUWSBhbmdydHZiZCAiJiN4Mjk5RDsiPjwhRU5USVRZIGFuZ2UgIiYjeDI5QTQ7Ij48IUVOVElUWSByYW5nZSAiJiN4MjlBNTsiPjwhRU5USVRZIGR3YW5nbGUgIiYjeDI5QTY7Ij48IUVOVElUWSB1d2FuZ2xlICImI3gyOUE3OyI%2BPCFFTlRJVFkgYW5nbXNkYWEgIiYjeDI5QTg7Ij48IUVOVElUWSBhbmdtc2RhYiAiJiN4MjlBOTsiPjwhRU5USVRZIGFuZ21zZGFjICImI3gyOUFBOyI%2BPCFFTlRJVFkgYW5nbXNkYWQgIiYjeDI5QUI7Ij48IUVOVElUWSBhbmdtc2RhZSAiJiN4MjlBQzsiPjwhRU5USVRZIGFuZ21zZGFmICImI3gyOUFEOyI%2BPCFFTlRJVFkgYW5nbXNkYWcgIiYjeDI5QUU7Ij48IUVOVElUWSBhbmdtc2RhaCAiJiN4MjlBRjsiPjwhRU5USVRZIGJlbXB0eXYgIiYjeDI5QjA7Ij48IUVOVElUWSBkZW1wdHl2ICImI3gyOUIxOyI%2BPCFFTlRJVFkgY2VtcHR5diAiJiN4MjlCMjsiPjwhRU5USVRZIHJhZW1wdHl2ICImI3gyOUIzOyI%2BPCFFTlRJVFkgbGFlbXB0eXYgIiYjeDI5QjQ7Ij48IUVOVElUWSBvaGJhciAiJiN4MjlCNTsiPjwhRU5USVRZIG9taWQgIiYjeDI5QjY7Ij48IUVOVElUWSBvcGFyICImI3gyOUI3OyI%2BPCFFTlRJVFkgb3BlcnAgIiYjeDI5Qjk7Ij48IUVOVElUWSBvbGNyb3NzICImI3gyOUJCOyI%2BPCFFTlRJVFkgb2Rzb2xkICImI3gyOUJDOyI%2BPCFFTlRJVFkgb2xjaXIgIiYjeDI5QkU7Ij48IUVOVElUWSBvZmNpciAiJiN4MjlCRjsiPjwhRU5USVRZIG9sdCAiJiN4MjlDMDsiPjwhRU5USVRZIG9ndCAiJiN4MjlDMTsiPjwhRU5USVRZIGNpcnNjaXIgIiYjeDI5QzI7Ij48IUVOVElUWSBjaXJFICImI3gyOUMzOyI%2BPCFFTlRJVFkgc29sYiAiJiN4MjlDNDsiPjwhRU5USVRZIGJzb2xiICImI3gyOUM1OyI%2BPCFFTlRJVFkgYm94Ym94ICImI3gyOUM5OyI%2BPCFFTlRJVFkgdHJpc2IgIiYjeDI5Q0Q7Ij48IUVOVElUWSBydHJpbHRyaSAiJiN4MjlDRTsiPjwhRU5USVRZIExlZnRUcmlhbmdsZUJhciAiJiN4MjlDRjsiPjwhRU5USVRZIFJpZ2h0VHJpYW5nbGVCYXIgIiYjeDI5RDA7Ij48IUVOVElUWSBpaW5maW4gIiYjeDI5REM7Ij48IUVOVElUWSBpbmZpbnRpZSAiJiN4MjlERDsiPjwhRU5USVRZIG52aW5maW4gIiYjeDI5REU7Ij48IUVOVElUWSBlcGFyc2wgIiYjeDI5RTM7Ij48IUVOVElUWSBzbWVwYXJzbCAiJiN4MjlFNDsiPjwhRU5USVRZIGVxdnBhcnNsICImI3gyOUU1OyI%2BPCFFTlRJVFkgbG96ZiAiJiN4MjlFQjsiPjwhRU5USVRZIGJsYWNrbG96ZW5nZSAiJiN4MjlFQjsiPjwhRU5USVRZIFJ1bGVEZWxheWVkICImI3gyOUY0OyI%2BPCFFTlRJVFkgZHNvbCAiJiN4MjlGNjsiPjwhRU5USVRZIHhvZG90ICImI3gyQTAwOyI%2BPCFFTlRJVFkgYmlnb2RvdCAiJiN4MkEwMDsiPjwhRU5USVRZIHhvcGx1cyAiJiN4MkEwMTsiPjwhRU5USVRZIGJpZ29wbHVzICImI3gyQTAxOyI%2BPCFFTlRJVFkgeG90aW1lICImI3gyQTAyOyI%2BPCFFTlRJVFkgYmlnb3RpbWVzICImI3gyQTAyOyI%2BPCFFTlRJVFkgeHVwbHVzICImI3gyQTA0OyI%2BPCFFTlRJVFkgYmlndXBsdXMgIiYjeDJBMDQ7Ij48IUVOVElUWSB4c3FjdXAgIiYjeDJBMDY7Ij48IUVOVElUWSBiaWdzcWN1cCAiJiN4MkEwNjsiPjwhRU5USVRZIHFpbnQgIiYjeDJBMEM7Ij48IUVOVElUWSBpaWlpbnQgIiYjeDJBMEM7Ij48IUVOVElUWSBmcGFydGludCAiJiN4MkEwRDsiPjwhRU5USVRZIGNpcmZuaW50ICImI3gyQTEwOyI%2BPCFFTlRJVFkgYXdpbnQgIiYjeDJBMTE7Ij48IUVOVElUWSBycHBvbGludCAiJiN4MkExMjsiPjwhRU5USVRZIHNjcG9saW50ICImI3gyQTEzOyI%2BPCFFTlRJVFkgbnBvbGludCAiJiN4MkExNDsiPjwhRU5USVRZIHBvaW50aW50ICImI3gyQTE1OyI%2BPCFFTlRJVFkgcXVhdGludCAiJiN4MkExNjsiPjwhRU5USVRZIGludGxhcmhrICImI3gyQTE3OyI%2BPCFFTlRJVFkgcGx1c2NpciAiJiN4MkEyMjsiPjwhRU5USVRZIHBsdXNhY2lyICImI3gyQTIzOyI%2BPCFFTlRJVFkgc2ltcGx1cyAiJiN4MkEyNDsiPjwhRU5USVRZIHBsdXNkdSAiJiN4MkEyNTsiPjwhRU5USVRZIHBsdXNzaW0gIiYjeDJBMjY7Ij48IUVOVElUWSBwbHVzdHdvICImI3gyQTI3OyI%2BPCFFTlRJVFkgbWNvbW1hICImI3gyQTI5OyI%2BPCFFTlRJVFkgbWludXNkdSAiJiN4MkEyQTsiPjwhRU5USVRZIGxvcGx1cyAiJiN4MkEyRDsiPjwhRU5USVRZIHJvcGx1cyAiJiN4MkEyRTsiPjwhRU5USVRZIENyb3NzICImI3gyQTJGOyI%2BPCFFTlRJVFkgdGltZXNkICImI3gyQTMwOyI%2BPCFFTlRJVFkgdGltZXNiYXIgIiYjeDJBMzE7Ij48IUVOVElUWSBzbWFzaHAgIiYjeDJBMzM7Ij48IUVOVElUWSBsb3RpbWVzICImI3gyQTM0OyI%2BPCFFTlRJVFkgcm90aW1lcyAiJiN4MkEzNTsiPjwhRU5USVRZIG90aW1lc2FzICImI3gyQTM2OyI%2BPCFFTlRJVFkgT3RpbWVzICImI3gyQTM3OyI%2BPCFFTlRJVFkgb2RpdiAiJiN4MkEzODsiPjwhRU5USVRZIHRyaXBsdXMgIiYjeDJBMzk7Ij48IUVOVElUWSB0cmltaW51cyAiJiN4MkEzQTsiPjwhRU5USVRZIHRyaXRpbWUgIiYjeDJBM0I7Ij48IUVOVElUWSBpcHJvZCAiJiN4MkEzQzsiPjwhRU5USVRZIGludHByb2QgIiYjeDJBM0M7Ij48IUVOVElUWSBhbWFsZyAiJiN4MkEzRjsiPjwhRU5USVRZIGNhcGRvdCAiJiN4MkE0MDsiPjwhRU5USVRZIG5jdXAgIiYjeDJBNDI7Ij48IUVOVElUWSBuY2FwICImI3gyQTQzOyI%2BPCFFTlRJVFkgY2FwYW5kICImI3gyQTQ0OyI%2BPCFFTlRJVFkgY3Vwb3IgIiYjeDJBNDU7Ij48IUVOVElUWSBjdXBjYXAgIiYjeDJBNDY7Ij48IUVOVElUWSBjYXBjdXAgIiYjeDJBNDc7Ij48IUVOVElUWSBjdXBicmNhcCAiJiN4MkE0ODsiPjwhRU5USVRZIGNhcGJyY3VwICImI3gyQTQ5OyI%2BPCFFTlRJVFkgY3VwY3VwICImI3gyQTRBOyI%2BPCFFTlRJVFkgY2FwY2FwICImI3gyQTRCOyI%2BPCFFTlRJVFkgY2N1cHMgIiYjeDJBNEM7Ij48IUVOVElUWSBjY2FwcyAiJiN4MkE0RDsiPjwhRU5USVRZIGNjdXBzc20gIiYjeDJBNTA7Ij48IUVOVElUWSBBbmQgIiYjeDJBNTM7Ij48IUVOVElUWSBPciAiJiN4MkE1NDsiPjwhRU5USVRZIGFuZGFuZCAiJiN4MkE1NTsiPjwhRU5USVRZIG9yb3IgIiYjeDJBNTY7Ij48IUVOVElUWSBvcnNsb3BlICImI3gyQTU3OyI%2BPCFFTlRJVFkgYW5kc2xvcGUgIiYjeDJBNTg7Ij48IUVOVElUWSBhbmR2ICImI3gyQTVBOyI%2BPCFFTlRJVFkgb3J2ICImI3gyQTVCOyI%2BPCFFTlRJVFkgYW5kZCAiJiN4MkE1QzsiPjwhRU5USVRZIG9yZCAiJiN4MkE1RDsiPjwhRU5USVRZIHdlZGJhciAiJiN4MkE1RjsiPjwhRU5USVRZIHNkb3RlICImI3gyQTY2OyI%2BPCFFTlRJVFkgc2ltZG90ICImI3gyQTZBOyI%2BPCFFTlRJVFkgY29uZ2RvdCAiJiN4MkE2RDsiPjwhRU5USVRZIGVhc3RlciAiJiN4MkE2RTsiPjwhRU5USVRZIGFwYWNpciAiJiN4MkE2RjsiPjwhRU5USVRZIGFwRSAiJiN4MkE3MDsiPjwhRU5USVRZIGVwbHVzICImI3gyQTcxOyI%2BPCFFTlRJVFkgcGx1c2UgIiYjeDJBNzI7Ij48IUVOVElUWSBFc2ltICImI3gyQTczOyI%2BPCFFTlRJVFkgQ29sb25lICImI3gyQTc0OyI%2BPCFFTlRJVFkgRXF1YWwgIiYjeDJBNzU7Ij48IUVOVElUWSBlRERvdCAiJiN4MkE3NzsiPjwhRU5USVRZIGRkb3RzZXEgIiYjeDJBNzc7Ij48IUVOVElUWSBlcXVpdkREICImI3gyQTc4OyI%2BPCFFTlRJVFkgbHRjaXIgIiYjeDJBNzk7Ij48IUVOVElUWSBndGNpciAiJiN4MkE3QTsiPjwhRU5USVRZIGx0cXVlc3QgIiYjeDJBN0I7Ij48IUVOVElUWSBndHF1ZXN0ICImI3gyQTdDOyI%2BPCFFTlRJVFkgbGVzICImI3gyQTdEOyI%2BPCFFTlRJVFkgTGVzc1NsYW50RXF1YWwgIiYjeDJBN0Q7Ij48IUVOVElUWSBsZXFzbGFudCAiJiN4MkE3RDsiPjwhRU5USVRZIGdlcyAiJiN4MkE3RTsiPjwhRU5USVRZIEdyZWF0ZXJTbGFudEVxdWFsICImI3gyQTdFOyI%2BPCFFTlRJVFkgZ2Vxc2xhbnQgIiYjeDJBN0U7Ij48IUVOVElUWSBsZXNkb3QgIiYjeDJBN0Y7Ij48IUVOVElUWSBnZXNkb3QgIiYjeDJBODA7Ij48IUVOVElUWSBsZXNkb3RvICImI3gyQTgxOyI%2BPCFFTlRJVFkgZ2VzZG90byAiJiN4MkE4MjsiPjwhRU5USVRZIGxlc2RvdG9yICImI3gyQTgzOyI%2BPCFFTlRJVFkgZ2VzZG90b2wgIiYjeDJBODQ7Ij48IUVOVElUWSBsYXAgIiYjeDJBODU7Ij48IUVOVElUWSBsZXNzYXBwcm94ICImI3gyQTg1OyI%2BPCFFTlRJVFkgZ2FwICImI3gyQTg2OyI%2BPCFFTlRJVFkgZ3RyYXBwcm94ICImI3gyQTg2OyI%2BPCFFTlRJVFkgbG5lICImI3gyQTg3OyI%2BPCFFTlRJVFkgbG5lcSAiJiN4MkE4NzsiPjwhRU5USVRZIGduZSAiJiN4MkE4ODsiPjwhRU5USVRZIGduZXEgIiYjeDJBODg7Ij48IUVOVElUWSBsbmFwICImI3gyQTg5OyI%2BPCFFTlRJVFkgbG5hcHByb3ggIiYjeDJBODk7Ij48IUVOVElUWSBnbmFwICImI3gyQThBOyI%2BPCFFTlRJVFkgZ25hcHByb3ggIiYjeDJBOEE7Ij48IUVOVElUWSBsRWcgIiYjeDJBOEI7Ij48IUVOVElUWSBsZXNzZXFxZ3RyICImI3gyQThCOyI%2BPCFFTlRJVFkgZ0VsICImI3gyQThDOyI%2BPCFFTlRJVFkgZ3RyZXFxbGVzcyAiJiN4MkE4QzsiPjwhRU5USVRZIGxzaW1lICImI3gyQThEOyI%2BPCFFTlRJVFkgZ3NpbWUgIiYjeDJBOEU7Ij48IUVOVElUWSBsc2ltZyAiJiN4MkE4RjsiPjwhRU5USVRZIGdzaW1sICImI3gyQTkwOyI%2BPCFFTlRJVFkgbGdFICImI3gyQTkxOyI%2BPCFFTlRJVFkgZ2xFICImI3gyQTkyOyI%2BPCFFTlRJVFkgbGVzZ2VzICImI3gyQTkzOyI%2BPCFFTlRJVFkgZ2VzbGVzICImI3gyQTk0OyI%2BPCFFTlRJVFkgZWxzICImI3gyQTk1OyI%2BPCFFTlRJVFkgZXFzbGFudGxlc3MgIiYjeDJBOTU7Ij48IUVOVElUWSBlZ3MgIiYjeDJBOTY7Ij48IUVOVElUWSBlcXNsYW50Z3RyICImI3gyQTk2OyI%2BPCFFTlRJVFkgZWxzZG90ICImI3gyQTk3OyI%2BPCFFTlRJVFkgZWdzZG90ICImI3gyQTk4OyI%2BPCFFTlRJVFkgZWwgIiYjeDJBOTk7Ij48IUVOVElUWSBlZyAiJiN4MkE5QTsiPjwhRU5USVRZIHNpbWwgIiYjeDJBOUQ7Ij48IUVOVElUWSBzaW1nICImI3gyQTlFOyI%2BPCFFTlRJVFkgc2ltbEUgIiYjeDJBOUY7Ij48IUVOVElUWSBzaW1nRSAiJiN4MkFBMDsiPjwhRU5USVRZIExlc3NMZXNzICImI3gyQUExOyI%2BPCFFTlRJVFkgR3JlYXRlckdyZWF0ZXIgIiYjeDJBQTI7Ij48IUVOVElUWSBnbGogIiYjeDJBQTQ7Ij48IUVOVElUWSBnbGEgIiYjeDJBQTU7Ij48IUVOVElUWSBsdGNjICImI3gyQUE2OyI%2BPCFFTlRJVFkgZ3RjYyAiJiN4MkFBNzsiPjwhRU5USVRZIGxlc2NjICImI3gyQUE4OyI%2BPCFFTlRJVFkgZ2VzY2MgIiYjeDJBQTk7Ij48IUVOVElUWSBzbXQgIiYjeDJBQUE7Ij48IUVOVElUWSBsYXQgIiYjeDJBQUI7Ij48IUVOVElUWSBzbXRlICImI3gyQUFDOyI%2BPCFFTlRJVFkgbGF0ZSAiJiN4MkFBRDsiPjwhRU5USVRZIGJ1bXBFICImI3gyQUFFOyI%2BPCFFTlRJVFkgcHJlICImI3gyQUFGOyI%2BPCFFTlRJVFkgcHJlY2VxICImI3gyQUFGOyI%2BPCFFTlRJVFkgUHJlY2VkZXNFcXVhbCAiJiN4MkFBRjsiPjwhRU5USVRZIHNjZSAiJiN4MkFCMDsiPjwhRU5USVRZIHN1Y2NlcSAiJiN4MkFCMDsiPjwhRU5USVRZIFN1Y2NlZWRzRXF1YWwgIiYjeDJBQjA7Ij48IUVOVElUWSBwckUgIiYjeDJBQjM7Ij48IUVOVElUWSBzY0UgIiYjeDJBQjQ7Ij48IUVOVElUWSBwcm5FICImI3gyQUI1OyI%2BPCFFTlRJVFkgcHJlY25lcXEgIiYjeDJBQjU7Ij48IUVOVElUWSBzY25FICImI3gyQUI2OyI%2BPCFFTlRJVFkgc3VjY25lcXEgIiYjeDJBQjY7Ij48IUVOVElUWSBwcmFwICImI3gyQUI3OyI%2BPCFFTlRJVFkgcHJlY2FwcHJveCAiJiN4MkFCNzsiPjwhRU5USVRZIHNjYXAgIiYjeDJBQjg7Ij48IUVOVElUWSBzdWNjYXBwcm94ICImI3gyQUI4OyI%2BPCFFTlRJVFkgcHJuYXAgIiYjeDJBQjk7Ij48IUVOVElUWSBwcmVjbmFwcHJveCAiJiN4MkFCOTsiPjwhRU5USVRZIHNjbmFwICImI3gyQUJBOyI%2BPCFFTlRJVFkgc3VjY25hcHByb3ggIiYjeDJBQkE7Ij48IUVOVElUWSBQciAiJiN4MkFCQjsiPjwhRU5USVRZIFNjICImI3gyQUJDOyI%2BPCFFTlRJVFkgc3ViZG90ICImI3gyQUJEOyI%2BPCFFTlRJVFkgc3VwZG90ICImI3gyQUJFOyI%2BPCFFTlRJVFkgc3VicGx1cyAiJiN4MkFCRjsiPjwhRU5USVRZIHN1cHBsdXMgIiYjeDJBQzA7Ij48IUVOVElUWSBzdWJtdWx0ICImI3gyQUMxOyI%2BPCFFTlRJVFkgc3VwbXVsdCAiJiN4MkFDMjsiPjwhRU5USVRZIHN1YmVkb3QgIiYjeDJBQzM7Ij48IUVOVElUWSBzdXBlZG90ICImI3gyQUM0OyI%2BPCFFTlRJVFkgc3ViRSAiJiN4MkFDNTsiPjwhRU5USVRZIHN1YnNldGVxcSAiJiN4MkFDNTsiPjwhRU5USVRZIHN1cEUgIiYjeDJBQzY7Ij48IUVOVElUWSBzdXBzZXRlcXEgIiYjeDJBQzY7Ij48IUVOVElUWSBzdWJzaW0gIiYjeDJBQzc7Ij48IUVOVElUWSBzdXBzaW0gIiYjeDJBQzg7Ij48IUVOVElUWSBzdWJuRSAiJiN4MkFDQjsiPjwhRU5USVRZIHN1YnNldG5lcXEgIiYjeDJBQ0I7Ij48IUVOVElUWSBzdXBuRSAiJiN4MkFDQzsiPjwhRU5USVRZIHN1cHNldG5lcXEgIiYjeDJBQ0M7Ij48IUVOVElUWSBjc3ViICImI3gyQUNGOyI%2BPCFFTlRJVFkgY3N1cCAiJiN4MkFEMDsiPjwhRU5USVRZIGNzdWJlICImI3gyQUQxOyI%2BPCFFTlRJVFkgY3N1cGUgIiYjeDJBRDI7Ij48IUVOVElUWSBzdWJzdXAgIiYjeDJBRDM7Ij48IUVOVElUWSBzdXBzdWIgIiYjeDJBRDQ7Ij48IUVOVElUWSBzdWJzdWIgIiYjeDJBRDU7Ij48IUVOVElUWSBzdXBzdXAgIiYjeDJBRDY7Ij48IUVOVElUWSBzdXBoc3ViICImI3gyQUQ3OyI%2BPCFFTlRJVFkgc3VwZHN1YiAiJiN4MkFEODsiPjwhRU5USVRZIGZvcmt2ICImI3gyQUQ5OyI%2BPCFFTlRJVFkgdG9wZm9yayAiJiN4MkFEQTsiPjwhRU5USVRZIG1sY3AgIiYjeDJBREI7Ij48IUVOVElUWSBEYXNodiAiJiN4MkFFNDsiPjwhRU5USVRZIERvdWJsZUxlZnRUZWUgIiYjeDJBRTQ7Ij48IUVOVElUWSBWZGFzaGwgIiYjeDJBRTY7Ij48IUVOVElUWSBCYXJ2ICImI3gyQUU3OyI%2BPCFFTlRJVFkgdkJhciAiJiN4MkFFODsiPjwhRU5USVRZIHZCYXJ2ICImI3gyQUU5OyI%2BPCFFTlRJVFkgVmJhciAiJiN4MkFFQjsiPjwhRU5USVRZIE5vdCAiJiN4MkFFQzsiPjwhRU5USVRZIGJOb3QgIiYjeDJBRUQ7Ij48IUVOVElUWSBybm1pZCAiJiN4MkFFRTsiPjwhRU5USVRZIGNpcm1pZCAiJiN4MkFFRjsiPjwhRU5USVRZIG1pZGNpciAiJiN4MkFGMDsiPjwhRU5USVRZIHRvcGNpciAiJiN4MkFGMTsiPjwhRU5USVRZIG5ocGFyICImI3gyQUYyOyI%2BPCFFTlRJVFkgcGFyc2ltICImI3gyQUYzOyI%2BPCFFTlRJVFkgcGFyc2wgIiYjeDJBRkQ7Ij48IUVOVElUWSBmZmxpZyAiJiN4RkIwMDsiPjwhRU5USVRZIGZpbGlnICImI3hGQjAxOyI%2BPCFFTlRJVFkgZmxsaWcgIiYjeEZCMDI7Ij48IUVOVElUWSBmZmlsaWcgIiYjeEZCMDM7Ij48IUVOVElUWSBmZmxsaWcgIiYjeEZCMDQ7Ij48IUVOVElUWSBBc2NyICImI3gxRDQ5QzsiPjwhRU5USVRZIENzY3IgIiYjeDFENDlFOyI%2BPCFFTlRJVFkgRHNjciAiJiN4MUQ0OUY7Ij48IUVOVElUWSBHc2NyICImI3gxRDRBMjsiPjwhRU5USVRZIEpzY3IgIiYjeDFENEE1OyI%2BPCFFTlRJVFkgS3NjciAiJiN4MUQ0QTY7Ij48IUVOVElUWSBOc2NyICImI3gxRDRBOTsiPjwhRU5USVRZIE9zY3IgIiYjeDFENEFBOyI%2BPCFFTlRJVFkgUHNjciAiJiN4MUQ0QUI7Ij48IUVOVElUWSBRc2NyICImI3gxRDRBQzsiPjwhRU5USVRZIFNzY3IgIiYjeDFENEFFOyI%2BPCFFTlRJVFkgVHNjciAiJiN4MUQ0QUY7Ij48IUVOVElUWSBVc2NyICImI3gxRDRCMDsiPjwhRU5USVRZIFZzY3IgIiYjeDFENEIxOyI%2BPCFFTlRJVFkgV3NjciAiJiN4MUQ0QjI7Ij48IUVOVElUWSBYc2NyICImI3gxRDRCMzsiPjwhRU5USVRZIFlzY3IgIiYjeDFENEI0OyI%2BPCFFTlRJVFkgWnNjciAiJiN4MUQ0QjU7Ij48IUVOVElUWSBhc2NyICImI3gxRDRCNjsiPjwhRU5USVRZIGJzY3IgIiYjeDFENEI3OyI%2BPCFFTlRJVFkgY3NjciAiJiN4MUQ0Qjg7Ij48IUVOVElUWSBkc2NyICImI3gxRDRCOTsiPjwhRU5USVRZIGZzY3IgIiYjeDFENEJCOyI%2BPCFFTlRJVFkgaHNjciAiJiN4MUQ0QkQ7Ij48IUVOVElUWSBpc2NyICImI3gxRDRCRTsiPjwhRU5USVRZIGpzY3IgIiYjeDFENEJGOyI%2BPCFFTlRJVFkga3NjciAiJiN4MUQ0QzA7Ij48IUVOVElUWSBsc2NyICImI3gxRDRDMTsiPjwhRU5USVRZIG1zY3IgIiYjeDFENEMyOyI%2BPCFFTlRJVFkgbnNjciAiJiN4MUQ0QzM7Ij48IUVOVElUWSBwc2NyICImI3gxRDRDNTsiPjwhRU5USVRZIHFzY3IgIiYjeDFENEM2OyI%2BPCFFTlRJVFkgcnNjciAiJiN4MUQ0Qzc7Ij48IUVOVElUWSBzc2NyICImI3gxRDRDODsiPjwhRU5USVRZIHRzY3IgIiYjeDFENEM5OyI%2BPCFFTlRJVFkgdXNjciAiJiN4MUQ0Q0E7Ij48IUVOVElUWSB2c2NyICImI3gxRDRDQjsiPjwhRU5USVRZIHdzY3IgIiYjeDFENENDOyI%2BPCFFTlRJVFkgeHNjciAiJiN4MUQ0Q0Q7Ij48IUVOVElUWSB5c2NyICImI3gxRDRDRTsiPjwhRU5USVRZIHpzY3IgIiYjeDFENENGOyI%2BPCFFTlRJVFkgQWZyICImI3gxRDUwNDsiPjwhRU5USVRZIEJmciAiJiN4MUQ1MDU7Ij48IUVOVElUWSBEZnIgIiYjeDFENTA3OyI%2BPCFFTlRJVFkgRWZyICImI3gxRDUwODsiPjwhRU5USVRZIEZmciAiJiN4MUQ1MDk7Ij48IUVOVElUWSBHZnIgIiYjeDFENTBBOyI%2BPCFFTlRJVFkgSmZyICImI3gxRDUwRDsiPjwhRU5USVRZIEtmciAiJiN4MUQ1MEU7Ij48IUVOVElUWSBMZnIgIiYjeDFENTBGOyI%2BPCFFTlRJVFkgTWZyICImI3gxRDUxMDsiPjwhRU5USVRZIE5mciAiJiN4MUQ1MTE7Ij48IUVOVElUWSBPZnIgIiYjeDFENTEyOyI%2BPCFFTlRJVFkgUGZyICImI3gxRDUxMzsiPjwhRU5USVRZIFFmciAiJiN4MUQ1MTQ7Ij48IUVOVElUWSBTZnIgIiYjeDFENTE2OyI%2BPCFFTlRJVFkgVGZyICImI3gxRDUxNzsiPjwhRU5USVRZIFVmciAiJiN4MUQ1MTg7Ij48IUVOVElUWSBWZnIgIiYjeDFENTE5OyI%2BPCFFTlRJVFkgV2ZyICImI3gxRDUxQTsiPjwhRU5USVRZIFhmciAiJiN4MUQ1MUI7Ij48IUVOVElUWSBZZnIgIiYjeDFENTFDOyI%2BPCFFTlRJVFkgYWZyICImI3gxRDUxRTsiPjwhRU5USVRZIGJmciAiJiN4MUQ1MUY7Ij48IUVOVElUWSBjZnIgIiYjeDFENTIwOyI%2BPCFFTlRJVFkgZGZyICImI3gxRDUyMTsiPjwhRU5USVRZIGVmciAiJiN4MUQ1MjI7Ij48IUVOVElUWSBmZnIgIiYjeDFENTIzOyI%2BPCFFTlRJVFkgZ2ZyICImI3gxRDUyNDsiPjwhRU5USVRZIGhmciAiJiN4MUQ1MjU7Ij48IUVOVElUWSBpZnIgIiYjeDFENTI2OyI%2BPCFFTlRJVFkgamZyICImI3gxRDUyNzsiPjwhRU5USVRZIGtmciAiJiN4MUQ1Mjg7Ij48IUVOVElUWSBsZnIgIiYjeDFENTI5OyI%2BPCFFTlRJVFkgbWZyICImI3gxRDUyQTsiPjwhRU5USVRZIG5mciAiJiN4MUQ1MkI7Ij48IUVOVElUWSBvZnIgIiYjeDFENTJDOyI%2BPCFFTlRJVFkgcGZyICImI3gxRDUyRDsiPjwhRU5USVRZIHFmciAiJiN4MUQ1MkU7Ij48IUVOVElUWSByZnIgIiYjeDFENTJGOyI%2BPCFFTlRJVFkgc2ZyICImI3gxRDUzMDsiPjwhRU5USVRZIHRmciAiJiN4MUQ1MzE7Ij48IUVOVElUWSB1ZnIgIiYjeDFENTMyOyI%2BPCFFTlRJVFkgdmZyICImI3gxRDUzMzsiPjwhRU5USVRZIHdmciAiJiN4MUQ1MzQ7Ij48IUVOVElUWSB4ZnIgIiYjeDFENTM1OyI%2BPCFFTlRJVFkgeWZyICImI3gxRDUzNjsiPjwhRU5USVRZIHpmciAiJiN4MUQ1Mzc7Ij48IUVOVElUWSBBb3BmICImI3gxRDUzODsiPjwhRU5USVRZIEJvcGYgIiYjeDFENTM5OyI%2BPCFFTlRJVFkgRG9wZiAiJiN4MUQ1M0I7Ij48IUVOVElUWSBFb3BmICImI3gxRDUzQzsiPjwhRU5USVRZIEZvcGYgIiYjeDFENTNEOyI%2BPCFFTlRJVFkgR29wZiAiJiN4MUQ1M0U7Ij48IUVOVElUWSBJb3BmICImI3gxRDU0MDsiPjwhRU5USVRZIEpvcGYgIiYjeDFENTQxOyI%2BPCFFTlRJVFkgS29wZiAiJiN4MUQ1NDI7Ij48IUVOVElUWSBMb3BmICImI3gxRDU0MzsiPjwhRU5USVRZIE1vcGYgIiYjeDFENTQ0OyI%2BPCFFTlRJVFkgT29wZiAiJiN4MUQ1NDY7Ij48IUVOVElUWSBTb3BmICImI3gxRDU0QTsiPjwhRU5USVRZIFRvcGYgIiYjeDFENTRCOyI%2BPCFFTlRJVFkgVW9wZiAiJiN4MUQ1NEM7Ij48IUVOVElUWSBWb3BmICImI3gxRDU0RDsiPjwhRU5USVRZIFdvcGYgIiYjeDFENTRFOyI%2BPCFFTlRJVFkgWG9wZiAiJiN4MUQ1NEY7Ij48IUVOVElUWSBZb3BmICImI3gxRDU1MDsiPjwhRU5USVRZIGFvcGYgIiYjeDFENTUyOyI%2BPCFFTlRJVFkgYm9wZiAiJiN4MUQ1NTM7Ij48IUVOVElUWSBjb3BmICImI3gxRDU1NDsiPjwhRU5USVRZIGRvcGYgIiYjeDFENTU1OyI%2BPCFFTlRJVFkgZW9wZiAiJiN4MUQ1NTY7Ij48IUVOVElUWSBmb3BmICImI3gxRDU1NzsiPjwhRU5USVRZIGdvcGYgIiYjeDFENTU4OyI%2BPCFFTlRJVFkgaG9wZiAiJiN4MUQ1NTk7Ij48IUVOVElUWSBpb3BmICImI3gxRDU1QTsiPjwhRU5USVRZIGpvcGYgIiYjeDFENTVCOyI%2BPCFFTlRJVFkga29wZiAiJiN4MUQ1NUM7Ij48IUVOVElUWSBsb3BmICImI3gxRDU1RDsiPjwhRU5USVRZIG1vcGYgIiYjeDFENTVFOyI%2BPCFFTlRJVFkgbm9wZiAiJiN4MUQ1NUY7Ij48IUVOVElUWSBvb3BmICImI3gxRDU2MDsiPjwhRU5USVRZIHBvcGYgIiYjeDFENTYxOyI%2BPCFFTlRJVFkgcW9wZiAiJiN4MUQ1NjI7Ij48IUVOVElUWSByb3BmICImI3gxRDU2MzsiPjwhRU5USVRZIHNvcGYgIiYjeDFENTY0OyI%2BPCFFTlRJVFkgdG9wZiAiJiN4MUQ1NjU7Ij48IUVOVElUWSB1b3BmICImI3gxRDU2NjsiPjwhRU5USVRZIHZvcGYgIiYjeDFENTY3OyI%2BPCFFTlRJVFkgd29wZiAiJiN4MUQ1Njg7Ij48IUVOVElUWSB4b3BmICImI3gxRDU2OTsiPjwhRU5USVRZIHlvcGYgIiYjeDFENTZBOyI%2BPCFFTlRJVFkgem9wZiAiJiN4MUQ1NkI7Ij4%3D>the URL given by this
   76078   link</a>.</p>
   76079 
   76080   <ul class=brief><li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN</code></li>
   76081    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN</code></li>
   76082    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN</code></li>
   76083    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Frameset//EN</code></li>
   76084    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;Basic&nbsp;1.0//EN</code></li>
   76085    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1&nbsp;plus&nbsp;MathML&nbsp;2.0//EN</code></li>
   76086    <li><code title="">-//W3C//DTD&nbsp;XHTML&nbsp;1.1&nbsp;plus&nbsp;MathML&nbsp;2.0&nbsp;plus&nbsp;SVG&nbsp;1.1//EN</code></li>
   76087    <li><code title="">-//W3C//DTD&nbsp;MathML&nbsp;2.0//EN</code></li>
   76088    <li><code title="">-//WAPFORUM//DTD&nbsp;XHTML&nbsp;Mobile&nbsp;1.0//EN</code></li>
   76089   </ul><p>Furthermore, user agents should attempt to retrieve the above
   76090   external entity's content when one of the above public identifiers
   76091   is used, and should not attempt to retrieve any other external
   76092   entity's content.</p>
   76093 
   76094   <p class=note>This is not strictly a <a href=#willful-violation title="willful
   76095   violation">violation</a> of the XML specification, but it does
   76096   contradict the spirit of the XML specification's requirements. This
   76097   is motivated by a desire for user agents to all handle entities in
   76098   an interoperable fashion without requiring any network access for
   76099   handling external subsets. <a href=#refsXML>[XML]</a></p>
   76100 
   76101   <p id=scriptTagXML>When an <a href=#xml-parser>XML parser</a> creates a
   76102   <code><a href=#script>script</a></code> element, it must be marked as being
   76103   <a href=#parser-inserted>"parser-inserted"</a>.  If the parser was originally
   76104   created for the <a href=#xml-fragment-parsing-algorithm>XML fragment parsing algorithm</a>, then
   76105   the element must be marked as <a href=#already-started>"already started"</a>
   76106   also. When the element's end tag is parsed, the user agent must
   76107   <a href=#running-a-script title="running a script">run</a> the <code><a href=#script>script</a></code>
   76108   element. If this causes there to be a <a href=#pending-parsing-blocking-script>pending parsing-blocking
   76109   script</a>, then the user agent must run the following steps:</p>
   76110 
   76111   <ol><li><p>Block this instance of the <a href=#xml-parser>XML parser</a>, such
   76112    that the <a href=#event-loop>event loop</a> will not run <a href=#concept-task title=concept-task>tasks</a> that invoke it.</li>
   76113 
   76114    <li><p><a href=#spin-the-event-loop>Spin the event loop</a> until there is no <a href=#a-style-sheet-blocking-scripts title="a style sheet blocking scripts">style sheet blocking
   76115    scripts</a> and the <a href=#pending-parsing-blocking-script>pending parsing-blocking
   76116    script</a>'s <a href=#ready-to-be-parser-executed>"ready to be parser-executed"</a> flag is
   76117    set.</li>
   76118 
   76119    <li><p>Unblock this instance of the <a href=#xml-parser>XML parser</a>, such
   76120    that <a href=#concept-task title=concept-task>tasks</a> that invoke it can
   76121    again be run.</li>
   76122 
   76123    <li><p><a href=#executing-a-script-block title="executing a script block">Execute</a> the
   76124    <a href=#pending-parsing-blocking-script>pending parsing-blocking script</a>.</li>
   76125 
   76126    <li><p>There is no longer a <a href=#pending-parsing-blocking-script>pending parsing-blocking
   76127    script</a>.</li>
   76128 
   76129   </ol><p class=note>Since the <code title=dom-document-write><a href=#dom-document-write>document.write()</a></code> API is not
   76130   available for <a href=#xml-documents>XML documents</a>, much of the complexity in
   76131   the <a href=#html-parser>HTML parser</a> is not needed in the <a href=#xml-parser>XML
   76132   parser</a>.</p>
   76133 
   76134   <p>Certain algorithms in this specification <dfn id=feed-the-parser title="feed the
   76135   parser">spoon-feed the parser</dfn> characters one string at a
   76136   time. In such cases, the <a href=#xml-parser>XML parser</a> must act as it
   76137   would have if faced with a single string consisting of the
   76138   concatenation of all those characters.</p>
   76139 
   76140   <p>When an <a href=#xml-parser>XML parser</a> reaches the end of its input, it
   76141   must <a href=#stop-parsing>stop parsing</a>, following the same rules as the
   76142   <a href=#html-parser>HTML parser</a>.</p>
   76143 
   76144   <p>For the purposes of conformance checkers, if a resource is
   76145   determined to be in <a href=#the-xhtml-syntax>the XHTML syntax</a>, then it is an
   76146   <a href=#xml-documents title="XML documents">XML document</a>.</p>
   76147 
   76148 
   76149 
   76150   <h3 id=serializing-xhtml-fragments><span class=secno>11.3 </span>Serializing XHTML fragments</h3>
   76151 
   76152   <p>The <dfn id=xml-fragment-serialization-algorithm>XML fragment serialization algorithm</dfn> for a
   76153   <code><a href=#document>Document</a></code> or <code><a href=#element>Element</a></code> node either returns a
   76154   fragment of XML that represents that node or raises an
   76155   exception.</p>
   76156 
   76157   <p>For <code><a href=#document>Document</a></code>s, the algorithm must return a string in
   76158   the form of a <a href=http://www.w3.org/TR/xml/#sec-well-formed>document
   76159   entity</a>, if none of the error cases below apply.</p>
   76160 
   76161   <p>For <code><a href=#element>Element</a></code>s, the algorithm must return a string in
   76162   the form of an <a href=http://www.w3.org/TR/xml/#wf-entities>internal general parsed
   76163   entity</a>, if none of the error cases below apply.</p>
   76164 
   76165   <p>In both cases, the string returned must be XML
   76166   namespace-well-formed and must be an isomorphic serialization of all
   76167   of that node's child nodes, in <a href=#tree-order>tree order</a>. User agents
   76168   may adjust prefixes and namespace declarations in the serialization
   76169   (and indeed might be forced to do so in some cases to obtain
   76170   namespace-well-formed XML). User agents may use a combination of
   76171   regular text, character references, and CDATA sections to represent
   76172   <a href=#text-node title="text node">text nodes</a> in the DOM (and indeed
   76173   might be forced to use representations that don't match the DOM's,
   76174   e.g. if a <code><a href=#cdatasection>CDATASection</a></code> node contains the string "<code title="">]]&gt;</code>").</p>
   76175 
   76176   <p>For <code><a href=#element>Element</a></code>s, if any of the elements in the
   76177   serialization are in no namespace, the default namespace in scope
   76178   for those elements must be explicitly declared as the empty
   76179   string.<!-- because otherwise round-tripping might break since it'll
   76180   pick up the surrounding default ns when setting --> (This doesn't
   76181   apply in the <code><a href=#document>Document</a></code> case.) <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a></p>
   76182 
   76183   <p>For the purposes of this section, an internal general parsed
   76184   entity is considered XML namespace-well-formed if a document
   76185   consisting of an element with no namespace declarations whose
   76186   contents are the internal general parsed entity would itself be XML
   76187   namespace-well-formed.</p>
   76188 
   76189   <p>If any of the following error cases are found in the DOM subtree
   76190   being serialized, then the algorithm must raise an
   76191   <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code> exception instead of returning a
   76192   string:</p>
   76193 
   76194   <ul><li>A <code><a href=#document>Document</a></code> node with no child element nodes.</li>
   76195 
   76196    <li>A <code><a href=#documenttype>DocumentType</a></code> node that has an external subset
   76197    public identifier that contains characters that are not matched by
   76198    the XML <code title="">PubidChar</code> production. <a href=#refsXML>[XML]</a></li>
   76199 
   76200    <li>A <code><a href=#documenttype>DocumentType</a></code> node that has an external subset
   76201    system identifier that contains both a U+0022 QUOTATION MARK (")
   76202    and a U+0027 APOSTROPHE (') or that contains characters that are
   76203    not matched by the XML <code title="">Char</code> production. <a href=#refsXML>[XML]</a></li>
   76204 
   76205    <li>A node with a <!--prefix or--> local name containing a U+003A
   76206    COLON (:).</li> <!--(prefixes can get adjusted, so this isn't an
   76207    excuse) -->
   76208 
   76209    <li>A node with a <!--prefix or--> local name that does not match
   76210    the XML <code title="">Name</code> production. <a href=#refsXML>[XML]</a></li> <!--(again, prefixes can get
   76211    adjusted, so this isn't an excuse) -->
   76212 
   76213    <li>An <code><a href=#attr>Attr</a></code> node with no namespace whose local name is
   76214    the lowercase string "<code title="">xmlns</code>". <a href=#refsXMLNS>[XMLNS]</a></li>
   76215 
   76216    <li>An <code><a href=#element>Element</a></code> node with two or more attributes with
   76217    the same local name and namespace.</li>
   76218 
   76219    <li>An <code><a href=#attr>Attr</a></code> node, <code><a href=#text>Text</a></code> node,
   76220    <code><a href=#cdatasection>CDATASection</a></code> node, <code><a href=#comment-0>Comment</a></code> node, or
   76221    <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose data contains
   76222    characters that are not matched by the XML <code title="">Char</code> production. <a href=#refsXML>[XML]</a></li>
   76223 
   76224    <!--<li>A <code>CDATASection</code> node whose data contains the
   76225    string "<code title="">]]&gt;</code>".</li> (these can be split)-->
   76226 
   76227    <li>A <code><a href=#comment-0>Comment</a></code> node whose data contains two adjacent
   76228    U+002D HYPHEN-MINUS characters (-) or ends with such a
   76229    character.</li>
   76230 
   76231    <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose target name is
   76232    an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">xml</code>".</li>
   76233 
   76234    <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose target name
   76235    contains a U+003A COLON (:).</li>
   76236 
   76237    <li>A <code><a href=#processinginstruction>ProcessingInstruction</a></code> node whose data contains
   76238    the string "<code title="">?&gt;</code>".</li>
   76239 
   76240   </ul><p class=note>These are the only ways to make a DOM
   76241   unserializable. The DOM enforces all the other XML constraints; for
   76242   example, trying to append two elements to a <code><a href=#document>Document</a></code>
   76243   node will raise a <code><a href=#hierarchy_request_err>HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   76244 
   76245 
   76246 
   76247   <h3 id=parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</h3>
   76248 
   76249   <p>The <dfn id=xml-fragment-parsing-algorithm>XML fragment parsing algorithm</dfn> for either returns
   76250   a <code><a href=#document>Document</a></code> or raises a <code><a href=#syntax_err>SYNTAX_ERR</a></code>
   76251   exception. Given a string <var title="">input</var> and an optional
   76252   context element <var title="">context</var>, the algorithm is as
   76253   follows:</p>
   76254 
   76255   <ol><li>
   76256 
   76257     <p>Create a new <a href=#xml-parser>XML parser</a>.</p>
   76258 
   76259    </li>
   76260 
   76261    <li>
   76262 
   76263     <p>If there is a <var title="">context</var> element, <a href=#feed-the-parser>feed
   76264     the parser</a> just created the string corresponding to the
   76265     start tag of that element, declaring all the namespace prefixes
   76266     that are in scope on that element in the DOM, as well as declaring
   76267     the default namespace (if any) that is in scope on that element in
   76268     the DOM.</p>
   76269 
   76270     <p>A namespace prefix is in scope if the DOM Core <code title="">lookupNamespaceURI()</code> method on the element would
   76271     return a non-null value for that prefix.</p>
   76272 
   76273     <p>The default namespace is the namespace for which the DOM Core
   76274     <code title="">isDefaultNamespace()</code> method on the element
   76275     would return true.</p>
   76276 
   76277     <p class=note>If there is a <var title="">context</var> element,
   76278     no <code title="">DOCTYPE</code> is passed to the parser, and
   76279     therefore no external subset is referenced, and therefore no
   76280     entities will be recognized.</p>
   76281 
   76282    </li>
   76283 
   76284    <li>
   76285 
   76286     <p><a href=#feed-the-parser>Feed the parser</a> just created the string <var title="">input</var>.</p>
   76287 
   76288    </li>
   76289 
   76290    <li>
   76291 
   76292     <p>If there is a <var title="">context</var> element, <a href=#feed-the-parser>feed
   76293     the parser</a> just created the string corresponding to the
   76294     end tag of that element.</p>
   76295 
   76296    </li>
   76297 
   76298    <li>
   76299 
   76300     <p>If there is an XML well-formedness or XML namespace
   76301     well-formedness error, then raise a <code><a href=#syntax_err>SYNTAX_ERR</a></code>
   76302     exception and abort these steps.</p>
   76303 
   76304    </li>
   76305 
   76306    <li>
   76307 
   76308     <p>If there is a <var title="">context</var> element, then return
   76309     the child nodes of the root element of the resulting
   76310     <code><a href=#document>Document</a></code>, in <a href=#tree-order>tree order</a>.</p>
   76311 
   76312     <p>Otherwise, return the children of the <code><a href=#document>Document</a></code>
   76313     object, in <a href=#tree-order>tree order</a>.</p>
   76314 
   76315    </li>
   76316 
   76317   </ol></div>
   76318 
   76319 
   76320   <div class=impl>
   76321 
   76322   <h2 id=rendering><span class=secno>12 </span>Rendering</h2>
   76323 
   76324   <p><i>User agents are not required to present HTML documents in any
   76325   particular way. However, this section provides a set of suggestions
   76326   for rendering HTML documents that, if followed, are likely to lead
   76327   to a user experience that closely resembles the experience intended
   76328   by the documents' authors. So as to avoid confusion regarding the
   76329   normativity of this section, RFC2119 terms have not been used.
   76330   Instead, the term "expected" is used to indicate behavior that will
   76331   lead to this experience.</i></p>
   76332 
   76333 
   76334   <h3 id=introduction-8><span class=secno>12.1 </span>Introduction</h3>
   76335 
   76336   <p>In general, user agents are expected to support CSS, and many of
   76337   the suggestions in this section are expressed in CSS terms. User
   76338   agents that use other presentation mechanisms can derive their
   76339   expected behavior by translating from the CSS rules given in this
   76340   section.</p>
   76341 
   76342   <p>In the absence of style-layer rules to the contrary (e.g. author
   76343   style sheets), user agents are expected to render an element so that
   76344   it conveys to the user the meaning that the element
   76345   <dfn id=represents>represents</dfn>, as described by this specification.</p>
   76346 
   76347   <p>The suggestions in this section generally assume a visual output
   76348   medium with a resolution of 96dpi or greater, but HTML is intended
   76349   to apply to multiple media (it is a <i>media-independent</i>
   76350   language). User agents are encouraged to adapt the suggestions in
   76351   this section to their target media.</p>
   76352 
   76353   <hr><p>An element is <dfn id=being-rendered>being rendered</dfn> if it is <a href=#in-a-document>in a
   76354   <code>Document</code></a>, either its parent node is itself
   76355   <a href=#being-rendered>being rendered</a> or it is the <code><a href=#document>Document</a></code> node,
   76356   and it is not explicitly excluded from the rendering using either:</p>
   76357   <ul class=brief><li>the CSS 'display' property's 'none' value, or</li>
   76358    <li>the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or</li>
   76359    <li>some equivalent in other styling languages.</li>
   76360   </ul><p class=note>Just being off-screen does not mean the element is
   76361   not <a href=#being-rendered>being rendered</a>. The presence of the <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute normally means the
   76362   element is not <a href=#being-rendered>being rendered</a>, though this might be
   76363   overriden by the style sheets.</p>
   76364 
   76365   </div>
   76366 
   76367 
   76368   <div class=impl>
   76369 
   76370   <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</h3>
   76371 
   76372   <h4 id=introduction-9><span class=secno>12.2.1 </span>Introduction</h4>
   76373 
   76374   <p>The CSS rules given in these subsections are, except where
   76375   otherwise specified, expected to be used as part of the user-agent
   76376   level style sheet defaults for all documents that contain <a href=#html-elements>HTML
   76377   elements</a>.</p>
   76378 
   76379   <p>Some rules are intended for the author-level zero-specificity
   76380   presentational hints part of the CSS cascade; these are explicitly
   76381   called out as <dfn id=presentational-hints>presentational hints</dfn>.</p>
   76382 
   76383   <p>Some of the rules regarding left and right margins are given here
   76384   as appropriate for elements whose 'direction' property is 'ltr', and
   76385   are expected to be flipped around on elements whose 'direction'
   76386   property is 'rtl'. These are marked "<dfn id=ltr-specific>LTR-specific</dfn>".</p>
   76387 
   76388   <p id=case-sensitive-selector-exception>For the purpose of the
   76389   rules marked "case-sensitive", user agents are expected to use
   76390   case-sensitive matching of attribute values rather than
   76391   case-insensitive matching, regardless of whether a case-insensitive
   76392   matching is normally required for the given attribute.</p>
   76393 
   76394   <p id=case-insensitive-selector-exception>Similarly, for the
   76395   purpose of the rules marked "case-insensitive", user agents are
   76396   expected to use <a href=#ascii-case-insensitive>ASCII case-insensitive</a> matching of
   76397   attribute values rather than case-sensitive matching, even for
   76398   attributes in XHTML documents.</p>
   76399 
   76400   <p class=note>These markings only affect the handling of attribute
   76401   <em>values</em>, not attribute names or element names.</p>
   76402 
   76403   <hr><p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
   76404   <dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
   76405   using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>
   76406   doesn't generate an error, then the user agent is expected to use
   76407   the parsed value as a pixel length for a <a href=#presentational-hints title="presentational
   76408   hints">presentational hint</a> for <var title="">properties</var>.</p>
   76409 
   76410   <p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
   76411   <dfn id=maps-to-the-dimension-property>maps to the dimension property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
   76412   using the <a href=#rules-for-parsing-dimension-values>rules for parsing dimension values</a> doesn't
   76413   generate an error, then the user agent is expected to use the parsed
   76414   dimension as the value for a <a href=#presentational-hints title="presentational
   76415   hints">presentational hint</a> for <var title="">properties</var>, with the value given as a pixel length if
   76416   the dimension was an integer, and with the value given as a
   76417   percentage if the dimension was a percentage.</p>
   76418 
   76419   </div>
   76420 
   76421 
   76422   <div class=impl>
   76423 
   76424   <h4 id=display-types><span class=secno>12.2.2 </span>Display types</h4>
   76425 
   76426   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76427 
   76428 [hidden], area, base, basefont, command, datalist, head,
   76429 input[type=hidden], link, menu[type=context], meta, noembed, noframes,
   76430 param, rp, script, source, style, track, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76431   display: none;
   76432 }
   76433 
   76434 address, article, aside, blockquote, body, center, dd, dir, div, dl,
   76435 dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,
   76436 hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
   76437 section, summary, ul, xmp { display: block; }
   76438 
   76439 table { display: table; }
   76440 caption { display: table-caption; }
   76441 colgroup { display: table-column-group; }
   76442 col { display: table-column; }
   76443 thead { display: table-header-group; }
   76444 tbody { display: table-row-group; }
   76445 tfoot { display: table-footer-group; }
   76446 tr { display: table-row; }
   76447 td, th { display: table-cell; }
   76448 
   76449 li { display: list-item; }
   76450 
   76451 ruby { display: ruby; }
   76452 rt { display: ruby-text; }</pre>
   76453 
   76454   <!-- del, ins, and map are inline. -->
   76455 
   76456   <p>For the purposes of the CSS table model, the <code><a href=#the-col-element>col</a></code>
   76457   element is expected to be treated as if it was present as many times
   76458   as its <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
   76459   integers">specifies</a>.</p>
   76460 
   76461   <p>For the purposes of the CSS table model, the
   76462   <code><a href=#the-colgroup-element>colgroup</a></code> element, if it contains no <code><a href=#the-col-element>col</a></code>
   76463   element, is expected to be treated as if it had as many such
   76464   children as its <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code>
   76465   attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
   76466   integers">specifies</a>.</p>
   76467 
   76468   <p>For the purposes of the CSS table model, the <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> and <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attributes on
   76469   <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements are expected to <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">provide</a> the
   76470   <i>special knowledge</i> regarding cells spanning rows and
   76471   columns.</p>
   76472 
   76473   <p>For the purposes of the CSS ruby model, runs of children of
   76474   <code><a href=#the-ruby-element>ruby</a></code> elements that are not <code><a href=#the-rt-element>rt</a></code> or
   76475   <code><a href=#the-rp-element>rp</a></code> elements are expected to be wrapped in anonymous
   76476   boxes whose 'display' property has the value 'ruby-base'.</p>
   76477 
   76478   <p>User agents that do not support correct ruby rendering are
   76479   expected to render parentheses around the text of <code><a href=#the-rt-element>rt</a></code>
   76480   elements in the absence of <code><a href=#the-rp-element>rp</a></code> elements.</p>
   76481 
   76482   <p>The <code><a href=#the-br-element>br</a></code> element is expected to render as if its
   76483   contents were a single U+000A LINE FEED (LF) character and its
   76484   'white-space' property was 'pre'. User agents are expected to
   76485   support the 'clear' property on inline elements (in order to render
   76486   <code><a href=#the-br-element>br</a></code> elements with <code title=attr-br-clear><a href=#attr-br-clear>clear</a></code> attributes) in the manner
   76487   described in the non-normative note to this effect in CSS2.1.</p>
   76488   <!-- section 9.5.2 of CSS2.1 -->
   76489 
   76490   <p>The user agent is expected to hide <code><a href=#the-noscript-element>noscript</a></code> elements
   76491   for whom <a href=#concept-n-script title=concept-n-script>scripting is enabled</a>,
   76492   irrespective of CSS rules.</p>
   76493 
   76494   <p>In <a href=#html-documents>HTML documents</a>, the user agent is expected to
   76495   hide <code><a href=#the-form-element>form</a></code> elements that are children of
   76496   <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>,
   76497   <code><a href=#the-tfoot-element>tfoot</a></code>, or <code><a href=#the-tr-element>tr</a></code> elements, irrespective of CSS
   76498   rules.</p>
   76499 
   76500   </div>
   76501 
   76502 
   76503   <div class=impl>
   76504 
   76505   <h4 id=margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</h4>
   76506 
   76507   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76508 
   76509 blockquote, dir, dl, figure, listing, menu, ol, p, plaintext,
   76510 pre, ul, xmp {
   76511   margin-top: 1em; margin-bottom: 1em;
   76512 }
   76513 
   76514 dir dir, dir dl, dir menu, dir ol, dir ul,
   76515 dl dir, dl dl, dl menu, dl ol, dl ul,
   76516 menu dir, menu dl, menu menu, menu ol, menu ul,
   76517 ol dir, ol dl, ol menu, ol ol, ol ul,
   76518 ul dir, ul dl, ul menu, ul ol, ul ul {
   76519   margin-top: 0; margin-bottom: 0;
   76520 }
   76521 
   76522 h1 { margin-top: 0.67em; margin-bottom; 0.67em; }
   76523 h2 { margin-top: 0.83em; margin-bottom; 0.83em; }
   76524 h3 { margin-top: 1.00em; margin-bottom; 1.00em; }
   76525 h4 { margin-top: 1.33em; margin-bottom; 1.33em; }
   76526 h5 { margin-top: 1.67em; margin-bottom; 1.67em; }
   76527 h6 { margin-top: 2.33em; margin-bottom; 2.33em; }
   76528 
   76529 dd { margin-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
   76530 dir, menu, ol, ul { padding-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'padding-right' for rtl elements */
   76531 blockquote, figure { margin-left: 40px; margin-right: 40px; }
   76532 
   76533 table { border-spacing: 2px; border-collapse: separate; }
   76534 td, th { padding: 1px; }</pre>
   76535 
   76536   <p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   76537   and <code><a href=#the-section-element>section</a></code> elements are expected to affect the margins
   76538   of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting depth. If <var title="">x</var> is a selector that matches elements that are either
   76539   <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>, or
   76540   <code><a href=#the-section-element>section</a></code> elements, then the following rules capture what
   76541   is expected:</p>
   76542 
   76543   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76544 
   76545 <var title="">x</var> h1 { margin-top: 0.83em; margin-bottom: 0.83em; }
   76546 <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.00em; margin-bottom: 1.00em; }
   76547 <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.33em; margin-bottom: 1.33em; }
   76548 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 1.67em; margin-bottom: 1.67em; }
   76549 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { margin-top: 2.33em; margin-bottom: 2.33em; }</pre>
   76550 
   76551   <hr><p>For each property in the table below, given a <code><a href=#the-body-element-0>body</a></code>
   76552   element, the first attribute that exists <a href=#maps-to-the-pixel-length-property>maps to the pixel
   76553   length property</a> on the <code><a href=#the-body-element-0>body</a></code> element. If none of
   76554   the attributes for a property are found, or if the value of the
   76555   attribute that was found cannot be parsed successfully, then a
   76556   default value of 8px is expected to be used for that property
   76557   instead.</p>
   76558 
   76559   <table><thead><tr><th>Property
   76560      <th>Source
   76561    <tbody><tr><td rowspan=3>'margin-top'
   76562      <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginheight><a href=#attr-body-marginheight>marginheight</a></code> attribute
   76563     <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> attribute
   76564     <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-topmargin>topmargin</code> attribute
   76565    <tbody><tr><td rowspan=3>'margin-right'
   76566      <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginwidth><a href=#attr-body-marginwidth>marginwidth</a></code> attribute
   76567     <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> attribute
   76568     <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-rightmargin>rightmargin</code> attribute
   76569    <tbody><tr><td rowspan=3>'margin-bottom'
   76570      <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginheight><a href=#attr-body-marginheight>marginheight</a></code> attribute
   76571     <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> attribute
   76572     <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-bottommargin>topmargin</code> attribute
   76573    <tbody><tr><td rowspan=3>'margin-left'
   76574      <td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-marginwidth><a href=#attr-body-marginwidth>marginwidth</a></code> attribute
   76575     <tr><td>The <code><a href=#the-body-element-0>body</a></code> element's <a href=#container-frame-element>container frame element</a>'s <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> attribute
   76576     <tr><td><code><a href=#the-body-element-0>body</a></code> element's <code title=attr-body-leftmargin>rightmargin</code> attribute
   76577   </table><p>If the <code><a href=#the-body-element-0>body</a></code> element's <code><a href=#document>Document</a></code>'s
   76578   <a href=#browsing-context>browsing context</a> is a <a href=#nested-browsing-context>nested browsing
   76579   context</a>, and the <a href=#browsing-context-container>browsing context container</a> of
   76580   that <a href=#nested-browsing-context>nested browsing context</a> is a <code><a href=#frame>frame</a></code> or
   76581   <code><a href=#the-iframe-element>iframe</a></code> element, then the <dfn id=container-frame-element>container frame
   76582   element</dfn> of the <code><a href=#the-body-element-0>body</a></code> element is that
   76583   <code><a href=#frame>frame</a></code> or <code><a href=#the-iframe-element>iframe</a></code> element. Otherwise, there
   76584   is no <a href=#container-frame-element>container frame element</a>.</p>
   76585 
   76586   <p class=warning>The above requirements imply that a page can
   76587   change the margins of another page (including one from another
   76588   <a href=#origin>origin</a>) using, for example, an
   76589   <code><a href=#the-iframe-element>iframe</a></code>. This is potentially a security risk, as it
   76590   might in some cases allow an attack to contrive a situation in which
   76591   a page is rendered not as the author intended, possibly for the
   76592   purposes of phishing or otherwise misleading the user.</p>
   76593 
   76594   <hr><p>If the <code><a href=#document>Document</a></code> has a <a href=#root-element>root element</a>, and
   76595   the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> is a
   76596   <a href=#nested-browsing-context>nested browsing context</a>, and the <a href=#browsing-context-container>browsing context
   76597   container</a> of that <a href=#nested-browsing-context>nested browsing context</a> is a
   76598   <code><a href=#frame>frame</a></code> or <code><a href=#the-iframe-element>iframe</a></code> element, and that element
   76599   has a <code title=attr-frames-scrolling>scrolling</code>
   76600   attribute, then the user agent is expected to compare the value of
   76601   the attribute in an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> manner to
   76602   the values in the first column of the following table, and if one of
   76603   them matches, then the user agent is expected to treat that
   76604   attribute as a <a href=#presentational-hints title="presentational hints">presentational
   76605   hint</a> for the aforementioned root element's 'overflow'
   76606   property, setting it to the value given in the corresponding cell on
   76607   the same row in the second column:</p>
   76608 
   76609   <table><thead><tr><th> Attribute value
   76610      <th> 'overflow' value
   76611    <tbody><tr><td><code title="">on</code>
   76612      <td>'scroll'
   76613     <tr><td><code title="">scroll</code>
   76614      <td>'scroll'
   76615     <tr><td><code title="">yes</code>
   76616      <td>'scroll'
   76617     <tr><td><code title="">off</code>
   76618      <td>'hidden'
   76619     <tr><td><code title="">noscroll</code>
   76620      <td>'hidden'
   76621     <tr><td><code title="">no</code>
   76622      <td>'hidden'
   76623     <tr><td><code title="">auto</code>
   76624      <td>'auto'
   76625   </table><hr><p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellspacing><a href=#attr-table-cellspacing>cellspacing</a></code> attribute
   76626   <a href=#maps-to-the-pixel-length-property>maps to the pixel length property</a> 'border-spacing' on the
   76627   element.</p>
   76628 
   76629   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-cellpadding><a href=#attr-table-cellpadding>cellpadding</a></code> attribute <a href=#maps-to-the-pixel-length-property title="maps to the pixel length property">maps to the pixel length
   76630   properties</a> 'padding-top', 'padding-right', 'padding-bottom',
   76631   and 'padding-left' of any <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code>
   76632   elements that have corresponding <a href=#concept-cell title=concept-cell>cells</a> in the <a href=#concept-table title=concept-table>table</a> corresponding to the
   76633   <code><a href=#the-table-element>table</a></code> element.</p>
   76634 
   76635   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-hspace>hspace</code> attribute <a href=#maps-to-the-dimension-property title="maps
   76636   to the dimension property">maps to the dimension properties</a>
   76637   'margin-left' and 'margin-right' on the <code><a href=#the-table-element>table</a></code>
   76638   element.</p>
   76639 
   76640   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-vspace>vspace</code> attribute <a href=#maps-to-the-dimension-property title="maps
   76641   to the dimension property">maps to the dimension properties</a>
   76642   'margin-top' and 'margin-bottom' on the <code><a href=#the-table-element>table</a></code>
   76643   element.</p>
   76644 
   76645   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the
   76646   dimension property</a> 'height' on the <code><a href=#the-table-element>table</a></code>
   76647   element.</p>
   76648 
   76649   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-width><a href=#attr-table-width>width</a></code> attribute <a href=#maps-to-the-dimension-property>maps to the
   76650   dimension property</a> 'width' on the <code><a href=#the-table-element>table</a></code>
   76651   element.</p>
   76652 
   76653   <p>The <code><a href=#the-col-element>col</a></code> element's <code title=attr-col-width><a href=#attr-col-width>width</a></code> attribute <a href=#maps-to-the-dimension-property>maps to the
   76654   dimension property</a> 'width' on the <code><a href=#the-col-element>col</a></code>
   76655   element.</p>
   76656 
   76657   <p>The <code><a href=#the-tr-element>tr</a></code> element's <code title=attr-tr-height>height</code> attribute <a href=#maps-to-the-dimension-property>maps to the
   76658   dimension property</a> 'height' on the <code><a href=#the-tr-element>tr</a></code>
   76659   element.</p>
   76660 
   76661   <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-height><a href=#attr-tdth-height>height</a></code> attributes <a href=#maps-to-the-dimension-property title="maps
   76662   to the dimension property">map to the dimension property</a> 'height'
   76663   on the element.</p>
   76664 
   76665   <p>The <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements' <code title=attr-tdth-width><a href=#attr-tdth-width>width</a></code> attributes <a href=#maps-to-the-dimension-property title="maps
   76666   to the dimension property">map to the dimension property</a> 'width'
   76667   on the element.</p>
   76668 
   76669   <hr><p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also
   76670   expected to apply:</p>
   76671 
   76672   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76673 
   76674 form { margin-bottom: 1em; }</pre>
   76675 
   76676   <p>When a <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>,
   76677   margins on <a href=#html-elements>HTML elements</a> at the top or bottom of
   76678   <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> elements are
   76679   expected to be collapsed to zero.</p>
   76680 
   76681   </div>
   76682 
   76683 
   76684   <div class=impl>
   76685 
   76686   <h4 id=alignment><span class=secno>12.2.4 </span>Alignment</h4>
   76687 
   76688   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76689 
   76690 thead, tbody, tfoot, table &gt; tr { vertical-align: middle; }
   76691 tr, td, th { vertical-align: inherit; }
   76692 sub { vertical-align: sub; }
   76693 sup { vertical-align: super; }
   76694 th { text-align: center; }</pre>
   76695 
   76696   <hr><p>The following rules are also expected to apply, as
   76697   <a href=#presentational-hints>presentational hints</a>:</p>
   76698 
   76699   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76700 
   76701 table[align=left] { float: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76702 table[align=right] { float: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76703 table[align=center], table[align=abscenter],
   76704 table[align=absmiddle], table[align=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76705   margin-left: auto; margin-right: auto;
   76706 }
   76707 thead[align=absmiddle], tbody[align=absmiddle], tfoot[align=absmiddle],
   76708 tr[align=absmiddle], td[align=absmiddle], th[align=absmiddle] {
   76709   text-align: center;
   76710 }
   76711 
   76712 caption[align=bottom] { caption-side: bottom; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76713 p[align=left], h1[align=left], h2[align=left], h3[align=left],
   76714 h4[align=left], h5[align=left], h6[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76715   text-align: left;
   76716 }
   76717 p[align=right], h1[align=right], h2[align=right], h3[align=right],
   76718 h4[align=right], h5[align=right], h6[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76719   text-align: right;
   76720 }
   76721 p[align=center], h1[align=center], h2[align=center], h3[align=center],
   76722 h4[align=center], h5[align=center], h6[align=center] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76723   text-align: center;
   76724 }
   76725 p[align=justify], h1[align=justify], h2[align=justify], h3[align=justify],
   76726 h4[align=justify], h5[align=justify], h6[align=justify] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76727   text-align: justify;
   76728 }
   76729 col[valign=top], thead[valign=top], tbody[valign=top],
   76730 tfoot[valign=top], tr[valign=top], td[valign=top], th[valign=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76731   vertical-align: top;
   76732 }
   76733 col[valign=middle], thead[valign=middle], tbody[valign=middle],
   76734 tfoot[valign=middle], tr[valign=middle], td[valign=middle], th[valign=middle] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76735   vertical-align: middle;
   76736 }
   76737 col[valign=bottom], thead[valign=bottom], tbody[valign=bottom],
   76738 tfoot[valign=bottom], tr[valign=bottom], td[valign=bottom], th[valign=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76739   vertical-align: bottom;
   76740 }
   76741 col[valign=baseline], thead[valign=baseline], tbody[valign=baseline],
   76742 tfoot[valign=baseline], tr[valign=baseline], td[valign=baseline], th[valign=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76743   vertical-align: baseline;
   76744 }</pre>
   76745 
   76746   <p>The <code><a href=#center>center</a></code> element, the <code><a href=#the-caption-element>caption</a></code> element
   76747   unless specified otherwise below, and the <code><a href=#the-div-element>div</a></code>,
   76748   <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
   76749   <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements when
   76750   they have an <code title=attr-div-align><a href=#attr-div-align>align</a></code> attribute
   76751   whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   76752   either the string "<code title="">center</code>" or the string
   76753   "<code title="">middle</code>", are expected to center text within
   76754   themselves, as if they had their 'text-align' property set to
   76755   'center' in a <a href=#presentational-hints title="presentational hints">presentational
   76756   hint</a>, and to <a href=#align-descendants>align descendants</a> to the
   76757   center.</p>
   76758 
   76759   <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   76760   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   76761   <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
   76762   <code title=attr-align>align</code> attribute whose value is an
   76763   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">left</code>", are expected to left-align text within
   76764   themselves, as if they had their 'text-align' property set to 'left'
   76765   in a <a href=#presentational-hints title="presentational hints">presentational hint</a>,
   76766   and to <a href=#align-descendants>align descendants</a> to the left.</p>
   76767 
   76768   <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   76769   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   76770   <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
   76771   <code title=attr-align>align</code> attribute whose value is an
   76772   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">right</code>", are expected to right-align text within
   76773   themselves, as if they had their 'text-align' property set to
   76774   'right' in a <a href=#presentational-hints title="presentational hints">presentational
   76775   hint</a>, and to <a href=#align-descendants>align descendants</a> to the right.</p>
   76776 
   76777   <p>The <code><a href=#the-div-element>div</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   76778   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   76779   <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements, when they have an
   76780   <code title=attr-align>align</code> attribute whose value is an
   76781   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">justify</code>", are expected to full-justify text within
   76782   themselves, as if they had their 'text-align' property set to
   76783   'justify' in a <a href=#presentational-hints title="presentational hints">presentational
   76784   hint</a>, and to <a href=#align-descendants>align descendants</a> to the left.</p>
   76785 
   76786   <p>When a user agent is to <dfn id=align-descendants>align descendants</dfn> of a node,
   76787   the user agent is expected to align only those descendants that have
   76788   both their 'margin-left' and 'margin-right' properties computing to
   76789   a value other than 'auto', that are over-constrained and that have
   76790   one of those two margins with a used value forced to a greater
   76791   value, and that do not themselves have an applicable <code title=attr-align>align</code> attribute. When multiple elements
   76792   are to <a href=#align-descendants title="align descendants">align</a> a particular
   76793   descendant, the most deeply nested such element is expected to
   76794   override the others.</p>
   76795 
   76796   </div>
   76797 
   76798 
   76799   <div class=impl>
   76800 
   76801   <h4 id=fonts-and-colors><span class=secno>12.2.5 </span>Fonts and colors</h4>
   76802 
   76803   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76804 
   76805 address, cite, dfn, em, i, var { font-style: italic; }
   76806 b, strong, th { font-weight: bold; }
   76807 code, kbd, listing, plaintext, pre, samp, tt, xmp { font-family: monospace; }
   76808 h1 { font-size: 2.00em; font-weight: bold; }
   76809 h2 { font-size: 1.50em; font-weight: bold; }
   76810 h3 { font-size: 1.17em; font-weight: bold; }
   76811 h4 { font-size: 1.00em; font-weight: bold; }
   76812 h5 { font-size: 0.83em; font-weight: bold; }
   76813 h6 { font-size: 0.67em; font-weight: bold; }
   76814 big { font-size: larger; }
   76815 small, sub, sup { font-size: smaller; }
   76816 sub, sup { line-height: normal; }
   76817 
   76818 :link { color: blue; }
   76819 :visited { color: purple; }
   76820 mark { background: yellow; color: black; }
   76821 
   76822 table, td, th { border-color: gray; }
   76823 thead, tbody, tfoot, tr { border-color: inherit; }
   76824 table[rules=none], table[rules=groups], table[rules=rows],
   76825 table[rules=cols], table[rules=all], table[frame=void],
   76826 table[frame=above], table[frame=below], table[frame=hsides],
   76827 table[frame=lhs], table[frame=rhs], table[frame=vsides],
   76828 table[frame=box], table[frame=border],
   76829 table[rules=none] &gt; tr &gt; td, table[rules=none] &gt; tr &gt; th,
   76830 table[rules=groups] &gt; tr &gt; td, table[rules=groups] &gt; tr &gt; th,
   76831 table[rules=rows] &gt; tr &gt; td, table[rules=rows] &gt; tr &gt; th,
   76832 table[rules=cols] &gt; tr &gt; td, table[rules=cols] &gt; tr &gt; th,
   76833 table[rules=all] &gt; tr &gt; td, table[rules=all] &gt; tr &gt; th,
   76834 table[rules=none] &gt; thead &gt; tr &gt; td, table[rules=none] &gt; thead &gt; tr &gt; th,
   76835 table[rules=groups] &gt; thead &gt; tr &gt; td, table[rules=groups] &gt; thead &gt; tr &gt; th,
   76836 table[rules=rows] &gt; thead &gt; tr &gt; td, table[rules=rows] &gt; thead &gt; tr &gt; th,
   76837 table[rules=cols] &gt; thead &gt; tr &gt; td, table[rules=cols] &gt; thead &gt; tr &gt; th,
   76838 table[rules=all] &gt; thead &gt; tr &gt; td, table[rules=all] &gt; thead &gt; tr &gt; th,
   76839 table[rules=none] &gt; tbody &gt; tr &gt; td, table[rules=none] &gt; tbody &gt; tr &gt; th,
   76840 table[rules=groups] &gt; tbody &gt; tr &gt; td, table[rules=groups] &gt; tbody &gt; tr &gt; th,
   76841 table[rules=rows] &gt; tbody &gt; tr &gt; td, table[rules=rows] &gt; tbody &gt; tr &gt; th,
   76842 table[rules=cols] &gt; tbody &gt; tr &gt; td, table[rules=cols] &gt; tbody &gt; tr &gt; th,
   76843 table[rules=all] &gt; tbody &gt; tr &gt; td, table[rules=all] &gt; tbody &gt; tr &gt; th,
   76844 table[rules=none] &gt; tfoot &gt; tr &gt; td, table[rules=none] &gt; tfoot &gt; tr &gt; th,
   76845 table[rules=groups] &gt; tfoot &gt; tr &gt; td, table[rules=groups] &gt; tfoot &gt; tr &gt; th,
   76846 table[rules=rows] &gt; tfoot &gt; tr &gt; td, table[rules=rows] &gt; tfoot &gt; tr &gt; th,
   76847 table[rules=cols] &gt; tfoot &gt; tr &gt; td, table[rules=cols] &gt; tfoot &gt; tr &gt; th,
   76848 table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   76849   border-color: black;
   76850 }</pre>
   76851 
   76852   <hr><p>The initial value for the 'color' property is expected to be
   76853   black. The initial value for the 'background-color' property is
   76854   expected to be 'transparent'. The canvas's background is expected to
   76855   be white.</p>
   76856 
   76857   <hr><p>The <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   76858   and <code><a href=#the-section-element>section</a></code> elements are expected to affect the font
   76859   size of <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements, based on the nesting depth. If
   76860   <var title="">x</var> is a selector that matches elements that are
   76861   either <code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-nav-element>nav</a></code>,
   76862   or <code><a href=#the-section-element>section</a></code> elements, then the following rules capture
   76863   what is expected:</p>
   76864 
   76865   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   76866 
   76867 <var title="">x</var> h1 { font-size: 1.50em; }
   76868 <var title="">x</var> <var title="">x</var> h1 { font-size: 1.17em; }
   76869 <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 1.00em; }
   76870 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.83em; }
   76871 <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> <var title="">x</var> h1 { font-size: 0.67em; }</pre>
   76872 
   76873   <hr><p>When a <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   76874   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   76875   <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element has a <code title=attr-background><a href=#attr-background>background</a></code> attribute set to a
   76876   non-empty value, the new value is expected to be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element, and
   76877   if this is successful, the user agent is expected to treat the
   76878   attribute as a <a href=#presentational-hints title="presentational hints">presentational
   76879   hint</a> setting the element's 'background-image' property to the
   76880   resulting <a href=#absolute-url>absolute URL</a>.</p>
   76881 
   76882   <p>When a <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>,
   76883   <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>,
   76884   <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element has a <code title="">bgcolor</code> attribute set, the new value is expected to
   76885   be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
   76886   value</a>, and if that does not return an error, the user agent
   76887   is expected to treat the attribute as a <a href=#presentational-hints title="presentational
   76888   hints">presentational hint</a> setting the element's
   76889   'background-color' property to the resulting color.</p>
   76890 
   76891   <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-text><a href=#attr-body-text>text</a></code> attribute, its value is expected
   76892   to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
   76893   value</a>, and if that does not return an error, the user
   76894   agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   76895   element's 'color' property to the resulting color.</p>
   76896 
   76897   <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-link><a href=#attr-body-link>link</a></code> attribute, its value is expected
   76898   to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
   76899   value</a>, and if that does not return an error, the user agent
   76900   is expected to treat the attribute as a <a href=#presentational-hints title="presentational
   76901   hints">presentational hint</a> setting the 'color' property of
   76902   any element in the <code><a href=#document>Document</a></code> matching the ':link'
   76903   pseudo-class to the resulting color.</p>
   76904 
   76905   <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code> attribute, its value is
   76906   expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
   76907   color value</a>, and if that does not return an error, the user
   76908   agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   76909   'color' property of any element in the <code><a href=#document>Document</a></code>
   76910   matching the ':visited' pseudo-class to the resulting color.</p>
   76911 
   76912   <p>When a <code><a href=#the-body-element-0>body</a></code> element has a <code title=attr-body-alink><a href=#attr-body-alink>alink</a></code> attribute, its value is
   76913   expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
   76914   color value</a>, and if that does not return an error, the user
   76915   agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   76916   'color' property of any element in the <code><a href=#document>Document</a></code>
   76917   matching the ':active' pseudo-class and either the ':link'
   76918   pseudo-class or the ':visited' pseudo-class to the resulting
   76919   color.</p>
   76920 
   76921   <p>When a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-bordercolor>bordercolor</code> attribute, its
   76922   value is expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a
   76923   legacy color value</a>, and if that does not return an error, the
   76924   user agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   76925   element's 'border-top-color', 'border-right-color',
   76926   'border-bottom-color', and 'border-right-color' properties to the
   76927   resulting color.</p>
   76928 
   76929   <hr><p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-color>color</code> attribute, its value is
   76930   expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
   76931   color value</a>, and if that does not return an error, the user
   76932   agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   76933   element's 'color' property to the resulting color.</p>
   76934 
   76935   <p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-face>face</code> attribute, the user agent is
   76936   expected to treat the attribute as a <a href=#presentational-hints title="presentational
   76937   hints">presentational hint</a> setting the element's
   76938   'font-family' property to the attribute's value.</p>
   76939 
   76940   <!-- (Apparently only IE supports this?) (Note: if you add this
   76941   back, make sure to define which of 'size' vs 'pointsize' wins.)
   76942 
   76943   <p>When a <code>font</code> element has a <code
   76944   title="attr-font-pointsize">pointsize</code> attribute, the user
   76945   agent is expected to parse that attribute's value using the
   76946   <span>rules for parsing non-negative integers</span>, and if this
   76947   doesn't generate an error, then the user agent is expected to use
   76948   the parsed value as a <em>point</em> length for a <span
   76949   title="presentational hints">presentational hint</span> for the
   76950   'font-size' property on the element.</p>
   76951   -->
   76952 
   76953   <p>When a <code><a href=#font>font</a></code> element has a <code title=attr-font-size>size</code> attribute, the user agent is
   76954   expected to use the following steps to treat the attribute as a
   76955   <a href=#presentational-hints title="presentational hints">presentational hint</a>
   76956   setting the element's 'font-size' property:</p>
   76957 
   76958   <ol><li><p>Let <var title="">input</var> be the attribute's
   76959    value.</li>
   76960 
   76961    <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
   76962    string.</li>
   76963 
   76964    <li><p><a href=#skip-whitespace>Skip whitespace</a>.</li>
   76965 
   76966    <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, there is no <a href=#presentational-hints title="presentational
   76967    hints">presentational hint</a>. Abort these steps.</li>
   76968 
   76969    <li><p>If the character at <var title="">position</var> is a U+002B
   76970    PLUS SIGN character (+), then let <var title="">mode</var> be
   76971    <i>relative-plus</i>, and advance <var title="">position</var> to
   76972    the next character. Otherwise, if the character at <var title="">position</var> is a U+002D HYPHEN-MINUS character (-),
   76973    then let <var title="">mode</var> be <i>relative-minus</i>, and
   76974    advance <var title="">position</var> to the next
   76975    character. Otherwise, let <var title="">mode</var> be
   76976    <i>absolute</i>.</li>
   76977 
   76978    <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> in the range
   76979    U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let the
   76980    resulting sequence be <var title="">digits</var>.</li>
   76981 
   76982    <li><p>If <var title="">digits</var> is the empty string, there is
   76983    no <a href=#presentational-hints title="presentational hints">presentational
   76984    hint</a>. Abort these steps.</li>
   76985 
   76986    <li><p>Interpret <var title="">digits</var> as a base-ten
   76987    integer. Let <var title="">value</var> be the resulting
   76988    number.</li>
   76989 
   76990    <li>
   76991 
   76992     <!-- basefont support would go here, but we removed it -->
   76993 
   76994     <p>If <var title="">mode</var> is <i>relative-plus</i>, then
   76995     increment <var title="">value</var> by 3. If <var title="">mode</var> is <i>relative-minus</i>, then let <var title="">value</var> be the result of subtracting <var title="">value</var> from 3.</p>
   76996 
   76997    </li>
   76998 
   76999    <li><p>If <var title="">value</var> is greater than 7, let it be
   77000    7.</li>
   77001 
   77002    <li><p>If <var title="">value</var> is less than 1, let it be
   77003    1.</li>
   77004 
   77005    <li>
   77006 
   77007     <p>Set 'font-size' to the keyword corresponding to the value of
   77008     <var title="">value</var> according to the following table:</p>
   77009 
   77010     <table><thead><tr><th><var title="">value</var>
   77011        <th>'font-size' keyword
   77012        <th>Notes
   77013      <tbody><tr><td>1
   77014        <td>xx-small
   77015        <td>
   77016       <tr><td>2
   77017        <td>small
   77018        <td>
   77019       <tr><td>3
   77020        <td>medium
   77021        <td>
   77022       <tr><td>4
   77023        <td>large
   77024        <td>
   77025       <tr><td>5
   77026        <td>x-large
   77027        <td>
   77028       <tr><td>6
   77029        <td>xx-large
   77030        <td>
   77031       <tr><td>7
   77032        <td>x<!---->xx-large
   77033        <td><i>see below</i>
   77034     </table><p>The 'x<!---->xx-large' value is a non-CSS value used here to
   77035     indicate a font size one "step" larger than 'xx-large'.</p>
   77036 
   77037    </li>
   77038 
   77039   </ol></div>
   77040 
   77041 
   77042   <div class=impl>
   77043 
   77044   <h4 id=punctuation-and-decorations><span class=secno>12.2.6 </span>Punctuation and decorations</h4>
   77045 
   77046   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77047 
   77048 :link, :visited, ins, u { text-decoration: underline; }
   77049 abbr[title], acronym[title] { text-decoration: dotted underline; }<!-- CSS3 http://dev.w3.org/csswg/css3-text/#text-decoration-style -->
   77050 del, s, strike { text-decoration: line-through; }
   77051 blink { text-decoration: blink; }
   77052 
   77053 :focus { outline: auto; }
   77054 
   77055 q:before { content: open-quote; }
   77056 q:after { content: close-quote; }
   77057 
   77058 nobr { white-space: nowrap; }
   77059 listing, plaintext, pre, xmp { white-space: pre; }
   77060 
   77061 ol { list-style-type: decimal; }
   77062 
   77063 dir, menu, ul {
   77064   list-style-type: disc;
   77065 }
   77066 
   77067 dir dl, dir menu, dir ul,
   77068 menu dl, menu menu, menu ul,
   77069 ol dl, ol menu, ol ul,
   77070 ul dl, ul menu, ul ul {
   77071   list-style-type: circle;
   77072 }
   77073 
   77074 dir dir dl, dir dir menu, dir dir ul,
   77075 dir menu dl, dir menu menu, dir menu ul,
   77076 dir ol dl, dir ol menu, dir ol ul,
   77077 dir ul dl, dir ul menu, dir ul ul,
   77078 menu dir dl, menu dir menu, menu dir ul,
   77079 menu menu dl, menu menu menu, menu menu ul,
   77080 menu ol dl, menu ol menu, menu ol ul,
   77081 menu ul dl, menu ul menu, menu ul ul,
   77082 ol dir dl, ol dir menu, ol dir ul,
   77083 ol menu dl, ol menu menu, ol menu ul,
   77084 ol ol dl, ol ol menu, ol ol ul,
   77085 ol ul dl, ol ul menu, ol ul ul,
   77086 ul dir dl, ul dir menu, ul dir ul,
   77087 ul menu dl, ul menu menu, ul menu ul,
   77088 ul ol dl, ul ol menu, ul ol ul,
   77089 ul ul dl, ul ul menu, ul ul ul {
   77090   list-style-type: square;
   77091 }
   77092 
   77093 table { border-style: outset; }
   77094 td, th { border-style: inset; }
   77095 
   77096 [dir=ltr] { direction: ltr; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77097 [dir=rtl] { direction: rtl; unicode-bidi: embed; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77098 bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77099 
   77100   <p>In addition, rules setting the 'quotes' property appropriately
   77101   for the locales and languages understood by the user are expected to
   77102   be present.</p>
   77103 
   77104   <hr><p>The following rules are also expected to apply, as
   77105   <a href=#presentational-hints>presentational hints</a>:</p>
   77106 
   77107   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77108 
   77109 td[nowrap], th[nowrap] { white-space: nowrap; }
   77110 pre[wrap] { white-space: pre-wrap; }
   77111 
   77112 br[clear=left] { clear: left; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77113 br[clear=right] { clear: right; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77114 br[clear=all], br[clear=both] { clear: both; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77115 
   77116 ol[type=1], li[type=1] { list-style-type: decimal; }
   77117 ol[type=a], li[type=a] { list-style-type: lower-alpha; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
   77118 ol[type=A], li[type=A] { list-style-type: upper-alpha; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
   77119 ol[type=i], li[type=i] { list-style-type: lower-roman; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
   77120 ol[type=I], li[type=I] { list-style-type: upper-roman; } /* <a href=#case-sensitive-selector-exception>case-sensitive</a> */
   77121 ul[type=disc], li[type=disc] { list-style-type: disc; }
   77122 ul[type=circle], li[type=circle] { list-style-type: circle; }
   77123 ul[type=square], li[type=square] { list-style-type: square; }
   77124 
   77125 table[rules=none], table[rules=groups], table[rules=rows],
   77126 table[rules=cols], table[rules=all] {
   77127   border-style: none;
   77128   border-collapse: collapse;
   77129 }
   77130 
   77131 table[frame=void] { border-style: hidden hidden hidden hidden; }
   77132 table[frame=above] { border-style: solid hidden hidden hidden; }
   77133 table[frame=below] { border-style: hidden hidden solid hidden; }
   77134 table[frame=hsides] { border-style: solid hidden solid hidden; }
   77135 table[frame=lhs] { border-style: hidden hidden hidden solid; }
   77136 table[frame=rhs] { border-style: hidden solid hidden hidden; }
   77137 table[frame=vsides] { border-style: hidden solid hidden solid; }
   77138 table[frame=box],
   77139 table[frame=border] { border-style: solid solid solid solid; }
   77140 
   77141 table[rules=none] &gt; tr &gt; td, table[rules=none] &gt; tr &gt; th,
   77142 table[rules=none] &gt; thead &gt; tr &gt; td, table[rules=none] &gt; thead &gt; tr &gt; th,
   77143 table[rules=none] &gt; tbody &gt; tr &gt; td, table[rules=none] &gt; tbody &gt; tr &gt; th,
   77144 table[rules=none] &gt; tfoot &gt; tr &gt; td, table[rules=none] &gt; tfoot &gt; tr &gt; th,
   77145 table[rules=groups] &gt; tr &gt; td, table[rules=groups] &gt; tr &gt; th,
   77146 table[rules=groups] &gt; thead &gt; tr &gt; td, table[rules=groups] &gt; thead &gt; tr &gt; th,
   77147 table[rules=groups] &gt; tbody &gt; tr &gt; td, table[rules=groups] &gt; tbody &gt; tr &gt; th,
   77148 table[rules=groups] &gt; tfoot &gt; tr &gt; td, table[rules=groups] &gt; tfoot &gt; tr &gt; th,
   77149 table[rules=rows] &gt; tr &gt; td, table[rules=rows] &gt; tr &gt; th,
   77150 table[rules=rows] &gt; thead &gt; tr &gt; td, table[rules=rows] &gt; thead &gt; tr &gt; th,
   77151 table[rules=rows] &gt; tbody &gt; tr &gt; td, table[rules=rows] &gt; tbody &gt; tr &gt; th,
   77152 table[rules=rows] &gt; tfoot &gt; tr &gt; td, table[rules=rows] &gt; tfoot &gt; tr &gt; th {
   77153   border-style: none;
   77154 }
   77155 
   77156 table[rules=groups] &gt; colgroup, table[rules=groups] &gt; thead,
   77157 table[rules=groups] &gt; tbody, table[rules=groups] &gt; tfoot {
   77158   border-style: solid;
   77159 }
   77160 
   77161 table[rules=rows] &gt; tr, table[rules=rows] &gt; thead &gt; tr,
   77162 table[rules=rows] &gt; tbody &gt; tr, table[rules=rows] &gt; tfoot &gt; tr {
   77163   border-style: solid;
   77164 }
   77165 
   77166 table[rules=cols] &gt; tr &gt; td, table[rules=cols] &gt; tr &gt; th,
   77167 table[rules=cols] &gt; thead &gt; tr &gt; td, table[rules=cols] &gt; thead &gt; tr &gt; th,
   77168 table[rules=cols] &gt; tbody &gt; tr &gt; td, table[rules=cols] &gt; tbody &gt; tr &gt; th,
   77169 table[rules=cols] &gt; tfoot &gt; tr &gt; td, table[rules=cols] &gt; tfoot &gt; tr &gt; th {
   77170   border-style: none solid none solid;
   77171 }
   77172 
   77173 table[rules=all] &gt; tr &gt; td, table[rules=all] &gt; tr &gt; th,
   77174 table[rules=all] &gt; thead &gt; tr &gt; td, table[rules=all] &gt; thead &gt; tr &gt; th,
   77175 table[rules=all] &gt; tbody &gt; tr &gt; td, table[rules=all] &gt; tbody &gt; tr &gt; th,
   77176 table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr &gt; th {
   77177   border-style: solid;
   77178 }
   77179 
   77180 table[border] &gt; tr &gt; td, table[border] &gt; tr &gt; th,
   77181 table[border] &gt; thead &gt; tr &gt; td, table[border] &gt; thead &gt; tr &gt; th,
   77182 table[border] &gt; tbody &gt; tr &gt; td, table[border] &gt; tbody &gt; tr &gt; th,
   77183 table[border] &gt; tfoot &gt; tr &gt; td, table[border] &gt; tfoot &gt; tr &gt; th {
   77184   border-width: 1px;
   77185 }</pre>
   77186 
   77187   <p>When rendering <code><a href=#the-li-element>li</a></code> elements, user agents are expected
   77188   to use the ordinal value of the <code><a href=#the-li-element>li</a></code> element to render
   77189   the counter in the list item marker.</p>
   77190 
   77191   <p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-border><a href=#attr-table-border>border</a></code> attribute <a href=#maps-to-the-pixel-length-property title="maps
   77192   to the pixel length property">maps to the pixel length
   77193   properties</a> 'border-top-width', 'border-right-width',
   77194   'border-bottom-width', 'border-left-width' on the element. If the
   77195   attribute is present but parsing the attribute's value using the
   77196   <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> generates an
   77197   error, a default value of 1px is expected to be used for that
   77198   property instead.</p>
   77199 
   77200   <p>The <code><a href=#the-wbr-element>wbr</a></code> element is expected to override the
   77201   'white-space' property and always provide a line-breaking
   77202   opportunity.</p>
   77203 
   77204   </div>
   77205 
   77206 
   77207   <div class=impl>
   77208 
   77209   <h4 id=resetting-rules-for-inherited-properties><span class=secno>12.2.7 </span>Resetting rules for inherited properties</h4>
   77210 
   77211   <p>The following rules are also expected to be in play, resetting
   77212   certain properties to block inheritance by default.</p>
   77213 
   77214   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77215 
   77216 table, input, select, option, optgroup, button, textarea, keygen {
   77217   text-indent: initial;
   77218 }</pre>
   77219 
   77220   <!-- arguably, the form controls' 'text-indent' lines should be in
   77221   the sections below instead of here, but that would be far more
   77222   complicated than this -->
   77223 
   77224   <p>In <a href=#quirks-mode>quirks mode</a>, the following rules are also
   77225   expected to apply:</p>
   77226 
   77227   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77228 
   77229 table {
   77230   font-weight: initial;
   77231   font-style: initial;
   77232   font-variant: initial;
   77233   font-size: initial;
   77234   line-height: initial;
   77235   white-space: initial;
   77236   text-align: initial;
   77237 }
   77238 
   77239 input { box-sizing: border-box; }</pre>
   77240 
   77241   </div>
   77242 
   77243 
   77244   <div class=impl>
   77245 
   77246   <h4 id=the-hr-element-0><span class=secno>12.2.8 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
   77247 
   77248   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77249 
   77250 hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }</pre>
   77251 
   77252   <p>The following rules are also expected to apply, as
   77253   <a href=#presentational-hints>presentational hints</a>:</p>
   77254 
   77255   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77256 
   77257 hr[align=left] { margin-left: 0; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77258 hr[align=right] { margin-left: auto; margin-right: 0; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77259 hr[align=center] { margin-left: auto; margin-right: auto; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77260 hr[color], hr[noshade] { border-style: solid; }</pre>
   77261 
   77262   <p>If an <code><a href=#the-hr-element>hr</a></code> element has either a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute or a <code title=attr-hr-noshade><a href=#attr-hr-noshade>noshade</a></code> attribute, and furthermore
   77263   also has a <code title=attr-hr-size><a href=#attr-hr-size>size</a></code> attribute, and
   77264   parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
   77265   non-negative integers</a> doesn't generate an error, then the
   77266   user agent is expected to use the parsed value divided by two as a
   77267   pixel length for <a href=#presentational-hints>presentational hints</a> for the properties
   77268   'border-top-width', 'border-right-width', 'border-bottom-width', and
   77269   'border-left-width' on the element.</p>
   77270 
   77271   <p>Otherwise, if an <code><a href=#the-hr-element>hr</a></code> element has neither a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute nor a <code title=attr-hr-noshade><a href=#attr-hr-noshade>noshade</a></code> attribute, but does have a
   77272   <code title=attr-hr-size><a href=#attr-hr-size>size</a></code> attribute, and parsing that
   77273   attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   77274   integers</a> doesn't generate an error, then: if the parsed value
   77275   is one, then the user agent is expected to use the attribute as a
   77276   <a href=#presentational-hints title="presentational hints">presentational hint</a>
   77277   setting the element's 'border-bottom-width' to 0; otherwise, if the
   77278   parsed value is greater than one, then the user agent is expected to
   77279   use the parsed value minus two as a pixel length for
   77280   <a href=#presentational-hints>presentational hints</a> for the 'height' property on the
   77281   element.</p>
   77282 
   77283   <p>The <code title=attr-hr-width><a href=#attr-hr-width>width</a></code> attribute on an
   77284   <code><a href=#the-hr-element>hr</a></code> element <a href=#maps-to-the-dimension-property>maps to the dimension property</a>
   77285   'width' on the element.</p>
   77286 
   77287   <p>When an <code><a href=#the-hr-element>hr</a></code> element has a <code title=attr-hr-color><a href=#attr-hr-color>color</a></code> attribute, its value is expected
   77288   to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
   77289   value</a>, and if that does not return an error, the user agent
   77290   is expected to treat the attribute as a <a href=#presentational-hints title="presentational
   77291   hints">presentational hint</a> setting the element's 'color'
   77292   property to the resulting color.</p>
   77293 
   77294   </div>
   77295 
   77296 
   77297   <div class=impl>
   77298 
   77299   <h4 id=the-fieldset-element-0><span class=secno>12.2.9 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
   77300 
   77301   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77302 
   77303 fieldset {
   77304   margin-left: 2px; margin-right: 2px;
   77305   border: groove 2px ThreeDFace;
   77306   padding: 0.35em 0.625em 0.75em;
   77307 }</pre>
   77308 
   77309   <p>The <code><a href=#the-fieldset-element>fieldset</a></code> element is expected to establish a new
   77310   block formatting context.</p>
   77311 
   77312   <p>The first <code><a href=#the-legend-element>legend</a></code> element child of a
   77313   <code><a href=#the-fieldset-element>fieldset</a></code> element, if any, is expected to be rendered
   77314   over the top border edge of the <code><a href=#the-fieldset-element>fieldset</a></code> element. If
   77315   the <code><a href=#the-legend-element>legend</a></code> element in question has an <code title=attr-legend-align><a href=#attr-legend-align>align</a></code> attribute, and its value is
   77316   an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
   77317   in the first column of the following table, then the
   77318   <code><a href=#the-legend-element>legend</a></code> is expected to be rendered horizontally aligned
   77319   over the border edge in the position given in the corresponding cell
   77320   on the same row in the second column. If the attribute is absent or
   77321   has a value that doesn't match any of the cases in the table, then
   77322   the position is expected to be on the right if the 'direction'
   77323   property on this element has a computed value of 'rtl', and on the
   77324   left otherwise.</p>
   77325 
   77326   <table><thead><tr><th>Attribute value
   77327      <th>Alignment position
   77328    <tbody><tr><td><code title="">left</code>
   77329      <td>On the left
   77330     <tr><td><code title="">right</code>
   77331      <td>On the right
   77332     <tr><td><code title="">center</code>
   77333      <td>In the middle
   77334   </table></div>
   77335 
   77336 
   77337   <div class=impl>
   77338 
   77339   <h3 id=replaced-elements><span class=secno>12.3 </span>Replaced elements</h3>
   77340 
   77341   <h4 id=embedded-content-2><span class=secno>12.3.1 </span>Embedded content</h4>
   77342 
   77343   <p>The <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, and
   77344   <code><a href=#video>video</a></code> elements are expected to be treated as replaced
   77345   elements.</p>
   77346 
   77347   <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a>
   77348   <a href=#embedded-content>embedded content</a> is expected to be treated as a
   77349   replaced element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to
   77350   be treated as ordinary elements in the rendering model.</p>
   77351 
   77352   <p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
   77353   image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
   77354   to be treated as a replaced element. Other <code><a href=#the-object-element>object</a></code>
   77355   elements are expected to be treated as ordinary elements in the
   77356   rendering model.</p>
   77357 
   77358   <p>An <code><a href=#the-applet-element>applet</a></code> element that <a href=#represents>represents</a> a
   77359   <a href=#plugin>plugin</a> is expected to be treated as a replaced
   77360   element. Other <code><a href=#the-applet-element>applet</a></code> elements are expected to be
   77361   treated as ordinary elements in the rendering model.</p>
   77362 
   77363   <p>The <code><a href=#audio>audio</a></code> element, when it is <a href=#expose-a-user-interface-to-the-user title="expose a
   77364   user interface to the user">exposing a user interface</a>, is
   77365   expected to be treated as a replaced element about one line high, as
   77366   wide as is necessary to expose the user agent's user interface
   77367   features. When an <code><a href=#audio>audio</a></code> element is not <a href=#expose-a-user-interface-to-the-user title="expose a user interface to the user">exposing a user
   77368   interface</a>, the user agent is expected to hide it,
   77369   irrespective of CSS rules.</p>
   77370 
   77371   <p>Whether a <code><a href=#video>video</a></code> element is <a href=#expose-a-user-interface-to-the-user title="expose a
   77372   user interface to the user">exposing a user interface</a> is not
   77373   expected to affect the size of the rendering; controls are expected
   77374   to be overlaid with the page content without causing any layout
   77375   changes, and are expected to disappear when the user does not need
   77376   them.</p>
   77377 
   77378   <p>When a <code><a href=#video>video</a></code> element represents a poster frame or
   77379   frame of video, the poster frame or frame of video is expected to be
   77380   rendered at the largest size that maintains the aspect ratio of that
   77381   poster frame or frame of video without being taller or wider than
   77382   the <code><a href=#video>video</a></code> element itself, and is expected to be
   77383   centered in the <code><a href=#video>video</a></code> element.</p>
   77384 
   77385   <p class=XXX>pointer to rendering model for timed tracks</p>
   77386 
   77387   <p class=note>Resizing <code><a href=#video>video</a></code> and <code><a href=#the-canvas-element>canvas</a></code>
   77388   elements does not interrupt video playback or clear the canvas.</p>
   77389 
   77390   <hr><p>The following CSS rules are expected to apply:</p>
   77391 
   77392   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77393 
   77394 iframe { border: 2px inset; }</pre>
   77395 
   77396   </div>
   77397 
   77398 
   77399   <div class=impl>
   77400 
   77401   <h4 id=timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</h4>
   77402 
   77403   <p class=XXX>rendering model for timed tracks</p>
   77404 
   77405   <p class=XXX>CSS extensions</p>
   77406 
   77407   </div>
   77408 
   77409 
   77410   <div class=impl>
   77411 
   77412   <h4 id=images-0><span class=secno>12.3.3 </span>Images</h4>
   77413 
   77414   <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
   77415   when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   77416   the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
   77417   <a href=#represents>represents</a> an image, it is expected to be treated as a
   77418   replaced element.</p>
   77419 
   77420   <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
   77421   when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   77422   the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
   77423   does not <a href=#represents title=represents>represent</a> an image, but the
   77424   element already has intrinsic dimensions (e.g. from the
   77425   <a href=#dimension-attributes>dimension attributes</a> or CSS rules), and either the user
   77426   agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also-->
   77427   and be rendered in due course or the <code><a href=#document>Document</a></code> is in
   77428   <a href=#quirks-mode>quirks mode</a>, the element is expected to be treated as a
   77429   replaced element whose content is the text that the element
   77430   represents, if any, optionally alongside an icon indicating that the
   77431   image is being obtained. For <code><a href=#the-input-element>input</a></code> elements, the text
   77432   is expected to appear button-like to indicate that the element is a
   77433   <a href=#concept-button title=concept-button>button</a>.</p>
   77434 
   77435   <p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> some
   77436   text and the user agent does not expect this to change, the element
   77437   is expected to be treated as an inline element whose content is the
   77438   text, optionally with an icon indicating that an image is
   77439   missing.</p>
   77440 
   77441   <p>When an <code><a href=#the-img-element>img</a></code> element <a href=#represents>represents</a> nothing
   77442   and the user agent does not expect this to change, the element is
   77443   expected to not be rendered at all.</p>
   77444 
   77445   <p>When an <code><a href=#the-img-element>img</a></code> element might be a key part of the
   77446   content, but neither the image nor any kind of alternative text is
   77447   available, and the user agent does not expect this to change, the
   77448   element is expected to be treated as an inline element whose content
   77449   is an icon indicating that an image is missing.</p> <!-- there's
   77450   also a should requirement for this case in the <img> section itself
   77451   -->
   77452 
   77453   <p>When an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state does not
   77454   <a href=#represents title=represents>represent</a> an image and the user
   77455   agent does not expect this to change, the element is expected to be
   77456   treated as a replaced element consisting of a button whose content
   77457   is the element's alternative text. The intrinsic dimensions of the
   77458   button are expected to be about one line in height and whatever
   77459   width is necessary to render the text on one line.</p>
   77460 
   77461   <p>The icons mentioned above are expected to be relatively small so
   77462   as not to disrupt most text but be easily clickable. In a visual
   77463   environment, for instance, icons could be 16 pixels by 16 pixels
   77464   square, or 1em by 1em if the images are scalable. In an audio
   77465   environment, the icon could be a short bleep. The icons are intended
   77466   to indicate to the user that they can be used to get to whatever
   77467   options the UA provides for images, and, where appropriate, are
   77468   expected to provide access to the context menu that would have come
   77469   up if the user interacted with the actual image.</p>
   77470 
   77471   <hr><p>The following CSS rules are expected to apply when the
   77472   <code><a href=#document>Document</a></code> is in <a href=#quirks-mode>quirks mode</a>:</p>
   77473 
   77474   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77475 
   77476 img[align=left] { margin-right: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77477 img[align=right] { margin-left: 3px; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77478 
   77479   </div>
   77480 
   77481 
   77482   <div class=impl>
   77483 
   77484   <h4 id=attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</h4>
   77485 
   77486   <p>The following CSS rules are expected to apply as
   77487   <a href=#presentational-hints>presentational hints</a>:</p>
   77488 
   77489   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77490 
   77491 iframe[frameborder=0], iframe[frameborder=no] { border: none; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77492 
   77493 applet[align=left], embed[align=left], iframe[align=left],
   77494 img[align=left], input[type=image][align=left], object[align=left] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77495   float: left;
   77496 }
   77497 
   77498 applet[align=right], embed[align=right], iframe[align=right],
   77499 img[align=right], input[type=image][align=right], object[align=right] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77500   float: right;
   77501 }
   77502 
   77503 applet[align=top], embed[align=top], iframe[align=top],
   77504 img[align=top], input[type=image][align=top], object[align=top] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77505   vertical-align: top;
   77506 }
   77507 
   77508 applet[align=bottom], embed[align=bottom], iframe[align=bottom],
   77509 img[align=bottom], input[type=image][align=bottom], object[align=bottom],
   77510 applet[align=baseline], embed[align=baseline], iframe[align=baseline],
   77511 img[align=baseline], input[type=image][align=baseline], object[align=baseline] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77512   vertical-align: baseline;
   77513 }
   77514 
   77515 applet[align=texttop], embed[align=texttop], iframe[align=texttop],
   77516 img[align=texttop], input[type=image][align=texttop], object[align=texttop] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77517   vertical-align: text-top;
   77518 }
   77519 
   77520 applet[align=absmiddle], embed[align=absmiddle], iframe[align=absmiddle],
   77521 img[align=absmiddle], input[type=image][align=absmiddle], object[align=absmiddle],
   77522 applet[align=abscenter], embed[align=abscenter], iframe[align=abscenter],
   77523 img[align=abscenter], input[type=image][align=abscenter], object[align=abscenter] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77524   vertical-align: middle;
   77525 }
   77526 
   77527 applet[align=bottom], embed[align=bottom], iframe[align=bottom],
   77528 img[align=bottom], input[type=image][align=bottom],
   77529 object[align=bottom] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77530   vertical-align: bottom;
   77531 }</pre>
   77532 
   77533   <p>When an <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>,
   77534   <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code>
   77535   element, or an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, has an
   77536   <code title=attr-dim-align>align</code> attribute whose value is
   77537   an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">center</code>" or the string "<code title="">middle</code>", the user agent is expected to act as if the
   77538   element's 'vertical-align' property was set to a value that aligns
   77539   the vertical middle of the element with the parent element's
   77540   baseline.</p>
   77541 
   77542   <p>The <code title=attr-dim-hspace>hspace</code> attribute of
   77543   <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
   77544   <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
   77545   <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">maps to the dimension
   77546   properties</a> 'margin-left' and 'margin-right' on the
   77547   element.</p>
   77548 
   77549   <p>The <code title=attr-dim-vspace>vspace</code> attribute of
   77550   <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
   77551   <code><a href=#the-img-element>img</a></code>, or <code><a href=#the-object-element>object</a></code> elements, and
   77552   <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">maps to the dimension
   77553   properties</a> 'margin-top' and 'margin-bottom' on the
   77554   element.</p>
   77555 
   77556   <p>When an <code><a href=#the-img-element>img</a></code> element, <code><a href=#the-object-element>object</a></code> element, or
   77557   <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state is contained
   77558   within a <a href=#hyperlink>hyperlink</a> and has a <code title=attr-dim-border>border</code> attribute whose value, when
   77559   parsed using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   77560   integers</a>, is found to be a number greater than zero, the user
   77561   agent is expected to use the parsed value for eight
   77562   <a href=#presentational-hints>presentational hints</a>: four setting the parsed value as
   77563   a pixel length for the element's 'border-top-width',
   77564   'border-right-width', 'border-bottom-width', and 'border-left-width'
   77565   properties, and four setting the element's 'border-top-style',
   77566   'border-right-style', 'border-bottom-style', and 'border-left-style'
   77567   properties to the value 'solid'.</p>
   77568 
   77569   <p id=dimRendering>The <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
   77570   and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on
   77571   <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-iframe-element>iframe</a></code>,
   77572   <code><a href=#the-img-element>img</a></code>, <code><a href=#the-object-element>object</a></code> or <code><a href=#video>video</a></code>
   77573   elements, and <code><a href=#the-input-element>input</a></code> elements with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, <a href=#maps-to-the-dimension-property title="maps to the dimension property">map to the dimension
   77574   properties</a> 'width' and 'height' on the element
   77575   respectively.</p>
   77576 
   77577   </div>
   77578 
   77579 
   77580   <div class=impl>
   77581 
   77582   <h4 id=image-maps-0><span class=secno>12.3.5 </span>Image maps</h4>
   77583 
   77584   <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the
   77585   purpose of the CSS cascade, as elements independent of the original
   77586   <code><a href=#the-area-element>area</a></code> element that happen to match the same style rules
   77587   but inherit from the <code><a href=#the-img-element>img</a></code> or <code><a href=#the-object-element>object</a></code>
   77588   element.</p>
   77589 
   77590   <p>For the purposes of the rendering, only the 'cursor' property is
   77591   expected to have any effect on the shape.</p>
   77592 
   77593   <p class=example>Thus, for example, if an <code><a href=#the-area-element>area</a></code>
   77594   element has a <code title=attr-style><a href=#the-style-attribute>style</a></code> attribute that
   77595   sets the 'cursor' property to 'help', then when the user designates
   77596   that shape, the cursor would change to a Help cursor.</p>
   77597 
   77598   <p class=example>Similarly, if an <code><a href=#the-area-element>area</a></code> element had a
   77599   CSS rule that set its 'cursor' property to 'inherit' (or if no rule
   77600   setting the 'cursor' property matched the element at all), the
   77601   shape's cursor would be inherited from the <code><a href=#the-img-element>img</a></code> or
   77602   <code><a href=#the-object-element>object</a></code> element of the <a href=#image-map>image map</a>, not from
   77603   the parent of the <code><a href=#the-area-element>area</a></code> element.</p>
   77604 
   77605   </div>
   77606 
   77607 
   77608   <div class=impl>
   77609 
   77610   <h4 id=toolbars-0><span class=secno>12.3.6 </span>Toolbars</h4>
   77611 
   77612   <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
   77613   expected to be treated as a replaced element with a height about two
   77614   lines high and a width derived from the contents of the element.</p>
   77615 
   77616   <p>The element is expected to have, by default, the appearance of a
   77617   toolbar on the user agent's platform. It is expected to contain the
   77618   menu that is <a href=#building-menus-and-toolbars title="building menus and toolbars">built</a>
   77619   from the element.</p>
   77620 
   77621   </div>
   77622 
   77623 
   77624   <div class=impl>
   77625 
   77626   <h3 id=bindings><span class=secno>12.4 </span>Bindings</h3>
   77627 
   77628   <h4 id=introduction-10><span class=secno>12.4.1 </span>Introduction</h4>
   77629 
   77630   <p>A number of elements have their rendering defined in terms of the
   77631   'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
   77632 
   77633   <p>The CSS snippets below set the 'binding' property to a
   77634   user-agent-defined value, represented below by keywords like <code title=""><i title="">button</i></code>. The rules then described for
   77635   these bindings are only expected to apply if the element's 'binding'
   77636   property has not been overridden (e.g. by the author) to have
   77637   another value.</p>
   77638 
   77639   <p>Exactly how the bindings are implemented is not specified by this
   77640   specification. User agents are encouraged to make their bindings set
   77641   the 'appearance' CSS property appropriately to achieve
   77642   platform-native appearances for widgets, and are expected to
   77643   implement any relevant animations, etc, that are appropriate for the
   77644   platform. <a href=#refsCSSUI>[CSSUI]</a></p>
   77645 
   77646   </div>
   77647 
   77648 
   77649   <div class=impl>
   77650 
   77651   <h4 id=the-button-element-0><span class=secno>12.4.2 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
   77652 
   77653   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77654 
   77655 button { binding: <i title="">button</i>; }</pre>
   77656 
   77657   <p>When the <i title="">button</i> binding applies to a
   77658   <code><a href=#the-button-element>button</a></code> element, the element is expected to render as an
   77659   'inline-block' box rendered as a button whose contents are the
   77660   contents of the element.</p>
   77661 
   77662   </div>
   77663 
   77664 
   77665 <!--v2DATAGRID
   77666   <div class="impl">
   77667 
   77668   <h4>The <code>datagrid</code> element</h4>
   77669 
   77670   This section will probably include details on how to render DATAGRID
   77671   (including <span id="datagridPseudos">its pseudo-elements</span>),
   77672   drag-and-drop, etc, in a visual medium, in concert with
   77673   CSS. Implementation experience is desired before this section is
   77674   filled in.
   77675 
   77676   </div>
   77677 -->
   77678 
   77679   <div class=impl>
   77680 
   77681   <h4 id=the-details-element-0><span class=secno>12.4.3 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
   77682 
   77683   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77684 
   77685 details { binding: <i title="">details</i>; }</pre>
   77686 
   77687   <p>When the <i title="">details</i> binding applies to a
   77688   <code><a href=#the-details-element>details</a></code> element, the element is expected to render as a
   77689   'block' box with its 'padding-left' property set to '40px' for
   77690   left-to-right elements (<a href=#ltr-specific>LTR-specific</a>) and with its
   77691   'padding-right' property set to '40px' for right-to-left
   77692   elements. The element's shadow tree is expected to take the
   77693   element's first child <code><a href=#the-summary-element>summary</a></code> element, if any, and
   77694   place it in a first 'block' box container, and then take the
   77695   element's remaining descendants, if any, and place them in a second
   77696   'block' box container.</p>
   77697 
   77698   <p>The first container is expected to contain at least one line box,
   77699   and that line box is expected to contain a disclosure widget
   77700   (typically a triangle), horizontally positioned within the left
   77701   padding of the <code><a href=#the-details-element>details</a></code> element. That widget is expected
   77702   to allow the user to request that the details be shown or
   77703   hidden.</p>
   77704 
   77705   <p>The second container is expected to have its 'overflow' property
   77706   set to 'hidden'. When the <code><a href=#the-details-element>details</a></code> element does not have
   77707   an <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute, this
   77708   second container is expected to be removed from the rendering.</p>
   77709 
   77710   <!-- http://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
   77711 
   77712   </div>
   77713 
   77714   <div class=impl>
   77715 
   77716   <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
   77717 
   77718   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77719 
   77720 input { binding: <i title="">input-textfield</i>; }
   77721 input[type=password] { binding: <i title="">input-password</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77722 /* later rules override this for other values of type="" */</pre>
   77723 
   77724   <p>When the <i title="">input-textfield</i> binding applies to an
   77725   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#telephone-state title=attr-input-type-tel>Telephone</a>, <a href=#url-state title=attr-input-type-url>URL</a>, or <a href=#e-mail-state title=attr-input-type-email>E-mail</a> state, the element is
   77726   expected to render as an 'inline-block' box rendered as a text
   77727   field.</p>
   77728 
   77729   <p>When the <i title="">input-password</i> binding applies, to an
   77730   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#password-state title=attr-input-type-password>Password</a> state, the element
   77731   is expected to render as an 'inline-block' box rendered as a text
   77732   field whose contents are obscured.</p>
   77733 
   77734   <p>If an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the above
   77735   states has a <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute,
   77736   and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
   77737   non-negative integers</a> doesn't generate an error, then the
   77738   user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
   77739   'width' property on the element, with the value obtained from
   77740   applying the <a href=#converting-a-character-width-to-pixels>converting a character width to pixels</a>
   77741   algorithm to the value of the attribute.</p>
   77742 
   77743   <p>If an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the above
   77744   states does <em>not</em> have a <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute, then the user agent
   77745   is expected to act as if it had a user-agent-level style sheet rule
   77746   setting the 'width' property on the element to the value obtained
   77747   from applying the <a href=#converting-a-character-width-to-pixels>converting a character width to
   77748   pixels</a> algorithm to the number 20.</p>
   77749 
   77750   <p>The <dfn id=converting-a-character-width-to-pixels>converting a character width to pixels</dfn> algorithm
   77751   returns <span title="">(<var title="">size</var>-1)&times;<var title="">avg</var>&nbsp;+&nbsp;<var title="">max</var></span>, where
   77752   <var title="">size</var> is the character width to convert, <var title="">avg</var> is the average character width of the primary
   77753   font for the element for which the algorithm is being run, in
   77754   pixels, and <var title="">max</var> is the maximum character width
   77755   of that same font, also in pixels. (The element's 'letter-spacing'
   77756   property does not affect the result.)</p>
   77757 
   77758   </div>
   77759 
   77760 
   77761   <div class=impl>
   77762 
   77763   <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>12.4.5 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
   77764 
   77765   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77766 
   77767 input[type=datetime] { binding: <i title="">input-datetime</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77768 input[type=date] { binding: <i title="">input-date</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77769 input[type=month] { binding: <i title="">input-month</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77770 input[type=week] { binding: <i title="">input-week</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77771 input[type=time] { binding: <i title="">input-time</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77772 input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77773 input[type=number] { binding: <i title="">input-number</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77774 
   77775   <p>When the <i title="">input-datetime</i> binding applies to an
   77776   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a> state, the
   77777   element is expected to render as an 'inline-block' box depicting a
   77778   Date and Time control.</p>
   77779 
   77780   <p>When the <i title="">input-date</i> binding applies to an
   77781   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-state title=attr-input-type-date>Date</a> state, the element is
   77782   expected to render as an 'inline-block' box depicting a Date
   77783   control.</p>
   77784 
   77785   <p>When the <i title="">input-month</i> binding applies to an
   77786   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#month-state title=attr-input-type-month>Month</a> state, the element is
   77787   expected to render as an 'inline-block' box depicting a Month
   77788   control.</p>
   77789 
   77790   <p>When the <i title="">input-week</i> binding applies to an
   77791   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#week-state title=attr-input-type-week>Week</a> state, the element is
   77792   expected to render as an 'inline-block' box depicting a Week
   77793   control.</p>
   77794 
   77795   <p>When the <i title="">input-time</i> binding applies to an
   77796   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#time-state title=attr-input-type-time>Time</a> state, the element is
   77797   expected to render as an 'inline-block' box depicting a Time
   77798   control.</p>
   77799 
   77800   <p>When the <i title="">input-datetime-local</i> binding applies to an
   77801   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>
   77802   state, the element is expected to render as an 'inline-block' box
   77803   depicting a Local Date and Time control.</p>
   77804 
   77805   <p>When the <i title="">input-number</i> binding applies to an
   77806   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#number-state title=attr-input-type-number>Number</a> state, the element is
   77807   expected to render as an 'inline-block' box depicting a Number
   77808   control.</p>
   77809 
   77810   <p>These controls are all expected to be about one line high, and
   77811   about as wide as necessary to show the widest possible value.</p>
   77812 
   77813   </div>
   77814 
   77815 
   77816   <div class=impl>
   77817 
   77818   <h4 id=the-input-element-as-a-range-control><span class=secno>12.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
   77819 
   77820   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77821 
   77822 input[type=range] { binding: <i title="">input-range</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77823 
   77824   <p>When the <i title="">input-range</i> binding applies to an
   77825   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, the element is
   77826   expected to render as an 'inline-block' box depicting a slider
   77827   control.</p>
   77828 
   77829   <p>When the control is wider than it is tall (or square), the
   77830   control is expected to be a horizontal slider, with the lowest value
   77831   on the right if the 'direction' property on this element has a
   77832   computed value of 'rtl', and on the left otherwise. When the control
   77833   is taller than it is wide, it is expected to be a vertical slider,
   77834   with the lowest value on the bottom.</p>
   77835 
   77836   <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
   77837   shown as tick marks on the slider, which the slider can snap to.</p>
   77838 
   77839   </div>
   77840 
   77841 
   77842   <div class=impl>
   77843 
   77844   <h4 id=the-input-element-as-a-color-well><span class=secno>12.4.7 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
   77845 
   77846   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77847 
   77848 input[type=color] { binding: <i title="">input-color</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77849 
   77850   <p>When the <i title="">input-color</i> binding applies to an
   77851   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, the element is
   77852   expected to render as an 'inline-block' box depicting a color well,
   77853   which, when activated, provides the user with a color picker (e.g. a
   77854   color wheel or color palette) from which the color can be
   77855   changed.</p>
   77856 
   77857   <p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
   77858   shown in the color picker interface, not on the color well
   77859   itself.</p>
   77860 
   77861   </div>
   77862 
   77863 
   77864   <div class=impl>
   77865 
   77866   <h4 id=the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>12.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a check box and radio button widgets</h4>
   77867 
   77868   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77869 
   77870 input[type=checkbox] { binding: <i title="">input-checkbox</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77871 input[type=radio] { binding: <i title="">input-radio</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77872 
   77873   <p>When the <i title="">input-checkbox</i> binding applies to an
   77874   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the element
   77875   is expected to render as an 'inline-block' box containing a single
   77876   check box control, with no label.</p>
   77877 
   77878   <p>When the <i title="">input-radio</i> binding applies to an
   77879   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the element
   77880   is expected to render as an 'inline-block' box containing a single
   77881   radio button control, with no label.</p>
   77882 
   77883   </div>
   77884 
   77885 
   77886   <div class=impl>
   77887 
   77888   <h4 id=the-input-element-as-a-file-upload-control><span class=secno>12.4.9 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
   77889 
   77890   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77891 
   77892 input[type=file] { binding: <i title="">input-file</i>; } /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */</pre>
   77893 
   77894   <p>When the <i title="">input-file</i> binding applies to an
   77895   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, the element
   77896   is expected to render as an 'inline-block' box containing a span of
   77897   text giving the filename(s) of the <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>, if
   77898   any, followed by a button that, when activated, provides the user
   77899   with a file picker from which the selection can be changed.</p>
   77900 
   77901   </div>
   77902 
   77903 
   77904   <div class=impl>
   77905 
   77906   <h4 id=the-input-element-as-a-button><span class=secno>12.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
   77907 
   77908   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77909 
   77910 input[type=submit], input[type=reset], input[type=button] { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   77911   binding: <i title="">input-button</i>;
   77912 }</pre>
   77913 
   77914   <p>When the <i title="">input-button</i> binding applies to an
   77915   <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, the element is
   77916   expected to render as an 'inline-block' box rendered as a button,
   77917   about one line high, containing the contents of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if any, or text
   77918   derived from the element's <code title=attr-input-type><a href=#attr-input-type>type</a></code>
   77919   attribute in a user-agent-defined (and probably locale-specific)
   77920   fashion, if not.</p>
   77921 
   77922   </div>
   77923 
   77924 
   77925   <div class=impl>
   77926 
   77927   <h4 id=the-marquee-element-0><span class=secno>12.4.11 </span>The <code><a href=#the-marquee-element>marquee</a></code> element</h4>
   77928 
   77929   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   77930 
   77931 marquee {
   77932   binding: <i title="">marquee</i>;
   77933 }</pre>
   77934 
   77935   <p>When the <i title="">marquee</i> binding applies to a
   77936   <code><a href=#the-marquee-element>marquee</a></code> element, while the element is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>, the element is expected
   77937   to render in an animated fashion according to its attributes as
   77938   follows:</p>
   77939 
   77940   <dl><dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   77941    <a href=#attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</a> state</dt>
   77942 
   77943    <dd>
   77944 
   77945     <p>Slide the contents of the element in the direction described by
   77946     the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
   77947     attribute as defined below, such that it begins off the start side
   77948     of the <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the inner end
   77949     side.</p>
   77950 
   77951     <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
   77952     then the contents would start such that their left edge are off
   77953     the side of the right edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content
   77954     area, and the contents would then slide up to the point where the
   77955     left edge of the contents are flush with the left inner edge of
   77956     the <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>
   77957 
   77958     <p>Once the animation has ended, the user agent is expected to
   77959     <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
   77960     element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
   77961     after this, then the user agent is expected to restart the
   77962     animation.</p>
   77963 
   77964    </dd>
   77965 
   77966    <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   77967    <a href=#attr-marquee-behavior-slide title=attr-marquee-behavior-slide>slide</a> state</dt>
   77968 
   77969    <dd>
   77970 
   77971     <p>Slide the contents of the element in the direction described by
   77972     the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
   77973     attribute as defined below, such that it begins off the start side
   77974     of the <code><a href=#the-marquee-element>marquee</a></code>, and ends off the end side of the
   77975     <code><a href=#the-marquee-element>marquee</a></code>.</p>
   77976 
   77977     <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
   77978     then the contents would start such that their left edge are off
   77979     the side of the right edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content
   77980     area, and the contents would then slide up to the point where the
   77981     <em>right</em> edge of the contents are flush with the left inner
   77982     edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>
   77983 
   77984     <p>Once the animation has ended, the user agent is expected to
   77985     <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
   77986     element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
   77987     after this, then the user agent is expected to restart the
   77988     animation.</p>
   77989 
   77990    </dd>
   77991 
   77992    <dt>If the element's <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   77993    <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
   77994    state</dt>
   77995 
   77996    <dd>
   77997 
   77998     <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is even (or
   77999     zero), slide the contents of the element in the direction
   78000     described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
   78001     defined below, such that it begins flush with the start side of
   78002     the <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the end side of the
   78003     <code><a href=#the-marquee-element>marquee</a></code>.</p>
   78004 
   78005     <p>When the <a href=#marquee-current-loop-index>marquee current loop index</a> is odd, slide
   78006     the contents of the element in the opposite direction than that
   78007     described by the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute as
   78008     defined below, such that it begins flush with the end side of the
   78009     <code><a href=#the-marquee-element>marquee</a></code>, and ends flush with the start side of the
   78010     <code><a href=#the-marquee-element>marquee</a></code>.</p>
   78011 
   78012     <p class=example>For example, if the <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute is <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> (the default),
   78013     then the contents would with their right edge flush with the right
   78014     inner edge of the <code><a href=#the-marquee-element>marquee</a></code>'s content area, and the
   78015     contents would then slide up to the point where the <em>left</em>
   78016     edge of the contents are flush with the left inner edge of the
   78017     <code><a href=#the-marquee-element>marquee</a></code>'s content area.</p>
   78018 
   78019     <p>Once the animation has ended, the user agent is expected to
   78020     <a href=#increment-the-marquee-current-loop-index>increment the marquee current loop index</a>. If the
   78021     element is still <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>
   78022     after this, then the user agent is expected to continue the
   78023     animation.</p>
   78024 
   78025    </dd>
   78026 
   78027   </dl><p>The <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code>
   78028   attribute has the meanings described in the following table:</p>
   78029 
   78030   <table><thead><tr><th><code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute state
   78031      <th>Direction of animation
   78032      <th>Start edge
   78033      <th>End edge
   78034      <th>Opposite direction
   78035    <tbody><tr><td><a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a>
   78036      <td>&larr; Right to left
   78037      <td>Right
   78038      <td>Left
   78039      <td>&rarr; Left to Right
   78040     <tr><td><a href=#attr-marquee-direction-right title=attr-marquee-direction-right>right</a>
   78041      <td>&rarr; Left to Right
   78042      <td>Left
   78043      <td>Right
   78044      <td>&larr; Right to left
   78045     <tr><td><a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a>
   78046      <td>&uarr; Up (Bottom to Top)
   78047      <td>Bottom
   78048      <td>Top
   78049      <td>&darr; Down (Top to Bottom)
   78050     <tr><td><a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a>
   78051      <td>&darr; Down (Top to Bottom)
   78052      <td>Top
   78053      <td>Bottom
   78054      <td>&uarr; Up (Bottom to Top)
   78055   </table><p>In any case, the animation should proceed such that there is a
   78056   delay given by the <a href=#marquee-scroll-interval>marquee scroll interval</a> between each
   78057   frame, and such that the content moves at most the distance given by
   78058   the <a href=#marquee-scroll-distance>marquee scroll distance</a> with each frame.</p>
   78059 
   78060   <p>When a <code><a href=#the-marquee-element>marquee</a></code> element has a <code title=attr-marquee-bgcolor>bgcolor</code> attribute set, the value
   78061   is expected to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy
   78062   color value</a>, and if that does not return an error, the user
   78063   agent is expected to treat the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> setting the
   78064   element's 'background-color' property to the resulting color.</p>
   78065 
   78066   <p>The <code title=attr-marquee-width>width</code> and <code title=attr-marquee-height>height</code> attributes on a
   78067   <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
   78068   property">map to the dimension properties</a> 'width' and
   78069   'height' on the element respectively.</p>
   78070 
   78071   <p>The intrinsic height of a <code><a href=#the-marquee-element>marquee</a></code> element with its
   78072   <code title=attr-marquee-direction><a href=#attr-marquee-direction>direction</a></code> attribute in
   78073   the <a href=#attr-marquee-direction-up title=attr-marquee-direction-up>up</a> or <a href=#attr-marquee-direction-down title=attr-marquee-direction-down>down</a> states is 200 CSS
   78074   pixels.</p>
   78075 
   78076   <p>The <code title=attr-marquee-vspace>vspace</code> attribute of
   78077   a <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
   78078   property">maps to the dimension properties</a> 'margin-top' and
   78079   'margin-bottom' on the element. The <code title=attr-marquee-hspace>hspace</code> attribute of a
   78080   <code><a href=#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property title="maps to the dimension
   78081   property">maps to the dimension properties</a> 'margin-left' and
   78082   'margin-right' on the element.</p>
   78083 
   78084   <p>The 'overflow' property on the <code><a href=#the-marquee-element>marquee</a></code> element is
   78085   expected to be ignored; overflow is expected to always be
   78086   hidden.</p>
   78087 
   78088   </div>
   78089 
   78090 
   78091   <div class=impl>
   78092 
   78093   <h4 id=the-meter-element-0><span class=secno>12.4.12 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
   78094 
   78095   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78096 
   78097 meter {
   78098   binding: <i title="">meter</i>;
   78099 }</pre>
   78100 
   78101   <p>When the <i title="">meter</i> binding applies to a
   78102   <code><a href=#the-meter-element>meter</a></code> element, the element is expected to render as an
   78103   'inline-block' box with a 'height' of '1em' and a 'width' of '5em',
   78104   a 'vertical-align' of '-0.2em', and with its contents depicting a
   78105   gauge.</p>
   78106 
   78107   <p>When the element is wider than it is tall (or square), the
   78108   depiction is expected to be of a horizontal gauge, with the minimum
   78109   value on the right if the 'direction' property on this element has a
   78110   computed value of 'rtl', and on the left otherwise. When the element
   78111   is taller than it is wide, it is expected to depict a vertical
   78112   gauge, with the minimum value on the bottom.</p>
   78113 
   78114   <p>User agents are expected to use a presentation consistent with
   78115   platform conventions for gauges, if any.</p>
   78116 
   78117   <p class=note>Requirements for what must be depicted in the gauge
   78118   are included in the definition of the <code><a href=#the-meter-element>meter</a></code>
   78119   element.</p>
   78120 
   78121   </div>
   78122 
   78123 
   78124   <div class=impl>
   78125 
   78126   <h4 id=the-progress-element-0><span class=secno>12.4.13 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
   78127 
   78128   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78129 
   78130 progress {
   78131   binding: <i title="">progress</i>;
   78132 }</pre>
   78133 
   78134   <p>When the <i title="">progress</i> binding applies to a
   78135   <code><a href=#the-progress-element>progress</a></code> element, the element is expected to render as
   78136   an 'inline-block' box with a 'height' of '1em' and a 'width' of
   78137   '10em', a 'vertical-align' of '-0.2em', and with its contents
   78138   depicting a horizontal progress bar, with the start on the right and
   78139   the end on the left if the 'direction' property on this element has
   78140   a computed value of 'rtl', and with the start on the left and the
   78141   end on the right otherwise.</p>
   78142 
   78143   <p>User agents are expected to use a presentation consistent with
   78144   platform conventions for progress bars. In particular, user agents
   78145   are expected to use different presentations for determinate and
   78146   indeterminate progress bars. User agents are also expected to vary
   78147   the presentation based on the dimensions of the element.</p>
   78148 
   78149   <p class=example>For example, on some platforms for showing
   78150   indeterminate progress there is an asynchronous progress indicator
   78151   with square dimensions, which could be used when the element is
   78152   square, and an indeterminate progress bar, which could be used when
   78153   the element is wide.</p>
   78154 
   78155   <p class=note>Requirements for how to determine if the progress
   78156   bar is determinate or indeterminate, and what progress a determinate
   78157   progress bar is to show, are included in the definition of the
   78158   <code><a href=#the-progress-element>progress</a></code> element.</p>
   78159 
   78160   </div>
   78161 
   78162 
   78163   <div class=impl>
   78164 
   78165   <h4 id=the-select-element-0><span class=secno>12.4.14 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
   78166 
   78167   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78168 
   78169 select {
   78170   binding: <i title="">select</i>;
   78171 }</pre>
   78172 
   78173   <p>When the <i title="">select</i> binding applies to a
   78174   <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is present,
   78175   the element is expected to render as a multi-select list box.</p>
   78176 
   78177   <p>When the <i title="">select</i> binding applies to a
   78178   <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
   78179   and the element's <a href=#concept-select-size title=concept-select-size>display
   78180   size</a> is greater than 1, the element is expected to render as
   78181   a single-select list box.</p>
   78182 
   78183   <p>When the element renders as a list box, it is expected to render
   78184   as an 'inline-block' box whose 'height' is the height necessary to
   78185   contain as many rows for items as given by the element's <a href=#concept-select-size title=concept-select-size>display size</a>, or four rows if the
   78186   attribute is absent, and whose 'width' is the <a href="#width-of-the-select's-labels">width of the
   78187   <code>select</code>'s labels</a> plus the width of a
   78188   scrollbar.</p>
   78189 
   78190   <p>When the <i title="">select</i> binding applies to a
   78191   <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
   78192   and the element's <a href=#concept-select-size title=concept-select-size>display
   78193   size</a> is 1, the element is expected to render as a one-line
   78194   drop down box whose width is the <a href="#width-of-the-select's-labels">width of the
   78195   <code>select</code>'s labels</a>.</p>
   78196 
   78197   <p>In either case (list box or drop-down box), the element's items
   78198   are expected to be the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, with the
   78199   element's <code><a href=#the-optgroup-element>optgroup</a></code> element children providing headers
   78200   for groups of options where applicable.</p>
   78201 
   78202   <p>The <dfn id="width-of-the-select's-labels">width of the <code>select</code>'s labels</dfn> is the
   78203   wider of the width necessary to render the widest
   78204   <code><a href=#the-optgroup-element>optgroup</a></code>, and the width necessary to render the widest
   78205   <code><a href=#the-option-element>option</a></code> element in the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> (including
   78206   its indent, if any).</p>
   78207 
   78208   <p>An <code><a href=#the-optgroup-element>optgroup</a></code> element is expected to be rendered by
   78209   displaying the element's <code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code> attribute.</p>
   78210 
   78211   <p>An <code><a href=#the-option-element>option</a></code> element is expected to be rendered by
   78212   displaying the element's <code title=concept-option-label><a href=#concept-option-label>label</a></code>, indented under its
   78213   <code><a href=#the-optgroup-element>optgroup</a></code> element if it has one.</p>
   78214 
   78215   </div>
   78216 
   78217 
   78218   <div class=impl>
   78219 
   78220   <h4 id=the-textarea-element-0><span class=secno>12.4.15 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
   78221 
   78222   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78223 
   78224 textarea { binding: <i title="">textarea</i>; }</pre>
   78225 
   78226   <p>When the <i title="">textarea</i> binding applies to a
   78227   <code><a href=#the-textarea-element>textarea</a></code> element, the element is expected to render as
   78228   an 'inline-block' box rendered as a multiline text field.</p>
   78229 
   78230   <p>If the element has a <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code>
   78231   attribute, and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules
   78232   for parsing non-negative integers</a> doesn't generate an error,
   78233   then the user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
   78234   'width' property on the element, with the value being the
   78235   <a href=#textarea-effective-width>textarea effective width</a> (as defined below). Otherwise,
   78236   the user agent is expected to act as if it had a user-agent-level
   78237   style sheet rule setting the 'width' property on the element to the
   78238   <a href=#textarea-effective-width>textarea effective width</a>.</p>
   78239 
   78240   <p>The <dfn id=textarea-effective-width>textarea effective width</dfn> of a
   78241   <code><a href=#the-textarea-element>textarea</a></code> element is <span><var title="">size</var>&times;<var title="">avg</var>&nbsp;+&nbsp;<var title="">sbw</var></span>, where <var title="">size</var> is the
   78242   element's <a href=#attr-textarea-cols-value title=attr-textarea-cols-value>character
   78243   width</a>, <var title="">avg</var> is the average character width
   78244   of the primary font of the element, in CSS pixels, and <var title="">sbw</var> is the width of a scroll bar, in CSS pixels. (The
   78245   element's 'letter-spacing' property does not affect the result.)</p>
   78246 
   78247   <p>If the element has a <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code>
   78248   attribute, and parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules
   78249   for parsing non-negative integers</a> doesn't generate an error,
   78250   then the user agent is expected to use the attribute as a <a href=#presentational-hints title="presentational hints">presentational hint</a> for the
   78251   'height' property on the element, with the value being the
   78252   <a href=#textarea-effective-height>textarea effective height</a> (as defined
   78253   below). Otherwise, the user agent is expected to act as if it had a
   78254   user-agent-level style sheet rule setting the 'height' property on
   78255   the element to the <a href=#textarea-effective-height>textarea effective height</a>.</p>
   78256 
   78257   <p>The <dfn id=textarea-effective-height>textarea effective height</dfn> of a
   78258   <code><a href=#the-textarea-element>textarea</a></code> element is the height in CSS pixels of the
   78259   number of lines specified the element's <a href=#attr-textarea-rows-value title=attr-textarea-rows-value>character height</a>, plus the
   78260   height of a scrollbar in CSS pixels.</p>
   78261 
   78262   <p>For historical reasons, if the element has a <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> attribute whose value is an
   78263   <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=attr-textarea-wrap-off>off</code>", then the user agent is
   78264   expected to not wrap the rendered value; otherwise, the value of the
   78265   control is expected to be wrapped to the width of the control.</p>
   78266 
   78267   </div>
   78268 
   78269 
   78270   <div class=impl>
   78271 
   78272   <h4 id=the-keygen-element-0><span class=secno>12.4.16 </span>The <code><a href=#the-keygen-element>keygen</a></code> element</h4>
   78273 
   78274   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78275 
   78276 keygen { binding: <i title="">keygen</i>; }</pre>
   78277 
   78278   <p>When the <i title="">keygen</i> binding applies to a
   78279   <code><a href=#the-keygen-element>keygen</a></code> element, the element is expected to render as an
   78280   'inline-block' box containing a user interface to configure the key
   78281   pair to be generated.</p>
   78282 
   78283   </div>
   78284 
   78285 
   78286   <div class=impl>
   78287 
   78288   <h4 id=the-time-element-0><span class=secno>12.4.17 </span>The <code><a href=#the-time-element>time</a></code> element</h4>
   78289 
   78290   <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
   78291 
   78292 time[datetime] { binding: <i title="">time</i>; }</pre>
   78293 
   78294   <p>When the <i title="">time</i> binding applies to a
   78295   <code><a href=#the-time-element>time</a></code> element, the element is expected to render as if
   78296   it contained text conveying the <a href=#concept-time-date title=concept-time-date>date</a> (if known), <a href=#concept-time-time title=concept-time-time>time</a> (if known), and <a href=#concept-time-timezone title=concept-time-timezone>time-zone offset</a> (if known)
   78297   represented by the element, in the fashion most convenient for the
   78298   user.</p>
   78299 
   78300   <!-- If none are known then the element would appear empty. -->
   78301 
   78302   </div>
   78303 
   78304 
   78305 
   78306   <div class=impl>
   78307 
   78308   <h3 id=frames-and-framesets><span class=secno>12.5 </span>Frames and framesets</h3>
   78309 
   78310   <p>When an <code><a href=#the-html-element-0>html</a></code> element's second child element is a
   78311   <code><a href=#frameset>frameset</a></code> element, the user agent is expected to render
   78312   the <code><a href=#frameset>frameset</a></code> element as described below across the
   78313   surface of the viewport, instead of applying the usual CSS rendering
   78314   rules.</p>
   78315 
   78316   <p>When rendering a <code><a href=#frameset>frameset</a></code> on a surface, the user
   78317   agent is expected to use the following layout algorithm:</p>
   78318 
   78319   <ol><li>
   78320 
   78321     <p>The <var title="">cols</var> and <var title="">rows</var>
   78322     variables are lists of zero or more pairs consisting of a number
   78323     and a unit, the unit being one of <i>percentage</i>,
   78324     <i>relative</i>, and <i>absolute</i>.</p>
   78325 
   78326     <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
   78327     parse the value of the element's <code title=attr-frameset-cols>cols</code> attribute, if there is
   78328     one. Let <var title="">cols</var> be the result, or an empty list
   78329     if there is no such attribute.</p>
   78330 
   78331     <p>Use the <a href=#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to
   78332     parse the value of the element's <code title=attr-frameset-rows>rows</code> attribute, if there is
   78333     one. Let <var title="">rows</var> be the result, or an empty list
   78334     if there is no such attribute.</p>
   78335 
   78336    </li>
   78337 
   78338    <li>
   78339 
   78340     <p>For any of the entries in <var title="">cols</var> or <var title="">rows</var> that have the number zero and the unit
   78341     <i>relative</i>, change the entry's number to one.</p>
   78342 
   78343    </li>
   78344 
   78345    <li>
   78346 
   78347     <p>If <var title="">cols</var> has no entries, then add a single
   78348     entry consisting of the value 1 and the unit <i>relative</i> to
   78349     <var title="">cols</var>.</p>
   78350 
   78351     <p>If <var title="">rows</var> has no entries, then add a single
   78352     entry consisting of the value 1 and the unit <i>relative</i> to
   78353     <var title="">rows</var>.</p>
   78354 
   78355    </li>
   78356 
   78357    <li>
   78358 
   78359     <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
   78360     dimensions to a list of pixel values</a> using <var title="">cols</var> as the input list, and the width of the
   78361     surface that the <code><a href=#frameset>frameset</a></code> is being rendered into, in
   78362     CSS pixels, as the input dimension. Let <var title="">sized
   78363     cols</var> be the resulting list.</p>
   78364 
   78365     <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of
   78366     dimensions to a list of pixel values</a> using <var title="">rows</var> as the input list, and the height of the
   78367     surface that the <code><a href=#frameset>frameset</a></code> is being rendered into, in
   78368     CSS pixels, as the input dimension. Let <var title="">sized
   78369     rows</var> be the resulting list.</p>
   78370 
   78371    </li>
   78372 
   78373    <li>
   78374 
   78375     <p>Split the surface into a grid of <span title=""><var title="">w</var>&times;<var title="">h</var></span> rectangles,
   78376     where <var title="">w</var> is the number of entries in <var title="">sized cols</var> and <var title="">h</var> is the number
   78377     of entries in <var title="">sized rows</var>.</p>
   78378 
   78379     <p>Size the columns so that each column in the grid is as many CSS
   78380     pixels wide as the corresponding entry in the <var title="">sized
   78381     cols</var> list.</p>
   78382 
   78383     <p>Size the rows so that each row in the grid is as many CSS
   78384     pixels high as the corresponding entry in the <var title="">sized
   78385     rows</var> list.</p>
   78386 
   78387    </li>
   78388 
   78389    <li>
   78390 
   78391     <p>Let <var title="">children</var> be the list of
   78392     <code><a href=#frame>frame</a></code> and <code><a href=#frameset>frameset</a></code> elements that are
   78393     children of the <code><a href=#frameset>frameset</a></code> element for which the
   78394     algorithm was invoked.</p>
   78395 
   78396    </li>
   78397 
   78398    <li>
   78399 
   78400     <p>For each row of the grid of rectangles created in the previous
   78401     step, from top to bottom, run these substeps:</p>
   78402 
   78403     <ol><li>
   78404 
   78405       <p>For each rectangle in the row, from left to right, run these
   78406       substeps:</p>
   78407 
   78408       <ol><li>
   78409 
   78410         <p>If there are any elements left in <var title="">children</var>, take the first element in the list,
   78411         and assign it to the rectangle.</p>
   78412 
   78413         <p>If this is a <code><a href=#frameset>frameset</a></code> element, then recurse
   78414         the entire <code><a href=#frameset>frameset</a></code> layout algorithm for that
   78415         <code><a href=#frameset>frameset</a></code> element, with the rectangle as the
   78416         surface.</p>
   78417 
   78418         <p>Otherwise, it is a <code><a href=#frame>frame</a></code> element; create a
   78419         <a href=#nested-browsing-context>nested browsing context</a> sized to fit the
   78420         rectangle.</p>
   78421 
   78422        </li>
   78423 
   78424        <li>
   78425 
   78426         <p>If there are any elements left in <var title="">children</var>, remove the first element from <var title="">children</var>.</p>
   78427 
   78428       </ol></li>
   78429 
   78430     </ol></li>
   78431 
   78432    <li>
   78433 
   78434     <p>If the <code><a href=#frameset>frameset</a></code> element <a href=#has-a-border>has a border</a>,
   78435     draw an outer set of borders around the rectangles, using the
   78436     element's <a href=#frame-border-color>frame border color</a>.</p>
   78437 
   78438     <p>For each rectangle, if there is an element assigned to that
   78439     rectangle, and that element <a href=#has-a-border>has a border</a>, draw an
   78440     inner set of borders around that rectangle, using the
   78441     element's <a href=#frame-border-color>frame border color</a>.</p>
   78442 
   78443     <p>For each (visible) border that does not abut a rectangle that
   78444     is assigned a <code><a href=#frame>frame</a></code> element with a <code title=attr-frame-noresize>noresize</code> attribute (including
   78445     rectangles in further nested <code><a href=#frameset>frameset</a></code> elements), the
   78446     user agent is expected to allow the user to move the border,
   78447     resizing the rectangles within, keeping the proportions of any
   78448     nested <code><a href=#frameset>frameset</a></code> grids.</p>
   78449 
   78450     <p>A <code><a href=#frameset>frameset</a></code> or <code><a href=#frame>frame</a></code> element <dfn id=has-a-border>has
   78451     a border</dfn> if the following algorithm returns true:</p>
   78452 
   78453     <ol><li><p>If the element has a <code title=attr-frames-frameborder>frameborder</code> attribute
   78454      whose value is not the empty string and whose first character is
   78455      either a U+0031 DIGIT ONE (1) character, a U+0079 LATIN SMALL
   78456      LETTER Y character (y), or a U+0059 LATIN CAPITAL LETTER Y
   78457      character (Y), then return true.</li>
   78458 
   78459      <li><p>Otherwise, if the element has a <code title=attr-frames-frameborder>frameborder</code> attribute,
   78460      return false.</li>
   78461 
   78462      <li><p>Otherwise, if the element has a parent element that is a
   78463      <code><a href=#frameset>frameset</a></code> element, then return true if <em>that</em>
   78464      element <a href=#has-a-border>has a border</a>, and false if it does
   78465      not.</li>
   78466 
   78467      <li><p>Otherwise, return true.</li>
   78468 
   78469     </ol><p>The <dfn id=frame-border-color>frame border color</dfn> of a <code><a href=#frameset>frameset</a></code> or
   78470     <code><a href=#frame>frame</a></code> element is the color obtained from the
   78471     following algorithm:</p>
   78472 
   78473     <ol><li><p>If the element has a <code title=attr-frames-bordercolor>bordercolor</code> attribute, and
   78474      applying the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color value</a>
   78475      to that attribute's value does not result in an error, then
   78476      return the color so obtained.</li>
   78477 
   78478      <li><p>Otherwise, if the element has a parent element that is a
   78479      <code><a href=#frameset>frameset</a></code> element, then the <a href=#frame-border-color>frame border
   78480      color</a> of that element.</p>
   78481 
   78482      <li><p>Otherwise, return gray.</li>
   78483 
   78484     </ol></li>
   78485 
   78486   </ol><p>The algorithm to <dfn id=convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of dimensions to a list of
   78487   pixel values</dfn> consists of the following steps:</p>
   78488 
   78489   <ol><li>
   78490 
   78491     <p>Let <var title="">input list</var> be the list of numbers and
   78492     units passed to the algorithm.</p>
   78493 
   78494     <p>Let <var title="">output list</var> be a list of numbers the
   78495     same length as <var title="">input list</var>, all zero.</p>
   78496 
   78497     <p>Entries in <var title="">output list</var> correspond to the
   78498     entries in <var title="">input list</var> that have the same
   78499     position.</p>
   78500 
   78501    </li>
   78502 
   78503    <li><p>Let <var title="">input dimension</var> be the size passed
   78504    to the algorithm.</p>
   78505 
   78506    <li>
   78507 
   78508     <p>Let <var title="">count percentage</var> be the number of
   78509     entries in <var title="">input list</var> whose unit is
   78510     <i>percentage</i>.</p>
   78511 
   78512     <p>Let <var title="">total percentage</var> be the sum of all the
   78513     numbers in <var title="">input list</var> whose unit is
   78514     <i>percentage</i>.</p>
   78515 
   78516     <p>Let <var title="">count relative</var> be the number of
   78517     entries in <var title="">input list</var> whose unit is
   78518     <i>relative</i>.</p>
   78519 
   78520     <p>Let <var title="">total relative</var> be the sum of all the
   78521     numbers in <var title="">input list</var> whose unit is
   78522     <i>relative</i>.</p>
   78523 
   78524     <p>Let <var title="">count absolute</var> be the number of
   78525     entries in <var title="">input list</var> whose unit is
   78526     <i>absolute</i>.</p>
   78527 
   78528     <p>Let <var title="">total absolute</var> be the sum of all the
   78529     numbers in <var title="">input list</var> whose unit is
   78530     <i>absolute</i>.</p>
   78531 
   78532     <p>Let <var title="">remaining space</var> be the value of <var title="">input dimension</var>.</p>
   78533 
   78534    </li>
   78535 
   78536    <li>
   78537 
   78538     <p>If <var title="">total absolute</var> is greater than <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>absolute</i>, set the
   78539     corresponding value in <var title="">output list</var> to the
   78540     number of the entry in <var title="">input list</var> multiplied
   78541     by <var title="">remaining space</var> and divided by <var title="">total absolute</var>. Then, set <var title="">remaining
   78542     space</var> to zero.</p>
   78543 
   78544     <p>Otherwise, for each entry in <var title="">input list</var>
   78545     whose unit is <i>absolute</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var>. Then, decrement <var title="">remaining
   78546     space</var> by <var title="">total absolute</var>.</p>
   78547 
   78548    </li>
   78549 
   78550    <li>
   78551 
   78552     <p>If <var title="">total percentage</var> multiplied by the <var title="">input dimension</var> and divided by 100 is greater than
   78553     <var title="">remaining space</var>, then for each entry in <var title="">input list</var> whose unit is <i>percentage</i>, set the
   78554     corresponding value in <var title="">output list</var> to the
   78555     number of the entry in <var title="">input list</var> multiplied
   78556     by <var title="">remaining space</var> and divided by <var title="">total percentage</var>. Then, set <var title="">remaining
   78557     space</var> to zero.</p>
   78558 
   78559     <p>Otherwise, for each entry in <var title="">input list</var>
   78560     whose unit is <i>percentage</i>, set the corresponding value in
   78561     <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by the <var title="">input
   78562     dimension</var> and divided by 100. Then, decrement <var title="">remaining space</var> by <var title="">total
   78563     percentage</var> multiplied by the <var title="">input
   78564     dimension</var> and divided by 100.</p>
   78565 
   78566    </li>
   78567 
   78568    <li>
   78569 
   78570     <p>For each entry in <var title="">input list</var> whose unit is
   78571     <i>relative</i>, set the corresponding value in <var title="">output list</var> to the number of the entry in <var title="">input list</var> multiplied by <var title="">remaining
   78572     space</var> and divided by <var title="">total relative</var>.</p>
   78573 
   78574    </li>
   78575 
   78576    <li><p>Return <var title="">output list</var>.</li>
   78577 
   78578   </ol><p>User agents working with integer values for frame widths (as
   78579   opposed to user agents that can lay frames out with subpixel
   78580   accuracy) are expected to distribute the remainder first to the last
   78581   entry whose unit is <i>relative</i>, then equally (not
   78582   proportionally) to each entry whose unit is <i>percentage</i>, then
   78583   equally (not proportionally) to each entry whose unit is
   78584   <i>absolute</i>, and finally, failing all else, to the last
   78585   entry.</p>
   78586 
   78587 
   78588   </div>
   78589 
   78590 
   78591   <div class=impl>
   78592 
   78593   <h3 id=interactive-media><span class=secno>12.6 </span>Interactive media</h3>
   78594 
   78595   <h4 id=links,-forms,-and-navigation><span class=secno>12.6.1 </span>Links, forms, and navigation</h4>
   78596 
   78597   <p>User agents are expected to allow the user to control aspects of
   78598   <a href=#hyperlink>hyperlink</a> activation and <a href=#form-submission>form submission</a>,
   78599   such as which <a href=#browsing-context>browsing context</a> is to be used for the
   78600   subsequent <a href=#navigate title=navigate>navigation</a>.</p>
   78601 
   78602   <p>User agents are expected to allow users to discover the
   78603   destination of <a href=#hyperlink title=hyperlink>hyperlinks</a> and of
   78604   <a href=#the-form-element title=form>forms</a> before triggering their <a href=#navigate title=navigate>navigation</a>.</p>
   78605 
   78606 <!--PING-->
   78607   <p>User agents are expected to inform the user of whether a
   78608   <a href=#hyperlink>hyperlink</a> includes <a href=#hyperlink-auditing>hyperlink auditing</a>, and
   78609   to let them know at a minimum which domains will be contacted as
   78610   part of such auditing.</p>
   78611 <!--PING-->
   78612 
   78613   <p>User agents are expected to allow users to <a href=#navigate>navigate</a>
   78614   <a href=#browsing-context title="browsing context">browsing contexts</a> to the
   78615   resources <a href=#resolve-a-url title="resolve a url">indicated</a> by the <code title="">cite</code> attributes on <code><a href=#the-q-element>q</a></code>,
   78616   <code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-section-element>section</a></code>, <code><a href=#the-article-element>article</a></code>,
   78617   <code><a href=#the-ins-element>ins</a></code>, and <code><a href=#the-del-element>del</a></code> elements.</p>
   78618 
   78619   <p>User agents are expected to surface <a href=#hyperlink title=hyperlink>hyperlinks</a> created by <code><a href=#the-link-element>link</a></code>
   78620   elements in their user interface.</p>
   78621 
   78622   <p class=note>While <code><a href=#the-link-element>link</a></code> elements that create <a href=#hyperlink title=hyperlink>hyperlinks</a> will match the ':link' or
   78623   ':visited' pseudo-classes, will react to clicks if visible, and so
   78624   forth, this does not extend to any browser interface constructs that
   78625   expose those same links. Activating a link through the browser's
   78626   interface, rather than in the page itself, does not trigger <code title=event-click><a href=#event-click>click</a></code> events and the like.</p>
   78627 
   78628 
   78629 
   78630 
   78631   <h4 id=the-title-attribute-0><span class=secno>12.6.2 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
   78632 
   78633   <p>Given an element (e.g. the element designated by the mouse
   78634   cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
   78635   attribute has a value that is not the empty string, it is expected
   78636   that the user agent will expose the contents of that attribute as a
   78637   tooltip.</p>
   78638 
   78639   <p>User agents are encouraged to make it possible to view tooltips
   78640   without the use of a pointing device, since not all users are able
   78641   to use pointing devices.</p>
   78642 
   78643   <p>U+000A LINE FEED (LF) characters are expected to cause line
   78644   breaks in the tooltip.</p>
   78645 
   78646 
   78647   <h4 id=editing-hosts><span class=secno>12.6.3 </span>Editing hosts</h4>
   78648 
   78649   <p>The current text editing caret (the one at the <a href=#caret-position>caret
   78650   position</a> in a focused <a href=#editing-host>editing host</a>) is expected
   78651   to act like an inline replaced element with the vertical dimensions
   78652   of the caret and with zero width for the purposes of the CSS
   78653   rendering model.</p>
   78654 
   78655   <p class=note>This means that even an empty block can have the
   78656   caret inside it, and that when the caret is in such an element, it
   78657   prevents margins from collapsing through the element.</p>
   78658 
   78659 
   78660 
   78661 
   78662   <h3 id=print-media><span class=secno>12.7 </span>Print media</h3>
   78663 
   78664   <p>User agents are expected to allow the user to request the
   78665   opportunity to <dfn id=obtain-a-physical-form>obtain a physical form</dfn> (or a
   78666   representation of a physical form) of a <code><a href=#document>Document</a></code>. For
   78667   example, selecting the option to print a page or convert it to PDF
   78668   format.</p>
   78669 
   78670   <p>When the user actually <a href=#obtain-a-physical-form title="obtain a physical
   78671   form">obtains a physical form</a> (or a representation of a
   78672   physical form) of a <code><a href=#document>Document</a></code>, the user agent is
   78673   expected to create a new rendering of the <code><a href=#document>Document</a></code> for
   78674   the print media.</p>
   78675 
   78676 
   78677 
   78678   </div>
   78679 
   78680 
   78681 
   78682   <h2 id=obsolete><span class=secno>13 </span>Obsolete features</h2>
   78683 
   78684   <h3 id=obsolete-but-conforming-features><span class=secno>13.1 </span>Obsolete but conforming features</h3>
   78685 
   78686   <p>Features listed in this section will trigger warnings in
   78687   conformance checkers.</p>
   78688 
   78689   <p>Authors should not specify an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   78690   <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
   78691   Language</a> state on a <code><a href=#meta>meta</a></code> element. The <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute should be used instead.</p>
   78692 
   78693   <p>Authors should not specify a <code title=attr-img-border><a href=#attr-img-border>border</a></code> attribute on an
   78694   <code><a href=#the-img-element>img</a></code> element. If the attribute is present, its value
   78695   must be the string "<code title="">0</code>". CSS should be used
   78696   instead.</p>
   78697 
   78698   <p>Authors should not specify a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute on a
   78699   <code><a href=#script>script</a></code> element. If the attribute is present, its value
   78700   must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   78701   "<code title="">JavaScript</code>" and either the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute must be omitted or
   78702   its value must be an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for
   78703   the string "<code title="">text/javascript</code>". The attribute
   78704   should be entirely omitted instead (with the value "<code title="">JavaScript</code>", it has no effect), or replaced with use
   78705   of the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute.</p>
   78706 
   78707   <p>Authors should not specify the <code title=attr-a-name><a href=#attr-a-name>name</a></code> attribute on <code><a href=#the-a-element>a</a></code>
   78708   elements. If the attribute is present, its value must not be the
   78709   empty string and must neither be equal to the value of any of the
   78710   <a href=#concept-id title=concept-id>IDs</a> in the element's <a href=#home-subtree>home
   78711   subtree</a> other than the element's own <a href=#concept-id title=concept-id>ID</a>, if any, nor be equal to the value of
   78712   any of the other <code title=attr-a-name><a href=#attr-a-name>name</a></code> attributes on
   78713   <code><a href=#the-a-element>a</a></code> elements in the element's <a href=#home-subtree>home
   78714   subtree</a>. If this attribute is present and the element has an
   78715   <a href=#concept-id title=concept-id>ID</a>, then the attribute's value must
   78716   be equal to the element's <a href=#concept-id title=concept-id>ID</a>. In
   78717   earlier versions of the language, this attribute was intended as a
   78718   way to specify possible targets for fragment identifiers in <a href=#url title=URL>URLs</a>. The <code title=attr-id><a href=#the-id-attribute>id</a></code>
   78719   attribute should be used instead.</p>
   78720 
   78721   <p class=note>In <a href=#syntax>the HTML syntax</a>, specifying a <a href=#syntax-doctype title=syntax-DOCTYPE>DOCTYPE</a> that is an <a href=#obsolete-permitted-doctype>obsolete
   78722   permitted DOCTYPE</a> will also trigger a warning.</p>
   78723 
   78724   <p class=note>The <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code>
   78725   attribute, defined in the <code><a href=#the-table-element>table</a></code> section, will also
   78726   trigger a warning.</p>
   78727 
   78728 
   78729   <div class=impl>
   78730 
   78731   <h4 id=warnings-for-obsolete-but-conforming-features><span class=secno>13.1.1 </span>Warnings for obsolete but conforming features</h4>
   78732 
   78733   <p>To ease the transition from HTML4 Transitional documents to the
   78734   language defined in <em>this</em> specification, and to discourage
   78735   certain features that are only allowed in very few circumstances,
   78736   conformance checkers are required to warn the user when the
   78737   following features are used in a document. These are generally old
   78738   obsolete features that have no effect, and are allowed only to
   78739   distinguish between likely mistakes (regular conformance errors) and
   78740   mere vestigial markup or unusual and discouraged practices (these
   78741   warnings).</p>
   78742 
   78743   <p>The following features must be categorized as described
   78744   above:</p>
   78745 
   78746   <ul><!-- downplayed list --><li><p>The presence of an <a href=#obsolete-permitted-doctype>obsolete permitted DOCTYPE</a>
   78747    in an <a href=#html-documents title="HTML documents">HTML document</a>.</li>
   78748 
   78749    <li><p>The presence of a <code><a href=#meta>meta</a></code> element with an <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the
   78750    <a href=#attr-meta-http-equiv-content-language title=attr-meta-http-equiv-content-language>Content
   78751    Language</a> state.</li>
   78752 
   78753    <li><p>The presence of a <code title=attr-img-border><a href=#attr-img-border>border</a></code> attribute on an
   78754    <code><a href=#the-img-element>img</a></code> element if its value is the string "<code title="">0</code>".</li>
   78755 
   78756    <li><p>The presence of a <code title=attr-script-language><a href=#attr-script-language>language</a></code> attribute on a
   78757    <code><a href=#script>script</a></code> element if its value is an <a href=#ascii-case-insensitive>ASCII
   78758    case-insensitive</a> match for the string "<code title="">JavaScript</code>" and if there is no <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute or there is and its
   78759    value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
   78760    string "<code title="">text/javascript</code>".</li>
   78761 
   78762    <li><p>The presence of a <code title=attr-a-name><a href=#attr-a-name>name</a></code>
   78763    attribute on an <code><a href=#the-a-element>a</a></code> element, if its value is not the
   78764    empty string.</li>
   78765 
   78766    <li><p>The presence of a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute on a
   78767    <code><a href=#the-table-element>table</a></code> element.</li> <!-- 2.65% pages -->
   78768 
   78769   </ul><p>Conformance checkers must distinguish between pages that have no
   78770   conformance errors and have none of these obsolete features, and
   78771   pages that have no conformance errors but do have some of these
   78772   obsolete features.</p>
   78773 
   78774   <p class=example>For example, a validator could report some pages
   78775   as "Valid HTML" and others as "Valid HTML with warnings".</p>
   78776 
   78777   </div>
   78778 
   78779 
   78780   <h3 id=non-conforming-features><span class=secno>13.2 </span>Non-conforming features</h3>
   78781 
   78782   <p>Elements in the following list are entirely obsolete, and must
   78783   not be used by authors:</p>
   78784 
   78785   <dl><!-- alphabetical by first element in the group, except CSS goes last --><dt><code><a href=#the-applet-element>applet</a></code></dt>
   78786    <dd><p>Use <code><a href=#the-embed-element>embed</a></code> or <code><a href=#the-object-element>object</a></code> instead.</dd>
   78787 
   78788    <dt><dfn id=acronym><code>acronym</code></dfn></dt>
   78789    <dd><p>Use <code><a href=#the-abbr-element>abbr</a></code> instead.</dd>
   78790 
   78791    <dt><dfn id=bgsound><code>bgsound</code></dfn></dt>
   78792    <dd><p>Use <code><a href=#audio>audio</a></code> instead.</dd>
   78793 
   78794    <dt><dfn id=dir><code>dir</code></dfn></dt>
   78795    <dd><p>Use <code><a href=#the-ul-element>ul</a></code> instead.</dd>
   78796 
   78797    <dt><code><a href=#frame>frame</a></code></dt>
   78798    <dt><code><a href=#frameset>frameset</a></code></dt>
   78799    <dt><dfn id=noframes><code>noframes</code></dfn></dt>
   78800    <dd><p>Either use <code><a href=#the-iframe-element>iframe</a></code> and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.</dd>
   78801 
   78802    <dt><dfn id=isindex-0><code>isindex</code></dfn></dt>
   78803    <dd><p>Use an explicit <code><a href=#the-form-element>form</a></code> and <a href=#text-state-and-search-state title=attr-input-type-text>text field</a> combination instead.</dd>
   78804 
   78805    <dt><dfn id=listing><code>listing</code></dfn></dt>
   78806    <dt><dfn id=xmp><code>xmp</code></dfn></dt>
   78807    <dd><p>Use <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> instead.</dd>
   78808 
   78809    <dt><dfn id=nextid><code>nextid</code></dfn></dt>
   78810    <dd><p>Use GUIDs instead.</dd>
   78811 
   78812    <dt><dfn id=noembed><code>noembed</code></dfn></dt>
   78813    <dd><p>Use <code><a href=#the-object-element>object</a></code> instead of <code><a href=#the-embed-element>embed</a></code> when fallback is necessary.</dd>
   78814 
   78815    <dt><dfn id=plaintext><code>plaintext</code></dfn></dt>
   78816    <dd><p>Use the "<code>text/plain</code>" <a href=#mime-type>MIME type</a> instead.</dd>
   78817 
   78818    <dt><dfn id=rb><code>rb</code></dfn></dt>
   78819    <dd><p>Providing the ruby base directly inside the <code><a href=#the-ruby-element>ruby</a></code> element is sufficient; the <code><a href=#rb>rb</a></code> element is unnecessary. Omit it altogether.</dd>
   78820 
   78821    <dt><dfn id=basefont><code>basefont</code></dfn></dt>
   78822    <dt><dfn id=big><code>big</code></dfn></dt>
   78823    <dt><dfn id=blink><code>blink</code></dfn></dt>
   78824    <dt><dfn id=center><code>center</code></dfn></dt>
   78825    <dt><dfn id=font><code>font</code></dfn></dt>
   78826    <dt><code><a href=#the-marquee-element>marquee</a></code></dt>
   78827    <dt><dfn id=multicol><code>multicol</code></dfn></dt>
   78828    <dt><dfn id=nobr><code>nobr</code></dfn></dt>
   78829    <dt><dfn id=s><code>s</code></dfn></dt>
   78830    <dt><dfn id=spacer><code>spacer</code></dfn></dt>
   78831    <dt><dfn id=strike><code>strike</code></dfn></dt>
   78832    <dt><dfn id=tt><code>tt</code></dfn></dt>
   78833    <dt><dfn id=u><code>u</code></dfn></dt>
   78834 
   78835    <dd>
   78836 
   78837     <p>Use appropriate elements and/or CSS instead.</p>
   78838 
   78839     <p>For the <code><a href=#s>s</a></code> and <code><a href=#strike>strike</a></code> elements, if
   78840     they are marking up a removal from the element, consider using the
   78841     <code><a href=#the-del-element>del</a></code> element instead.</p>
   78842 
   78843     <p>Where the <code><a href=#tt>tt</a></code> element would have been used for
   78844     marking up keyboard input, consider the <code><a href=#the-kbd-element>kbd</a></code> element;
   78845     for variables, consider the <code><a href=#the-var-element>var</a></code> element; for computer
   78846     code, consider the <code><a href=#the-code-element>code</a></code> element; and for computer
   78847     output, consider the <code><a href=#the-samp-element>samp</a></code> element.</p>
   78848 
   78849     <p>Similarly, if the <code><a href=#u>u</a></code> element is being used to
   78850     indicate emphasis, consider using the <code><a href=#the-em-element>em</a></code> element; if
   78851     it is being used for marking up keywords, consider the
   78852     <code><a href=#the-b-element>b</a></code> element; and if it is being used for highlighting
   78853     text for reference purposes, consider the <code><a href=#the-mark-element>mark</a></code>
   78854     element.</p>
   78855 
   78856     <p>See also the <a href=#usage-summary>text-level semantics
   78857     usage summary</a> for more suggestions with examples.</p>
   78858 
   78859    </dd>
   78860 
   78861   </dl><hr><p>The following attributes are obsolete (though the elements are
   78862   still part of the language), and must not be used by authors:</p>
   78863 
   78864   <dl><!-- alphabetical by element then attribute of first item in group, except CSS goes last --><dt><dfn id=attr-a-charset title=attr-a-charset><code>charset</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78865    <dt><dfn id=attr-link-charset title=attr-link-charset><code>charset</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   78866    <dd><p>Use an HTTP Content-Type header on the linked resource instead.</dd>
   78867 
   78868    <dt><dfn id=attr-a-coords title=attr-a-coords><code>coords</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78869    <dt><dfn id=attr-a-shape title=attr-a-shape><code>shape</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78870    <dd><p>Use <code><a href=#the-area-element>area</a></code> instead of <code><a href=#the-a-element>a</a></code> for image maps.</dd>
   78871 
   78872    <dt><dfn id=attr-a-methods title=attr-a-methods><code>methods</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78873    <dt><dfn id=attr-link-methods title=attr-link-methods><code>methods</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   78874    <dd><p>Use the HTTP OPTIONS feature instead.</dd>
   78875 
   78876    <dt><dfn id=attr-a-name title=attr-a-name><code>name</code></dfn> on <code><a href=#the-a-element>a</a></code> elements (except as noted in the previous section)</dt>
   78877    <dt><dfn id=attr-embed-name title=attr-embed-name><code>name</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   78878    <dt><dfn id=attr-img-name title=attr-img-name><code>name</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   78879    <dt><dfn id=attr-option-name title=attr-option-name><code>name</code></dfn> on <code><a href=#the-option-element>option</a></code> elements</dt>
   78880    <dd><p>Use the <code title=attr-id><a href=#the-id-attribute>id</a></code> attribute instead.</dd>
   78881 
   78882    <dt><dfn id=attr-a-rev title=attr-a-rev><code>rev</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78883    <dt><dfn id=attr-link-rev title=attr-link-rev><code>rev</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   78884    <dd><p>Use the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>
   78885    attribute instead, with an opposite term. (For example, instead of
   78886    <code title="">rev="made"</code>, use <code title="">rel="author"</code>.)</dd>
   78887 
   78888    <dt><dfn id=attr-a-urn title=attr-a-urn><code>urn</code></dfn> on <code><a href=#the-a-element>a</a></code> elements</dt>
   78889    <dt><dfn id=attr-link-urn title=attr-link-urn><code>urn</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   78890    <dd><p>Specify the preferred persistent identifier using the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute instead.</dd>
   78891 
   78892    <dt><dfn id=attr-area-nohref title=attr-area-nohref><code>nohref</code></dfn> on <code><a href=#the-area-element>area</a></code> elements</dt>
   78893    <dd><p>Omitting the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
   78894    attribute is sufficient; the <code title=attr-area-nohref><a href=#attr-area-nohref>nohref</a></code> attribute is
   78895    unnecessary. Omit it altogether.</dd>
   78896 
   78897    <dt><dfn id=attr-head-profile title=attr-head-profile><code>profile</code></dfn> on <code><a href=#the-head-element-0>head</a></code> elements</dt>
   78898    <dd><p>When used for declaring which <code><a href=#meta>meta</a></code> terms are
   78899    used in the document, unnecessary; omit it altogether, and <a href=#concept-meta-extensions title=concept-meta-extensions>register the names</a>.</dd>
   78900    <dd><p>When used for triggering specific user agent behaviors: use
   78901    a <code><a href=#the-link-element>link</a></code> element instead.</dd>
   78902 
   78903    <dt><dfn id=attr-html-version title=attr-html-version><code>version</code></dfn> on <code><a href=#the-html-element-0>html</a></code> elements</dt>
   78904    <dd><p>Unnecessary. Omit it altogether.</dd>
   78905 
   78906    <dt><dfn id=attr-input-usemap title=attr-input-usemap><code>usemap</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   78907    <dd><p>Use <code><a href=#the-img-element>img</a></code> instead of <code><a href=#the-input-element>input</a></code> for image maps.</dd>
   78908 
   78909    <dt><dfn id=attr-iframe-longdesc title=attr-iframe-longdesc><code>longdesc</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78910    <dt><dfn id=attr-img-longdesc title=attr-img-longdesc><code>longdesc</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   78911    <dd><p>Use a regular <code><a href=#the-a-element>a</a></code> element to link to the description.</dd>
   78912 
   78913    <dt><dfn id=attr-link-target title=attr-link-target><code>target</code></dfn> on <code><a href=#the-link-element>link</a></code> elements</dt>
   78914    <dd><p>Unnecessary. Omit it altogether.</dd>
   78915 
   78916    <dt><dfn id=attr-meta-scheme title=attr-meta-scheme><code>scheme</code></dfn> on <code><a href=#meta>meta</a></code> elements</dt>
   78917    <dd><p>Use only one scheme per field, or make the scheme declaration part of the value.</dd>
   78918 
   78919    <dt><dfn id=attr-object-archive title=attr-object-archive><code>archive</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78920    <dt><dfn id=attr-object-classid title=attr-object-classid><code>classid</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78921    <dt><dfn id=attr-object-code title=attr-object-code><code>code</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78922    <dt><dfn id=attr-object-codebase title=attr-object-codebase><code>codebase</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78923    <dt><dfn id=attr-object-codetype title=attr-object-codetype><code>codetype</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78924    <dd><p>Use the <code title=attr-object-data><a href=#attr-object-data>data</a></code> and <code title=attr-object-type><a href=#attr-object-type>type</a></code> attributes to invoke <a href=#plugin title=plugin>plugins</a>. To set parameters with these names
   78925    in particular, the <code><a href=#the-param-element>param</a></code> element can be used.</dd>
   78926 
   78927    <dt><dfn id=attr-object-declare title=attr-object-declare><code>declare</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78928    <dd><p>Repeat the <code><a href=#the-object-element>object</a></code> element completely each time the resource is to be reused.</dd>
   78929 
   78930    <dt><dfn id=attr-object-standby title=attr-object-standby><code>standby</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   78931    <dd><p>Optimize the linked resource so that it loads quickly or, at least, incrementally.</dd>
   78932 
   78933    <dt><dfn id=attr-param-type title=attr-param-type><code>type</code></dfn> on <code><a href=#the-param-element>param</a></code> elements</dt>
   78934    <dt><dfn id=attr-param-valuetype title=attr-param-valuetype><code>valuetype</code></dfn> on <code><a href=#the-param-element>param</a></code> elements</dt>
   78935    <dd><p>Use the <code title=attr-param-name><a href=#attr-param-name>name</a></code> and <code title=attr-param-value><a href=#attr-param-value>value</a></code> attributes without declaring
   78936    value types.</dd>
   78937 
   78938    <dt><dfn id=attr-script-language title=attr-script-language><code>language</code></dfn> on <code><a href=#script>script</a></code> elements (except as noted in the previous section)</dt>
   78939    <dd><p>Use the <code title=attr-script-type><a href=#attr-script-type>type</a></code> attribute
   78940    instead.</dd>
   78941 
   78942    <dt><dfn id=attr-script-event title=attr-script-event><code>event</code></dfn> on <code><a href=#script>script</a></code> elements</dt>
   78943    <dt><dfn id=attr-script-for title=attr-script-for><code>for</code></dfn> on <code><a href=#script>script</a></code> elements</dt>
   78944    <dd><p>Use DOM Events mechanisms to register event listeners. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></dd>
   78945 
   78946    <dt><dfn id=attr-table-datapagesize title=attr-table-datapagesize><code>datapagesize</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   78947    <dd><p>Unnecessary. Omit it altogether.</dd>
   78948 
   78949    <dt><dfn id=attr-tdth-abbr title=attr-tdth-abbr><code>abbr</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   78950    <dd><p>Use text that begins in an unambiguous and terse manner, and include any more elaborate text after that. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can also be useful in including more detailed text, so that the cell's contents can be made terse.</p>
   78951 
   78952    <dt><dfn id=attr-tdth-axis title=attr-tdth-axis><code>axis</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   78953    <dd><p>Use the <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attribute on the relevant <code><a href=#the-th-element>th</a></code>.</p>
   78954 
   78955    <dt><dfn id=attr-datasrc title=attr-datasrc><code>datasrc</code></dfn> on <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-option-element>option</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, <code><a href=#the-table-element>table</a></code>, and <code><a href=#the-textarea-element>textarea</a></code> elements</dt>
   78956    <dt><dfn id=attr-datafld title=attr-datafld><code>datafld</code></dfn> on <code><a href=#the-a-element>a</a></code>, <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, and <code><a href=#the-textarea-element>textarea</a></code> elements</dt>
   78957    <dt><dfn id=attr-dataformatas title=attr-dataformatas><code>dataformatas</code></dfn> on <code><a href=#the-button-element>button</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-label-element>label</a></code>, <code><a href=#the-legend-element>legend</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-option-element>option</a></code>, <code><a href=#the-select-element>select</a></code>, <code><a href=#the-span-element>span</a></code>, <code><a href=#the-table-element>table</a></code></dt>
   78958    <dd><p>Use script and a mechanism such as <code>XMLHttpRequest</code> to populate the page dynamically. <a href=#refsXHR>[XHR]</a></dd>
   78959 
   78960    <dt><dfn id=attr-body-alink title=attr-body-alink><code>alink</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78961    <dt><dfn id=attr-body-bgcolor title=attr-body-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78962    <dt><dfn id=attr-body-link title=attr-body-link><code>link</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78963    <dt><dfn id=attr-body-marginbottom title=attr-body-marginbottom><code>marginbottom</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78964    <dt><dfn id=attr-body-marginheight title=attr-body-marginheight><code>marginheight</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78965    <dt><dfn id=attr-body-marginleft title=attr-body-marginleft><code>marginleft</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78966    <dt><dfn id=attr-body-marginright title=attr-body-marginright><code>marginright</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78967    <dt><dfn id=attr-body-margintop title=attr-body-margintop><code>margintop</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78968    <dt><dfn id=attr-body-marginwidth title=attr-body-marginwidth><code>marginwidth</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78969    <dt><dfn id=attr-body-text title=attr-body-text><code>text</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78970    <dt><dfn id=attr-body-vlink title=attr-body-vlink><code>vlink</code></dfn> on <code><a href=#the-body-element-0>body</a></code> elements</dt>
   78971    <dt><dfn id=attr-br-clear title=attr-br-clear><code>clear</code></dfn> on <code><a href=#the-br-element>br</a></code> elements</dt>
   78972    <dt><dfn id=attr-caption-align title=attr-caption-align><code>align</code></dfn> on <code><a href=#the-caption-element>caption</a></code> elements</dt>
   78973    <dt><dfn id=attr-col-align title=attr-col-align><code>align</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   78974    <dt><dfn id=attr-col-char title=attr-col-char><code>char</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   78975    <dt><dfn id=attr-col-charoff title=attr-col-charoff><code>charoff</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   78976    <dt><dfn id=attr-col-valign title=attr-col-valign><code>valign</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   78977    <dt><dfn id=attr-col-width title=attr-col-width><code>width</code></dfn> on <code><a href=#the-col-element>col</a></code> elements</dt>
   78978    <dt><dfn id=attr-div-align title=attr-div-align><code>align</code></dfn> on <code><a href=#the-div-element>div</a></code> elements</dt>
   78979    <dt><dfn id=attr-dl-compact title=attr-dl-compact><code>compact</code></dfn> on <code><a href=#the-dl-element>dl</a></code> elements</dt>
   78980    <dt><dfn id=attr-embed-align title=attr-embed-align><code>align</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   78981    <dt><dfn id=attr-embed-hspace title=attr-embed-hspace><code>hspace</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   78982    <dt><dfn id=attr-embed-vspace title=attr-embed-vspace><code>vspace</code></dfn> on <code><a href=#the-embed-element>embed</a></code> elements</dt>
   78983    <dt><dfn id=attr-hr-align title=attr-hr-align><code>align</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   78984    <dt><dfn id=attr-hr-color title=attr-hr-color><code>color</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   78985    <dt><dfn id=attr-hr-noshade title=attr-hr-noshade><code>noshade</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   78986    <dt><dfn id=attr-hr-size title=attr-hr-size><code>size</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   78987    <dt><dfn id=attr-hr-width title=attr-hr-width><code>width</code></dfn> on <code><a href=#the-hr-element>hr</a></code> elements</dt>
   78988    <dt><dfn id=attr-hx-align title=attr-hx-align><code>align</code></dfn> on <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&mdash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements</dt>
   78989    <dt><dfn id=attr-iframe-align title=attr-iframe-align><code>align</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78990    <dt><dfn id=attr-iframe-allowtransparency title=attr-iframe-allowtransparency><code>allowtransparency</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78991    <dt><dfn id=attr-iframe-frameborder title=attr-iframe-frameborder><code>frameborder</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78992    <dt><dfn id=attr-iframe-hspace title=attr-iframe-hspace><code>hspace</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78993    <dt><dfn id=attr-iframe-marginheight title=attr-iframe-marginheight><code>marginheight</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78994    <dt><dfn id=attr-iframe-marginwidth title=attr-iframe-marginwidth><code>marginwidth</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78995    <dt><dfn id=attr-iframe-scrolling title=attr-iframe-scrolling><code>scrolling</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78996    <dt><dfn id=attr-iframe-vspace title=attr-iframe-vspace><code>vspace</code></dfn> on <code><a href=#the-iframe-element>iframe</a></code> elements</dt>
   78997    <dt><dfn id=attr-input-align title=attr-input-align><code>align</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   78998    <dt><dfn id=attr-input-hspace title=attr-input-hspace><code>hspace</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   78999    <dt><dfn id=attr-input-vspace title=attr-input-vspace><code>vspace</code></dfn> on <code><a href=#the-input-element>input</a></code> elements</dt>
   79000    <dt><dfn id=attr-img-align title=attr-img-align><code>align</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   79001    <dt><dfn id=attr-img-border title=attr-img-border><code>border</code></dfn> on <code><a href=#the-img-element>img</a></code> elements (except as noted in the previous section)</dt>
   79002    <dt><dfn id=attr-img-hspace title=attr-img-hspace><code>hspace</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   79003    <dt><dfn id=attr-img-vspace title=attr-img-vspace><code>vspace</code></dfn> on <code><a href=#the-img-element>img</a></code> elements</dt>
   79004    <dt><dfn id=attr-legend-align title=attr-legend-align><code>align</code></dfn> on <code><a href=#the-legend-element>legend</a></code> elements</dt>
   79005    <dt><dfn id=attr-li-type title=attr-li-type><code>type</code></dfn> on <code><a href=#the-li-element>li</a></code> elements</dt>
   79006    <dt><dfn id=attr-menu-compact title=attr-menu-compact><code>compact</code></dfn> on <code><a href=#menus>menu</a></code> elements</dt>
   79007    <dt><dfn id=attr-object-align title=attr-object-align><code>align</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   79008    <dt><dfn id=attr-object-border title=attr-object-border><code>border</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   79009    <dt><dfn id=attr-object-hspace title=attr-object-hspace><code>hspace</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   79010    <dt><dfn id=attr-object-vspace title=attr-object-vspace><code>vspace</code></dfn> on <code><a href=#the-object-element>object</a></code> elements</dt>
   79011    <dt><dfn id=attr-ol-compact title=attr-ol-compact><code>compact</code></dfn> on <code><a href=#the-ol-element>ol</a></code> elements</dt>
   79012    <dt><dfn id=attr-ol-type title=attr-ol-type><code>type</code></dfn> on <code><a href=#the-ol-element>ol</a></code> elements</dt>
   79013    <dt><dfn id=attr-p-align title=attr-p-align><code>align</code></dfn> on <code><a href=#the-p-element>p</a></code> elements</dt>
   79014    <dt><dfn id=attr-pre-width title=attr-pre-width><code>width</code></dfn> on <code><a href=#the-pre-element>pre</a></code> elements</dt>
   79015    <dt><dfn id=attr-table-align title=attr-table-align><code>align</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79016    <dt><dfn id=attr-table-bgcolor title=attr-table-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79017    <dt><dfn id=attr-table-border title=attr-table-border><code>border</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79018    <dt><dfn id=attr-table-cellpadding title=attr-table-cellpadding><code>cellpadding</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79019    <dt><dfn id=attr-table-cellspacing title=attr-table-cellspacing><code>cellspacing</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79020    <dt><dfn id=attr-table-frame title=attr-table-frame><code>frame</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79021    <dt><dfn id=attr-table-rules title=attr-table-rules><code>rules</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79022    <dt><dfn id=attr-table-width title=attr-table-width><code>width</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
   79023    <dt><dfn id=attr-tbody-align title=attr-tbody-align><code>align</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   79024    <dt><dfn id=attr-tbody-char title=attr-tbody-char><code>char</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   79025    <dt><dfn id=attr-tbody-charoff title=attr-tbody-charoff><code>charoff</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   79026    <dt><dfn id=attr-tbody-valign title=attr-tbody-vAlign><code>valign</code></dfn> on <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and <code><a href=#the-tfoot-element>tfoot</a></code> elements</dt>
   79027    <dt><dfn id=attr-tdth-align title=attr-tdth-align><code>align</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79028    <dt><dfn id=attr-tdth-bgcolor title=attr-tdth-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79029    <dt><dfn id=attr-tdth-char title=attr-tdth-char><code>char</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79030    <dt><dfn id=attr-tdth-charoff title=attr-tdth-charoff><code>charoff</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79031    <dt><dfn id=attr-tdth-height title=attr-tdth-height><code>height</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79032    <dt><dfn id=attr-tdth-nowrap title=attr-tdth-nowrap><code>nowrap</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79033    <dt><dfn id=attr-tdth-valign title=attr-tdth-valign><code>valign</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79034    <dt><dfn id=attr-tdth-width title=attr-tdth-width><code>width</code></dfn> on <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements</dt>
   79035    <dt><dfn id=attr-tr-align title=attr-tr-align><code>align</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   79036    <dt><dfn id=attr-tr-bgcolor title=attr-tr-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   79037    <dt><dfn id=attr-tr-char title=attr-tr-char><code>char</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   79038    <dt><dfn id=attr-tr-charoff title=attr-tr-charoff><code>charoff</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   79039    <dt><dfn id=attr-tr-valign title=attr-tr-valign><code>valign</code></dfn> on <code><a href=#the-tr-element>tr</a></code> elements</dt>
   79040    <dt><dfn id=attr-ul-compact title=attr-ul-compact><code>compact</code></dfn> on <code><a href=#the-ul-element>ul</a></code> elements</dt>
   79041    <dt><dfn id=attr-ul-type title=attr-ul-type><code>type</code></dfn> on <code><a href=#the-ul-element>ul</a></code> elements</dt>
   79042    <dt><dfn id=attr-background title=attr-background><code>background</code></dfn> on <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements</dt>
   79043    <dd><p>Use CSS instead.</dd>
   79044 
   79045   </dl><div class=impl>
   79046 
   79047   <h3 id=requirements-for-implementations><span class=secno>13.3 </span>Requirements for implementations</h3>
   79048 
   79049   <h4 id=the-applet-element><span class=secno>13.3.1 </span>The <dfn><code>applet</code></dfn> element</h4>
   79050 
   79051   <p>The <code><a href=#the-applet-element>applet</a></code> element is a Java-specific variant of the
   79052   <code><a href=#the-embed-element>embed</a></code> element. The <code><a href=#the-applet-element>applet</a></code> element is now
   79053   obsoleted so that all extension frameworks (Java, .NET, Flash, etc)
   79054   are handled in a consistent manner.</p>
   79055 
   79056   <p id=sandboxPluginApplet>When the element is still in the
   79057   <a href=#stack-of-open-elements>stack of open elements</a> of an <a href=#html-parser>HTML parser</a>
   79058   or <a href=#xml-parser>XML parser</a>, and when the element is not <a href=#in-a-document>in a
   79059   <code>Document</code></a>, and when the element's document is not
   79060   <a href=#fully-active>fully active</a>, and when the element's
   79061   <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> had its
   79062   <a href=#sandboxed-plugins-browsing-context-flag>sandboxed plugins browsing context flag</a> when that
   79063   <code><a href=#document>Document</a></code> was created, and when the element's
   79064   <code><a href=#document>Document</a></code> was parsed from a resource whose <a href=#content-type-sniffing-0 title="Content-Type sniffing">sniffed type</a> as determined
   79065   during <a href=#navigate title=navigate>navigation</a> is
   79066   <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>, and when the element has an
   79067   ancestor <a href=#media-element>media element</a>, and when the element has an
   79068   ancestor <code><a href=#the-object-element>object</a></code> element that is <em>not</em> showing
   79069   its <a href=#fallback-content>fallback content</a>, and when no Java Language runtime
   79070   <a href=#plugin>plugin</a> is available, and when one <em>is</em> available
   79071   but it is disabled, the element <a href=#represents>represents</a> its
   79072   contents.</p>
   79073 
   79074   <p>Otherwise, the user agent should instantiate a Java Language
   79075   runtime <a href=#plugin>plugin</a>, and should pass the names and values of
   79076   all the attributes on the element, in the order they were added to
   79077   the element, with the attributes added by the parser being ordered
   79078   in source order, and then a parameter named "PARAM" whose value is
   79079   null, and then all the names and values of <a href=#concept-param-parameter title=concept-param-parameter>parameters</a> given by
   79080   <code><a href=#the-param-element>param</a></code> elements that are children of the
   79081   <code><a href=#the-applet-element>applet</a></code> element, in <a href=#tree-order>tree order</a>, to the
   79082   <a href=#plugin>plugin</a> used. If the <a href=#plugin>plugin</a> supports a
   79083   scriptable interface, the <code><a href=#htmlappletelement>HTMLAppletElement</a></code> object
   79084   representing the element should expose that interface. The
   79085   <code><a href=#the-applet-element>applet</a></code> element <a href=#represents>represents</a> the
   79086   <a href=#plugin>plugin</a>.</p>
   79087 
   79088   <!-- If we ever make this fetch anything manually, remember to delay
   79089   the load event, and to include ", from the element's <span>browsing
   79090   context scope origin</span> if it has one" when fetching -->
   79091 
   79092   <p class=note>The <code><a href=#the-applet-element>applet</a></code> element is unaffected by the
   79093   CSS 'display' property. The Java Language runtime is instantiated
   79094   even if the element is hidden with a 'display:none' CSS style.</p>
   79095 
   79096   <p>The <code><a href=#the-applet-element>applet</a></code> element must implement the
   79097   <code><a href=#htmlappletelement>HTMLAppletElement</a></code> interface.</p>
   79098 
   79099   <pre class=idl>interface <dfn id=htmlappletelement>HTMLAppletElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79100            attribute DOMString <a href=#dom-applet-align title=dom-applet-align>align</a>;
   79101            attribute DOMString <a href=#dom-applet-alt title=dom-applet-alt>alt</a>;
   79102            attribute DOMString <a href=#dom-applet-archive title=dom-applet-archive>archive</a>;
   79103            attribute DOMString <a href=#dom-applet-code title=dom-applet-code>code</a>;
   79104            attribute DOMString <a href=#dom-applet-codebase title=dom-applet-codeBase>codeBase</a>;
   79105            attribute DOMString <a href=#dom-applet-height title=dom-applet-height>height</a>;
   79106            attribute unsigned long <a href=#dom-applet-hspace title=dom-applet-hspace>hspace</a>;
   79107            attribute DOMString <a href=#dom-applet-name title=dom-applet-name>name</a>;
   79108            attribute DOMString _<a href=#dom-applet-object title=dom-applet-object>object</a>; // the underscore is not part of the identifier <!-- it's a Web IDL escaping mechanism -->
   79109            attribute unsigned long <a href=#dom-applet-vspace title=dom-applet-vspace>vspace</a>;
   79110            attribute DOMString <a href=#dom-applet-width title=dom-applet-width>width</a>;
   79111 };</pre>
   79112 
   79113   <p>The <dfn id=dom-applet-align title=dom-applet-align><code>align</code></dfn>, <dfn id=dom-applet-alt title=dom-applet-alt><code>alt</code></dfn>, <dfn id=dom-applet-archive title=dom-applet-archive><code>archive</code></dfn>, <dfn id=dom-applet-code title=dom-applet-code><code>code</code></dfn>, <dfn id=dom-applet-height title=dom-applet-height><code>height</code></dfn>, <dfn id=dom-applet-hspace title=dom-applet-hspace><code>hspace</code></dfn>, <dfn id=dom-applet-name title=dom-applet-name><code>name</code></dfn>, <dfn id=dom-applet-object title=dom-applet-object><code>object</code></dfn>, <dfn id=dom-applet-vspace title=dom-applet-vspace><code>vspace</code></dfn>, and <dfn id=dom-applet-width title=dom-applet-width><code>width</code></dfn> IDL attributes
   79114   must <a href=#reflect>reflect</a> the respective content attributes of the
   79115   same name.</p>
   79116 
   79117   <p>The <dfn id=dom-applet-codebase title=dom-applet-codeBase><code>codeBase</code></dfn>
   79118   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-applet-codebase>codebase</code> content attribute.</p>
   79119 
   79120 
   79121   <h4 id=the-marquee-element><span class=secno>13.3.2 </span>The <dfn><code>marquee</code></dfn> element</h4>
   79122 
   79123   <p>The <code><a href=#the-marquee-element>marquee</a></code> element is a presentational element that
   79124   animates content. CSS transitions and animations are a more
   79125   appropriate mechanism.</p>
   79126 
   79127   <p>The <a href=#task-source>task source</a> for tasks mentioned in this section
   79128   is the <a href=#dom-manipulation-task-source>DOM manipulation task source</a>.</p>
   79129 
   79130   <p>The <code><a href=#the-marquee-element>marquee</a></code> element must implement the
   79131   <code><a href=#htmlmarqueeelement>HTMLMarqueeElement</a></code> interface.</p>
   79132 
   79133   <pre class=idl>interface <dfn id=htmlmarqueeelement>HTMLMarqueeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79134            attribute DOMString <a href=#dom-marquee-behavior title=dom-marquee-behavior>behavior</a>;
   79135            attribute DOMString <a href=#dom-marquee-bgcolor title=dom-marquee-bgColor>bgColor</a>;
   79136            attribute DOMString <a href=#dom-marquee-direction title=dom-marquee-direction>direction</a>;
   79137            attribute DOMString <a href=#dom-marquee-height title=dom-marquee-height>height</a>;
   79138            attribute unsigned long <a href=#dom-marquee-hspace title=dom-marquee-hspace>hspace</a>;
   79139            attribute long <a href=#dom-marquee-loop title=dom-marquee-loop>loop</a>;
   79140            attribute unsigned long <a href=#dom-marquee-scrollamount title=dom-marquee-scrollamount>scrollAmount</a>;
   79141            attribute unsigned long <a href=#dom-marquee-scrolldelay title=dom-marquee-scrollDelay>scrollDelay</a>;
   79142            attribute DOMString <a href=#dom-marquee-truespeed title=dom-marquee-trueSpeed>trueSpeed</a>;
   79143            attribute unsigned long <a href=#dom-marquee-vspace title=dom-marquee-vspace>vspace</a>;
   79144            attribute DOMString <a href=#dom-marquee-width title=dom-marquee-width>width</a>;
   79145 
   79146            attribute <a href=#function>Function</a> <a href=#handler-marquee-onbounce title=handler-marquee-onbounce>onbounce</a>;
   79147            attribute <a href=#function>Function</a> <a href=#handler-marquee-onfinish title=handler-marquee-onfinish>onfinish</a>;
   79148            attribute <a href=#function>Function</a> <a href=#handler-marquee-onstart title=handler-marquee-onstart>onstart</a>;
   79149 
   79150   void <a href=#dom-marquee-start title=dom-marquee-start>start</a>();
   79151   void <a href=#dom-marquee-stop title=dom-marquee-stop>stop</a>();
   79152 };</pre>
   79153 
   79154   <p>A <code><a href=#the-marquee-element>marquee</a></code> element can be <dfn id=concept-marquee-on title=concept-marquee-on>turned on</dfn> or <dfn id=concept-marquee-off title=concept-marquee-off>turned off</dfn>. When it is created, it
   79155   is <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
   79156 
   79157   <p>When the <dfn id=dom-marquee-start title=dom-marquee-start><code>start()</code></dfn> method is
   79158   called, the <code><a href=#the-marquee-element>marquee</a></code> element must be <a href=#concept-marquee-on title=concept-marquee-on>turned on</a>.</p>
   79159 
   79160   <p>When the <dfn id=dom-marquee-stop title=dom-marquee-stop><code>stop()</code></dfn>
   79161   method is called, the <code><a href=#the-marquee-element>marquee</a></code> element must be <a href=#concept-marquee-off title=concept-marquee-off>turned off</a>.</p>
   79162 
   79163   <p>When a <code><a href=#the-marquee-element>marquee</a></code> element is created, the user agent
   79164   must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
   79165   named <code title=event-start>start</code> at the element.</p>
   79166 
   79167   <hr><p>The <dfn id=attr-marquee-behavior title=attr-marquee-behavior><code>behavior</code></dfn> content
   79168   attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
   79169   attribute</a> with the following keywords (all
   79170   non-conforming):</p>
   79171 
   79172   <table><thead><tr><th>Keyword
   79173      <th>State
   79174    <tbody><tr><td><code title="">scroll</code>
   79175      <td><dfn id=attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</dfn>
   79176     <tr><td><code title="">slide</code>
   79177      <td><dfn id=attr-marquee-behavior-slide title=attr-marquee-behavior-slide>slide</dfn>
   79178     <tr><td><code title="">alternate</code>
   79179      <td><dfn id=attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</dfn>
   79180   </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-behavior-scroll title=attr-marquee-behavior-scroll>scroll</a> state.</p>
   79181 
   79182   <hr><p>The <dfn id=attr-marquee-direction title=attr-marquee-direction><code>direction</code></dfn> content
   79183   attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
   79184   attribute</a> with the following keywords (all
   79185   non-conforming):</p>
   79186 
   79187   <table><thead><tr><th>Keyword
   79188      <th>State
   79189    <tbody><tr><td><code title="">left</code>
   79190      <td><dfn id=attr-marquee-direction-left title=attr-marquee-direction-left>left</dfn>
   79191     <tr><td><code title="">right</code>
   79192      <td><dfn id=attr-marquee-direction-right title=attr-marquee-direction-right>right</dfn>
   79193     <tr><td><code title="">up</code>
   79194      <td><dfn id=attr-marquee-direction-up title=attr-marquee-direction-up>up</dfn>
   79195     <tr><td><code title="">down</code>
   79196      <td><dfn id=attr-marquee-direction-down title=attr-marquee-direction-down>down</dfn>
   79197   </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-direction-left title=attr-marquee-direction-left>left</a> state.</p>
   79198 
   79199   <hr><p>The <dfn id=attr-marquee-truespeed title=attr-marquee-truespeed><code>truespeed</code></dfn> content
   79200   attribute on <code><a href=#the-marquee-element>marquee</a></code> elements is an <a href=#enumerated-attribute>enumerated
   79201   attribute</a> with the following keywords (all
   79202   non-conforming):</p>
   79203 
   79204   <table><thead><tr><th>Keyword
   79205      <th>State
   79206    <tbody><tr><td><code title="">true</code>
   79207      <td><dfn id=attr-marquee-truespeed-true title=attr-marquee-truespeed-true>true</dfn>
   79208     <tr><td><code title="">false</code>
   79209      <td><dfn id=attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</dfn>
   79210   </table><p>The <i>missing value default</i> is the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state.</p>
   79211 
   79212   <hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-scroll-interval>marquee scroll
   79213   interval</dfn>, which is obtained as follows:</p>
   79214 
   79215   <ol><li><p>If the element has a <code title=attr-marquee-scrolldelay>scrolldelay</code> attribute, and
   79216    parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   79217    integers</a> does not return an error, then let <var title="">delay</var> be the parsed value. Otherwise, let <var title="">delay</var> be 85.</li>
   79218 
   79219    <li><p>If the element does not have a <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> attribute, or if it
   79220    does but that attribute is in the <a href=#attr-marquee-truespeed-false title=attr-marquee-truespeed-false>false</a> state, and the
   79221    <var title="">delay</var> value is less than 60, then let <var title="">delay</var> be 60 instead.</li>
   79222 
   79223    <li><p>The <a href=#marquee-scroll-interval>marquee scroll interval</a> is <var title="">delay</var>, interpreted in milliseconds.</li>
   79224 
   79225   </ol><hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-scroll-distance>marquee scroll
   79226   distance</dfn>, which, if the element has a <code title=attr-marquee-scrollamount>scrollamount</code> attribute, and
   79227   parsing its value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
   79228   integers</a> does not return an error, is the parsed value
   79229   interpreted in CSS pixels, and otherwise is 6 CSS pixels.</p>
   79230 
   79231   <hr><p>A <code><a href=#the-marquee-element>marquee</a></code> element has a <dfn id=marquee-loop-count>marquee loop
   79232   count</dfn>, which, if the element has a <code title=attr-marquee-loop>loop</code> attribute, and parsing its
   79233   value using the <a href=#rules-for-parsing-integers>rules for parsing integers</a> does not
   79234   return an error or a number less than 1, is the parsed value, and
   79235   otherwise is &minus;1.</p>
   79236 
   79237   <p>The <dfn id=dom-marquee-loop title=dom-marquee-loop><code>loop</code></dfn> IDL
   79238   attribute, on getting, must return the element's <a href=#marquee-loop-count>marquee loop
   79239   count</a>; and on setting, if the new value is different than the
   79240   element's <a href=#marquee-loop-count>marquee loop count</a> and either greater than
   79241   zero or equal to &minus;1, must set the element's <code title=attr-marquee-loop>loop</code> content attribute (adding it
   79242   if necessary) to the <a href=#valid-integer>valid integer</a> that represents the
   79243   new value. (Other values are ignored.)</p>
   79244 
   79245   <p>A <code><a href=#the-marquee-element>marquee</a></code> element also has a <dfn id=marquee-current-loop-index>marquee current
   79246   loop index</dfn>, which is zero when the element is created.</p>
   79247 
   79248   <p>The rendering layer will occasionally <dfn id=increment-the-marquee-current-loop-index>increment the marquee
   79249   current loop index</dfn>, which must cause the following steps to be
   79250   run:</p>
   79251 
   79252   <ol><li><p>If the <a href=#marquee-loop-count>marquee loop count</a> is &minus;1, then
   79253    abort these steps.</p>
   79254 
   79255    <li><p>Increment the <a href=#marquee-current-loop-index>marquee current loop index</a> by
   79256    one.</li>
   79257 
   79258    <li>
   79259 
   79260     <p>If the <a href=#marquee-current-loop-index>marquee current loop index</a> is now equal to
   79261     or greater than the element's <a href=#marquee-loop-count>marquee loop count</a>,
   79262     <a href=#concept-marquee-off title=concept-marquee-off>turn off</a> the
   79263     <code><a href=#the-marquee-element>marquee</a></code> element and <a href=#queue-a-task>queue a task</a> to
   79264     <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-finish>finish</code> at the <code><a href=#the-marquee-element>marquee</a></code>
   79265     element.</p>
   79266 
   79267     <p>Otherwise, if the <code title=attr-marquee-behavior><a href=#attr-marquee-behavior>behavior</a></code> attribute is in the
   79268     <a href=#attr-marquee-behavior-alternate title=attr-marquee-behavior-alternate>alternate</a>
   79269     state, then <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   79270     event</a> named <code title=event-bounce>bounce</code> at
   79271     the <code><a href=#the-marquee-element>marquee</a></code> element.</p>
   79272 
   79273     <p>Otherwise, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
   79274     event</a> named <code title=event-start>start</code> at the
   79275     <code><a href=#the-marquee-element>marquee</a></code> element.</p>
   79276 
   79277    </li>
   79278 
   79279   </ol><hr><p>The following are the <a href=#event-handlers>event handlers</a> (and their
   79280   corresponding <a href=#event-handler-event-type title="event handler event type">event handler
   79281   event types</a>) that must be supported, as content and IDL
   79282   attributes, by <code><a href=#the-marquee-element>marquee</a></code> elements:</p>
   79283 
   79284   <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
   79285    <tbody><tr><td><dfn id=handler-marquee-onbounce title=handler-marquee-onbounce><code>onbounce</code></dfn> <td> <code title=event-bounce>bounce</code>
   79286     <tr><td><dfn id=handler-marquee-onfinish title=handler-marquee-onfinish><code>onfinish</code></dfn> <td> <code title=event-finish>finish</code>
   79287     <tr><td><dfn id=handler-marquee-onstart title=handler-marquee-onstart><code>onstart</code></dfn> <td> <code title=event-start>start</code>
   79288   </table><hr><p>The <dfn id=dom-marquee-behavior title=dom-marquee-behavior><code>behavior</code></dfn>, <dfn id=dom-marquee-direction title=dom-marquee-direction><code>direction</code></dfn>, <dfn id=dom-marquee-height title=dom-marquee-height><code>height</code></dfn>, <dfn id=dom-marquee-hspace title=dom-marquee-hspace><code>hspace</code></dfn>, <dfn id=dom-marquee-vspace title=dom-marquee-vspace><code>vspace</code></dfn>, and <dfn id=dom-marquee-width title=dom-marquee-width><code>width</code></dfn> IDL attributes
   79289   must <a href=#reflect>reflect</a> the respective content attributes of the
   79290   same name.</p>
   79291 
   79292   <p>The <dfn id=dom-marquee-bgcolor title=dom-marquee-bgColor><code>bgColor</code></dfn>
   79293   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-bgcolor>bgcolor</code> content attribute.</p>
   79294 
   79295   <p>The <dfn id=dom-marquee-scrollamount title=dom-marquee-scrollAmount><code>scrollAmount</code></dfn>
   79296   IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrollamount>scrollamount</code> content
   79297   attribute. The default value is 6.</p>
   79298 
   79299   <p>The <dfn id=dom-marquee-scrolldelay title=dom-marquee-scrollDelay><code>scrollDelay</code></dfn> IDL
   79300   attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-scrolldelay>scrolldelay</code> content
   79301   attribute. The default value is 85.</p>
   79302 
   79303   <p>The <dfn id=dom-marquee-truespeed title=dom-marquee-trueSpeed><code>trueSpeed</code></dfn> IDL
   79304   attribute must <a href=#reflect>reflect</a> the <code title=attr-marquee-truespeed><a href=#attr-marquee-truespeed>truespeed</a></code> content
   79305   attribute.</p>
   79306 
   79307 
   79308   <h4 id=frames><span class=secno>13.3.3 </span>Frames</h4>
   79309 
   79310   <p>The <dfn id=frameset><code>frameset</code></dfn> element acts as <a href=#the-body-element>the
   79311   body element</a> in documents that use frames.</p>
   79312 
   79313   <p>The <code><a href=#frameset>frameset</a></code> element must implement the
   79314   <code><a href=#htmlframesetelement>HTMLFrameSetElement</a></code> interface.</p>
   79315 
   79316   <pre class=idl>interface <dfn id=htmlframesetelement>HTMLFrameSetElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79317            attribute DOMString <a href=#dom-frameset-cols title=dom-frameset-cols>cols</a>;
   79318            attribute DOMString <a href=#dom-frameset-rows title=dom-frameset-rows>rows</a>;
   79319            attribute <a href=#function>Function</a> <a href=#handler-window-onafterprint title=handler-window-onafterprint>onafterprint</a>;
   79320            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
   79321            attribute <a href=#function>Function</a> <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
   79322            attribute <a href=#function>Function</a> <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
   79323            attribute <a href=#function>Function</a> <a href=#handler-window-onerror title=handler-window-onerror>onerror</a>;
   79324            attribute <a href=#function>Function</a> <a href=#handler-window-onfocus title=handler-window-onfocus>onfocus</a>;
   79325            attribute <a href=#function>Function</a> <a href=#handler-window-onhashchange title=handler-window-onhashchange>onhashchange</a>;
   79326            attribute <a href=#function>Function</a> <a href=#handler-window-onload title=handler-window-onload>onload</a>;
   79327            attribute <a href=#function>Function</a> <a href=#handler-window-onmessage title=handler-window-onmessage>onmessage</a>;
   79328            attribute <a href=#function>Function</a> <a href=#handler-window-onoffline title=handler-window-onoffline>onoffline</a>;
   79329            attribute <a href=#function>Function</a> <a href=#handler-window-ononline title=handler-window-ononline>ononline</a>;
   79330            attribute <a href=#function>Function</a> <a href=#handler-window-onpagehide title=handler-window-onpagehide>onpagehide</a>;
   79331            attribute <a href=#function>Function</a> <a href=#handler-window-onpageshow title=handler-window-onpageshow>onpageshow</a>;
   79332            attribute <a href=#function>Function</a> <a href=#handler-window-onpopstate title=handler-window-onpopstate>onpopstate</a>;
   79333            attribute <a href=#function>Function</a> <a href=#handler-window-onredo title=handler-window-onredo>onredo</a>;
   79334            attribute <a href=#function>Function</a> <a href=#handler-window-onresize title=handler-window-onresize>onresize</a>;
   79335            attribute <a href=#function>Function</a> <a href=#handler-window-onstorage title=handler-window-onstorage>onstorage</a>;
   79336            attribute <a href=#function>Function</a> <a href=#handler-window-onundo title=handler-window-onundo>onundo</a>;
   79337            attribute <a href=#function>Function</a> <a href=#handler-window-onunload title=handler-window-onunload>onunload</a>;
   79338 };</pre>
   79339 
   79340   <p>The <dfn id=dom-frameset-cols title=dom-frameset-cols><code>cols</code></dfn> and
   79341   <dfn id=dom-frameset-rows title=dom-frameset-rows><code>rows</code></dfn> IDL
   79342   attributes of the <code><a href=#frameset>frameset</a></code> element must
   79343   <a href=#reflect>reflect</a> the respective content attributes of the same
   79344   name.</p>
   79345 
   79346   <p>The <code><a href=#frameset>frameset</a></code> element must support the following
   79347   <a href=#event-handler-content-attributes>event handler content attributes</a> exposing the
   79348   <a href=#event-handlers>event handlers</a> of the <code><a href=#window>Window</a></code> object:</p>
   79349 
   79350   <ul class=brief><li><code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code></li>
   79351    <li><code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code></li>
   79352    <li><code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code></li>
   79353    <li><code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code></li>
   79354    <li><code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code></li>
   79355    <li><code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code></li>
   79356    <li><code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code></li>
   79357    <li><code title=handler-window-onload><a href=#handler-window-onload>onload</a></code></li>
   79358    <li><code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code></li>
   79359    <li><code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code></li>
   79360    <li><code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code></li>
   79361    <li><code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code></li>
   79362    <li><code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code></li>
   79363    <li><code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code></li>
   79364    <li><code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code></li>
   79365    <li><code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code></li>
   79366    <li><code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code></li>
   79367    <li><code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code></li>
   79368    <li><code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></li>
   79369   </ul><p>The DOM interface also exposes <a href=#event-handler-idl-attributes>event handler IDL
   79370   attributes</a> that mirror those on the <code><a href=#window>Window</a></code>
   79371   element.</p>
   79372 
   79373   <p>The <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>, <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>, <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>, and <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code> <a href=#event-handler-idl-attributes>event handler IDL
   79374   attributes</a> of the <code><a href=#window>Window</a></code> object, exposed on the
   79375   <code><a href=#frameset>frameset</a></code> element, shadow the generic <a href=#event-handler-idl-attributes>event
   79376   handler IDL attributes</a> with the same names normally supported
   79377   by <a href=#html-elements>HTML elements</a>.</p>
   79378 
   79379   <hr><p>The <dfn id=frame><code>frame</code></dfn> element defines a <a href=#nested-browsing-context>nested
   79380   browsing context</a> similar to the <code><a href=#the-iframe-element>iframe</a></code> element,
   79381   but rendered within a <code><a href=#frameset>frameset</a></code> element.</p>
   79382 
   79383   <p>When the browsing context is created, if a <code title=attr-frame-src>src</code> attribute is present, the user
   79384   agent must <a href=#resolve-a-url title="resolve a url">resolve</a> the value of
   79385   that attribute, relative to the element, and if that is successful,
   79386   must then <a href=#navigate>navigate</a> the element's browsing context to
   79387   the resulting <a href=#absolute-url>absolute URL</a>, with <a href=#replacement-enabled>replacement
   79388   enabled</a>, and with the <code><a href=#frame>frame</a></code> element's
   79389   document's <a href=#browsing-context>browsing context</a> as the <a href=#source-browsing-context>source
   79390   browsing context</a>.</p>
   79391 
   79392   <p>Whenever the <code title=attr-frame-src>src</code> attribute
   79393   is set, the user agent must <a href=#resolve-a-url title="resolve a
   79394   url">resolve</a> the value of that attribute, relative to the
   79395   element, and if that is successful, the nested <a href=#browsing-context>browsing
   79396   context</a> must be <a href=#navigate title=navigate>navigated</a> to
   79397   the resulting <a href=#absolute-url>absolute URL</a>, with the
   79398   <code><a href=#frame>frame</a></code> element's document's <a href=#browsing-context>browsing
   79399   context</a> as the <a href=#source-browsing-context>source browsing context</a>.</p>
   79400 
   79401   <p>When the browsing context is created, if a <code title=attr-frame-name>name</code> attribute is present, the
   79402   <a href=#browsing-context-name>browsing context name</a> must be set to the value of this
   79403   attribute; otherwise, the <a href=#browsing-context-name>browsing context name</a> must be
   79404   set to the empty string.</p>
   79405 
   79406   <p>Whenever the <code title=attr-frame-name>name</code> attribute
   79407   is set, the nested <a href=#browsing-context>browsing context</a>'s <a href=#browsing-context-name title="browsing context name">name</a> must be changed to the new
   79408   value. If the attribute is removed, the <a href=#browsing-context-name>browsing context
   79409   name</a> must be set to the empty string.</p>
   79410 
   79411   <p>When content loads in a <code><a href=#frame>frame</a></code>, after any <code title=event-load>load</code> events are fired within the content
   79412   itself, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
   79413   a simple event</a> named <code title=event-load>load</code> at
   79414   the <code><a href=#frame>frame</a></code> element. When content fails to load (e.g. due
   79415   to a network error), then the user agent must <a href=#queue-a-task>queue a
   79416   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the element instead.</p>
   79417 
   79418   <p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> above is the <a href=#dom-manipulation-task-source>DOM
   79419   manipulation task source</a>.</p>
   79420 
   79421   <p>When there is an <a href=#active-parser>active parser</a> in the
   79422   <code><a href=#frame>frame</a></code>, and when anything in the <code><a href=#frame>frame</a></code> is
   79423   <a href=#delay-the-load-event title="delay the load event">delaying the load event</a> of
   79424   the <code><a href=#frame>frame</a></code>'s <a href=#browsing-context>browsing context</a>'s
   79425   <a href=#active-document>active document</a>, the <code><a href=#frame>frame</a></code> must
   79426   <a href=#delay-the-load-event>delay the load event</a> of its document.</p>
   79427 
   79428   <p>The <code><a href=#frame>frame</a></code> element must implement the
   79429   <code><a href=#htmlframeelement>HTMLFrameElement</a></code> interface.</p>
   79430 
   79431   <pre class=idl>interface <dfn id=htmlframeelement>HTMLFrameElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79432            attribute DOMString <a href=#dom-frame-frameborder title=dom-frame-frameBorder>frameBorder</a>;
   79433            attribute DOMString <a href=#dom-frame-longdesc title=dom-frame-longDesc>longDesc</a>;
   79434            attribute DOMString <a href=#dom-frame-marginheight title=dom-frame-marginHeight>marginHeight</a>;
   79435            attribute DOMString <a href=#dom-frame-marginwidth title=dom-frame-marginWidth>marginWidth</a>;
   79436            attribute DOMString <a href=#dom-frame-name title=dom-frame-name>name</a>;
   79437            attribute boolean <a href=#dom-frame-noresize title=dom-frame-noResize>noResize</a>;
   79438            attribute DOMString <a href=#dom-frame-scrolling title=dom-frame-scrolling>scrolling</a>;
   79439            attribute DOMString <a href=#dom-frame-src title=dom-frame-src>src</a>;
   79440   readonly attribute Document <a href=#dom-frame-contentdocument title=dom-frame-contentDocument>contentDocument</a>;
   79441 };</pre>
   79442 
   79443   <p>The <dfn id=dom-frame-name title=dom-frame-name><code>name</code></dfn>, <dfn id=dom-frame-scrolling title=dom-frame-scrolling><code>scrolling</code></dfn>, and <dfn id=dom-frame-src title=dom-frame-src><code>src</code></dfn> IDL attributes of the
   79444   <code><a href=#frame>frame</a></code> element must <a href=#reflect>reflect</a> the respective
   79445   content attributes of the same name.</p>
   79446 
   79447   <p>The <dfn id=dom-frame-frameborder title=dom-frame-frameBorder><code>frameBorder</code></dfn> IDL
   79448   attribute of the <code><a href=#frame>frame</a></code> element must
   79449   <a href=#reflect>reflect</a> the element's <code title=attr-frame-frameborder>frameborder</code> content
   79450   attribute.</p>
   79451 
   79452   <p>The <dfn id=dom-frame-longdesc title=dom-frame-longDesc><code>longDesc</code></dfn>
   79453   IDL attribute of the <code><a href=#frame>frame</a></code> element must
   79454   <a href=#reflect>reflect</a> the element's <code title=attr-frame-longdesc>longdesc</code> content attribute.</p>
   79455 
   79456   <p>The <dfn id=dom-frame-marginheight title=dom-frame-marginHeight><code>marginHeight</code></dfn> IDL
   79457   attribute of the <code><a href=#frame>frame</a></code> element must
   79458   <a href=#reflect>reflect</a> the element's <code title=attr-frame-marginheight>marginheight</code> content
   79459   attribute.</p>
   79460 
   79461   <p>The <dfn id=dom-frame-marginwidth title=dom-frame-marginWidth><code>marginWidth</code></dfn> IDL
   79462   attribute of the <code><a href=#frame>frame</a></code> element must
   79463   <a href=#reflect>reflect</a> the element's <code title=attr-frame-marginwidth>marginwidth</code> content
   79464   attribute.</p>
   79465 
   79466   <p>The <dfn id=dom-frame-noresize title=dom-frame-noResize><code>noResize</code></dfn>
   79467   IDL attribute of the <code><a href=#frame>frame</a></code> element must
   79468   <a href=#reflect>reflect</a> the element's <code title=attr-frame-noresize>noresize</code> content attribute.</p>
   79469 
   79470   <p>The <dfn id=dom-frame-contentdocument title=dom-frame-contentDocument><code>contentDocument</code></dfn>
   79471   IDL attribute of the <code><a href=#frame>frame</a></code> element must return the
   79472   <code><a href=#document>Document</a></code> object of the <a href=#active-document>active document</a> of
   79473   the <code><a href=#frame>frame</a></code> element's <a href=#nested-browsing-context>nested browsing
   79474   context</a>.</p>
   79475 
   79476 
   79477 
   79478   <h4 id=other-elements,-attributes-and-apis><span class=secno>13.3.4 </span>Other elements, attributes and APIs</h4> <!-- alphabetical by name and attribute -->
   79479 
   79480   <p>User agents must treat <code><a href=#acronym>acronym</a></code> elements in a manner
   79481   equivalent to <code><a href=#the-abbr-element>abbr</a></code> elements.</p>
   79482 
   79483   <hr><pre class=idl>[Supplemental]
   79484 interface <a href=#htmlanchorelement>HTMLAnchorElement</a> {
   79485            attribute DOMString <a href=#dom-a-coords title=dom-a-coords>coords</a>;
   79486            attribute DOMString <a href=#dom-a-charset title=dom-a-charset>charset</a>;
   79487            attribute DOMString <a href=#dom-a-name title=dom-a-name>name</a>;
   79488            attribute DOMString <a href=#dom-a-rev title=dom-a-rev>rev</a>;
   79489            attribute DOMString <a href=#dom-a-shape title=dom-a-shape>shape</a>;
   79490 };</pre>
   79491 
   79492   <p>The <dfn id=dom-a-coords title=dom-a-coords><code>coords</code></dfn>, <dfn id=dom-a-charset title=dom-a-charset><code>charset</code></dfn>, <dfn id=dom-a-name title=dom-a-name><code>name</code></dfn>, <dfn id=dom-a-rev title=dom-a-rev><code>rev</code></dfn>, and <dfn id=dom-a-shape title=dom-a-shape><code>shape</code></dfn> IDL attributes of the
   79493   <code><a href=#the-a-element>a</a></code> element must <a href=#reflect>reflect</a> the respective
   79494   content attributes of the same name.</p>
   79495 
   79496   <hr><pre class=idl>[Supplemental]
   79497 interface <a href=#htmlareaelement>HTMLAreaElement</a> {
   79498            attribute boolean <a href=#dom-area-nohref title=dom-area-noHref>noHref</a>;
   79499 };</pre>
   79500 
   79501   <p>The <dfn id=dom-area-nohref title=dom-area-noHref><code>noHref</code></dfn> IDL
   79502   attribute of the <code><a href=#the-area-element>area</a></code> element must <a href=#reflect>reflect</a>
   79503   the element's <code title=attr-area-nohref><a href=#attr-area-nohref>nohref</a></code> content
   79504   attribute.</p>
   79505 
   79506   <hr><p>The <code><a href=#basefont>basefont</a></code> element must implement the
   79507   <code><a href=#htmlbasefontelement>HTMLBaseFontElement</a></code> interface.</p>
   79508 
   79509   <pre class=idl>interface <dfn id=htmlbasefontelement>HTMLBaseFontElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79510            attribute DOMString <a href=#dom-basefont-color title=dom-basefont-color>color</a>;
   79511            attribute DOMString <a href=#dom-basefont-face title=dom-basefont-face>face</a>;
   79512            attribute long <a href=#dom-basefont-size title=dom-basefont-size>size</a>; <!-- yes, long, not DOMString (so says DOM2 HTML) -->
   79513 };</pre>
   79514 
   79515   <p>The <dfn id=dom-basefont-color title=dom-basefont-color><code>color</code></dfn>,
   79516   <dfn id=dom-basefont-face title=dom-basefont-face><code>face</code></dfn>, and <dfn id=dom-basefont-size title=dom-basefont-size><code>size</code></dfn> IDL attributes of
   79517   the <code><a href=#basefont>basefont</a></code> element must <a href=#reflect>reflect</a> the
   79518   respective content attributes of the same name.</p>
   79519 
   79520   <hr><pre class=idl>[Supplemental]
   79521 interface <a href=#htmlbodyelement>HTMLBodyElement</a> {
   79522            attribute DOMString <a href=#dom-body-text title=dom-body-text>text</a>;
   79523            attribute DOMString <a href=#dom-body-bgcolor title=dom-body-bgColor>bgColor</a>;
   79524            attribute DOMString <a href=#dom-body-background title=dom-body-background>background</a>;
   79525            attribute DOMString <a href=#dom-body-link title=dom-body-link>link</a>;
   79526            attribute DOMString <a href=#dom-body-vlink title=dom-body-vLink>vLink</a>;
   79527            attribute DOMString <a href=#dom-body-alink title=dom-body-aLink>aLink</a>;
   79528 };</pre>
   79529 
   79530   <p>The <dfn id=dom-body-text title=dom-body-text><code>text</code></dfn> IDL
   79531   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79532   the element's <code title=attr-body-text><a href=#attr-body-text>text</a></code> content
   79533   attribute.</p>
   79534 
   79535   <p>The <dfn id=dom-body-bgcolor title=dom-body-bgColor><code>bgColor</code></dfn> IDL
   79536   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79537   the element's <code title=attr-body-bgcolor><a href=#attr-body-bgcolor>bgcolor</a></code> content
   79538   attribute.</p>
   79539 
   79540   <p>The <dfn id=dom-body-background title=dom-body-background><code>background</code></dfn> IDL
   79541   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79542   the element's <code title=attr-background><a href=#attr-background>background</a></code>
   79543   content attribute. (The <code title=attr-background><a href=#attr-background>background</a></code> content is <em>not</em>
   79544   defined to contain a <a href=#url>URL</a>, despite rules regarding its
   79545   handling in the rendering section above.)</p>
   79546 
   79547   <p>The <dfn id=dom-body-link title=dom-body-link><code>link</code></dfn> IDL
   79548   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79549   the element's <code title=attr-body-link><a href=#attr-body-link>link</a></code> content
   79550   attribute.</p>
   79551 
   79552   <p>The <dfn id=dom-body-alink title=dom-body-aLink><code>aLink</code></dfn> IDL
   79553   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79554   the element's <code title=attr-body-alink><a href=#attr-body-alink>alink</a></code> content
   79555   attribute.</p>
   79556 
   79557   <p>The <dfn id=dom-body-vlink title=dom-body-vLink><code>vLink</code></dfn> IDL
   79558   attribute of the <code><a href=#the-body-element-0>body</a></code> element must <a href=#reflect>reflect</a>
   79559   the element's <code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code> content
   79560   attribute.</p>
   79561 
   79562   <hr><pre class=idl>[Supplemental]
   79563 interface <a href=#htmlbrelement>HTMLBRElement</a> {
   79564            attribute DOMString <a href=#dom-br-clear title=dom-br-clear>clear</a>;
   79565 };</pre>
   79566 
   79567   <p>The <dfn id=dom-br-clear title=dom-br-clear><code>clear</code></dfn> IDL
   79568   attribute of the <code><a href=#the-br-element>br</a></code> element must <a href=#reflect>reflect</a>
   79569   the content attribute of the same name.</p>
   79570 
   79571   <hr><pre class=idl>[Supplemental]
   79572 interface <a href=#htmltablecaptionelement>HTMLTableCaptionElement</a> {
   79573            attribute DOMString <a href=#dom-caption-align title=dom-caption-align>align</a>;
   79574 };</pre>
   79575 
   79576   <p>The <dfn id=dom-caption-align title=dom-caption-align><code>align</code></dfn> IDL
   79577   attribute of the <code><a href=#the-caption-element>caption</a></code> element must
   79578   <a href=#reflect>reflect</a> the content attribute of the same name.</p>
   79579 
   79580   <hr><pre class=idl>[Supplemental]
   79581 interface <a href=#htmltablecolelement>HTMLTableColElement</a> {
   79582            attribute DOMString <a href=#dom-col-align title=dom-col-align>align</a>;
   79583            attribute DOMString <a href=#dom-col-ch title=dom-col-ch>ch</a>;
   79584            attribute DOMString <a href=#dom-col-choff title=dom-col-chOff>chOff</a>;
   79585            attribute DOMString <a href=#dom-col-valign title=dom-col-vAlign>vAlign</a>;
   79586            attribute DOMString <a href=#dom-col-width title=dom-col-width>width</a>;
   79587 };</pre>
   79588 
   79589   <p>The <dfn id=dom-col-align title=dom-col-align><code>align</code></dfn> and <dfn id=dom-col-width title=dom-col-width><code>width</code></dfn> IDL attributes of
   79590   the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a> the
   79591   respective content attributes of the same name.</p>
   79592 
   79593   <p>The <dfn id=dom-col-ch title=dom-col-ch><code>ch</code></dfn> IDL attribute
   79594   of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a> the
   79595   element's <code title=attr-col-char><a href=#attr-col-char>char</a></code> content
   79596   attribute.</p>
   79597 
   79598   <p>The <dfn id=dom-col-choff title=dom-col-chOff><code>chOff</code></dfn> IDL
   79599   attribute of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a>
   79600   the element's <code title=attr-col-charoff><a href=#attr-col-charoff>charoff</a></code> content
   79601   attribute.</p>
   79602 
   79603   <p>The <dfn id=dom-col-valign title=dom-col-vAlign><code>vAlign</code></dfn> IDL
   79604   attribute of the <code><a href=#the-col-element>col</a></code> element must <a href=#reflect>reflect</a>
   79605   the element's <code title=attr-col-valign><a href=#attr-col-valign>valign</a></code> content
   79606   attribute.</p>
   79607 
   79608   <hr><p>User agents must treat <code><a href=#dir>dir</a></code> elements in a manner
   79609   equivalent to <code><a href=#the-ul-element>ul</a></code> elements.</p>
   79610 
   79611   <p>The <code><a href=#dir>dir</a></code> element must implement the
   79612   <code><a href=#htmldirectoryelement>HTMLDirectoryElement</a></code> interface.</p>
   79613 
   79614   <pre class=idl>interface <dfn id=htmldirectoryelement>HTMLDirectoryElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79615            attribute boolean <a href=#dom-dir-compact title=dom-dir-compact>compact</a>;
   79616 };</pre>
   79617 
   79618   <p>The <dfn id=dom-dir-compact title=dom-dir-compact><code>compact</code></dfn> IDL
   79619   attribute of the <code><a href=#dir>dir</a></code> element must <a href=#reflect>reflect</a>
   79620   the content attribute of the same name.</p>
   79621 
   79622   <hr><pre class=idl>[Supplemental]
   79623 interface <a href=#htmldivelement>HTMLDivElement</a> {
   79624            attribute DOMString <a href=#dom-div-align title=dom-div-align>align</a>;
   79625 };</pre>
   79626 
   79627   <p>The <dfn id=dom-div-align title=dom-div-align><code>align</code></dfn> IDL
   79628   attribute of the <code><a href=#the-div-element>div</a></code> element must <a href=#reflect>reflect</a>
   79629   the content attribute of the same name.</p>
   79630 
   79631   <hr><pre class=idl>[Supplemental]
   79632 interface <a href=#htmldlistelement>HTMLDListElement</a> {
   79633            attribute boolean <a href=#dom-dl-compact title=dom-dl-compact>compact</a>;
   79634 };</pre>
   79635 
   79636   <p>The <dfn id=dom-dl-compact title=dom-dl-compact><code>compact</code></dfn> IDL
   79637   attribute of the <code><a href=#the-dl-element>dl</a></code> element must <a href=#reflect>reflect</a>
   79638   the content attribute of the same name.</p>
   79639 
   79640   <hr><pre class=idl>[Supplemental]
   79641 interface <a href=#htmlembedelement>HTMLEmbedElement</a> {
   79642            attribute DOMString <a href=#dom-embed-align title=dom-embed-align>align</a>;
   79643            attribute DOMString <a href=#dom-embed-name title=dom-embed-name>name</a>;
   79644 };</pre>
   79645 
   79646   <p>The <dfn id=dom-embed-name title=dom-embed-name><code>name</code></dfn> and <dfn id=dom-embed-align title=dom-embed-align><code>align</code></dfn> IDL attributes of
   79647   the <code><a href=#the-embed-element>embed</a></code> element must <a href=#reflect>reflect</a> the
   79648   respective content attributes of the same name.</p>
   79649 
   79650   <hr><p>The <code><a href=#font>font</a></code> element must implement the
   79651   <code><a href=#htmlfontelement>HTMLFontElement</a></code> interface.</p>
   79652 
   79653   <pre class=idl>interface <dfn id=htmlfontelement>HTMLFontElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
   79654            attribute DOMString <a href=#dom-font-color title=dom-font-color>color</a>;
   79655            attribute DOMString <a href=#dom-font-face title=dom-font-face>face</a>;
   79656            attribute DOMString <a href=#dom-font-size title=dom-font-size>size</a>; <!-- yes, DOMString, not long (so says DOM2 HTML) -->
   79657 };</pre>
   79658 
   79659   <p>The <dfn id=dom-font-color title=dom-font-color><code>color</code></dfn>,
   79660   <dfn id=dom-font-face title=dom-font-face><code>face</code></dfn>, and <dfn id=dom-font-size title=dom-font-size><code>size</code></dfn> IDL attributes of
   79661   the <code><a href=#font>font</a></code> element must <a href=#reflect>reflect</a> the
   79662   respective content attributes of the same name.</p>
   79663 
   79664   <hr><pre class=idl>[Supplemental]
   79665 interface <a href=#htmlheadingelement>HTMLHeadingElement</a> {
   79666            attribute DOMString <a href=#dom-hx-align title=dom-hx-align>align</a>;
   79667 };</pre>
   79668 
   79669   <p>The <dfn id=dom-hx-align title=dom-hx-align><code>align</code></dfn> IDL
   79670   attribute of the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements must
   79671   <a href=#reflect>reflect</a> the content attribute of the same name.</p>
   79672 
   79673   <hr><p class=note>The <dfn id=dom-head-profile title=dom-head-profile><code>profile</code></dfn> IDL attribute on
   79674   <code><a href=#the-head-element-0>head</a></code> elements (with the <code><a href=#htmlheadelement>HTMLHeadElement</a></code>
   79675   interface) is intentionally omitted. Unless so required by <a href=#other-applicable-specifications title="other applicable specifications">another applicable
   79676   specification</a>, implementations would therefore not support
   79677   this attribute. (It is mentioned here as it was defined in a
   79678   previous version of the DOM specifications.)</p>
   79679 
   79680   <hr><pre class=idl>[Supplemental]
   79681 interface <a href=#htmlhrelement>HTMLHRElement</a> {
   79682            attribute DOMString <a href=#dom-hr-align title=dom-hr-align>align</a>;
   79683            attribute DOMString <a href=#dom-hr-color title=dom-hr-color>color</a>;
   79684            attribute boolean <a href=#dom-hr-noshade title=dom-hr-noShade>noShade</a>;
   79685            attribute DOMString <a href=#dom-hr-size title=dom-hr-size>size</a>;
   79686            attribute DOMString <a href=#dom-hr-width title=dom-hr-width>width</a>;
   79687 };</pre>
   79688 
   79689   <p>The <dfn id=dom-hr-align title=dom-hr-align><code>align</code></dfn>, <dfn id=dom-hr-color title=dom-hr-color><code>color</code></dfn>, <dfn id=dom-hr-size title=dom-hr-size><code>size</code></dfn>, and <dfn id=dom-hr-width title=dom-hr-width><code>width</code></dfn> IDL attributes of the
   79690   <code><a href=#the-hr-element>hr</a></code> element must <a href=#reflect>reflect</a> the respective
   79691   content attributes of the same name.</p>
   79692 
   79693   <p>The <dfn id=dom-hr-noshade title=dom-hr-noShade><code>noShade</code></dfn> IDL
   79694   attribute of the <code><a href=#the-hr-element>hr</a></code> element must <a href=#reflect>reflect</a>
   79695   the element's <code title=attr-input-noshade>noshade</code>
   79696   content attribute.</p>
   79697 
   79698   <hr><pre class=idl>[Supplemental]
   79699 interface <a href=#htmlhtmlelement>HTMLHtmlElement</a> {
   79700            attribute DOMString <a href=#dom-html-version title=dom-html-version>version</a>;
   79701 };</pre>
   79702 
   79703   <p>The <dfn id=dom-html-version title=dom-html-version><code>version</code></dfn> IDL
   79704   attribute of the <code><a href=#the-html-element-0>html</a></code> element must <a href=#reflect>reflect</a>
   79705   the content attribute of the same name.</p>
   79706 
   79707   <hr><pre class=idl>[Supplemental]
   79708 interface <a href=#htmliframeelement>HTMLIFrameElement</a> {
   79709            attribute DOMString <a href=#dom-iframe-align title=dom-iframe-align>align</a>;
   79710            attribute DOMString <a href=#dom-iframe-frameborder title=dom-iframe-frameBorder>frameBorder</a>;
   79711            attribute DOMString <a href=#dom-iframe-longdesc title=dom-iframe-longDesc>longDesc</a>;
   79712            attribute DOMString <a href=#dom-iframe-marginheight title=dom-iframe-marginHeight>marginHeight</a>;
   79713            attribute DOMString <a href=#dom-iframe-marginwidth title=dom-iframe-marginWidth>marginWidth</a>;
   79714            attribute DOMString <a href=#dom-iframe-scrolling title=dom-iframe-scrolling>scrolling</a>;
   79715 };</pre>
   79716 
   79717   <p>The <dfn id=dom-iframe-align title=dom-iframe-align><code>align</code></dfn> and
   79718   <dfn id=dom-iframe-scrolling title=dom-iframe-scrolling><code>scrolling</code></dfn> IDL
   79719   attributes of the <code><a href=#the-iframe-element>iframe</a></code> element must
   79720   <a href=#reflect>reflect</a> the respective content attributes of the same
   79721   name.</p>
   79722 
   79723   <p>The <dfn id=dom-iframe-frameborder title=dom-iframe-frameBorder><code>frameBorder</code></dfn> IDL
   79724   attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
   79725   <a href=#reflect>reflect</a> the element's <code title=attr-iframe-frameborder><a href=#attr-iframe-frameborder>frameborder</a></code> content
   79726   attribute.</p>
   79727 
   79728   <p>The <dfn id=dom-iframe-longdesc title=dom-iframe-longDesc><code>longDesc</code></dfn>
   79729   IDL attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
   79730   <a href=#reflect>reflect</a> the element's <code title=attr-iframe-longdesc><a href=#attr-iframe-longdesc>longdesc</a></code> content attribute.</p>
   79731 
   79732   <p>The <dfn id=dom-iframe-marginheight title=dom-iframe-marginHeight><code>marginHeight</code></dfn> IDL
   79733   attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
   79734   <a href=#reflect>reflect</a> the element's <code title=attr-iframe-marginheight><a href=#attr-iframe-marginheight>marginheight</a></code> content
   79735   attribute.</p>
   79736 
   79737   <p>The <dfn id=dom-iframe-marginwidth title=dom-iframe-marginWidth><code>marginWidth</code></dfn> IDL
   79738   attribute of the <code><a href=#the-iframe-element>iframe</a></code> element must
   79739   <a href=#reflect>reflect</a> the element's <code title=attr-iframe-marginwidth><a href=#attr-iframe-marginwidth>marginwidth</a></code> content
   79740   attribute.</p>
   79741 
   79742   <hr><pre class=idl>[Supplemental]
   79743 interface <a href=#htmlimageelement>HTMLImageElement</a> {
   79744            attribute DOMString <a href=#dom-img-name title=dom-img-name>name</a>;
   79745            attribute DOMString <a href=#dom-img-align title=dom-img-align>align</a>;
   79746            attribute DOMString <a href=#dom-img-border title=dom-img-border>border</a>;
   79747            attribute unsigned long <a href=#dom-img-hspace title=dom-img-hspace>hspace</a>;
   79748            attribute DOMString <a href=#dom-img-longdesc title=dom-img-longDesc>longDesc</a>;
   79749            attribute unsigned long <a href=#dom-img-vspace title=dom-img-vspace>vspace</a>;
   79750 };</pre>
   79751 
   79752   <p>The <dfn id=dom-img-name title=dom-img-name><code>name</code></dfn>, <dfn id=dom-img-align title=dom-img-align><code>align</code></dfn>, <dfn id=dom-img-border title=dom-img-border><code>border</code></dfn>, <dfn id=dom-img-hspace title=dom-img-hspace><code>hspace</code></dfn>, and <dfn id=dom-img-vspace title=dom-img-vspace><code>vspace</code></dfn> IDL attributes of
   79753   the <code><a href=#the-img-element>img</a></code> element must <a href=#reflect>reflect</a> the
   79754   respective content attributes of the same name.</p>
   79755 
   79756   <p>The <dfn id=dom-img-longdesc title=dom-img-longDesc><code>longDesc</code></dfn> IDL
   79757   attribute of the <code><a href=#the-img-element>img</a></code> element must <a href=#reflect>reflect</a>
   79758   the element's <code title=attr-img-longdesc><a href=#attr-img-longdesc>longdesc</a></code> content
   79759   attribute.</p>
   79760 
   79761   <hr><pre class=idl>[Supplemental]
   79762 interface <a href=#htmlinputelement>HTMLInputElement</a> {
   79763            attribute DOMString <a href=#dom-input-align title=dom-input-align>align</a>;
   79764            attribute DOMString <a href=#dom-input-usemap title=dom-input-useMap>useMap</a>;
   79765 };</pre>
   79766 
   79767   <p>The <dfn id=dom-input-align title=dom-input-align><code>align</code></dfn> IDL
   79768   attribute of the <code><a href=#the-input-element>input</a></code> element must <a href=#reflect>reflect</a>
   79769   the content attribute of the same name.</p>
   79770 
   79771   <p>The <dfn id=dom-input-usemap title=dom-input-useMap><code>useMap</code></dfn> IDL
   79772   attribute of the <code><a href=#the-input-element>input</a></code> element must
   79773   <a href=#reflect>reflect</a> the element's <code title=attr-input-usemap><a href=#attr-input-usemap>usemap</a></code> content attribute.</p>
   79774 
   79775   <hr><pre class=idl>[Supplemental]
   79776 interface <a href=#htmllegendelement>HTMLLegendElement</a> {
   79777            attribute DOMString <a href=#dom-legend-align title=dom-legend-align>align</a>;
   79778 };</pre>
   79779 
   79780   <p>The <dfn id=dom-legend-align title=dom-legend-align><code>align</code></dfn> IDL
   79781   attribute of the <code><a href=#the-legend-element>legend</a></code> element must <a href=#reflect>reflect</a>
   79782   the content attribute of the same name.</p>
   79783 
   79784   <hr><pre class=idl>[Supplemental]
   79785 interface <a href=#htmllielement>HTMLLIElement</a> {
   79786            attribute DOMString <a href=#dom-li-type title=dom-li-type>type</a>;
   79787 };</pre>
   79788 
   79789   <p>The <dfn id=dom-li-type title=dom-li-type><code>type</code></dfn> IDL
   79790   attribute of the <code><a href=#the-li-element>li</a></code> element must <a href=#reflect>reflect</a>
   79791   the content attribute of the same name.</p>
   79792 
   79793   <hr><pre class=idl>[Supplemental]
   79794 interface <a href=#htmllinkelement>HTMLLinkElement</a> {
   79795            attribute DOMString <a href=#dom-link-charset title=dom-link-charset>charset</a>;
   79796            attribute DOMString <a href=#dom-link-rev title=dom-link-rev>rev</a>;
   79797            attribute DOMString <a href=#dom-link-target title=dom-link-target>target</a>;
   79798 };</pre>
   79799 
   79800   <p>The <dfn id=dom-link-charset title=dom-link-charset><code>charset</code></dfn>,
   79801   <dfn id=dom-link-rev title=dom-link-rev><code>rev</code></dfn>, and <dfn id=dom-link-target title=dom-link-target><code>target</code></dfn> IDL attributes of
   79802   the <code><a href=#the-link-element>link</a></code> element must <a href=#reflect>reflect</a> the
   79803   respective content attributes of the same name.</p>
   79804 
   79805   <hr><p>User agents must treat <code><a href=#listing>listing</a></code> elements in a manner
   79806   equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>
   79807 
   79808   <hr><pre class=idl>[Supplemental]
   79809 interface <a href=#htmlmenuelement>HTMLMenuElement</a> {
   79810            attribute boolean <a href=#dom-menu-compact title=dom-menu-compact>compact</a>;
   79811 };</pre>
   79812 
   79813   <p>The <dfn id=dom-menu-compact title=dom-menu-compact><code>compact</code></dfn> IDL
   79814   attribute of the <code><a href=#menus>menu</a></code> element must <a href=#reflect>reflect</a>
   79815   the content attribute of the same name.</p>
   79816 
   79817   <hr><pre class=idl>[Supplemental]
   79818 interface <a href=#htmlmetaelement>HTMLMetaElement</a> {
   79819            attribute DOMString <a href=#dom-meta-scheme title=dom-meta-scheme>scheme</a>;
   79820 };</pre>
   79821 
   79822   <p>User agents may treat the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> content attribute on the
   79823   <code><a href=#meta>meta</a></code> element as an extension of the element's <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> content attribute when processing
   79824   a <code><a href=#meta>meta</a></code> element with a <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute whose value is one that
   79825   the user agent recognizes as supporting the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute.</p>
   79826 
   79827   <p>User agents are encouraged to ignore the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute and instead process
   79828   the value given to the metadata name as if it had been specified for
   79829   each expected value of the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute.</p>
   79830 
   79831   <div class=example>
   79832 
   79833    <p>For example, if the user agent acts on <code><a href=#meta>meta</a></code>
   79834    elements with <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attributes
   79835    having the value "eGMS.subject.keyword", and knows that the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute is used with this
   79836    metadata name, then it could take the <code title=attr-meta-scheme><a href=#attr-meta-scheme>scheme</a></code> attribute into account,
   79837    acting as if it was an extension of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute. Thus the following
   79838    two <code><a href=#meta>meta</a></code> elements could be treated as two elements
   79839    giving values for two different metadata names, one consisting of a
   79840    combination of "eGMS.subject.keyword" and "LGCL", and the other
   79841    consisting of a combination of "eGMS.subject.keyword" and
   79842    "ORLY":</p>
   79843 
   79844    <pre class=bad>&lt;!-- this markup is invalid --&gt;
   79845 &lt;meta name="eGMS.subject.keyword" scheme="LGCL" content="Abandoned vehicles"&gt;
   79846 &lt;meta name="eGMS.subject.keyword" scheme="ORLY" content="Mah car: kthxbye"&gt;</pre>
   79847 
   79848    <p>The recommended processing of this markup, however, would be
   79849    equivalent to the following:</p>
   79850 
   79851    <pre>&lt;meta name="eGMS.subject.keyword" content="Abandoned vehicles"&gt;
   79852 &lt;meta name="eGMS.subject.keyword" content="Mah car: kthxbye"&gt;</pre>
   79853 
   79854   </div>
   79855 
   79856   <p>The <dfn id=dom-meta-scheme title=dom-meta-scheme><code>scheme</code></dfn> IDL
   79857   attribute of the <code><a href=#meta>meta</a></code> element must <a href=#reflect>reflect</a>
   79858   the content attribute of the same name.</p>
   79859 
   79860   <hr><pre class=idl>[Supplemental]
   79861 interface <a href=#htmlobjectelement>HTMLObjectElement</a> {
   79862            attribute DOMString <a href=#dom-object-align title=dom-object-align>align</a>;
   79863            attribute DOMString <a href=#dom-object-archive title=dom-object-archive>archive</a>;
   79864            attribute DOMString <a href=#dom-object-border title=dom-object-border>border</a>;
   79865            attribute DOMString <a href=#dom-object-code title=dom-object-code>code</a>;
   79866            attribute DOMString <a href=#dom-object-codebase title=dom-object-codeBase>codeBase</a>;
   79867            attribute DOMString <a href=#dom-object-codetype title=dom-object-codeType>codeType</a>;
   79868            attribute boolean <a href=#dom-object-declare title=dom-object-declare>declare</a>;
   79869            attribute unsigned long <a href=#dom-object-hspace title=dom-object-hspace>hspace</a>;
   79870            attribute DOMString <a href=#dom-object-standby title=dom-object-standby>standby</a>;
   79871            attribute unsigned long <a href=#dom-object-vspace title=dom-object-vspace>vspace</a>;
   79872 };</pre>
   79873 
   79874   <p>The <dfn id=dom-object-align title=dom-object-align><code>align</code></dfn>, <dfn id=dom-object-archive title=dom-object-archive><code>archive</code></dfn>, <dfn id=dom-object-border title=dom-object-border><code>border</code></dfn>, <dfn id=dom-object-code title=dom-object-code><code>code</code></dfn>, <dfn id=dom-object-declare title=dom-object-declare><code>declare</code></dfn>, <dfn id=dom-object-hspace title=dom-object-hspace><code>hspace</code></dfn>, <dfn id=dom-object-standby title=dom-object-standby><code>standby</code></dfn>, and <dfn id=dom-object-vspace title=dom-object-vspace><code>vspace</code></dfn> IDL attributes
   79875   of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a> the
   79876   respective content attributes of the same name.</p>
   79877 
   79878   <p>The <dfn id=dom-object-codebase title=dom-object-codeBase><code>codeBase</code></dfn> IDL
   79879   attribute of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a>
   79880   the element's <code title=attr-object-codebase><a href=#attr-object-codebase>codebase</a></code> content
   79881   attribute.</p>
   79882 
   79883   <p>The <dfn id=dom-object-codetype title=dom-object-codeType><code>codeType</code></dfn> IDL
   79884   attribute of the <code><a href=#the-object-element>object</a></code> element must <a href=#reflect>reflect</a>
   79885   the element's <code title=attr-object-codetype><a href=#attr-object-codetype>codetype</a></code> content
   79886   attribute.</p>
   79887 
   79888   <hr><pre class=idl>[Supplemental]
   79889 interface <a href=#htmlolistelement>HTMLOListElement</a> {
   79890            attribute boolean <a href=#dom-ol-compact title=dom-ol-compact>compact</a>;
   79891            attribute DOMString <a href=#dom-ol-type title=dom-ol-type>type</a>;
   79892 };</pre>
   79893 
   79894   <p>The <dfn id=dom-ol-compact title=dom-ol-compact><code>compact</code></dfn> and
   79895   <dfn id=dom-ol-type title=dom-ol-type><code>type</code></dfn> IDL attributes of
   79896   the <code><a href=#the-ol-element>ol</a></code> element must <a href=#reflect>reflect</a> the respective
   79897   content attributes of the same name.</p>
   79898 
   79899   <hr><pre class=idl>[Supplemental]
   79900 interface <a href=#htmlparagraphelement>HTMLParagraphElement</a> {
   79901            attribute DOMString <a href=#dom-p-align title=dom-p-align>align</a>;
   79902 };</pre>
   79903 
   79904   <p>The <dfn id=dom-p-align title=dom-p-align><code>align</code></dfn> IDL
   79905   attribute of the <code><a href=#the-p-element>p</a></code> element must <a href=#reflect>reflect</a>
   79906   the content attribute of the same name.</p>
   79907 
   79908   <hr><pre class=idl>[Supplemental]
   79909 interface <a href=#htmlparamelement>HTMLParamElement</a> {
   79910            attribute DOMString <a href=#dom-param-type title=dom-param-type>type</a>;
   79911            attribute DOMString <a href=#dom-param-valuetype title=dom-param-valueType>valueType</a>;
   79912 };</pre>
   79913 
   79914   <p>The <dfn id=dom-param-type title=dom-param-type><code>type</code></dfn> IDL
   79915   attribute of the <code><a href=#the-param-element>param</a></code> element must
   79916   <a href=#reflect>reflect</a> the content attribute of the same name.</p>
   79917 
   79918   <p>The <dfn id=dom-param-valuetype title=dom-param-valueType><code>valueType</code></dfn>
   79919   IDL attribute of the <code><a href=#the-param-element>param</a></code> element must
   79920   <a href=#reflect>reflect</a> the element's <code title=attr-param-valuetype><a href=#attr-param-valuetype>valuetype</a></code> content attribute.</p>
   79921 
   79922   <hr><p>User agents must treat <code><a href=#plaintext>plaintext</a></code> elements in a
   79923   manner equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>
   79924 
   79925   <hr><pre class=idl>[Supplemental]
   79926 interface <a href=#htmlpreelement>HTMLPreElement</a> {
   79927            attribute unsigned long <a href=#dom-pre-width title=dom-pre-width>width</a>;
   79928 };</pre>
   79929 
   79930   <p>The <dfn id=dom-pre-width title=dom-pre-width><code>width</code></dfn> IDL
   79931   attribute of the <code><a href=#the-pre-element>pre</a></code> element must <a href=#reflect>reflect</a>
   79932   the content attribute of the same name.</p>
   79933 
   79934   <hr><pre class=idl>[Supplemental]
   79935 interface <a href=#htmlscriptelement>HTMLScriptElement</a> {
   79936            attribute DOMString <a href=#dom-script-event title=dom-script-event>event</a>;
   79937            attribute DOMString <a href=#dom-script-htmlfor title=dom-script-htmlFor>htmlFor</a>;
   79938 };</pre>
   79939 
   79940   <p>The <dfn id=dom-script-event title=dom-script-event><code>event</code></dfn> and
   79941   <dfn id=dom-script-htmlfor title=dom-script-htmlFor><code>htmlFor</code></dfn> IDL
   79942   attributes of the <code><a href=#script>script</a></code> element must return the empty
   79943   string on getting, and do nothing on setting.</p>
   79944 
   79945   <hr><pre class=idl>[Supplemental]
   79946 interface <a href=#htmltableelement>HTMLTableElement</a> {
   79947            attribute DOMString <a href=#dom-table-align title=dom-table-align>align</a>;
   79948            attribute DOMString <a href=#dom-table-bgcolor title=dom-table-bgColor>bgColor</a>;
   79949            attribute DOMString <a href=#dom-table-border title=dom-table-border>border</a>;
   79950            attribute DOMString <a href=#dom-table-cellpadding title=dom-table-cellPadding>cellPadding</a>;
   79951            attribute DOMString <a href=#dom-table-cellspacing title=dom-table-cellSpacing>cellSpacing</a>;
   79952            attribute DOMString <a href=#dom-table-frame title=dom-table-frame>frame</a>;
   79953            attribute DOMString <a href=#dom-table-rules title=dom-table-rules>rules</a>;
   79954            attribute DOMString <a href=#dom-table-width title=dom-table-width>width</a>;
   79955 };</pre>
   79956 
   79957   <p>The <dfn id=dom-table-align title=dom-table-align><code>align</code></dfn>, <dfn id=dom-table-border title=dom-table-border><code>border</code></dfn>, <dfn id=dom-table-frame title=dom-table-frame><code>frame</code></dfn>, <dfn id=dom-table-rules title=dom-table-rules><code>rules</code></dfn>, and <dfn id=dom-table-width title=dom-table-width><code>width</code></dfn>, IDL attributes of
   79958   the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a> the
   79959   respective content attributes of the same name.</p>
   79960 
   79961   <p>The <dfn id=dom-table-bgcolor title=dom-table-bgColor><code>bgColor</code></dfn> IDL
   79962   attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
   79963   the element's <code title=attr-table-bgcolor><a href=#attr-table-bgcolor>bgcolor</a></code> content
   79964   attribute.</p>
   79965 
   79966   <p>The <dfn id=dom-table-cellpadding title=dom-table-cellPadding><code>cellPadding</code></dfn> IDL
   79967   attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
   79968   the element's <code title=attr-table-cellpadding><a href=#attr-table-cellpadding>cellpadding</a></code> content
   79969   attribute.</p>
   79970 
   79971   <p>The <dfn id=dom-table-cellspacing title=dom-table-cellSpacing><code>cellSpacing</code></dfn> IDL
   79972   attribute of the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a>
   79973   the element's <code title=attr-table-cellspacing><a href=#attr-table-cellspacing>cellspacing</a></code> content
   79974   attribute.</p>
   79975 
   79976   <hr><pre class=idl>[Supplemental]
   79977 interface <a href=#htmltablesectionelement>HTMLTableSectionElement</a> {
   79978            attribute DOMString <a href=#dom-tbody-align title=dom-tbody-align>align</a>;
   79979            attribute DOMString <a href=#dom-tbody-ch title=dom-tbody-ch>ch</a>;
   79980            attribute DOMString <a href=#dom-tbody-choff title=dom-tbody-chOff>chOff</a>;
   79981            attribute DOMString <a href=#dom-tbody-valign title=dom-tbody-vAlign>vAlign</a>;
   79982 };</pre>
   79983 
   79984   <p>The <dfn id=dom-tbody-align title=dom-tbody-align><code>align</code></dfn> IDL
   79985   attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
   79986   <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the content
   79987   attribute of the same name.</p>
   79988 
   79989   <p>The <dfn id=dom-tbody-ch title=dom-tbody-ch><code>ch</code></dfn> IDL attribute
   79990   of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
   79991   <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the elements'
   79992   <code title=attr-tbody-char><a href=#attr-tbody-char>char</a></code> content attributes.</p>
   79993 
   79994   <p>The <dfn id=dom-tbody-choff title=dom-tbody-chOff><code>chOff</code></dfn> IDL
   79995   attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
   79996   <code><a href=#the-tfoot-element>tfoot</a></code> elements must <a href=#reflect>reflect</a> the elements'
   79997   <code title=attr-tbody-charoff><a href=#attr-tbody-charoff>charoff</a></code> content attributes.</p>
   79998 
   79999   <p>The <dfn id=dom-tbody-valign title=dom-tbody-vAlign><code>vAlign</code></dfn> IDL
   80000   attribute of the <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-thead-element>thead</a></code>, and
   80001   <code><a href=#the-tfoot-element>tfoot</a></code> element must <a href=#reflect>reflect</a> the elements'
   80002   <code title=attr-tbody-valign><a href=#attr-tbody-valign>valign</a></code> content
   80003   attributes.</p>
   80004 
   80005   <hr><pre class=idl>[Supplemental]
   80006 interface <a href=#htmltablecellelement>HTMLTableCellElement</a> {
   80007            attribute DOMString <a href=#dom-tdth-abbr title=dom-tdth-abbr>abbr</a>;
   80008            attribute DOMString <a href=#dom-tdth-align title=dom-tdth-align>align</a>;
   80009            attribute DOMString <a href=#dom-tdth-axis title=dom-tdth-axis>axis</a>;
   80010            attribute DOMString <a href=#dom-tdth-bgcolor title=dom-tdth-bgColor>bgColor</a>;
   80011            attribute DOMString <a href=#dom-tdth-ch title=dom-tdth-ch>ch</a>;
   80012            attribute DOMString <a href=#dom-tdth-choff title=dom-tdth-chOff>chOff</a>;
   80013            attribute DOMString <a href=#dom-tdth-height title=dom-tdth-height>height</a>;
   80014            attribute boolean <a href=#dom-tdth-nowrap title=dom-tdth-noWrap>noWrap</a>;
   80015            attribute DOMString <a href=#dom-tdth-valign title=dom-tdth-vAlign>vAlign</a>;
   80016            attribute DOMString <a href=#dom-tdth-width title=dom-tdth-width>width</a>;
   80017 };</pre>
   80018 
   80019   <p>The <dfn id=dom-tdth-abbr title=dom-tdth-abbr><code>abbr</code></dfn>, <dfn id=dom-tdth-align title=dom-tdth-align><code>align</code></dfn>, <dfn id=dom-tdth-axis title=dom-tdth-axis><code>axis</code></dfn>, <dfn id=dom-tdth-height title=dom-tdth-height><code>height</code></dfn>, and <dfn id=dom-tdth-width title=dom-tdth-width><code>width</code></dfn> IDL attributes of
   80020   the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
   80021   <a href=#reflect>reflect</a> the respective content attributes of the same
   80022   name.</p>
   80023 
   80024   <p>The <dfn id=dom-tdth-bgcolor title=dom-tdth-bgColor><code>bgColor</code></dfn> IDL
   80025   attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
   80026   <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-bgcolor><a href=#attr-tdth-bgcolor>bgcolor</a></code> content attributes.</p>
   80027 
   80028   <p>The <dfn id=dom-tdth-ch title=dom-tdth-ch><code>ch</code></dfn> IDL
   80029   attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
   80030   <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-char><a href=#attr-tdth-char>char</a></code> content attributes.</p>
   80031 
   80032   <p>The <dfn id=dom-tdth-choff title=dom-tdth-chOff><code>chOff</code></dfn> IDL
   80033   attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
   80034   <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-charoff><a href=#attr-tdth-charoff>charoff</a></code> content attributes.</p>
   80035 
   80036   <p>The <dfn id=dom-tdth-nowrap title=dom-tdth-noWrap><code>noWrap</code></dfn> IDL
   80037   attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements must
   80038   <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-nowrap><a href=#attr-tdth-nowrap>nowrap</a></code> content attributes.</p>
   80039 
   80040   <p>The <dfn id=dom-tdth-valign title=dom-tdth-vAlign><code>vAlign</code></dfn> IDL
   80041   attribute of the <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> element must
   80042   <a href=#reflect>reflect</a> the elements' <code title=attr-tdth-valign><a href=#attr-tdth-valign>valign</a></code> content attributes.</p>
   80043 
   80044   <hr><pre class=idl>[Supplemental]
   80045 interface <a href=#htmltablerowelement>HTMLTableRowElement</a> {
   80046            attribute DOMString <a href=#dom-tr-align title=dom-tr-align>align</a>;
   80047            attribute DOMString <a href=#dom-tr-bgcolor title=dom-tr-bgColor>bgColor</a>;
   80048            attribute DOMString <a href=#dom-tr-ch title=dom-tr-ch>ch</a>;
   80049            attribute DOMString <a href=#dom-tr-choff title=dom-tr-chOff>chOff</a>;
   80050            attribute DOMString <a href=#dom-tr-valign title=dom-tr-vAlign>vAlign</a>;
   80051 };</pre>
   80052 
   80053   <p>The <dfn id=dom-tr-align title=dom-tr-align><code>align</code></dfn> IDL
   80054   attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
   80055   the content attribute of the same name.</p>
   80056 
   80057   <p>The <dfn id=dom-tr-bgcolor title=dom-tr-bgColor><code>bgColor</code></dfn> IDL
   80058   attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
   80059   the element's <code title=attr-tr-bgcolor><a href=#attr-tr-bgcolor>bgcolor</a></code> content
   80060   attribute.</p>
   80061 
   80062   <p>The <dfn id=dom-tr-ch title=dom-tr-ch><code>ch</code></dfn> IDL attribute of
   80063   the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a> the element's
   80064   <code title=attr-tr-char><a href=#attr-tr-char>char</a></code> content attribute.</p>
   80065 
   80066   <p>The <dfn id=dom-tr-choff title=dom-tr-chOff><code>chOff</code></dfn> IDL
   80067   attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
   80068   the element's <code title=attr-tr-charoff><a href=#attr-tr-charoff>charoff</a></code> content
   80069   attribute.</p>
   80070 
   80071   <p>The <dfn id=dom-tr-valign title=dom-tr-vAlign><code>vAlign</code></dfn> IDL
   80072   attribute of the <code><a href=#the-tr-element>tr</a></code> element must <a href=#reflect>reflect</a>
   80073   the element's <code title=attr-tr-valign><a href=#attr-tr-valign>valign</a></code> content
   80074   attribute.</p>
   80075 
   80076   <hr><pre class=idl>[Supplemental]
   80077 interface <a href=#htmlulistelement>HTMLUListElement</a> {
   80078            attribute boolean <a href=#dom-ul-compact title=dom-ul-compact>compact</a>;
   80079            attribute DOMString <a href=#dom-ul-type title=dom-ul-type>type</a>;
   80080 };</pre>
   80081 
   80082   <p>The <dfn id=dom-ul-compact title=dom-ul-compact><code>compact</code></dfn> and
   80083   <dfn id=dom-ul-type title=dom-ul-type><code>type</code></dfn> IDL attributes of
   80084   the <code><a href=#the-ul-element>ul</a></code> element must <a href=#reflect>reflect</a> the respective
   80085   content attributes of the same name.</p>
   80086 
   80087   <hr><p>User agents must treat <code><a href=#xmp>xmp</a></code> elements in a manner
   80088   equivalent to <code><a href=#the-pre-element>pre</a></code> elements.</p>
   80089 
   80090   <hr><p>The <code><a href=#bgsound>bgsound</a></code>, <code><a href=#isindex-0>isindex</a></code>,
   80091   <code><a href=#multicol>multicol</a></code>, <code><a href=#nextid>nextid</a></code>, <code><a href=#rb>rb</a></code>, and
   80092   <code><a href=#spacer>spacer</a></code> elements must use the
   80093   <code><a href=#htmlunknownelement>HTMLUnknownElement</a></code> interface.</p> <!-- has to be
   80094   explicitly listed because technically we define the elements in the
   80095   spec, albeit as obsolete, and then we say that only elements not
   80096   defined in this spec use HTMLUnknownElement. -->
   80097 
   80098   <hr><pre class=idl>[Supplemental]
   80099 interface <a href=#htmldocument>HTMLDocument</a> {
   80100            attribute DOMString <a href=#dom-document-fgcolor title=dom-document-fgColor>fgColor</a>;
   80101            attribute DOMString <a href=#dom-document-bgcolor title=dom-document-bgColor>bgColor</a>;
   80102            attribute DOMString <a href=#dom-document-linkcolor title=dom-document-linkColor>linkColor</a>;
   80103            attribute DOMString <a href=#dom-document-vlinkcolor title=dom-document-vlinkColor>vlinkColor</a>;
   80104            attribute DOMString <a href=#dom-document-alinkcolor title=dom-document-alinkColor>alinkColor</a>;
   80105 
   80106   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-anchors title=dom-document-anchors>anchors</a>;
   80107   readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-document-applets title=dom-document-applets>applets</a>;
   80108 
   80109   void <a href=#dom-document-clear title=dom-document-clear>clear</a>();
   80110 
   80111   readonly attribute <a href=#htmlallcollection>HTMLAllCollection</a> <a href=#dom-document-all title=dom-document-all>all</a>;
   80112 };</pre>
   80113 
   80114   <p>The attributes of the <code><a href=#document>Document</a></code> object listed in the
   80115   first column of the following table must <a href=#reflect>reflect</a> the
   80116   content attribute on <a href=#the-body-element>the body element</a> with the name
   80117   given in the corresponding cell in the second column on the same
   80118   row, if <a href=#the-body-element>the body element</a> is a <code><a href=#the-body-element-0>body</a></code> element
   80119   (as opposed to a <code><a href=#frameset>frameset</a></code> element). When there is no
   80120   <a href=#the-body-element title="the body element">body element</a> or if it is a
   80121   <code><a href=#frameset>frameset</a></code> element, the attributes must instead return
   80122   the empty string on getting and do nothing on setting.</p>
   80123 
   80124   <table><thead><tr><th> IDL attribute
   80125      <th> Content attribute
   80126    <tbody><tr><td><dfn id=dom-document-fgcolor title=dom-document-fgColor><code>fgColor</code></dfn>
   80127      <td><code title=attr-body-text><a href=#attr-body-text>text</a></code>
   80128     <tr><td><dfn id=dom-document-bgcolor title=dom-document-bgColor><code>bgColor</code></dfn>
   80129      <td><code title=attr-body-bgcolor><a href=#attr-body-bgcolor>bgcolor</a></code>
   80130     <tr><td><dfn id=dom-document-linkcolor title=dom-document-linkColor><code>linkColor</code></dfn>
   80131      <td><code title=attr-body-link><a href=#attr-body-link>link</a></code>
   80132     <tr><td><dfn id=dom-document-vlinkcolor title=dom-document-vLinkColor><code>vLinkColor</code></dfn>
   80133      <td><code title=attr-body-vlink><a href=#attr-body-vlink>vlink</a></code>
   80134     <tr><td><dfn id=dom-document-alinkcolor title=dom-document-aLinkColor><code>aLinkColor</code></dfn>
   80135      <td><code title=attr-body-alink><a href=#attr-body-alink>alink</a></code>
   80136   </table><hr><p>The <dfn id=dom-document-anchors title=dom-document-anchors><code>anchors</code></dfn>
   80137   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   80138   <code><a href=#document>Document</a></code> node, whose filter matches only <code><a href=#the-a-element>a</a></code>
   80139   elements with <code title=attr-a-name><a href=#attr-a-name>name</a></code>
   80140   attributes.</p>
   80141 
   80142   <p>The <dfn id=dom-document-applets title=dom-document-applets><code>applets</code></dfn>
   80143   attribute must return an <code><a href=#htmlcollection>HTMLCollection</a></code> rooted at the
   80144   <code><a href=#document>Document</a></code> node, whose filter matches only
   80145   <code><a href=#the-applet-element>applet</a></code> elements.</p>
   80146 
   80147   <p>The <dfn id=dom-document-clear title=dom-document-clear><code>clear()</code></dfn>
   80148   method must do nothing.</p>
   80149 
   80150   <hr><p>The <dfn id=dom-document-all title=dom-document-all><code>all</code></dfn>
   80151   attribute must return an <code><a href=#htmlallcollection>HTMLAllCollection</a></code> rooted at the
   80152   <code><a href=#document>Document</a></code> node, whose filter matches all elements.</p>
   80153 
   80154   <p>The object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code>
   80155   has several unusual behaviors:</p>
   80156 
   80157   <ul><li><p>The user agent must act as if the ToBoolean() operator in
   80158    JavaScript converts the object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code> to the false value.</li>
   80159 
   80160    <li><p>The user agent must act as if, for the purposes of the <code title="">==</code> and <code title="">!=</code> operators in
   80161    JavaScript, the object returned for <code title=dom-document-all><a href=#dom-document-all>all</a></code> is equal to the <code title="">undefined</code> value.</li>
   80162 
   80163    <li><p>The user agent must act such that the <code title="">typeof</code> operator in JavaScript returns the string
   80164    <code title="">undefined</code> when applied to the object returned
   80165    for <code title=dom-document-all><a href=#dom-document-all>all</a></code>.</li>
   80166 
   80167   </ul><p class=note>These requirements are a <a href=#willful-violation>willful
   80168   violation</a> of the JavaScript specification current at the time
   80169   of writing (ECMAScript edition 3). The JavaScript specification
   80170   requires that the ToBoolean() operator convert all objects to the
   80171   true value, and does not have provisions for objects acting as if
   80172   they were <code title="">undefined</code> for the purposes of
   80173   certain operators. This violation is motivated by a desire for
   80174   compatibility with two classes of legacy content: one that uses the
   80175   presence of <code title=dom-document-all><a href=#dom-document-all>document.all</a></code> as a
   80176   way to detect legacy user agents, and one that only supports those
   80177   legacy user agents and uses the <code title=dom-document-all><a href=#dom-document-all>document.all</a></code> object without testing
   80178   for its presence first. <a href=#refsECMA262>[ECMA262]</a></p>
   80179 
   80180   </div>
   80181 
   80182 
   80183 
   80184 
   80185   <h2 id=iana><span class=secno>14 </span>IANA considerations</h2>
   80186 
   80187   <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
   80188 
   80189 
   80190 
   80191   <h3 id=text/html><span class=secno>14.1 </span><dfn><code>text/html</code></dfn></h3>
   80192 
   80193   <p>This registration is for community review and will be submitted
   80194   to the IESG for review, approval, and registration with IANA.</p>
   80195 
   80196   <!--
   80197    To: ietf-types (a] iana.org
   80198    Subject: Registration of media type text/html
   80199   -->
   80200 
   80201   <!--
   80202    Obsoletes:
   80203    http://www.ietf.org/rfc/rfc2854
   80204 
   80205    Include a request to retire RFC 2854 persuant to section 6.4 of RFC 2026.
   80206   -->
   80207 
   80208   <dl><dt>Type name:</dt>
   80209    <dd>text</dd>
   80210    <dt>Subtype name:</dt>
   80211    <dd>html</dd>
   80212    <dt>Required parameters:</dt>
   80213    <dd>No required parameters</dd>
   80214    <dt>Optional parameters:</dt>
   80215    <dd>
   80216     <dl><dt><code title="">charset</code></dt>
   80217      <dd>
   80218       <p>The <code title="">charset</code> parameter may be provided
   80219       to definitively specify the <a href="#document's-character-encoding">document's character
   80220       encoding</a>, overriding any <a href=#character-encoding-declaration title="character encoding
   80221       declaration">character encoding declarations</a> in the
   80222       document. The parameter's value must be the name of the
   80223       character encoding used to serialize the file, must be a valid
   80224       character encoding name, and must be an <a href=#ascii-case-insensitive>ASCII
   80225       case-insensitive</a> match for the <a href=#preferred-mime-name>preferred MIME
   80226       name</a> for that encoding. <a href=#refsIANACHARSET>[IANACHARSET]</a></p>
   80227      </dd>
   80228     </dl></dd>
   80229    <dt>Encoding considerations:</dt>
   80230    <dd>See the section on <a href=#character-encoding-declaration title="character encoding
   80231    declaration">character encoding declarations</a>.</dd>
   80232    <dt>Security considerations:</dt>
   80233    <dd>
   80234 
   80235     <p>Entire novels have been written about the security
   80236     considerations that apply to HTML documents. Many are listed in
   80237     this document, to which the reader is referred for more
   80238     details. Some general concerns bear mentioning here, however:</p>
   80239 
   80240     <p>HTML is scripted language, and has a large number of APIs (some
   80241     of which are described in this document). Script can expose the
   80242     user to potential risks of information leakage, credential
   80243     leakage, cross-site scripting attacks, cross-site request
   80244     forgeries, and a host of other problems. While the designs in this
   80245     specification are intended to be safe if implemented correctly, a
   80246     full implementation is a massive undertaking and, as with any
   80247     software, user agents are likely to have security bugs.</p>
   80248 
   80249     <p>Even without scripting, there are specific features in HTML
   80250     which, for historical reasons, are required for broad
   80251     compatibility with legacy content but that expose the user to
   80252     unfortunate security problems. In particular, the <code><a href=#the-img-element>img</a></code>
   80253     element can be used in conjunction with some other features as a
   80254     way to effect a port scan from the user's location on the
   80255     Internet. This can expose local network topologies that the
   80256     attacker would otherwise not be able to determine.</p>
   80257 
   80258     <p>HTML relies on a compartmentalization scheme sometimes known as
   80259     the <i>same-origin policy</i>. An <a href=#origin>origin</a> in most
   80260     cases consists of all the pages served from the same host, on the
   80261     same port, using the same protocol.</p>
   80262 
   80263     <p>It is critical, therefore, to ensure that any untrusted content
   80264     that forms part of a site be hosted on a different
   80265     <a href=#origin>origin</a> than any sensitive content on that site.
   80266     Untrusted content can easily spoof any other page on the same
   80267     origin, read data from that origin, cause scripts in that origin
   80268     to execute, submit forms to and from that origin even if they are
   80269     protected from cross-site request forgery attacks by unique
   80270     tokens, and make use of any third-party resources exposed to or
   80271     rights granted to that origin.</p>
   80272 
   80273    </dd>
   80274    <dt>Interoperability considerations:</dt>
   80275    <dd>
   80276     Rules for processing both conforming and non-conforming content
   80277     are defined in this specification.
   80278    </dd>
   80279    <dt>Published specification:</dt>
   80280    <dd id=authors-using-html>
   80281     This document is the relevant specification. Labeling a resource
   80282     with the <code><a href=#text/html>text/html</a></code> type asserts that the resource is
   80283     an <a href=#html-documents title="HTML documents">HTML document</a> using
   80284     <a href=#syntax>the HTML syntax</a>.
   80285    </dd>
   80286    <dt>Applications that use this media type:</dt>
   80287    <dd>
   80288     Web browsers, tools for processing Web content, HTML authoring
   80289     tools, search engines, validators.
   80290    </dd>
   80291    <dt>Additional information:</dt>
   80292    <dd>
   80293     <dl><dt>Magic number(s):</dt>
   80294      <dd>No sequence of bytes can uniquely identify an HTML
   80295      document. More information on detecting HTML documents is
   80296      available in the Content-Type Processing Model specification. <a href=#refsMIMESNIFF>[MIMESNIFF]</a></dd>
   80297      <dt>File extension(s):</dt>
   80298      <dd>"<code title="">html</code>" and "<code title="">htm</code>"
   80299      are commonly, but certainly not exclusively, used as the
   80300      extension for HTML documents.</dd>
   80301      <dt>Macintosh file type code(s):</dt>
   80302      <dd><code title="">TEXT</code></dd>
   80303     </dl></dd>
   80304    <dt>Person &amp; email address to contact for further information:</dt>
   80305    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80306    <dt>Intended usage:</dt>
   80307    <dd>Common</dd>
   80308    <dt>Restrictions on usage:</dt>
   80309    <dd>No restrictions apply.</dd>
   80310    <dt>Author:</dt>
   80311    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80312    <dt>Change controller:</dt>
   80313    <dd>W3C</dd>
   80314   </dl><p>Fragment identifiers used with <code><a href=#text/html>text/html</a></code> resources
   80315   refer to <a href=#the-indicated-part-of-the-document>the indicated part of the document</a>.</p>
   80316 
   80317 
   80318   <h3 id=text/html-sandboxed><span class=secno>14.2 </span><dfn><code>text/html-sandboxed</code></dfn></h3>
   80319 
   80320   <p>This registration is for community review and will be submitted
   80321   to the IESG for review, approval, and registration with IANA.</p>
   80322 
   80323   <!--
   80324    To: ietf-types (a] iana.org
   80325    Subject: Registration of media type text/html-sandboxed
   80326   -->
   80327 
   80328   <dl><dt>Type name:</dt>
   80329    <dd>text</dd>
   80330    <dt>Subtype name:</dt>
   80331    <dd>html-sandboxed</dd>
   80332    <dt>Required parameters:</dt>
   80333    <dd>No required parameters</dd>
   80334    <dt>Optional parameters:</dt>
   80335    <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   80336    <dt>Encoding considerations:</dt>
   80337    <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   80338    <dt>Security considerations:</dt>
   80339    <dd>
   80340     <p>The purpose of the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> MIME type
   80341     is to provide a way for content providers to indicate that they
   80342     want the file to be interpreted in a manner that does not give the
   80343     file's contents access to the rest of the site. This is achieved
   80344     by assigning the <code><a href=#document>Document</a></code> objects generated from
   80345     resources labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> unique
   80346     origins.</p>
   80347     <p>To avoid having legacy user agents treating resources labeled
   80348     as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> as regular
   80349     <code><a href=#text/html>text/html</a></code> files, authors should avoid using the <code title="">.html</code> or <code title="">.htm</code> extensions for
   80350     resources labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>.</p>
   80351     <p>Beyond this, the type is identical to <code><a href=#text/html>text/html</a></code>,
   80352     and the same considerations apply.</p>
   80353    </dd>
   80354    <dt>Interoperability considerations:</dt>
   80355    <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   80356    <dt>Published specification:</dt>
   80357    <dd>
   80358     This document is the relevant specification. Labeling a resource
   80359     with the <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> type asserts that the
   80360     resource is an <a href=#html-documents title="HTML documents">HTML document</a>
   80361     using <a href=#syntax>the HTML syntax</a>.
   80362    </dd>
   80363    <dt>Applications that use this media type:</dt>
   80364    <dd>Same as for <code><a href=#text/html>text/html</a></code></dd>
   80365    <dt>Additional information:</dt>
   80366    <dd>
   80367     <dl><dt>Magic number(s):</dt>
   80368      <dd>Documents labeled as <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code> are
   80369      heuristically indistinguishable from those labeled as
   80370      <code><a href=#text/html>text/html</a></code>.</dd>
   80371      <dt>File extension(s):</dt>
   80372      <dd>"<code title="">sandboxed</code>"</dd>
   80373      <dt>Macintosh file type code(s):</dt>
   80374      <dd><code title="">TEXT</code></dd>
   80375     </dl></dd>
   80376    <dt>Person &amp; email address to contact for further information:</dt>
   80377    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80378    <dt>Intended usage:</dt>
   80379    <dd>Common</dd>
   80380    <dt>Restrictions on usage:</dt>
   80381    <dd>No restrictions apply.</dd>
   80382    <dt>Author:</dt>
   80383    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80384    <dt>Change controller:</dt>
   80385    <dd>WHATWG</dd>
   80386   </dl><p>Fragment identifiers used with <code><a href=#text/html-sandboxed>text/html-sandboxed</a></code>
   80387   resources refer to <a href=#the-indicated-part-of-the-document>the indicated part of the
   80388   document</a>.</p>
   80389 
   80390 
   80391   <h3 id=application/xhtml+xml><span class=secno>14.3 </span><dfn><code>application/xhtml+xml</code></dfn></h3>
   80392 
   80393   <p>This registration is for community review and will be submitted
   80394   to the IESG for review, approval, and registration with IANA.</p>
   80395 
   80396   <!--
   80397    To: ietf-types (a] iana.org
   80398    Subject: Registration of media type application/xhtml+xml
   80399   -->
   80400 
   80401   <!--
   80402    Obsoletes:
   80403    http://www.ietf.org/rfc/rfc3236.txt
   80404   -->
   80405 
   80406   <dl><dt>Type name:</dt>
   80407    <dd>application</dd>
   80408    <dt>Subtype name:</dt>
   80409    <dd>xhtml+xml</dd>
   80410    <dt>Required parameters:</dt>
   80411    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80412    <dt>Optional parameters:</dt>
   80413    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80414    <dt>Encoding considerations:</dt>
   80415    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80416    <dt>Security considerations:</dt>
   80417    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80418    <dt>Interoperability considerations:</dt>
   80419    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80420    <dt id=authors-using-xhtml>Published specification:</dt>
   80421    <dd>
   80422     Labeling a resource with the <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>
   80423     type asserts that the resource is an XML document that likely has
   80424     a root element from the <a href=#html-namespace-0>HTML namespace</a>. As such, the
   80425     relevant specifications are the XML specification, the Namespaces
   80426     in XML specification, and this specification. <a href=#refsXML>[XML]</a> <a href=#refsXMLNS>[XMLNS]</a>
   80427    </dd>
   80428    <dt>Applications that use this media type:</dt>
   80429    <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80430    <dt>Additional information:</dt>
   80431    <dd>
   80432     <dl><dt>Magic number(s):</dt>
   80433      <dd>Same as for <code>application/xml</code> <a href=#refsRFC3023>[RFC3023]</a></dd>
   80434      <dt>File extension(s):</dt>
   80435      <dd>"<code title="">xhtml</code>" and "<code title="">xht</code>"
   80436      are sometimes used as extensions for XML resources that have a
   80437      root element from the <a href=#html-namespace-0>HTML namespace</a>.</dd>
   80438      <dt>Macintosh file type code(s):</dt>
   80439      <dd><code title="">TEXT</code></dd>
   80440     </dl></dd>
   80441    <dt>Person &amp; email address to contact for further information:</dt>
   80442    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80443    <dt>Intended usage:</dt>
   80444    <dd>Common</dd>
   80445    <dt>Restrictions on usage:</dt>
   80446    <dd>No restrictions apply.</dd>
   80447    <dt>Author:</dt>
   80448    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80449    <dt>Change controller:</dt>
   80450    <dd>W3C</dd>
   80451   </dl><p>Fragment identifiers used with <code><a href=#application/xhtml+xml>application/xhtml+xml</a></code>
   80452   resources have the same semantics as with any <a href=#xml-mime-type>XML MIME
   80453   type</a>. <a href=#refsRFC3023>[RFC3023]</a></p>
   80454 
   80455 
   80456   <h3 id=text/cache-manifest><span class=secno>14.4 </span><dfn><code>text/cache-manifest</code></dfn></h3>
   80457 
   80458   <p>This registration is for community review and will be submitted
   80459   to the IESG for review, approval, and registration with IANA.</p>
   80460 
   80461   <!--
   80462    To: ietf-types (a] iana.org
   80463    Subject: Registration of media type text/cache-manifest
   80464   -->
   80465 
   80466   <dl><dt>Type name:</dt>
   80467    <dd>text</dd>
   80468    <dt>Subtype name:</dt>
   80469    <dd>cache-manifest</dd>
   80470    <dt>Required parameters:</dt>
   80471    <dd>No parameters</dd>
   80472    <dt>Optional parameters:</dt>
   80473    <dd>No parameters</dd>
   80474    <dt>Encoding considerations:</dt>
   80475    <dd>Always UTF-8.</dd>
   80476    <dt>Security considerations:</dt>
   80477    <dd>
   80478     <p>Cache manifests themselves pose no immediate risk unless
   80479     sensitive information is included within the
   80480     manifest. Implementations, however, are required to follow
   80481     specific rules when populating a cache based on a cache manifest,
   80482     to ensure that certain origin-based restrictions are
   80483     honored. Failure to correctly implement these rules can result in
   80484     information leakage, cross-site scripting attacks, and the
   80485     like.</p>
   80486    </dd>
   80487    <dt>Interoperability considerations:</dt>
   80488    <dd>
   80489     Rules for processing both conforming and non-conforming content
   80490     are defined in this specification.
   80491    </dd>
   80492    <dt>Published specification:</dt>
   80493    <dd>
   80494     This document is the relevant specification.
   80495    </dd>
   80496    <dt>Applications that use this media type:</dt>
   80497    <dd>
   80498     Web browsers.
   80499    </dd>
   80500    <dt>Additional information:</dt>
   80501    <dd>
   80502     <dl><dt>Magic number(s):</dt>
   80503      <dd>Cache manifests begin with the string "<code title="">CACHE
   80504      MANIFEST</code>", followed by either a U+0020 SPACE character, a
   80505      U+0009 CHARACTER TABULATION (tab) character, a U+000A LINE FEED
   80506      (LF) character, or a U+000D CARRIAGE RETURN (CR) character.</dd>
   80507      <dt>File extension(s):</dt>
   80508      <dd>"<code title="">manifest</code>"</dd>
   80509      <dt>Macintosh file type code(s):</dt>
   80510      <dd>No specific Macintosh file type codes are recommended for this type.</dd>
   80511     </dl></dd>
   80512    <dt>Person &amp; email address to contact for further information:</dt>
   80513    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80514    <dt>Intended usage:</dt>
   80515    <dd>Common</dd>
   80516    <dt>Restrictions on usage:</dt>
   80517    <dd>No restrictions apply.</dd>
   80518    <dt>Author:</dt>
   80519    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80520    <dt>Change controller:</dt>
   80521    <dd>WHATWG</dd>
   80522   </dl><p>Fragment identifiers have no meaning with
   80523   <code><a href=#text/cache-manifest>text/cache-manifest</a></code> resources.</p>
   80524 
   80525 
   80526 <!--PING-->
   80527   <h3 id=text/ping><span class=secno>14.5 </span><dfn><code>text/ping</code></dfn></h3>
   80528 
   80529   <p>This registration is for community review and will be submitted
   80530   to the IESG for review, approval, and registration with IANA.</p>
   80531 
   80532   <!--
   80533    To: ietf-types (a] iana.org
   80534    Subject: Registration of media type text/ping
   80535   -->
   80536 
   80537   <dl><dt>Type name:</dt>
   80538    <dd>text</dd>
   80539    <dt>Subtype name:</dt>
   80540    <dd>ping</dd>
   80541    <dt>Required parameters:</dt>
   80542    <dd>No parameters</dd>
   80543    <dt>Optional parameters:</dt>
   80544    <dd>No parameters</dd>
   80545    <dt>Encoding considerations:</dt>
   80546    <dd>Not applicable.</dd>
   80547    <dt>Security considerations:</dt>
   80548    <dd>
   80549     <p>If used exclusively in the fashion described in the context of
   80550     <a href=#hyperlink-auditing>hyperlink auditing</a>, this type introduces no new
   80551     security concerns.</p>
   80552    </dd>
   80553    <dt>Interoperability considerations:</dt>
   80554    <dd>
   80555     Rules applicable to this type are defined in this specification.
   80556    </dd>
   80557    <dt>Published specification:</dt>
   80558    <dd>
   80559     This document is the relevant specification.
   80560    </dd>
   80561    <dt>Applications that use this media type:</dt>
   80562    <dd>
   80563     Web browsers.
   80564    </dd>
   80565    <dt>Additional information:</dt>
   80566    <dd>
   80567     <dl><dt>Magic number(s):</dt>
   80568      <dd><code><a href=#text/ping>text/ping</a></code> resources always consist of the four
   80569      bytes 0x50 0x49 0x4E 0x47 (ASCII 'PING').</dd>
   80570      <dt>File extension(s):</dt>
   80571      <dd>No specific file extension is recommended for this type.</dd>
   80572      <dt>Macintosh file type code(s):</dt>
   80573      <dd>No specific Macintosh file type codes are recommended for this type.</dd>
   80574     </dl></dd>
   80575    <dt>Person &amp; email address to contact for further information:</dt>
   80576    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80577    <dt>Intended usage:</dt>
   80578    <dd>Common</dd>
   80579    <dt>Restrictions on usage:</dt>
   80580    <dd>Only intended for use with HTTP POST requests generated as part
   80581    of a Web browser's processing of the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute.</dd>
   80582    <dt>Author:</dt>
   80583    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80584    <dt>Change controller:</dt>
   80585    <dd>WHATWG</dd>
   80586   </dl><p>Fragment identifiers have no meaning with
   80587   <code><a href=#text/ping>text/ping</a></code> resources.</p>
   80588 <!--PING-->
   80589 
   80590   <h3 id=text/srt><span class=secno>14.6 </span><dfn><code>text/srt</code></dfn></h3>
   80591 
   80592   <p>This registration is for community review and will be submitted
   80593   to the IESG for review, approval, and registration with IANA.</p>
   80594 
   80595   <!--
   80596    To: ietf-types (a] iana.org
   80597    Subject: Registration of media type text/cues
   80598   -->
   80599 
   80600   <dl><dt>Type name:</dt>
   80601    <dd>text</dd>
   80602    <dt>Subtype name:</dt>
   80603    <dd>srt</dd>
   80604    <dt>Required parameters:</dt>
   80605    <dd>No parameters</dd>
   80606    <dt>Optional parameters:</dt>
   80607    <dd>No parameters</dd>
   80608    <dt>Encoding considerations:</dt>
   80609    <dd>Always UTF-8.</dd>
   80610    <dt>Security considerations:</dt>
   80611    <dd>
   80612     <p>Timed track files themselves pose no immediate risk unless
   80613     sensitive information is included within the
   80614     data. Implementations, however, are required to follow specific
   80615     rules when processing timed tracks, to ensure that certain
   80616     origin-based restrictions are honored. Failure to correctly
   80617     implement these rules can result in information leakage,
   80618     cross-site scripting attacks, and the like.</p>
   80619    </dd>
   80620    <dt>Interoperability considerations:</dt>
   80621    <dd>
   80622     Rules for processing both conforming and non-conforming content
   80623     are defined in this specification.
   80624    </dd>
   80625    <dt>Published specification:</dt>
   80626    <dd>
   80627     This document is the relevant specification.
   80628    </dd>
   80629    <dt>Applications that use this media type:</dt>
   80630    <dd>
   80631     Web browsers and other video players.
   80632    </dd>
   80633    <dt>Additional information:</dt>
   80634    <dd>
   80635     <dl><dt>Magic number(s):</dt>
   80636      <dd>No sequence of bytes can uniquely identify a WebSRT timed
   80637      track file.</dd>
   80638      <dt>File extension(s):</dt>
   80639      <dd>"<code title="">srt</code>"</dd>
   80640      <dt>Macintosh file type code(s):</dt>
   80641      <dd>No specific Macintosh file type codes are recommended for this type.</dd>
   80642     </dl></dd>
   80643    <dt>Person &amp; email address to contact for further information:</dt>
   80644    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80645    <dt>Intended usage:</dt>
   80646    <dd>Common</dd>
   80647    <dt>Restrictions on usage:</dt>
   80648    <dd>No restrictions apply.</dd>
   80649    <dt>Author:</dt>
   80650    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80651    <dt>Change controller:</dt>
   80652    <dd>WHATWG</dd>
   80653   </dl><p>Fragment identifiers have no meaning with
   80654   <code><a href=#text/srt>text/srt</a></code> resources.</p>
   80655 
   80656 
   80657 
   80658   <h3 id=application/microdata+json><span class=secno>14.7 </span><dfn><code>application/microdata+json</code></dfn></h3>
   80659 
   80660 
   80661   <p>This registration is for community review and will be submitted
   80662   to the IESG for review, approval, and registration with IANA.</p>
   80663 
   80664   <!--
   80665    To: ietf-types (a] iana.org
   80666    Subject: Registration of media type application/microdata+json
   80667   -->
   80668 
   80669   <dl><dt>Type name:</dt>
   80670    <dd>application</dd>
   80671    <dt>Subtype name:</dt>
   80672    <dd>microdata+json</dd>
   80673    <dt>Required parameters:</dt>
   80674    <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80675    <dt>Optional parameters:</dt>
   80676    <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80677    <dt>Encoding considerations:</dt>
   80678    <dd>Always UTF-8.</dd>
   80679    <dt>Security considerations:</dt>
   80680    <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80681    <dt>Interoperability considerations:</dt>
   80682    <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80683    <dt>Published specification:</dt>
   80684    <dd>
   80685 
   80686     Labeling a resource with the
   80687     <code><a href=#application/microdata+json>application/microdata+json</a></code> type asserts that the
   80688     resource is a JSON text that consists of an object with a single
   80689     entry called "<code title="">items</code>" consisting of an array
   80690     of entries, each of which consists of an object with two entries,
   80691     one called "<code title="">type</code>" whose value is an array of
   80692     strings, and one called "<code title="">properties</code>" whose
   80693     value is an object whose entries each have a value consisting of
   80694     an array of either objects or strings, the objects being of the
   80695     same form as the objects in the aforementioned "<code title="">items</code>" entry. As such, the relevant specifications
   80696     are the JSON specification and this specification. <a href=#refsJSON>[JSON]</a>
   80697 
   80698    </dd>
   80699    <dt>Applications that use this media type:</dt>
   80700    <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80701    <dt>Additional information:</dt>
   80702    <dd>
   80703     <dl><dt>Magic number(s):</dt>
   80704      <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80705      <dt>File extension(s):</dt>
   80706      <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80707      <dt>Macintosh file type code(s):</dt>
   80708      <dd>Same as for <code>application/json</code> <a href=#refsJSON>[JSON]</a></dd>
   80709     </dl></dd>
   80710    <dt>Person &amp; email address to contact for further information:</dt>
   80711    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80712    <dt>Intended usage:</dt>
   80713    <dd>Common</dd>
   80714    <dt>Restrictions on usage:</dt>
   80715    <dd>No restrictions apply.</dd>
   80716    <dt>Author:</dt>
   80717    <dd>Ian Hickson &lt;ian (a] hixie.ch&gt;</dd>
   80718    <dt>Change controller:</dt>
   80719    <dd>WHATWG</dd>
   80720   </dl><p>Fragment identifiers used with
   80721   <code><a href=#application/microdata+json>application/microdata+json</a></code> resources have the same
   80722   semantics as when used with <code>application/json</code>. <a href=#refsJSON>[JSON]</a></p>
   80723 
   80724 
   80725 
   80726 <!--PING-->
   80727   <h3 id=ping-from><span class=secno>14.8 </span><dfn title=http-ping-from><code>Ping-From</code></dfn></h3>
   80728 
   80729   <p>This section describes a header field for registration in the
   80730   Permanent Message Header Field Registry.  <a href=#refsRFC3864>[RFC3864]</a></p>
   80731 
   80732   <dl><dt>Header field name</dt>
   80733    <dd>Ping-From</dd>
   80734    <dt>Applicable protocol</dt>
   80735    <dd>http</dd>
   80736    <dt>Status</dt>
   80737    <dd>standard</dd>
   80738    <dt>Author/Change controller</dt>
   80739    <dd>WHATWG</dd>
   80740    <dt>Specification document(s)</dt>
   80741    <dd>
   80742     This document is the relevant specification.
   80743    </dd>
   80744    <dt>Related information</dt>
   80745    <dd>None.</dd>
   80746   </dl><h3 id=ping-to><span class=secno>14.9 </span><dfn title=http-ping-to><code>Ping-To</code></dfn></h3>
   80747 
   80748   <p>This section describes a header field for registration in the
   80749   Permanent Message Header Field Registry.  <a href=#refsRFC3864>[RFC3864]</a></p>
   80750 
   80751   <dl><dt>Header field name</dt>
   80752    <dd>Ping-To</dd>
   80753    <dt>Applicable protocol</dt>
   80754    <dd>http</dd>
   80755    <dt>Status</dt>
   80756    <dd>standard</dd>
   80757    <dt>Author/Change controller</dt>
   80758    <dd>WHATWG</dd>
   80759    <dt>Specification document(s)</dt>
   80760    <dd>
   80761     This document is the relevant specification.
   80762    </dd>
   80763    <dt>Related information</dt>
   80764    <dd>None.</dd>
   80765   </dl><!--PING--><h2 class=no-num id=index>Index</h2>
   80766 
   80767   <div class=impl>
   80768 
   80769   <p>The following sections only cover conforming elements and features.</p>
   80770 
   80771   </div>
   80772 
   80773   <h3 class=no-num id=elements-1>Elements</h3>
   80774 
   80775   <p><i>This section is non-normative.</i></p>
   80776 
   80777   <table><caption>List of elements</caption>
   80778    <thead><tr><th> Element
   80779      <th> Description
   80780      <th> Categories
   80781      <th> Parents
   80782      <th> Children
   80783      <th> Attributes
   80784      <th> Interface
   80785    <tbody><tr><th><code><a href=#the-a-element>a</a></code></th>
   80786      <td>Hyperlink</td>
   80787      <td><a href=#flow-content title="Flow content">flow</a>;
   80788          <a href=#phrasing-content title="Phrasing content">phrasing</a>*;
   80789          <a href=#interactive-content title="Interactive content">interactive</a></td>
   80790      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80791      <td><a href=#transparent>transparent</a>*</td>
   80792      <td><a href=#global-attributes title="global attributes">globals</a>;
   80793          <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>;
   80794          <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>;
   80795 <!--PING-->
   80796          <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>;
   80797 <!--PING-->
   80798          <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>;
   80799          <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>;
   80800          <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>;
   80801          <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></td>
   80802      <td><code><a href=#htmlanchorelement>HTMLAnchorElement</a></code></td>
   80803     <tr><th><code><a href=#the-abbr-element>abbr</a></code></th>
   80804      <td>Abbreviation</td>
   80805      <td><a href=#flow-content title="Flow content">flow</a>;
   80806          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80807      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80808      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80809      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80810      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80811     <tr><th><code><a href=#the-address-element>address</a></code></th>
   80812      <td>Contact information for a page or section</td>
   80813      <td><a href=#flow-content title="Flow content">flow</a>;
   80814          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   80815      <td><a href=#flow-content title="Flow content">flow</a></td>
   80816      <td><a href=#flow-content title="Flow content">flow</a>*</td>
   80817      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80818      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80819     <tr><th><code><a href=#the-area-element>area</a></code></th>
   80820      <td>Hyperlink or dead area on an image map</td>
   80821      <td><a href=#flow-content title="Flow content">flow</a>;
   80822          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80823      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   80824      <td>empty</td>
   80825      <td><a href=#global-attributes title="global attributes">globals</a>;
   80826          <code title=attr-area-alt><a href=#attr-area-alt>alt</a></code>;
   80827          <code title=attr-area-coords><a href=#attr-area-coords>coords</a></code>;
   80828          <code title=attr-area-shape><a href=#attr-area-shape>shape</a></code>;
   80829          <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>;
   80830          <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>;
   80831 <!--PING-->
   80832          <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>;
   80833 <!--PING-->
   80834          <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>;
   80835          <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>;
   80836          <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>;
   80837          <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code></td>
   80838      <td><code><a href=#htmlareaelement>HTMLAreaElement</a></code></td>
   80839     <tr><th><code><a href=#the-article-element>article</a></code></th>
   80840      <td>Self-contained syndicatable or reusable composition</td>
   80841      <td><a href=#flow-content title="Flow content">flow</a>;
   80842          <a href=#sectioning-content title="Sectioning content">sectioning</a>;
   80843          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   80844      <td><a href=#flow-content title="Flow content">flow</a></td>
   80845      <td><a href=#flow-content title="Flow content">flow</a></td>
   80846      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80847      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80848     <tr><th><code><a href=#the-aside-element>aside</a></code></th>
   80849      <td>Sidebar for tangentially related content</td>
   80850      <td><a href=#flow-content title="Flow content">flow</a>;
   80851          <a href=#sectioning-content title="Sectioning content">sectioning</a>;
   80852          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   80853      <td><a href=#flow-content title="Flow content">flow</a></td>
   80854      <td><a href=#flow-content title="Flow content">flow</a></td>
   80855      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80856      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80857     <tr><th><code><a href=#audio>audio</a></code></th>
   80858      <td>Audio player</td>
   80859      <td><a href=#flow-content title="Flow content">flow</a>;
   80860          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   80861          <a href=#embedded-content title="Embedded content">embedded</a>;
   80862          <a href=#interactive-content title="Interactive content">interactive</a></td>
   80863      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80864      <td><code><a href=#the-source-element>source</a></code>*;
   80865          <a href=#transparent>transparent</a>*</td>
   80866      <td><a href=#global-attributes title="global attributes">globals</a>;
   80867          <code title=attr-media-src><a href=#attr-media-src>src</a></code>;
   80868          <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>;
   80869          <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>;
   80870          <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
   80871          <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></td>
   80872      <td><code><a href=#htmlaudioelement>HTMLAudioElement</a></code></td>
   80873     <tr><th><code><a href=#the-b-element>b</a></code></th>
   80874      <td>Keywords</td>
   80875      <td><a href=#flow-content title="Flow content">flow</a>;
   80876          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80877      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80878      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80879      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80880      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80881     <tr><th><code><a href=#the-base-element>base</a></code></th>
   80882      <td>Base URL and default target <a href=#browsing-context>browsing context</a> for <a href=#attr-hyperlink-target title=attr-hyperlink-target>hyperlinks</a> and <a href=#attr-fs-target title=attr-fs-target>forms</a></td>
   80883      <td><a href=#metadata-content title="Metadata content">metadata</a></td>
   80884      <td><code><a href=#the-head-element-0>head</a></code></td>
   80885      <td>empty</td>
   80886      <td><a href=#global-attributes title="global attributes">globals</a>;
   80887          <code title=attr-base-href><a href=#attr-base-href>href</a></code>;
   80888          <code title=attr-base-target><a href=#attr-base-target>target</a></code></td>
   80889      <td><code><a href=#htmlbaseelement>HTMLBaseElement</a></code></td>
   80890     <tr><th><code><a href=#the-bdo-element>bdo</a></code></th>
   80891      <td>Text directionality formatting</td>
   80892      <td><a href=#flow-content title="Flow content">flow</a>;
   80893          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80894      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80895      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80896      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80897      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80898     <tr><th><code><a href=#the-blockquote-element>blockquote</a></code></th>
   80899      <td>A section quoted from another source</td>
   80900      <td><a href=#flow-content title="Flow content">flow</a>;
   80901          <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
   80902          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   80903      <td><a href=#flow-content title="Flow content">flow</a></td>
   80904      <td><a href=#flow-content title="Flow content">flow</a></td>
   80905      <td><a href=#global-attributes title="global attributes">globals</a>;
   80906          <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code></td>
   80907      <td><code><a href=#htmlquoteelement>HTMLQuoteElement</a></code></td>
   80908     <tr><th><code><a href=#the-body-element-0>body</a></code></th>
   80909      <td>Document body</td>
   80910      <td><a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
   80911      <td><code><a href=#the-html-element-0>html</a></code></td>
   80912      <td><a href=#flow-content title="Flow content">flow</a></td>
   80913      <td><a href=#global-attributes title="global attributes">globals</a>;
   80914          <code title=handler-window-onafterprint><a href=#handler-window-onafterprint>onafterprint</a></code>;
   80915          <code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>onbeforeprint</a></code>;
   80916          <code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code>;
   80917          <code title=handler-window-onblur><a href=#handler-window-onblur>onblur</a></code>;
   80918          <code title=handler-window-onerror><a href=#handler-window-onerror>onerror</a></code>;
   80919          <code title=handler-window-onfocus><a href=#handler-window-onfocus>onfocus</a></code>;
   80920          <code title=handler-window-onhashchange><a href=#handler-window-onhashchange>onhashchange</a></code>;
   80921          <code title=handler-window-onload><a href=#handler-window-onload>onload</a></code>;
   80922          <code title=handler-window-onmessage><a href=#handler-window-onmessage>onmessage</a></code>;
   80923          <code title=handler-window-onoffline><a href=#handler-window-onoffline>onoffline</a></code>;
   80924          <code title=handler-window-ononline><a href=#handler-window-ononline>ononline</a></code>;
   80925          <code title=handler-window-onpagehide><a href=#handler-window-onpagehide>onpagehide</a></code>;
   80926          <code title=handler-window-onpageshow><a href=#handler-window-onpageshow>onpageshow</a></code>;
   80927          <code title=handler-window-onpopstate><a href=#handler-window-onpopstate>onpopstate</a></code>;
   80928          <code title=handler-window-onredo><a href=#handler-window-onredo>onredo</a></code>;
   80929          <code title=handler-window-onresize><a href=#handler-window-onresize>onresize</a></code>;
   80930          <code title=handler-window-onstorage><a href=#handler-window-onstorage>onstorage</a></code>;
   80931          <code title=handler-window-onundo><a href=#handler-window-onundo>onundo</a></code>;
   80932          <code title=handler-window-onunload><a href=#handler-window-onunload>onunload</a></code></td>
   80933      <td><code><a href=#htmlbodyelement>HTMLBodyElement</a></code></td>
   80934     <tr><th><code><a href=#the-br-element>br</a></code></th>
   80935      <td>Line break, e.g. in poem or postal address</td>
   80936      <td><a href=#flow-content title="Flow content">flow</a>;
   80937          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80938      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80939      <td>empty</td>
   80940      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80941      <td><code><a href=#htmlbrelement>HTMLBRElement</a></code></td>
   80942     <tr><th><code><a href=#the-button-element>button</a></code></th>
   80943      <td>Button control</td>
   80944      <td><a href=#flow-content title="Flow content">flow</a>;
   80945          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   80946          <a href=#interactive-content title="Interactive content">interactive</a>;
   80947          <a href=#category-listed title=category-listed>listed</a>;
   80948          <a href=#category-label title=category-label>labelable</a>;
   80949          <a href=#category-submit title=category-submit>submittable</a>;
   80950          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   80951      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80952      <td><a href=#phrasing-content>Phrasing content</a>*</td>
   80953      <td><a href=#global-attributes title="global attributes">globals</a>;
   80954          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
   80955          <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
   80956          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   80957          <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>;
   80958          <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>;
   80959          <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>;
   80960          <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>;
   80961          <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>;
   80962          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
   80963          <code title=attr-button-type><a href=#attr-button-type>type</a></code>;
   80964          <code title=attr-button-value><a href=#attr-button-value>value</a></code></td>
   80965      <td><code><a href=#htmlbuttonelement>HTMLButtonElement</a></code></td>
   80966     <tr><th><code><a href=#the-canvas-element>canvas</a></code></th>
   80967      <td>Scriptable bitmap canvas</td>
   80968      <td><a href=#flow-content title="Flow content">flow</a>;
   80969          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   80970          <a href=#embedded-content title="Embedded content">embedded</a></td>
   80971      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80972      <td><a href=#transparent>transparent</a></td>
   80973      <td><a href=#global-attributes title="global attributes">globals</a>;
   80974          <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code>;
   80975          <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></td>
   80976      <td><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code></td>
   80977     <tr><th><code><a href=#the-caption-element>caption</a></code></th>
   80978      <td>Table caption</td>
   80979      <td>none</td>
   80980      <td><code><a href=#the-table-element>table</a></code></td>
   80981      <td><a href=#flow-content title="Flow content">flow</a>*</td>
   80982      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80983      <td><code><a href=#htmltablecaptionelement>HTMLTableCaptionElement</a></code></td>
   80984     <tr><th><code><a href=#the-cite-element>cite</a></code></th>
   80985      <td>Title of a work</td>
   80986      <td><a href=#flow-content title="Flow content">flow</a>;
   80987          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80988      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80989      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80990      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80991      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   80992     <tr><th><code><a href=#the-code-element>code</a></code></th>
   80993      <td>Computer code</td>
   80994      <td><a href=#flow-content title="Flow content">flow</a>;
   80995          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80996      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80997      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   80998      <td><a href=#global-attributes title="global attributes">globals</a></td>
   80999      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81000     <tr><th><code><a href=#the-col-element>col</a></code></th>
   81001      <td>Table column</td>
   81002      <td>none</td>
   81003      <td><code><a href=#the-colgroup-element>colgroup</a></code></td>
   81004      <td>empty</td>
   81005      <td><a href=#global-attributes title="global attributes">globals</a>;
   81006          <code title=attr-col-span><a href=#attr-col-span>span</a></code></td>
   81007      <td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
   81008     <tr><th><code><a href=#the-colgroup-element>colgroup</a></code></th>
   81009      <td>Group of columns in a table</td>
   81010      <td>none</td>
   81011      <td><code><a href=#the-table-element>table</a></code></td>
   81012      <td><code><a href=#the-col-element>col</a></code></td>
   81013      <td><a href=#global-attributes title="global attributes">globals</a>;
   81014          <code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></td>
   81015      <td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
   81016     <tr><th><code><a href=#the-command>command</a></code></th>
   81017      <td>Menu command</td>
   81018      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81019          <a href=#flow-content title="Flow content">flow</a>;
   81020          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81021      <td><code><a href=#the-head-element-0>head</a></code>;
   81022          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81023      <td>empty</td>
   81024      <td><a href=#global-attributes title="global attributes">globals</a>;
   81025          <code title=attr-command-type><a href=#attr-command-type>type</a></code>;
   81026          <code title=attr-command-label><a href=#attr-command-label>label</a></code>;
   81027          <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>;
   81028          <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>;
   81029          <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>;
   81030          <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></td>
   81031      <td><code><a href=#htmlcommandelement>HTMLCommandElement</a></code></td>
   81032     <tr><th><code><a href=#the-datalist-element>datalist</a></code></th>
   81033      <td>Container for options for <a href=#attr-input-list title=attr-input-list>combo box control</a></td>
   81034      <td><a href=#flow-content title="Flow content">flow</a>;
   81035          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81036      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81037      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81038          <code><a href=#the-option-element>option</a></code></td>
   81039      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81040      <td><code><a href=#htmldatalistelement>HTMLDataListElement</a></code></td>
   81041     <tr><th><code><a href=#the-dd-element>dd</a></code></th>
   81042      <td>Content for corresponding <code><a href=#the-dt-element>dt</a></code> element(s)</td>
   81043      <td>none</td>
   81044      <td><code><a href=#the-dl-element>dl</a></code></td>
   81045      <td><a href=#flow-content title="Flow content">flow</a></td>
   81046      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81047      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81048     <tr><th><code><a href=#the-del-element>del</a></code></th>
   81049      <td>A removal from the document</td>
   81050      <td><a href=#flow-content title="Flow content">flow</a>;
   81051          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81052      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81053      <td><a href=#transparent>transparent</a></td>
   81054      <td><a href=#global-attributes title="global attributes">globals</a>;
   81055          <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code>;
   81056          <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></td>
   81057      <td><code><a href=#htmlmodelement>HTMLModElement</a></code></td>
   81058     <tr><th><code><a href=#the-details-element>details</a></code></th>
   81059      <td>Disclosure control for hiding details</td>
   81060      <td><a href=#flow-content title="Flow content">flow</a>;
   81061          <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
   81062          <a href=#interactive-content title="Interactive content">interactive</a></td>
   81063      <td><a href=#flow-content title="Flow content">flow</a></td>
   81064      <td><code><a href=#the-summary-element>summary</a></code>*;
   81065          <a href=#flow-content title="Flow content">flow</a></td>
   81066      <td><a href=#global-attributes title="global attributes">globals</a>;
   81067          <code title=attr-details-open><a href=#attr-details-open>open</a></code></td>
   81068      <td><code><a href=#htmldetailselement>HTMLDetailsElement</a></code></td>
   81069     <tr><th><code><a href=#the-dfn-element>dfn</a></code></th>
   81070      <td>Defining instance</td>
   81071      <td><a href=#flow-content title="Flow content">flow</a>;
   81072          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81073      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81074      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81075      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81076      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81077     <tr><th><code><a href=#the-div-element>div</a></code></th>
   81078      <td>Generic flow container</td>
   81079      <td><a href=#flow-content title="Flow content">flow</a>;
   81080          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81081      <td><a href=#flow-content title="Flow content">flow</a></td>
   81082      <td><a href=#flow-content title="Flow content">flow</a></td>
   81083      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81084      <td><code><a href=#htmldivelement>HTMLDivElement</a></code></td>
   81085     <tr><th><code><a href=#the-dl-element>dl</a></code></th>
   81086      <td>Association list consisting of zero or more name-value groups</td>
   81087      <td><a href=#flow-content title="Flow content">flow</a></td>
   81088      <td><a href=#flow-content title="Flow content">flow</a></td>
   81089      <td><code><a href=#the-dt-element>dt</a></code>*;
   81090          <code><a href=#the-dd-element>dd</a></code>*</td>
   81091      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81092      <td><code><a href=#htmldlistelement>HTMLDListElement</a></code></td>
   81093     <tr><th><code><a href=#the-dt-element>dt</a></code></th>
   81094      <td>Legend for corresponding <code><a href=#the-dd-element>dd</a></code> element(s)</td>
   81095      <td>none</td>
   81096      <td><code><a href=#the-dl-element>dl</a></code></td>
   81097      <td>varies*</td>
   81098      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81099      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81100     <tr><th><code><a href=#the-em-element>em</a></code></th>
   81101      <td>Stress emphasis</td>
   81102      <td><a href=#flow-content title="Flow content">flow</a>;
   81103          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81104      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81105      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81106      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81107      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81108     <tr><th><code><a href=#the-embed-element>embed</a></code></th>
   81109      <td><a href=#plugin>Plugin</a></td>
   81110      <td><a href=#flow-content title="Flow content">flow</a>;
   81111          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81112          <a href=#embedded-content title="Embedded content">embedded</a>;
   81113          <a href=#interactive-content title="Interactive content">interactive</a></td>
   81114      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81115      <td>empty</td>
   81116      <td><a href=#global-attributes title="global attributes">globals</a>;
   81117          <code title=attr-embed-src><a href=#attr-embed-src>src</a></code>;
   81118          <code title=attr-embed-type><a href=#attr-embed-type>type</a></code>;
   81119          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
   81120          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>;
   81121          any*</td>
   81122      <td><code><a href=#htmlembedelement>HTMLEmbedElement</a></code></td>
   81123     <tr><th><code><a href=#the-fieldset-element>fieldset</a></code></th>
   81124      <td>Group of form controls</td>
   81125      <td><a href=#flow-content title="Flow content">flow</a>;
   81126          <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
   81127          <a href=#category-listed title=category-listed>listed</a>;
   81128          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81129      <td><a href=#flow-content title="Flow content">flow</a></td>
   81130      <td><code><a href=#the-legend-element>legend</a></code>*;
   81131          <a href=#flow-content title="Flow content">flow</a></td>
   81132      <td><a href=#global-attributes title="global attributes">globals</a>;
   81133          <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code>;
   81134          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81135          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
   81136      <td><code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code></td>
   81137     <tr><th><code><a href=#the-figcaption-element>figcaption</a></code></th>
   81138      <td>Caption for <code><a href=#the-figure-element>figure</a></code></td>
   81139      <td>none</td>
   81140      <td><code><a href=#the-figure-element>figure</a></code></td>
   81141      <td><a href=#flow-content title="Flow content">flow</a></td>
   81142      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81143      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81144     <tr><th><code><a href=#the-figure-element>figure</a></code></th>
   81145      <td>Figure with optional caption</td>
   81146      <td><a href=#flow-content title="Flow content">flow</a>;
   81147          <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
   81148      <td><a href=#flow-content title="Flow content">flow</a></td>
   81149      <td><code><a href=#the-figcaption-element>figcaption</a></code>*;
   81150          <a href=#flow-content title="Flow content">flow</a></td>
   81151      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81152      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81153     <tr><th><code><a href=#the-footer-element>footer</a></code></th>
   81154      <td>Footer for a page or section</td>
   81155      <td><a href=#flow-content title="Flow content">flow</a>;
   81156          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81157      <td><a href=#flow-content title="Flow content">flow</a></td>
   81158      <td><a href=#flow-content title="Flow content">flow</a>*</td>
   81159      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81160      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81161     <tr><th><code><a href=#the-form-element>form</a></code></th>
   81162      <td>User-submittable form</td>
   81163      <td><a href=#flow-content title="Flow content">flow</a></td>
   81164      <td><a href=#flow-content title="Flow content">flow</a></td>
   81165      <td><a href=#flow-content title="Flow content">flow</a>*</td>
   81166      <td><a href=#global-attributes title="global attributes">globals</a>;
   81167          <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>accept-charset</a></code>;
   81168          <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>;
   81169          <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code>;
   81170          <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>;
   81171          <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>;
   81172          <code title=attr-form-name><a href=#attr-form-name>name</a></code>;
   81173          <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>;
   81174          <code title=attr-fs-target><a href=#attr-fs-target>target</a></code></td>
   81175      <td><code><a href=#htmlformelement>HTMLFormElement</a></code></td>
   81176     <tr><th><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></th>
   81177      <td>Section heading</td>
   81178      <td><a href=#flow-content title="Flow content">flow</a>;
   81179          <a href=#heading-content title="Heading content">heading</a>;
   81180          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81181      <td><code><a href=#the-hgroup-element>hgroup</a></code>;
   81182          <a href=#flow-content title="Flow content">flow</a></td>
   81183      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81184      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81185      <td><code><a href=#htmlheadingelement>HTMLHeadingElement</a></code></td>
   81186     <tr><th><code><a href=#the-head-element-0>head</a></code></th>
   81187      <td>Container for document metadata</td>
   81188      <td>none</td>
   81189      <td><code><a href=#the-html-element-0>html</a></code></td>
   81190      <td><a href=#metadata-content title="Metadata content">metadata content</a>*</td>
   81191      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81192      <td><code><a href=#htmlheadelement>HTMLHeadElement</a></code></td>
   81193     <tr><th><code><a href=#the-header-element>header</a></code></th>
   81194      <td>Introductory or navigational aids for a page or section</td>
   81195      <td><a href=#flow-content title="Flow content">flow</a>;
   81196          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81197      <td><a href=#flow-content title="Flow content">flow</a></td>
   81198      <td><a href=#flow-content title="Flow content">flow</a>*</td>
   81199      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81200      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81201     <tr><th><code><a href=#the-hgroup-element>hgroup</a></code></th>
   81202      <td>heading group</td>
   81203      <td><a href=#flow-content title="Flow content">flow</a>;
   81204          <a href=#heading-content title="Heading content">heading</a>;
   81205          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81206      <td><a href=#flow-content title="Flow content">flow</a></td>
   81207      <td>One or more <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, and/or <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code></td>
   81208      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81209      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81210     <tr><th><code><a href=#the-hr-element>hr</a></code></th>
   81211      <td>Thematic break</td>
   81212      <td><a href=#flow-content title="Flow content">flow</a></td>
   81213      <td><a href=#flow-content title="Flow content">flow</a></td>
   81214      <td>empty</td>
   81215      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81216      <td><code><a href=#htmlhrelement>HTMLHRElement</a></code></td>
   81217     <tr><th><code><a href=#the-html-element-0>html</a></code></th>
   81218      <td>Root element</td>
   81219      <td>none</td>
   81220      <td>none*</td>
   81221      <td><code><a href=#the-head-element-0>head</a></code>*;
   81222          <code><a href=#the-body-element-0>body</a></code>*</td>
   81223      <td><a href=#global-attributes title="global attributes">globals</a>;
   81224          <code title=attr-html-manifest><a href=#attr-html-manifest>manifest</a></code></td>
   81225      <td><code><a href=#htmlhtmlelement>HTMLHtmlElement</a></code></td>
   81226     <tr><th><code><a href=#the-i-element>i</a></code></th>
   81227      <td>Alternate voice</td>
   81228      <td><a href=#flow-content title="Flow content">flow</a>;
   81229          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81230      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81231      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81232      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81233      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81234     <tr><th><code><a href=#the-iframe-element>iframe</a></code></th>
   81235      <td><a href=#nested-browsing-context>Nested browsing context</a></td>
   81236      <td><a href=#flow-content title="Flow content">flow</a>;
   81237          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81238          <a href=#embedded-content title="Embedded content">embedded</a>;
   81239          <a href=#interactive-content title="Interactive content">interactive</a></td>
   81240      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81241      <td>text*</td>
   81242      <td><a href=#global-attributes title="global attributes">globals</a>;
   81243          <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code>;
   81244          <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code>;
   81245          <code title=attr-iframe-name><a href=#attr-iframe-name>name</a></code>;
   81246          <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code>;
   81247          <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>seamless</a></code>;
   81248          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
   81249          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
   81250      <td><code><a href=#htmliframeelement>HTMLIFrameElement</a></code></td>
   81251     <tr><th><code><a href=#the-img-element>img</a></code></th>
   81252      <td>Image</td>
   81253      <td><a href=#flow-content title="Flow content">flow</a>;
   81254          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81255          <a href=#embedded-content title="Embedded content">embedded</a>;
   81256          <a href=#interactive-content title="Interactive content">interactive</a>*</td>
   81257      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81258      <td>empty</td>
   81259      <td><a href=#global-attributes title="global attributes">globals</a>;
   81260          <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>;
   81261          <code title=attr-img-src><a href=#attr-img-src>src</a></code>;
   81262          <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code>;
   81263          <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code>;
   81264          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
   81265          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
   81266      <td><code><a href=#htmlimageelement>HTMLImageElement</a></code></td>
   81267     <tr><th><code><a href=#the-input-element>input</a></code></th>
   81268      <td>Form control</td>
   81269      <td><a href=#flow-content title="Flow content">flow</a>;
   81270          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81271          <a href=#interactive-content title="Interactive content">interactive</a>*;
   81272          <a href=#category-listed title=category-listed>listed</a>;
   81273          <a href=#category-label title=category-label>labelable</a>;
   81274          <a href=#category-submit title=category-submit>submittable</a>;
   81275          <a href=#category-reset title=category-reset>resettable</a>;
   81276          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81277      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81278      <td>empty</td>
   81279      <td><a href=#global-attributes title="global attributes">globals</a>;
   81280          <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>;
   81281          <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>;
   81282          <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>;
   81283          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
   81284          <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>;
   81285          <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
   81286          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81287          <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>;
   81288          <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>;
   81289          <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>;
   81290          <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>;
   81291          <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>;
   81292          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>;
   81293          <code title=attr-input-list><a href=#attr-input-list>list</a></code>;
   81294          <code title=attr-input-max><a href=#attr-input-max>max</a></code>;
   81295          <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>;
   81296          <code title=attr-input-min><a href=#attr-input-min>min</a></code>;
   81297          <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>;
   81298          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
   81299          <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>;
   81300          <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>;
   81301          <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>;
   81302          <code title=attr-input-required><a href=#attr-input-required>required</a></code>;
   81303          <code title=attr-input-size><a href=#attr-input-size>size</a></code>;
   81304          <code title=attr-input-src><a href=#attr-input-src>src</a></code>;
   81305          <code title=attr-input-step><a href=#attr-input-step>step</a></code>;
   81306          <code title=attr-input-type><a href=#attr-input-type>type</a></code>;
   81307          <code title=attr-input-value><a href=#attr-input-value>value</a></code>;
   81308          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code></td>
   81309      <td><code><a href=#htmlinputelement>HTMLInputElement</a></code></td>
   81310     <tr><th><code><a href=#the-ins-element>ins</a></code></th>
   81311      <td>An addition to the document</td>
   81312      <td><a href=#flow-content title="Flow content">flow</a>;
   81313          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81314      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81315      <td><a href=#transparent>transparent</a></td>
   81316      <td><a href=#global-attributes title="global attributes">globals</a>;
   81317          <code title=attr-mod-cite><a href=#attr-mod-cite>cite</a></code>;
   81318          <code title=attr-mod-datetime><a href=#attr-mod-datetime>datetime</a></code></td>
   81319      <td><code><a href=#htmlmodelement>HTMLModElement</a></code></td>
   81320     <tr><th><code><a href=#the-kbd-element>kbd</a></code></th>
   81321      <td>User input</td>
   81322      <td><a href=#flow-content title="Flow content">flow</a>;
   81323          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81324      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81325      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81326      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81327      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81328     <tr><th><code><a href=#the-keygen-element>keygen</a></code></th>
   81329      <td>Cryptographic key-pair generator form control</td>
   81330      <td><a href=#flow-content title="Flow content">flow</a>;
   81331          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81332          <a href=#interactive-content title="Interactive content">interactive</a>;
   81333          <a href=#category-listed title=category-listed>listed</a>;
   81334          <a href=#category-label title=category-label>labelable</a>;
   81335          <a href=#category-submit title=category-submit>submittable</a>;
   81336          <a href=#category-reset title=category-reset>resettable</a>;
   81337          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81338      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81339      <td>empty</td>
   81340      <td><a href=#global-attributes title="global attributes">globals</a>;
   81341          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
   81342          <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>challenge</a></code>;
   81343          <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
   81344          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81345          <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keytype</a></code>;
   81346          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
   81347      <td><code><a href=#htmlkeygenelement>HTMLKeygenElement</a></code></td>
   81348     <tr><th><code><a href=#the-label-element>label</a></code></th>
   81349      <td>Caption for a form control</td>
   81350      <td><a href=#flow-content title="Flow content">flow</a>;
   81351          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81352          <a href=#interactive-content title="Interactive content">interactive</a>;
   81353          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81354      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81355      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81356      <td><a href=#global-attributes title="global attributes">globals</a>;
   81357          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81358          <code title=attr-label-for><a href=#attr-label-for>for</a></code></td>
   81359      <td><code><a href=#htmllabelelement>HTMLLabelElement</a></code></td>
   81360     <tr><th><code><a href=#the-legend-element>legend</a></code></th>
   81361      <td>Caption for <code><a href=#the-fieldset-element>fieldset</a></code></td>
   81362      <td>none</td>
   81363      <td><code><a href=#the-fieldset-element>fieldset</a></code></td>
   81364      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81365      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81366      <td><code><a href=#htmllegendelement>HTMLLegendElement</a></code></td>
   81367     <tr><th><code><a href=#the-li-element>li</a></code></th>
   81368      <td>List item</td>
   81369      <td>none</td>
   81370      <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#menus>menu</a></code></td>
   81371      <td><a href=#flow-content title="Flow content">flow</a></td>
   81372      <td><a href=#global-attributes title="global attributes">globals</a>;
   81373          <code title=attr-li-value><a href=#attr-li-value>value</a></code>*</td>
   81374      <td><code><a href=#htmllielement>HTMLLIElement</a></code></td>
   81375     <tr><th><code><a href=#the-link-element>link</a></code></th>
   81376      <td>Link metadata</td>
   81377      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81378          <a href=#flow-content title="Flow content">flow</a>*;
   81379          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81380      <td><code><a href=#the-head-element-0>head</a></code>;
   81381          <code><a href=#the-noscript-element>noscript</a></code>*;
   81382          <a href=#phrasing-content title="phrasing content">phrasing</a>*</td>
   81383      <td>empty</td>
   81384      <td><a href=#global-attributes title="global attributes">globals</a>;
   81385          <code title=attr-link-href><a href=#attr-link-href>href</a></code>;
   81386          <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>;
   81387          <code title=attr-link-media><a href=#attr-link-media>media</a></code>;
   81388          <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>;
   81389          <code title=attr-link-type><a href=#attr-link-type>type</a></code>;
   81390          <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></td>
   81391      <td><code><a href=#htmllinkelement>HTMLLinkElement</a></code></td>
   81392     <tr><th><code><a href=#the-map-element>map</a></code></th>
   81393      <td><a href=#image-map>Image map</a></td>
   81394      <td><a href=#flow-content title="Flow content">flow</a>;
   81395          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81396      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81397      <td><a href=#transparent>transparent</a>;
   81398          <code><a href=#the-area-element>area</a></code>*</td>
   81399      <td><a href=#global-attributes title="global attributes">globals</a>;
   81400          <code title=attr-map-name><a href=#attr-map-name>name</a></code></td>
   81401      <td><code><a href=#htmlmapelement>HTMLMapElement</a></code></td>
   81402     <tr><th><code><a href=#the-mark-element>mark</a></code></th>
   81403      <td>Highlight</td>
   81404      <td><a href=#flow-content title="Flow content">flow</a>;
   81405          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81406      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81407      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81408      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81409      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81410     <tr><th><code><a href=#menus>menu</a></code></th>
   81411      <td>Menu of commands</td>
   81412      <td><a href=#flow-content title="Flow content">flow</a>;
   81413          <a href=#interactive-content title="Interactive content">interactive</a>*</td>
   81414      <td><a href=#flow-content title="Flow content">flow</a></td>
   81415      <td><code><a href=#the-li-element>li</a></code>*;
   81416          <a href=#flow-content title="Flow content">flow</a></td>
   81417      <td><a href=#global-attributes title="global attributes">globals</a>;
   81418          <code title=attr-menu-type><a href=#attr-menu-type>type</a></code>;
   81419          <code title=attr-menu-label><a href=#attr-menu-label>label</a></code></td>
   81420      <td><code><a href=#htmlmenuelement>HTMLMenuElement</a></code></td>
   81421     <tr><th><code><a href=#meta>meta</a></code></th>
   81422      <td>Text metadata</td>
   81423      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81424          <a href=#flow-content title="Flow content">flow</a>*;
   81425          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81426      <td><code><a href=#the-head-element-0>head</a></code>;
   81427          <code><a href=#the-noscript-element>noscript</a></code>*;
   81428          <a href=#phrasing-content title="phrasing content">phrasing</a>*</td>
   81429      <td>empty</td>
   81430      <td><a href=#global-attributes title="global attributes">globals</a>;
   81431          <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>;
   81432          <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>;
   81433          <code title=attr-meta-content><a href=#attr-meta-content>content</a></code>;
   81434          <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code></td>
   81435      <td><code><a href=#htmlmetaelement>HTMLMetaElement</a></code></td>
   81436     <tr><th><code><a href=#the-meter-element>meter</a></code></th>
   81437      <td>Gauge</td>
   81438      <td><a href=#flow-content title="Flow content">flow</a>;
   81439          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81440          <a href=#category-label title=category-label>labelable</a>;
   81441          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81442      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81443      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81444      <td><a href=#global-attributes title="global attributes">globals</a>;
   81445          <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>;
   81446          <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>;
   81447          <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>;
   81448          <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>;
   81449          <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>;
   81450          <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>;
   81451          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
   81452      <td><code><a href=#htmlmeterelement>HTMLMeterElement</a></code></td>
   81453     <tr><th><code><a href=#the-nav-element>nav</a></code></th>
   81454      <td>Section with navigational links</td>
   81455      <td><a href=#flow-content title="Flow content">flow</a>;
   81456          <a href=#sectioning-content title="Sectioning content">sectioning</a>;
   81457          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81458      <td><a href=#flow-content title="Flow content">flow</a></td>
   81459      <td><a href=#flow-content title="Flow content">flow</a></td>
   81460      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81461      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81462     <tr><th><code><a href=#the-noscript-element>noscript</a></code></th>
   81463      <td>Fallback content for script</td>
   81464      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81465          <a href=#flow-content title="Flow content">flow</a>;
   81466          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81467      <td><code><a href=#the-head-element-0>head</a></code>*;
   81468          <a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81469      <td>varies*</td>
   81470      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81471      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81472     <tr><th><code><a href=#the-object-element>object</a></code></th>
   81473      <td>Image, <a href=#nested-browsing-context>nested browsing context</a>, or <a href=#plugin>plugin</a></td>
   81474      <td><a href=#flow-content title="Flow content">flow</a>;
   81475          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81476          <a href=#embedded-content title="Embedded content">embedded</a>;
   81477          <a href=#interactive-content title="Interactive content">interactive</a>*;
   81478          <a href=#category-listed title=category-listed>listed</a>;
   81479          <a href=#category-submit title=category-submit>submittable</a>;
   81480          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81481      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81482      <td><code><a href=#the-param-element>param</a></code>*;
   81483          <a href=#transparent>transparent</a></td>
   81484      <td><a href=#global-attributes title="global attributes">globals</a>;
   81485          <code title=attr-object-data><a href=#attr-object-data>data</a></code>;
   81486          <code title=attr-object-type><a href=#attr-object-type>type</a></code>;
   81487          <code title=attr-object-name><a href=#attr-object-name>name</a></code>;
   81488          <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code>;
   81489          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81490          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
   81491          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
   81492      <td><code><a href=#htmlobjectelement>HTMLObjectElement</a></code></td>
   81493     <tr><th><code><a href=#the-ol-element>ol</a></code></th>
   81494      <td>Ordered list</td>
   81495      <td><a href=#flow-content title="Flow content">flow</a></td>
   81496      <td><a href=#flow-content title="Flow content">flow</a></td>
   81497      <td><code><a href=#the-li-element>li</a></code></td>
   81498      <td><a href=#global-attributes title="global attributes">globals</a>;
   81499          <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code>;
   81500          <code title=attr-ol-start><a href=#attr-ol-start>start</a></code></td>
   81501      <td><code><a href=#htmlolistelement>HTMLOListElement</a></code></td>
   81502     <tr><th><code><a href=#the-optgroup-element>optgroup</a></code></th>
   81503      <td>Group of options in a list box</td>
   81504      <td>none</td>
   81505      <td><code><a href=#the-select-element>select</a></code></td>
   81506      <td><code><a href=#the-option-element>option</a></code></td>
   81507      <td><a href=#global-attributes title="global attributes">globals</a>;
   81508          <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code>;
   81509          <code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code></td>
   81510      <td><code><a href=#htmloptgroupelement>HTMLOptGroupElement</a></code></td>
   81511     <tr><th><code><a href=#the-option-element>option</a></code></th>
   81512      <td>Option in a list box or combo box control</td>
   81513      <td>none</td>
   81514      <td><code><a href=#the-select-element>select</a></code>;
   81515          <code><a href=#the-datalist-element>datalist</a></code>;
   81516          <code><a href=#the-optgroup-element>optgroup</a></code></td>
   81517      <td><a href=#text-content title="text content">text</a></td>
   81518      <td><a href=#global-attributes title="global attributes">globals</a>;
   81519          <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code>;
   81520          <code title=attr-option-label><a href=#attr-option-label>label</a></code>;
   81521          <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code>;
   81522          <code title=attr-option-value><a href=#attr-option-value>value</a></code></td>
   81523      <td><code><a href=#htmloptionelement>HTMLOptionElement</a></code></td>
   81524     <tr><th><code><a href=#the-output-element>output</a></code></th>
   81525      <td>Calculated output value</td>
   81526      <td><a href=#flow-content title="Flow content">flow</a>;
   81527          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81528          <a href=#category-listed title=category-listed>listed</a>;
   81529          <a href=#category-label title=category-label>labelable</a>;
   81530          <a href=#category-reset title=category-reset>resettable</a>;
   81531          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81532      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81533      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81534      <td><a href=#global-attributes title="global attributes">globals</a>;
   81535          <code title=attr-output-for><a href=#attr-output-for>for</a></code>;
   81536          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81537          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
   81538      <td><code><a href=#htmloutputelement>HTMLOutputElement</a></code></td>
   81539     <tr><th><code><a href=#the-p-element>p</a></code></th>
   81540      <td>Paragraph</td>
   81541      <td><a href=#flow-content title="Flow content">flow</a>;
   81542          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81543      <td><a href=#flow-content title="Flow content">flow</a></td>
   81544      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81545      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81546      <td><code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code></td>
   81547     <tr><th><code><a href=#the-param-element>param</a></code></th>
   81548      <td>Parameter for <code><a href=#the-object-element>object</a></code></td>
   81549      <td>none</td>
   81550      <td><code><a href=#the-object-element>object</a></code></td>
   81551      <td>empty</td>
   81552      <td><a href=#global-attributes title="global attributes">globals</a>;
   81553          <code title=attr-param-name><a href=#attr-param-name>name</a></code>;
   81554          <code title=attr-param-value><a href=#attr-param-value>value</a></code></td>
   81555      <td><code><a href=#htmlparamelement>HTMLParamElement</a></code></td>
   81556     <tr><th><code><a href=#the-pre-element>pre</a></code></th>
   81557      <td>Block of preformatted text</td>
   81558      <td><a href=#flow-content title="Flow content">flow</a>;
   81559          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81560      <td><a href=#flow-content title="Flow content">flow</a></td>
   81561      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81562      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81563      <td><code><a href=#htmlpreelement>HTMLPreElement</a></code></td>
   81564     <tr><th><code><a href=#the-progress-element>progress</a></code></th>
   81565      <td>Progress bar</td>
   81566      <td><a href=#flow-content title="Flow content">flow</a>;
   81567          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81568          <a href=#category-label title=category-label>labelable</a>;
   81569          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81570      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81571      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81572      <td><a href=#global-attributes title="global attributes">globals</a>;
   81573          <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>;
   81574          <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>;
   81575          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
   81576      <td><code><a href=#htmlprogresselement>HTMLProgressElement</a></code></td>
   81577     <tr><th><code><a href=#the-q-element>q</a></code></th>
   81578      <td>Quotation</td>
   81579      <td><a href=#flow-content title="Flow content">flow</a>;
   81580          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81581      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81582      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81583      <td><a href=#global-attributes title="global attributes">globals</a>;
   81584          <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></td>
   81585      <td><code><a href=#htmlquoteelement>HTMLQuoteElement</a></code></td>
   81586     <tr><th><code><a href=#the-rp-element>rp</a></code></th>
   81587      <td>Parenthesis for ruby annotation text</td>
   81588      <td>none</td>
   81589      <td><code><a href=#the-ruby-element>ruby</a></code></td>
   81590      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81591      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81592      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81593     <tr><th><code><a href=#the-rt-element>rt</a></code></th>
   81594      <td>Ruby annotation text</td>
   81595      <td>none</td>
   81596      <td><code><a href=#the-ruby-element>ruby</a></code></td>
   81597      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81598      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81599      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81600     <tr><th><code><a href=#the-ruby-element>ruby</a></code></th>
   81601      <td>Ruby annotation(s)</td>
   81602      <td><a href=#flow-content title="Flow content">flow</a>;
   81603          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81604      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81605      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81606          <code><a href=#the-rt-element>rt</a></code> element;
   81607          <code><a href=#the-rp-element>rp</a></code> element*</td>
   81608      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81609      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81610     <tr><th><code><a href=#the-samp-element>samp</a></code></th>
   81611      <td>Computer output</td>
   81612      <td><a href=#flow-content title="Flow content">flow</a>;
   81613          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81614      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81615      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81616      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81617      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81618     <tr><th><code><a href=#script>script</a></code></th>
   81619      <td>Embedded script</td>
   81620      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81621          <a href=#flow-content title="Flow content">flow</a>;
   81622          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81623      <td><code><a href=#the-head-element-0>head</a></code>;
   81624          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81625      <td>script, data, or script documentation*</td>
   81626      <td><a href=#global-attributes title="global attributes">globals</a>;
   81627          <code title=attr-script-src><a href=#attr-script-src>src</a></code>;
   81628          <code title=attr-script-async><a href=#attr-script-async>async</a></code>;
   81629          <code title=attr-script-defer><a href=#attr-script-defer>defer</a></code>;
   81630          <code title=attr-script-type><a href=#attr-script-type>type</a></code>;
   81631          <code title=attr-script-charset><a href=#attr-script-charset>charset</a></code></td>
   81632      <td><code><a href=#htmlscriptelement>HTMLScriptElement</a></code></td>
   81633     <tr><th><code><a href=#the-section-element>section</a></code></th>
   81634      <td>Generic document or application section</td>
   81635      <td><a href=#flow-content title="Flow content">flow</a>;
   81636          <a href=#sectioning-content title="Sectioning content">sectioning</a>;
   81637          <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidate</a></td>
   81638      <td><a href=#flow-content title="Flow content">flow</a></td>
   81639      <td><a href=#flow-content title="Flow content">flow</a></td>
   81640      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81641      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81642     <tr><th><code><a href=#the-select-element>select</a></code></th>
   81643      <td>List box control</td>
   81644      <td><a href=#flow-content title="Flow content">flow</a>;
   81645          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81646          <a href=#interactive-content title="Interactive content">interactive</a>;
   81647          <a href=#category-listed title=category-listed>listed</a>;
   81648          <a href=#category-label title=category-label>labelable</a>;
   81649          <a href=#category-submit title=category-submit>submittable</a>;
   81650          <a href=#category-reset title=category-reset>resettable</a>;
   81651          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81652      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81653      <td><code><a href=#the-option-element>option</a></code>, <code><a href=#the-optgroup-element>optgroup</a></code></td>
   81654      <td><a href=#global-attributes title="global attributes">globals</a>;
   81655          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
   81656          <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
   81657          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81658          <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>;
   81659          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
   81660          <code title=attr-select-size><a href=#attr-select-size>size</a></code></td>
   81661      <td><code><a href=#htmlselectelement>HTMLSelectElement</a></code></td>
   81662     <tr><th><code><a href=#the-small-element>small</a></code></th>
   81663      <td>Side comment</td>
   81664      <td><a href=#flow-content title="Flow content">flow</a>;
   81665          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81666      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81667      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81668      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81669      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81670     <tr><th><code><a href=#the-source-element>source</a></code></th>
   81671      <td>Media source for <code><a href=#video>video</a></code> or <code><a href=#audio>audio</a></code></td>
   81672      <td>none</td>
   81673      <td><code><a href=#video>video</a></code>;
   81674          <code><a href=#audio>audio</a></code></td>
   81675      <td>empty</td>
   81676      <td><a href=#global-attributes title="global attributes">globals</a>;
   81677          <code title=attr-source-src><a href=#attr-source-src>src</a></code>;
   81678          <code title=attr-source-type><a href=#attr-source-type>type</a></code>;
   81679          <code title=attr-source-media><a href=#attr-source-media>media</a></code></td>
   81680      <td><code><a href=#htmlsourceelement>HTMLSourceElement</a></code></td>
   81681     <tr><th><code><a href=#the-span-element>span</a></code></th>
   81682      <td>Generic phrasing container</td>
   81683      <td><a href=#flow-content title="Flow content">flow</a>;
   81684          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81685      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81686      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81687      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81688      <td><code><a href=#htmlspanelement>HTMLSpanElement</a></code></td>
   81689     <tr><th><code><a href=#the-strong-element>strong</a></code></th>
   81690      <td>Importance</td>
   81691      <td><a href=#flow-content title="Flow content">flow</a>;
   81692          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81693      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81694      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81695      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81696      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81697     <tr><th><code><a href=#the-style-element>style</a></code></th>
   81698      <td>Embedded styling information</td>
   81699      <td><a href=#metadata-content title="Metadata content">metadata</a>;
   81700          <a href=#flow-content title="Flow content">flow</a></td>
   81701      <td><code><a href=#the-head-element-0>head</a></code>;
   81702          <code><a href=#the-noscript-element>noscript</a></code>*;
   81703          <a href=#flow-content title="flow content">flow</a>*</td>
   81704      <td>varies*</td>
   81705      <td><a href=#global-attributes title="global attributes">globals</a>;
   81706          <code title=attr-style-media><a href=#attr-style-media>media</a></code>;
   81707          <code title=attr-style-type><a href=#attr-style-type>type</a></code>;
   81708          <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code></td>
   81709      <td><code><a href=#htmlstyleelement>HTMLStyleElement</a></code></td>
   81710     <tr><th><code><a href=#the-sub-and-sup-elements>sub</a></code></th>
   81711      <td>Subscript</td>
   81712      <td><a href=#flow-content title="Flow content">flow</a>;
   81713          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81714      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81715      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81716      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81717      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81718     <tr><th><code><a href=#the-summary-element>summary</a></code></th>
   81719      <td>Caption for <code><a href=#the-details-element>details</a></code></td>
   81720      <td>none</td>
   81721      <td><code><a href=#the-details-element>details</a></code></td>
   81722      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81723      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81724      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81725     <tr><th><code><a href=#the-sub-and-sup-elements>sup</a></code></th>
   81726      <td>Superscript</td>
   81727      <td><a href=#flow-content title="Flow content">flow</a>;
   81728          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81729      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81730      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81731      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81732      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81733     <tr><th><code><a href=#the-table-element>table</a></code></th>
   81734      <td>Table</td>
   81735      <td><a href=#flow-content title="Flow content">flow</a></td>
   81736      <td><a href=#flow-content title="Flow content">flow</a></td>
   81737      <td><code><a href=#the-caption-element>caption</a></code>*;
   81738          <code><a href=#the-colgroup-element>colgroup</a></code>*;
   81739          <code><a href=#the-thead-element>thead</a></code>*;
   81740          <code><a href=#the-tbody-element>tbody</a></code>*;
   81741          <code><a href=#the-tfoot-element>tfoot</a></code>*;
   81742          <code><a href=#the-tr-element>tr</a></code>*</td>
   81743      <td><a href=#global-attributes title="global attributes">globals</a>;
   81744          <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code></td>
   81745      <td><code><a href=#htmltableelement>HTMLTableElement</a></code></td>
   81746     <tr><th><code><a href=#the-tbody-element>tbody</a></code></th>
   81747      <td>Group of rows in a table</td>
   81748      <td>none</td>
   81749      <td><code><a href=#the-table-element>table</a></code></td>
   81750      <td><code><a href=#the-tr-element>tr</a></code></td>
   81751      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81752      <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
   81753     <tr><th><code><a href=#the-td-element>td</a></code></th>
   81754      <td>Table cell</td>
   81755      <td><a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
   81756      <td><code><a href=#the-tr-element>tr</a></code></td>
   81757      <td><a href=#flow-content title="Flow content">flow</a></td>
   81758      <td><a href=#global-attributes title="global attributes">globals</a>;
   81759          <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>;
   81760          <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>;
   81761          <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code></td>
   81762      <td><code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code></td>
   81763     <tr><th><code><a href=#the-textarea-element>textarea</a></code></th>
   81764      <td>Multiline text field</td>
   81765      <td><a href=#flow-content title="Flow content">flow</a>;
   81766          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81767          <a href=#interactive-content title="Interactive content">interactive</a>;
   81768          <a href=#category-listed title=category-listed>listed</a>;
   81769          <a href=#category-label title=category-label>labelable</a>;
   81770          <a href=#category-submit title=category-submit>submittable</a>;
   81771          <a href=#category-reset title=category-reset>resettable</a>;
   81772          <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
   81773      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81774      <td><a href=#text-content title="text content">text</a></td>
   81775      <td><a href=#global-attributes title="global attributes">globals</a>;
   81776          <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
   81777          <code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code>;
   81778          <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
   81779          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
   81780          <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>;
   81781          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
   81782          <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>;
   81783          <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code>;
   81784          <code title=attr-textarea-required><a href=#attr-textarea-required>required</a></code>;
   81785          <code title=attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code>;
   81786          <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code></td>
   81787      <td><code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code></td>
   81788     <tr><th><code><a href=#the-tfoot-element>tfoot</a></code></th>
   81789      <td>Group of footer rows in a table</td>
   81790      <td>none</td>
   81791      <td><code><a href=#the-table-element>table</a></code></td>
   81792      <td><code><a href=#the-tr-element>tr</a></code></td>
   81793      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81794      <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
   81795     <tr><th><code><a href=#the-th-element>th</a></code></th>
   81796      <td>Table header cell</td>
   81797      <td>none</td>
   81798      <td><code><a href=#the-tr-element>tr</a></code></td>
   81799      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81800      <td><a href=#global-attributes title="global attributes">globals</a>;
   81801          <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code>;
   81802          <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code>;
   81803          <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code>;
   81804          <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code></td>
   81805      <td><code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code></td>
   81806     <tr><th><code><a href=#the-thead-element>thead</a></code></th>
   81807      <td>Group of heading rows in a table</td>
   81808      <td>none</td>
   81809      <td><code><a href=#the-table-element>table</a></code></td>
   81810      <td><code><a href=#the-tr-element>tr</a></code></td>
   81811      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81812      <td><code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code></td>
   81813     <tr><th><code><a href=#the-time-element>time</a></code></th>
   81814      <td>Date and/or time</td>
   81815      <td><a href=#flow-content title="Flow content">flow</a>;
   81816          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81817      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81818      <td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
   81819      <td><a href=#global-attributes title="global attributes">globals</a>;
   81820          <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>;
   81821          <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code></td>
   81822      <td><code><a href=#htmltimeelement>HTMLTimeElement</a></code></td>
   81823     <tr><th><code><a href=#the-title-element-0>title</a></code></th>
   81824      <td>Document title</td>
   81825      <td><a href=#metadata-content title="Metadata content">metadata</a></td>
   81826      <td><code><a href=#the-head-element-0>head</a></code></td>
   81827      <td><a href=#text-content title="text content">text</a></td>
   81828      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81829      <td><code><a href=#htmltitleelement>HTMLTitleElement</a></code></td>
   81830     <tr><th><code><a href=#the-tr-element>tr</a></code></th>
   81831      <td>Table row</td>
   81832      <td>none</td>
   81833      <td><code><a href=#the-table-element>table</a></code>;
   81834          <code><a href=#the-thead-element>thead</a></code>;
   81835          <code><a href=#the-tbody-element>tbody</a></code>;
   81836          <code><a href=#the-tfoot-element>tfoot</a></code></td>
   81837      <td><code><a href=#the-th-element>th</a></code>*;
   81838          <code><a href=#the-td-element>td</a></code></td>
   81839      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81840      <td><code><a href=#htmltablerowelement>HTMLTableRowElement</a></code></td>
   81841     </tr><!--TT--><tr><th><code><a href=#the-track-element>track</a></code></th>
   81842      <td>Timed track</td>
   81843      <td>none</td>
   81844      <td><code><a href=#audio>audio</a></code>;
   81845          <code><a href=#video>video</a></code></td>
   81846      <td>empty</td>
   81847      <td><a href=#global-attributes title="global attributes">globals</a>;
   81848          <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>;
   81849          <code title=attr-track-label><a href=#attr-track-label>label</a></code>;
   81850          <code title=attr-track-src><a href=#attr-track-src>src</a></code>;
   81851          <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
   81852      <td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
   81853     </tr><!--TT--><tr><th><code><a href=#the-ul-element>ul</a></code></th>
   81854      <td>List</td>
   81855      <td><a href=#flow-content title="Flow content">flow</a></td>
   81856      <td><a href=#flow-content title="Flow content">flow</a></td>
   81857      <td><code><a href=#the-li-element>li</a></code></td>
   81858      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81859      <td><code><a href=#htmlulistelement>HTMLUListElement</a></code></td>
   81860     <tr><th><code><a href=#the-var-element>var</a></code></th>
   81861      <td>Variable</td>
   81862      <td><a href=#flow-content title="Flow content">flow</a>;
   81863          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81864      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81865      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81866      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81867      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81868     <tr><th><code><a href=#video>video</a></code></th>
   81869      <td>Video player</td>
   81870      <td><a href=#flow-content title="Flow content">flow</a>;
   81871          <a href=#phrasing-content title="Phrasing content">phrasing</a>;
   81872          <a href=#embedded-content title="Embedded content">embedded</a>;
   81873          <a href=#interactive-content title="Interactive content">interactive</a></td>
   81874      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81875      <td><code><a href=#the-source-element>source</a></code>*;
   81876          <a href=#transparent>transparent</a>*</td>
   81877      <td><a href=#global-attributes title="global attributes">globals</a>;
   81878          <code title=attr-media-src><a href=#attr-media-src>src</a></code>;
   81879          <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code>;
   81880          <code title=attr-media-preload><a href=#attr-media-preload>preload</a></code>;
   81881          <code title=attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>;
   81882          <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
   81883          <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>;
   81884          <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
   81885          <code title=attr-dim-height><a href=#attr-dim-height>height</a></code></td>
   81886      <td><code><a href=#htmlvideoelement>HTMLVideoElement</a></code></td>
   81887     <tr><th><code><a href=#the-wbr-element>wbr</a></code></th>
   81888      <td>Line breaking opportunity</td>
   81889      <td><a href=#flow-content title="Flow content">flow</a>;
   81890          <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81891      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
   81892      <td>empty</td>
   81893      <td><a href=#global-attributes title="global attributes">globals</a></td>
   81894      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
   81895     </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
   81896 
   81897 
   81898 
   81899 
   81900   <h3 class=no-num id=element-content-categories>Element content categories</h3>
   81901 
   81902   <p><i>This section is non-normative.</i></p>
   81903 
   81904   <!-- when updating this also check the category-list <ul>s -->
   81905 
   81906   <table><caption>List of element content categories</caption>
   81907    <thead><tr><th> Category
   81908      <th> Elements
   81909      <th> Elements with exceptions
   81910    <tbody><tr><td> <a href=#metadata-content>Metadata content</a>
   81911      <td>
   81912       <code><a href=#the-base-element>base</a></code>;
   81913       <code><a href=#the-command>command</a></code>;
   81914       <code><a href=#the-link-element>link</a></code>;
   81915       <code><a href=#meta>meta</a></code>;
   81916       <code><a href=#the-noscript-element>noscript</a></code>;
   81917       <code><a href=#script>script</a></code>;
   81918       <code><a href=#the-style-element>style</a></code>;
   81919       <code><a href=#the-title-element-0>title</a></code>
   81920      <td>
   81921       &mdash;
   81922 
   81923     <tr><td> <a href=#flow-content>Flow content</a>
   81924      <td>
   81925       <code><a href=#the-a-element>a</a></code>;
   81926       <code><a href=#the-abbr-element>abbr</a></code>;
   81927       <code><a href=#the-address-element>address</a></code>;
   81928       <code><a href=#the-article-element>article</a></code>;
   81929       <code><a href=#the-aside-element>aside</a></code>;
   81930       <code><a href=#audio>audio</a></code>;
   81931       <code><a href=#the-b-element>b</a></code>;
   81932       <code><a href=#the-bdo-element>bdo</a></code>;
   81933       <code><a href=#the-blockquote-element>blockquote</a></code>;
   81934       <code><a href=#the-br-element>br</a></code>;
   81935       <code><a href=#the-button-element>button</a></code>;
   81936       <code><a href=#the-canvas-element>canvas</a></code>;
   81937       <code><a href=#the-cite-element>cite</a></code>;
   81938       <code><a href=#the-code-element>code</a></code>;
   81939       <code><a href=#the-command>command</a></code>;
   81940       <!-- v2DATAGRID <code>datagrid</code>; -->
   81941       <code><a href=#the-datalist-element>datalist</a></code>;
   81942       <code><a href=#the-del-element>del</a></code>;
   81943       <code><a href=#the-details-element>details</a></code>;
   81944       <code><a href=#the-dfn-element>dfn</a></code>;
   81945       <code><a href=#the-div-element>div</a></code>;
   81946       <code><a href=#the-dl-element>dl</a></code>;
   81947       <code><a href=#the-em-element>em</a></code>;
   81948       <code><a href=#the-embed-element>embed</a></code>;
   81949       <code><a href=#the-fieldset-element>fieldset</a></code>;
   81950       <code><a href=#the-figure-element>figure</a></code>;
   81951       <code><a href=#the-footer-element>footer</a></code>;
   81952       <code><a href=#the-form-element>form</a></code>;
   81953       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
   81954       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
   81955       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
   81956       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
   81957       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
   81958       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
   81959       <code><a href=#the-header-element>header</a></code>;
   81960       <code><a href=#the-hgroup-element>hgroup</a></code>;
   81961       <code><a href=#the-hr-element>hr</a></code>;
   81962       <code><a href=#the-i-element>i</a></code>;
   81963       <code><a href=#the-iframe-element>iframe</a></code>;
   81964       <code><a href=#the-img-element>img</a></code>;
   81965       <code><a href=#the-input-element>input</a></code>;
   81966       <code><a href=#the-ins-element>ins</a></code>;
   81967       <code><a href=#the-kbd-element>kbd</a></code>;
   81968       <code><a href=#the-keygen-element>keygen</a></code>;
   81969       <code><a href=#the-label-element>label</a></code>;
   81970       <code><a href=#the-map-element>map</a></code>;
   81971       <code><a href=#the-mark-element>mark</a></code>;
   81972       <code><a href=#math>math</a></code>;
   81973       <code><a href=#menus>menu</a></code>;
   81974       <code><a href=#the-meter-element>meter</a></code>;
   81975       <code><a href=#the-nav-element>nav</a></code>;
   81976       <code><a href=#the-noscript-element>noscript</a></code>;
   81977       <code><a href=#the-object-element>object</a></code>;
   81978       <code><a href=#the-ol-element>ol</a></code>;
   81979       <code><a href=#the-output-element>output</a></code>;
   81980       <code><a href=#the-p-element>p</a></code>;
   81981       <code><a href=#the-pre-element>pre</a></code>;
   81982       <code><a href=#the-progress-element>progress</a></code>;
   81983       <code><a href=#the-q-element>q</a></code>;
   81984       <code><a href=#the-ruby-element>ruby</a></code>;
   81985       <code><a href=#the-samp-element>samp</a></code>;
   81986       <code><a href=#script>script</a></code>;
   81987       <code><a href=#the-section-element>section</a></code>;
   81988       <code><a href=#the-select-element>select</a></code>;
   81989       <code><a href=#the-small-element>small</a></code>;
   81990       <code><a href=#the-span-element>span</a></code>;
   81991       <code><a href=#the-strong-element>strong</a></code>;
   81992       <code><a href=#the-sub-and-sup-elements>sub</a></code>;
   81993       <code><a href=#the-sub-and-sup-elements>sup</a></code>;
   81994       <code><a href=#svg>svg</a></code>;
   81995       <code><a href=#the-table-element>table</a></code>;
   81996       <code><a href=#the-textarea-element>textarea</a></code>;
   81997       <code><a href=#the-time-element>time</a></code>;
   81998       <code><a href=#the-ul-element>ul</a></code>;
   81999       <code><a href=#the-var-element>var</a></code>;
   82000       <code><a href=#video>video</a></code>;
   82001       <code><a href=#the-wbr-element>wbr</a></code>;
   82002       <a href=#text-content title="text content">Text</a>
   82003      <td>
   82004       <code><a href=#the-area-element>area</a></code> (if it is a descendant of a <code><a href=#the-map-element>map</a></code> element);
   82005       
   82006       <code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
   82007       <code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
   82008       
   82009       <code><a href=#the-style-element>style</a></code> (if the <code title=attr-style-scoped><a href=#attr-style-scoped>scoped</a></code> attribute is present)
   82010 
   82011     <tr><td> <a href=#sectioning-content>Sectioning content</a>
   82012      <td>
   82013       <code><a href=#the-article-element>article</a></code>;
   82014       <code><a href=#the-aside-element>aside</a></code>;
   82015       <code><a href=#the-nav-element>nav</a></code>;
   82016       <code><a href=#the-section-element>section</a></code>
   82017      <td>
   82018       &mdash;
   82019 
   82020     <tr><td> <a href=#heading-content>Heading content</a>
   82021      <td>
   82022       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
   82023       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
   82024       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
   82025       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
   82026       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
   82027       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
   82028       <code><a href=#the-hgroup-element>hgroup</a></code>
   82029      <td>
   82030       &mdash;
   82031 
   82032     <tr><td> <a href=#phrasing-content>Phrasing content</a>
   82033      <td>
   82034       <code><a href=#the-abbr-element>abbr</a></code>;
   82035       <code><a href=#audio>audio</a></code>;
   82036       <code><a href=#the-b-element>b</a></code>;
   82037       <code><a href=#the-bdo-element>bdo</a></code>;
   82038       <code><a href=#the-br-element>br</a></code>;
   82039       <code><a href=#the-button-element>button</a></code>;
   82040       <code><a href=#the-canvas-element>canvas</a></code>;
   82041       <code><a href=#the-cite-element>cite</a></code>;
   82042       <code><a href=#the-code-element>code</a></code>;
   82043       <code><a href=#the-command>command</a></code>;
   82044       <code><a href=#the-datalist-element>datalist</a></code>;
   82045       <code><a href=#the-dfn-element>dfn</a></code>;
   82046       <code><a href=#the-em-element>em</a></code>;
   82047       <code><a href=#the-embed-element>embed</a></code>;
   82048       <code><a href=#the-i-element>i</a></code>;
   82049       <code><a href=#the-iframe-element>iframe</a></code>;
   82050       <code><a href=#the-img-element>img</a></code>;
   82051       <code><a href=#the-input-element>input</a></code>;
   82052       <code><a href=#the-kbd-element>kbd</a></code>;
   82053       <code><a href=#the-keygen-element>keygen</a></code>;
   82054       <code><a href=#the-label-element>label</a></code>;
   82055       <code><a href=#the-mark-element>mark</a></code>;
   82056       <code><a href=#math>math</a></code>;
   82057       <code><a href=#the-meter-element>meter</a></code>;
   82058       <code><a href=#the-noscript-element>noscript</a></code>;
   82059       <code><a href=#the-object-element>object</a></code>;
   82060       <code><a href=#the-output-element>output</a></code>;
   82061       <code><a href=#the-progress-element>progress</a></code>;
   82062       <code><a href=#the-q-element>q</a></code>;
   82063       <code><a href=#the-ruby-element>ruby</a></code>;
   82064       <code><a href=#the-samp-element>samp</a></code>;
   82065       <code><a href=#script>script</a></code>;
   82066       <code><a href=#the-select-element>select</a></code>;
   82067       <code><a href=#the-small-element>small</a></code>;
   82068       <code><a href=#the-span-element>span</a></code>;
   82069       <code><a href=#the-strong-element>strong</a></code>;
   82070       <code><a href=#the-sub-and-sup-elements>sub</a></code>;
   82071       <code><a href=#the-sub-and-sup-elements>sup</a></code>;
   82072       <code><a href=#svg>svg</a></code>;
   82073       <code><a href=#the-textarea-element>textarea</a></code>;
   82074       <code><a href=#the-time-element>time</a></code>;
   82075       <code><a href=#the-var-element>var</a></code>;
   82076       <code><a href=#video>video</a></code>;
   82077       <code><a href=#the-wbr-element>wbr</a></code>;
   82078       <a href=#text-content title="text content">Text</a>
   82079      <td>
   82080       <code><a href=#the-a-element>a</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
   82081       <code><a href=#the-area-element>area</a></code> (if it is a descendant of a  <code><a href=#the-map-element>map</a></code> element);
   82082       <code><a href=#the-del-element>del</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
   82083       <code><a href=#the-ins-element>ins</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>);
   82084       
   82085       <code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present);
   82086       
   82087       <code><a href=#the-map-element>map</a></code> (if it contains only <a href=#phrasing-content>phrasing content</a>)<!--
   82088       --><!--
   82089       -->; <code><a href=#meta>meta</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<!--
   82090       --><!--
   82091       -->
   82092 
   82093     <tr><td> <a href=#embedded-content>Embedded content</a>
   82094      <td>
   82095       <code><a href=#audio>audio</a></code>
   82096       <code><a href=#the-canvas-element>canvas</a></code>
   82097       <code><a href=#the-embed-element>embed</a></code>
   82098       <code><a href=#the-iframe-element>iframe</a></code>
   82099       <code><a href=#the-img-element>img</a></code>
   82100       <code><a href=#math>math</a></code>
   82101       <code><a href=#the-object-element>object</a></code>
   82102       <code><a href=#svg>svg</a></code>
   82103       <code><a href=#video>video</a></code>
   82104      <td>
   82105       &mdash;
   82106 
   82107     <tr><td> <a href=#interactive-content>Interactive content</a>
   82108      <td>
   82109       <code><a href=#the-a-element>a</a></code>;
   82110       <code><a href=#the-button-element>button</a></code>;
   82111       <!-- v2DATAGRID <code>datagrid</code>; -->
   82112       <code><a href=#the-details-element>details</a></code>;
   82113       <code><a href=#the-embed-element>embed</a></code>;
   82114       <code><a href=#the-iframe-element>iframe</a></code>;
   82115       <code><a href=#the-keygen-element>keygen</a></code>;
   82116       <code><a href=#the-label-element>label</a></code>;
   82117       <code><a href=#the-select-element>select</a></code>;
   82118       <code><a href=#the-textarea-element>textarea</a></code>;
   82119      <td>
   82120       <code><a href=#audio>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
   82121       <code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present);
   82122       <code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href=#hidden-state title=attr-input-type-hidden>Hidden</a> state);
   82123       <code><a href=#menus>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
   82124       <code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section -->;
   82125       <code><a href=#video>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)
   82126 
   82127     <tr><td> <a href=#sectioning-root title="sectioning root">Sectioning roots</a>
   82128      <td>
   82129       <code><a href=#the-blockquote-element>blockquote</a></code>;
   82130       <code><a href=#the-body-element-0>body</a></code>;
   82131       <!-- v2DATAGRID <code>datagrid</code>; -->
   82132       <code><a href=#the-details-element>details</a></code>;
   82133       <code><a href=#the-fieldset-element>fieldset</a></code>;
   82134       <code><a href=#the-figure-element>figure</a></code>;
   82135       <code><a href=#the-td-element>td</a></code>
   82136      <td>
   82137       &mdash;
   82138 
   82139     <tr><td> <a href=#form-associated-element title="form-associated element">Form-associated elements</a>
   82140      <td>
   82141       <code><a href=#the-button-element>button</a></code>;
   82142       <code><a href=#the-fieldset-element>fieldset</a></code>;
   82143       <code><a href=#the-input-element>input</a></code>;
   82144       <code><a href=#the-keygen-element>keygen</a></code>;
   82145       <code><a href=#the-label-element>label</a></code>;
   82146       <code><a href=#the-meter-element>meter</a></code>;
   82147       <code><a href=#the-object-element>object</a></code>;
   82148       <code><a href=#the-output-element>output</a></code>;
   82149       <code><a href=#the-progress-element>progress</a></code>;
   82150       <code><a href=#the-select-element>select</a></code>;
   82151       <code><a href=#the-textarea-element>textarea</a></code>
   82152      <td>
   82153       &mdash;
   82154 
   82155     <tr><td> <a href=#category-listed title=category-listed>Listed elements</a>
   82156      <td>
   82157       <code><a href=#the-button-element>button</a></code>;
   82158       <code><a href=#the-fieldset-element>fieldset</a></code>;
   82159       <code><a href=#the-input-element>input</a></code>;
   82160       <code><a href=#the-keygen-element>keygen</a></code>;
   82161       <code><a href=#the-object-element>object</a></code>;
   82162       <code><a href=#the-output-element>output</a></code>;
   82163       <code><a href=#the-select-element>select</a></code>;
   82164       <code><a href=#the-textarea-element>textarea</a></code>
   82165      <td>
   82166       &mdash;
   82167 
   82168     <tr><td> <a href=#category-label title=category-label>Labelable elements</a>
   82169      <td>
   82170       <code><a href=#the-button-element>button</a></code>;
   82171       <code><a href=#the-input-element>input</a></code>;
   82172       <code><a href=#the-keygen-element>keygen</a></code>;
   82173       <code><a href=#the-meter-element>meter</a></code>;
   82174       <code><a href=#the-output-element>output</a></code>;
   82175       <code><a href=#the-progress-element>progress</a></code>;
   82176       <code><a href=#the-select-element>select</a></code>;
   82177       <code><a href=#the-textarea-element>textarea</a></code>
   82178      <td>
   82179       &mdash;
   82180 
   82181     <tr><td> <a href=#category-submit title=category-submit>Submittable elements</a>
   82182      <td>
   82183       <code><a href=#the-button-element>button</a></code>;
   82184       <code><a href=#the-input-element>input</a></code>;
   82185       <code><a href=#the-keygen-element>keygen</a></code>;
   82186       <code><a href=#the-object-element>object</a></code>;
   82187       <code><a href=#the-select-element>select</a></code>;
   82188       <code><a href=#the-textarea-element>textarea</a></code>
   82189      <td>
   82190       &mdash;
   82191 
   82192     <tr><td> <a href=#category-reset title=category-reset>Resettable elements</a>
   82193      <td>
   82194       <code><a href=#the-input-element>input</a></code>;
   82195       <code><a href=#the-keygen-element>keygen</a></code>;
   82196       <code><a href=#the-output-element>output</a></code>;
   82197       <code><a href=#the-select-element>select</a></code>;
   82198       <code><a href=#the-textarea-element>textarea</a></code>
   82199      <td>
   82200       &mdash;
   82201 
   82202     <tr><td> <a href=#formatblock-candidate title="formatBlock candidate"><code title="">formatBlock</code> candidates</a>
   82203      <td>
   82204       <code><a href=#the-section-element>section</a></code>;
   82205       <code><a href=#the-nav-element>nav</a></code>;
   82206       <code><a href=#the-article-element>article</a></code>;
   82207       <code><a href=#the-aside-element>aside</a></code>;
   82208       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>;
   82209       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>;
   82210       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>;
   82211       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>;
   82212       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>;
   82213       <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>;
   82214       <code><a href=#the-hgroup-element>hgroup</a></code>;
   82215       <code><a href=#the-header-element>header</a></code>;
   82216       <code><a href=#the-footer-element>footer</a></code>;
   82217       <code><a href=#the-address-element>address</a></code>;
   82218       <code><a href=#the-p-element>p</a></code>;
   82219       <code><a href=#the-pre-element>pre</a></code>;
   82220       <code><a href=#the-blockquote-element>blockquote</a></code>;
   82221       <code><a href=#the-div-element>div</a></code>
   82222      <td>
   82223       &mdash;
   82224 
   82225   </table><h3 class=no-num id=attributes-1>Attributes</h3>
   82226 
   82227   <p><i>This section is non-normative.</i></p>
   82228 
   82229   <table><caption>List of attributes (excluding event handler content attributes)</caption>
   82230    <thead><tr><th> Attribute
   82231      <th> Element(s)
   82232      <th> Description
   82233      <th> Value
   82234    <tbody><tr><th> <code title="">accept</code>
   82235      <td> <code title=attr-input-accept><a href=#attr-input-accept>input</a></code>
   82236      <td> Hint for expected file type in <a href=#file-upload-state title=attr-input-type-file>file upload controls</a>
   82237      <td> <a href=#set-of-comma-separated-tokens>Set of comma-separated tokens</a>* consisting of <a href=#valid-mime-type title="valid MIME type">valid MIME types with no parameters</a> or <code title="">audio/*</code>, <code title="">video/*</code>, or <code title="">image/*</code>
   82238     <tr><th> <code title="">accept-charset</code>
   82239      <td> <code title=attr-form-accept-charset><a href=#attr-form-accept-charset>form</a></code>
   82240      <td> Character encodings to use for <a href=#form-submission>form submission</a>
   82241      <td> <a href=#ordered-set-of-unique-space-separated-tokens>Ordered set of unique space-separated tokens</a> consisting of <a href=#preferred-mime-name title="preferred MIME name">preferred MIME names</a> of <a href=#ascii-compatible-character-encoding title="ASCII-compatible character encoding">ASCII-compatible character encodings</a>*
   82242     <tr><th> <code title="">accesskey</code>
   82243      <td> <a href=#the-accesskey-attribute title=attr-accesskey>HTML elements</a>
   82244      <td> Keyboard shortcut to activate or focus element
   82245      <td> <a href=#ordered-set-of-unique-space-separated-tokens>Ordered set of unique space-separated tokens</a> consisting of one Unicode code point in length
   82246     <tr><th> <code title="">action</code>
   82247      <td> <code title=attr-fs-action><a href=#attr-fs-action>form</a></code>
   82248      <td> <a href=#url>URL</a> to use for <a href=#form-submission>form submission</a>
   82249      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82250     <tr><th> <code title="">alt</code>
   82251      <td> <code title=attr-area-alt><a href=#attr-area-alt>area</a></code>;
   82252           <code title=attr-img-alt><a href=#attr-img-alt>img</a></code>;
   82253           <code title=attr-input-alt><a href=#attr-input-alt>input</a></code>
   82254      <td> Replacement text for use when images are not available
   82255      <td> <a href=#attribute-text>Text</a>*
   82256     <tr><th> <code title="">async</code>
   82257      <td> <code title=attr-script-async><a href=#attr-script-async>script</a></code>
   82258      <td> Execute script asynchronously
   82259      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82260     <tr><th> <code title="">autocomplete</code>
   82261      <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>;
   82262           <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>input</a></code>
   82263      <td> Prevent the user agent from providing autocompletions for the form control(s)
   82264      <td> "<code title="">on</code>"; "<code title="">off</code>"
   82265     <tr><th> <code title="">autofocus</code>
   82266      <td> <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>button</a></code>;
   82267           <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>input</a></code>;
   82268           <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>keygen</a></code>;
   82269           <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>select</a></code>;
   82270           <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>textarea</a></code>
   82271      <td> Automatically focus the form control when the page is loaded
   82272      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82273     <tr><th> <code title="">autoplay</code>
   82274      <td> <code title=attr-media-autoplay><a href=#attr-media-autoplay>audio</a></code>;
   82275           <code title=attr-media-autoplay><a href=#attr-media-autoplay>video</a></code>
   82276      <td> Hint that the <a href=#media-resource>media resource</a> can be started automatically when the page is loaded
   82277      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82278     <tr><th> <code title="">challenge</code>
   82279      <td> <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>keygen</a></code>
   82280      <td> String to package with the generated and signed public key
   82281      <td> <a href=#attribute-text>Text</a>
   82282     <tr><th> <code title="">charset</code>
   82283      <td> <code title=attr-meta-charset><a href=#attr-meta-charset>meta</a></code>
   82284      <td> <a href=#character-encoding-declaration>Character encoding declaration</a>
   82285      <td> <a href=#preferred-mime-name>Preferred MIME name</a> of an encoding*
   82286     <tr><th> <code title="">charset</code>
   82287      <td> <code title=attr-script-charset><a href=#attr-script-charset>script</a></code>
   82288      <td> Character encoding of the external script resource
   82289      <td> <a href=#preferred-mime-name>Preferred MIME name</a> of an encoding*
   82290     <tr><th> <code title="">checked</code>
   82291      <td> <code title=attr-command-checked><a href=#attr-command-checked>command</a></code>;
   82292           <code title=attr-input-checked><a href=#attr-input-checked>input</a></code>
   82293      <td> Whether the command or control is checked
   82294      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82295     <tr><th> <code title="">cite</code>
   82296      <td> <code title=attr-blockquote-cite><a href=#attr-blockquote-cite>blockquote</a></code>;
   82297           <code title=attr-mod-cite><a href=#attr-mod-cite>del</a></code>;
   82298           <code title=attr-mod-cite><a href=#attr-mod-cite>ins</a></code>;
   82299           <code title=attr-q-cite><a href=#attr-q-cite>q</a></code>
   82300      <td> Link to the source of the quotation or more information about the edit
   82301      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82302     <tr><th> <code title="">class</code>
   82303      <td> <a href=#classes title=attr-class>HTML elements</a>
   82304      <td> Classes to which the element belongs
   82305      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>
   82306     <tr><th> <code title="">cols</code>
   82307      <td> <code title=attr-textarea-cols><a href=#attr-textarea-cols>textarea</a></code>
   82308      <td> Maximum number of characters per line
   82309      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
   82310     <tr><th> <code title="">colspan</code>
   82311      <td> <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>td</a></code>;
   82312           <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>th</a></code>
   82313      <td> Number of columns that the cell is to span
   82314      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
   82315     <tr><th> <code title="">content</code>
   82316      <td> <code title=attr-meta-content><a href=#attr-meta-content>meta</a></code>
   82317      <td> Value of the element
   82318      <td> <a href=#attribute-text>Text</a>*
   82319     <tr><th> <code title="">contenteditable</code>
   82320      <td> <a href=#attr-contenteditable title=attr-contenteditable>HTML elements</a>
   82321      <td> Whether the element is <a href=#editable>editable</a>
   82322      <td> "<code title="">true</code>"; "<code title="">false</code>"
   82323     <tr><th> <code title="">contextmenu</code>
   82324      <td> <a href=#attr-contextmenu title=attr-contextmenu>HTML elements</a>
   82325      <td> The element's context menu
   82326      <td> ID*
   82327     <tr><th> <code title="">controls</code>
   82328      <td> <code title=attr-media-controls><a href=#attr-media-controls>audio</a></code>;
   82329           <code title=attr-media-controls><a href=#attr-media-controls>video</a></code>
   82330      <td> Show user agent controls
   82331      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82332     <tr><th> <code title="">coords</code>
   82333      <td> <code title=attr-area-coords><a href=#attr-area-coords>area</a></code>
   82334      <td> Coordinates for the shape to be created in an <a href=#image-map>image map</a>
   82335      <td> <a href=#valid-list-of-integers>Valid list of integers</a>*
   82336     <tr><th> <code title="">data</code>
   82337      <td> <code title=attr-object-data><a href=#attr-object-data>object</a></code>
   82338      <td> Address of the resource
   82339      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82340     <tr><th> <code title="">datetime</code>
   82341      <td> <code title=attr-mod-datetime><a href=#attr-mod-datetime>del</a></code>;
   82342           <code title=attr-mod-datetime><a href=#attr-mod-datetime>ins</a></code>
   82343      <td> Time and date of the change
   82344      <td> <a href=#valid-global-date-and-time-string>Valid global date and time string</a>
   82345     <tr><th> <code title="">datetime</code>
   82346      <td> <code title=attr-time-datetime><a href=#attr-time-datetime>time</a></code>
   82347      <td> Value of the element
   82348      <td> <a href=#valid-date-or-time-string>Valid date or time string</a>*
   82349     <tr><th> <code title="">defer</code>
   82350      <td> <code title=attr-script-defer><a href=#attr-script-defer>script</a></code>
   82351      <td> Defer script execution
   82352      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82353     <tr><th> <code title="">dir</code>
   82354      <td> <a href=#the-dir-attribute title=attr-dir>HTML elements</a>
   82355      <td> <a href=#the-directionality title="the directionality">The text directionality</a> of the element
   82356      <td> "<code title="">ltr</code>"; "<code title="">rtl</code>"
   82357     <tr><th> <code title="">disabled</code>
   82358      <td> <code title=attr-fe-disabled><a href=#attr-fe-disabled>button</a></code>;
   82359           <code title=attr-command-disabled><a href=#attr-command-disabled>command</a></code>;
   82360           <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>fieldset</a></code>;
   82361           <code title=attr-fe-disabled><a href=#attr-fe-disabled>input</a></code>;
   82362           <code title=attr-fe-disabled><a href=#attr-fe-disabled>keygen</a></code>;
   82363           <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>optgroup</a></code>;
   82364           <code title=attr-option-disabled><a href=#attr-option-disabled>option</a></code>;
   82365           <code title=attr-fe-disabled><a href=#attr-fe-disabled>select</a></code>;
   82366           <code title=attr-fe-disabled><a href=#attr-fe-disabled>textarea</a></code>
   82367      <td> Whether the form control is disabled
   82368      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82369     <tr><th> <code title="">draggable</code>
   82370      <td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
   82371      <td> Whether the element is draggable
   82372      <td> "<code title="">true</code>"; "<code title="">false</code>"
   82373     <tr><th> <code title="">enctype</code>
   82374      <td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
   82375      <td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
   82376      <td> "<code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>"; "<code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code>"; "<code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code>"
   82377     <tr><th> <code title="">for</code>
   82378      <td> <code title=attr-label-for><a href=#attr-label-for>label</a></code>
   82379      <td> Associate the label with form control
   82380      <td> ID*
   82381     <tr><th> <code title="">for</code>
   82382      <td> <code title=attr-output-for><a href=#attr-output-for>output</a></code>
   82383      <td> Specifies controls from which the output was calculated
   82384      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
   82385     <tr><th> <code title="">form</code>
   82386      <td> <code title=attr-fae-form><a href=#attr-fae-form>button</a></code>;
   82387           <code title=attr-fae-form><a href=#attr-fae-form>fieldset</a></code>;
   82388           <code title=attr-fae-form><a href=#attr-fae-form>input</a></code>;
   82389           <code title=attr-fae-form><a href=#attr-fae-form>keygen</a></code>;
   82390           <code title=attr-fae-form><a href=#attr-fae-form>label</a></code>;
   82391           <code title=attr-fae-form><a href=#attr-fae-form>meter</a></code>;
   82392           <code title=attr-fae-form><a href=#attr-fae-form>object</a></code>;
   82393           <code title=attr-fae-form><a href=#attr-fae-form>output</a></code>;
   82394           <code title=attr-fae-form><a href=#attr-fae-form>progress</a></code>;
   82395           <code title=attr-fae-form><a href=#attr-fae-form>select</a></code>;
   82396           <code title=attr-fae-form><a href=#attr-fae-form>textarea</a></code>
   82397      <td> Associates the control with a <code><a href=#the-form-element>form</a></code> element
   82398      <td> ID*
   82399     <tr><th> <code title="">formaction</code>
   82400      <td> <code title=attr-fs-formaction><a href=#attr-fs-formaction>button</a></code>;
   82401           <code title=attr-fs-formaction><a href=#attr-fs-formaction>input</a></code>
   82402      <td> <a href=#url>URL</a> to use for <a href=#form-submission>form submission</a>
   82403      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82404     <tr><th> <code title="">formenctype</code>
   82405      <td> <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>button</a></code>;
   82406           <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>input</a></code>
   82407      <td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
   82408      <td> "<code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>"; "<code title=attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code>"; "<code title=attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code>"
   82409     <tr><th> <code title="">formmethod</code>
   82410      <td> <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>button</a></code>;
   82411           <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>input</a></code>
   82412      <td> HTTP method to use for <a href=#form-submission>form submission</a>
   82413      <td> "<code title="">GET</code>"; "<code title="">POST</code>"; "<code title="">PUT</code>"; "<code title="">DELETE</code>"
   82414     <tr><th> <code title="">formnovalidate</code>
   82415      <td> <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>button</a></code>;
   82416           <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>input</a></code>
   82417      <td> Bypass form control validation for <a href=#form-submission>form submission</a>
   82418      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82419     <tr><th> <code title="">formtarget</code>
   82420      <td> <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>button</a></code>;
   82421           <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>input</a></code>
   82422      <td> <a href=#browsing-context>Browsing context</a> for <a href=#form-submission>form submission</a>
   82423      <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
   82424     <tr><th> <code title="">headers</code>
   82425      <td> <code title=attr-tdth-headers><a href=#attr-tdth-headers>td</a></code>;
   82426           <code title=attr-tdth-headers><a href=#attr-tdth-headers>th</a></code>
   82427      <td> The header cells for this cell
   82428      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
   82429     <tr><th> <code title="">height</code>
   82430      <td> <code title=attr-canvas-height><a href=#attr-canvas-height>canvas</a></code>;
   82431           <code title=attr-dim-height><a href=#attr-dim-height>embed</a></code>;
   82432           <code title=attr-dim-height><a href=#attr-dim-height>iframe</a></code>;
   82433           <code title=attr-dim-height><a href=#attr-dim-height>img</a></code>;
   82434           <code title=attr-dim-height><a href=#attr-dim-height>input</a></code>;
   82435           <code title=attr-dim-height><a href=#attr-dim-height>object</a></code>;
   82436           <code title=attr-dim-height><a href=#attr-dim-height>video</a></code>
   82437      <td> Vertical dimension
   82438      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
   82439     <tr><th> <code title="">hidden</code>
   82440      <td> <a href=#the-hidden-attribute title=attr-hidden>HTML elements</a>
   82441      <td> Whether the element is relevant
   82442      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82443     <tr><th> <code title="">high</code>
   82444      <td> <code title=attr-meter-high><a href=#attr-meter-high>meter</a></code>
   82445      <td> Low limit of high range
   82446      <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
   82447     <tr><th> <code title="">href</code>
   82448      <td> <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>a</a></code>;
   82449           <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>area</a></code>
   82450      <td> Address of the <a href=#hyperlink>hyperlink</a>
   82451      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82452     <tr><th> <code title="">href</code>
   82453      <td> <code title=attr-link-href><a href=#attr-link-href>link</a></code>
   82454      <td> Address of the <a href=#hyperlink>hyperlink</a>
   82455      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82456     <tr><th> <code title="">href</code>
   82457      <td> <code title=attr-base-href><a href=#attr-base-href>base</a></code>
   82458      <td> <a href=#document-base-url>Document base URL</a>
   82459      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82460     <tr><th> <code title="">hreflang</code>
   82461      <td> <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>a</a></code>;
   82462           <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>area</a></code>;
   82463           <code title=attr-link-hreflang><a href=#attr-link-hreflang>link</a></code>
   82464      <td> Language of the linked resource
   82465      <td> Valid BCP 47 language tag
   82466     <tr><th> <code title="">http-equiv</code>
   82467      <td> <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>meta</a></code>
   82468      <td> Pragma directive
   82469      <td> <a href=#attribute-text>Text</a>*
   82470     <tr><th> <code title="">icon</code>
   82471      <td> <code title=attr-command-icon><a href=#attr-command-icon>command</a></code>
   82472      <td> Icon for the command
   82473      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82474     <tr><th> <code title="">id</code>
   82475      <td> <a href=#the-id-attribute title=attr-id>HTML elements</a>
   82476      <td> The element's <a href=#concept-id title=concept-id>ID</a>
   82477      <td> <a href=#attribute-text>Text</a>*
   82478     <tr><th> <code title="">ismap</code>
   82479      <td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
   82480      <td> Whether the image is a server-side image map
   82481      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82482 
   82483     <tr><th> <code title="">itemid</code>
   82484      <td> <a href=#attr-itemid title=attr-itemid>HTML elements</a>
   82485      <td> <a href=#global-identifier>Global identifier</a> for a microdata item
   82486      <td> <a href=#valid-url-potentially-surrounded-by-spaces>Valid URL potentially surrounded by spaces</a>
   82487     <tr><th> <code title="">itemprop</code>
   82488      <td> <a href=#names:-the-itemprop-attribute title=attr-itemprop>HTML elements</a>
   82489      <td> <a href=#property-names>Property names</a> of a microdata item
   82490      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of <a href=#absolute-url title="absolute URL">valid absolute URLs</a>, <a href=#defined-property-name title="defined property name">defined property names</a>, or text*
   82491     <tr><th> <code title="">itemref</code>
   82492      <td> <code title=attr-itemref><a href=#attr-itemref>itemref</a></code>
   82493      <td> Referenced elements
   82494      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of IDs*
   82495     <tr><th> <code title="">itemscope</code>
   82496      <td> <a href=#attr-itemscope title=attr-itemscope>HTML elements</a>
   82497      <td> Introduces a microdata item
   82498      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82499     <tr><th> <code title="">itemtype</code>
   82500      <td> <a href=#attr-itemtype title=attr-itemtype>HTML elements</a>
   82501      <td> <a href=#item-type>Item type</a> of a microdata item
   82502      <td> <a href=#absolute-url title="absolute URL">Valid absolute URL</a>*
   82503 
   82504     <tr><th> <code title="">keytype</code>
   82505      <td> <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keygen</a></code>
   82506      <td> The type of cryptographic key to generate
   82507      <td> <a href=#attribute-text>Text</a>*
   82508 <!--TT-->
   82509     <tr><th> <code title="">kind</code>
   82510      <td> <code title=attr-track-kind><a href=#attr-track-kind>track</a></code>
   82511      <td> The type of timed track
   82512      <td> "<code title=attr-track-kind-subtitles><a href=#attr-track-kind-subtitles>subtitles</a></code>";
   82513           "<code title=attr-track-kind-captions><a href=#attr-track-kind-captions>captions</a></code>";
   82514           "<code title=attr-track-kind-descriptions><a href=#attr-track-kind-descriptions>descriptions</a></code>";
   82515           "<code title=attr-track-kind-chapters><a href=#attr-track-kind-chapters>chapters</a></code>";
   82516           "<code title=attr-track-kind-metadata><a href=#attr-track-kind-metadata>metadata</a></code>"
   82517 <!--TT-->
   82518     <tr><th> <code title="">label</code>
   82519      <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
   82520           <code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
   82521           <code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
   82522           <code title=attr-option-label><a href=#attr-option-label>option</a></code>;
   82523 <!--TT-->
   82524           <code title=attr-track-label><a href=#attr-track-label>track</a></code>
   82525 <!--TT-->
   82526      <td> User-visible label
   82527      <td> <a href=#attribute-text>Text</a>
   82528     <tr><th> <code title="">lang</code>
   82529      <td> <a href=#attr-lang title=attr-lang>HTML elements</a>
   82530      <td> <a href=#language>Language</a> of the element
   82531      <td> Valid BCP 47 language tag or the empty string
   82532     <tr><th> <code title="">list</code>
   82533      <td> <code title=attr-input-list><a href=#attr-input-list>input</a></code>
   82534      <td> List of autocomplete options
   82535      <td> ID*
   82536     <tr><th> <code title="">loop</code>
   82537      <td> <code title=attr-media-loop><a href=#attr-media-loop>audio</a></code>;
   82538           <code title=attr-media-loop><a href=#attr-media-loop>video</a></code>
   82539      <td> Whether to loop the <a href=#media-resource>media resource</a>
   82540      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82541     <tr><th> <code title="">low</code>
   82542      <td> <code title=attr-meter-low><a href=#attr-meter-low>meter</a></code>
   82543      <td> High limit of low range
   82544      <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
   82545     <tr><th> <code title="">manifest</code>
   82546      <td> <code title=attr-html-manifest><a href=#attr-html-manifest>html</a></code>
   82547      <td> <a href=#concept-appcache-manifest title=concept-appcache-manifest>Application cache manifest</a>
   82548      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82549     <tr><th> <code title="">max</code>
   82550      <td> <code title=attr-input-max><a href=#attr-input-max>input</a></code>
   82551      <td> Maximum value
   82552      <td> varies*
   82553     <tr><th> <code title="">max</code>
   82554      <td> <code title=attr-meter-max><a href=#attr-meter-max>meter</a></code>;
   82555           <code title=attr-progress-max><a href=#attr-progress-max>progress</a></code>
   82556      <td> Upper bound of range
   82557      <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
   82558     <tr><th> <code title="">maxlength</code>
   82559      <td> <code title=attr-input-maxlength><a href=#attr-input-maxlength>input</a></code>;
   82560           <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>textarea</a></code>
   82561      <td> Maximum length of value
   82562      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
   82563     <tr><th> <code title="">media</code>
   82564      <td> <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>a</a></code>;
   82565           <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>area</a></code>;
   82566           <code title=attr-link-media><a href=#attr-link-media>link</a></code>;
   82567           <code title=attr-source-media><a href=#attr-source-media>source</a></code>;
   82568           <code title=attr-style-media><a href=#attr-style-media>style</a></code>
   82569      <td> Applicable media
   82570      <td> <a href=#valid-media-query>Valid media query</a>
   82571     <tr><th> <code title="">method</code>
   82572      <td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
   82573      <td> HTTP method to use for <a href=#form-submission>form submission</a>
   82574      <td> "<code title="">GET</code>"; "<code title="">POST</code>"; "<code title="">PUT</code>"; "<code title="">DELETE</code>"
   82575     <tr><th> <code title="">min</code>
   82576      <td> <code title=attr-input-min><a href=#attr-input-min>input</a></code>
   82577      <td> Minimum value
   82578      <td> varies*
   82579     <tr><th> <code title="">min</code>
   82580      <td> <code title=attr-meter-min><a href=#attr-meter-min>meter</a></code>
   82581      <td> Lower bound of range
   82582      <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
   82583     <tr><th> <code title="">multiple</code>
   82584      <td> <code title=attr-input-multiple><a href=#attr-input-multiple>input</a></code>;
   82585           <code title=attr-select-multiple><a href=#attr-select-multiple>select</a></code>
   82586      <td> Whether to allow multiple values
   82587      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82588     <tr><th> <code title="">name</code>
   82589      <td> <code title=attr-fe-name><a href=#attr-fe-name>button</a></code>;
   82590           <code title=attr-fe-name><a href=#attr-fe-name>fieldset</a></code>;
   82591           <code title=attr-fe-name><a href=#attr-fe-name>input</a></code>;
   82592           <code title=attr-fe-name><a href=#attr-fe-name>keygen</a></code>;
   82593           <code title=attr-fe-name><a href=#attr-fe-name>output</a></code>;
   82594           <code title=attr-fe-name><a href=#attr-fe-name>select</a></code>;
   82595           <code title=attr-fe-name><a href=#attr-fe-name>textarea</a></code>
   82596      <td> Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API
   82597      <td> <a href=#attribute-text>Text</a>*
   82598     <tr><th> <code title="">name</code>
   82599      <td> <code title=attr-form-name><a href=#attr-form-name>form</a></code>
   82600      <td> Name of form to use in the <code title=dom-document-forms><a href=#dom-document-forms>document.forms</a></code> API
   82601      <td> <a href=#attribute-text>Text</a>*
   82602     <tr><th> <code title="">name</code>
   82603      <td> <code title=attr-iframe-name><a href=#attr-iframe-name>iframe</a></code>;
   82604           <code title=attr-object-name><a href=#attr-object-name>object</a></code>
   82605      <td> Name of <a href=#nested-browsing-context>nested browsing context</a>
   82606      <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
   82607     <tr><th> <code title="">name</code>
   82608      <td> <code title=attr-map-name><a href=#attr-map-name>map</a></code>
   82609      <td> Name of <a href=#image-map>image map</a> to reference from the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute
   82610      <td> <a href=#attribute-text>Text</a>*
   82611     <tr><th> <code title="">name</code>
   82612      <td> <code title=attr-meta-name><a href=#attr-meta-name>meta</a></code>
   82613      <td> Metadata name
   82614      <td> <a href=#attribute-text>Text</a>*
   82615     <tr><th> <code title="">name</code>
   82616      <td> <code title=attr-param-name><a href=#attr-param-name>param</a></code>
   82617      <td> Name of parameter
   82618      <td> <a href=#attribute-text>Text</a>
   82619     <tr><th> <code title="">novalidate</code>
   82620      <td> <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>form</a></code>
   82621      <td> Bypass form control validation for <a href=#form-submission>form submission</a>
   82622      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82623     <tr><th> <code title="">open</code>
   82624      <td> <code title=attr-details-open><a href=#attr-details-open>details</a></code>
   82625      <td> Whether the details are visible
   82626      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82627     <tr><th> <code title="">optimum</code>
   82628      <td> <code title=attr-meter-optimum><a href=#attr-meter-optimum>meter</a></code>
   82629      <td> Optimum value in gauge
   82630      <td> <a href=#valid-floating-point-number>Valid floating point number</a>*
   82631     <tr><th> <code title="">pattern</code>
   82632      <td> <code title=attr-input-pattern><a href=#attr-input-pattern>input</a></code>
   82633      <td> Pattern to be matched by the form control's value
   82634      <td> Regular expression matching the JavaScript <i title="">Pattern</i> production
   82635 <!--PING-->
   82636     <tr><th> <code title="">ping</code>
   82637      <td> <code title=attr-hyperlink-ping><a href=#ping>a</a></code>;
   82638           <code title=attr-hyperlink-ping><a href=#ping>area</a></code>
   82639      <td> <a href=#url title=URL>URLs</a> to ping
   82640      <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a> consisting of <a href=#valid-non-empty-url title="valid non-empty URL">valid non-empty URLs</a>
   82641 <!--PING-->
   82642     <tr><th> <code title="">placeholder</code>
   82643      <td> <code title=attr-input-placeholder><a href=#attr-input-placeholder>input</a></code>;
   82644           <code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>textarea</a></code>
   82645      <td> User-visible label to be placed within the form control
   82646      <td> <a href=#attribute-text>Text</a>*
   82647     <tr><th> <code title="">poster</code>
   82648      <td> <code title=attr-video-poster><a href=#attr-video-poster>video</a></code>
   82649      <td> Poster frame to show prior to video playback
   82650      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82651     <tr><th> <code title="">preload</code>
   82652      <td> <code title=attr-media-preload><a href=#attr-media-preload>audio</a></code>;
   82653           <code title=attr-media-preload><a href=#attr-media-preload>video</a></code>
   82654      <td> Hints how much buffering the <a href=#media-resource>media resource</a> will likely need
   82655      <td> "<code title=attr-media-preload-none><a href=#attr-media-preload-none>none</a></code>";
   82656           "<code title=attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>";
   82657           "<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>"
   82658     <tr><th> <code title="">pubdate</code>
   82659      <td> <code title=attr-time-pubdate><a href=#attr-time-pubdate>time</a></code>
   82660      <td> Whether the element's value represents a publication time for the nearest <code><a href=#the-article-element>article</a></code> or <code><a href=#the-body-element-0>body</a></code>
   82661      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82662     <tr><th> <code title="">radiogroup</code>
   82663      <td> <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>command</a></code>
   82664      <td> Name of group of commands to treat as a radio button group
   82665      <td> <a href=#attribute-text>Text</a>
   82666     <tr><th> <code title="">readonly</code>
   82667      <td> <code title=attr-input-readonly><a href=#attr-input-readonly>input</a></code>;
   82668           <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>textarea</a></code>
   82669      <td> Whether to allow the value to be edited by the user
   82670      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82671     <tr><th> <code title="">rel</code>
   82672      <td> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>a</a></code>;
   82673           <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>area</a></code>;
   82674           <code title=attr-link-rel><a href=#attr-link-rel>link</a></code>
   82675      <td> Relationship between the document containing the hyperlink and the destination resource
   82676      <td> <a href=#set-of-space-separated-tokens>Set of space-separated tokens</a>*
   82677     <tr><th> <code title="">required</code>
   82678      <td> <code title=attr-input-required><a href=#attr-input-required>input</a></code>;
   82679           <code title=attr-textarea-required><a href=#attr-textarea-required>textarea</a></code>
   82680      <td> Whether the control is required for <a href=#form-submission>form submission</a>
   82681      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82682     <tr><th> <code title="">reversed</code>
   82683      <td> <code title=attr-ol-reversed><a href=#attr-ol-reversed>ol</a></code>
   82684      <td> Number the list backwards
   82685      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82686     <tr><th> <code title="">rows</code>
   82687      <td> <code title=attr-textarea-rows><a href=#attr-textarea-rows>textarea</a></code>
   82688      <td> Number of lines to show
   82689      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
   82690     <tr><th> <code title="">rowspan</code>
   82691      <td> <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>td</a></code>;
   82692           <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>th</a></code>
   82693      <td> Number of rows that the cell is to span
   82694      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
   82695     <tr><th> <code title="">sandbox</code>
   82696      <td> <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>iframe</a></code>
   82697      <td> Security rules for nested content
   82698      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of
   82699           "<code title=attr-iframe-sandbox-allow-same-origin><a href=#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code>",
   82700           "<code title=attr-iframe-sandbox-allow-forms><a href=#attr-iframe-sandbox-allow-forms>allow-forms</a></code>", and
   82701           "<code title=attr-iframe-sandbox-allow-scripts><a href=#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>"
   82702     <tr><th> <code title="">spellcheck</code>
   82703      <td> <a href=#attr-spellcheck title=attr-spellcheck>HTML elements</a>
   82704      <td> Whether the element is to have its spelling and grammar checked
   82705      <td> "<code title="">true</code>"; "<code title="">false</code>"
   82706     <tr><th> <code title="">scope</code>
   82707      <td> <code title=attr-th-scope><a href=#attr-th-scope>th</a></code>
   82708      <td> Specifies which cells the header cell applies to
   82709      <td> "<code title=attr-th-scope-row><a href=#attr-th-scope-row>row</a></code>";
   82710           "<code title=attr-th-scope-col><a href=#attr-th-scope-col>col</a></code>";
   82711           "<code title=attr-th-scope-rowgroup><a href=#attr-th-scope-rowgroup>rowgroup</a></code>";
   82712           "<code title=attr-th-scope-colgroup><a href=#attr-th-scope-colgroup>colgroup</a></code>"
   82713     <tr><th> <code title="">scoped</code>
   82714      <td> <code title=attr-style-scoped><a href=#attr-style-scoped>style</a></code>
   82715      <td> Whether the styles apply to the entire document or just the parent subtree
   82716      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82717     <tr><th> <code title="">seamless</code>
   82718      <td> <code title=attr-iframe-seamless><a href=#attr-iframe-seamless>iframe</a></code>
   82719      <td> Whether to apply the document's styles to the nested content
   82720      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82721     <tr><th> <code title="">selected</code>
   82722      <td> <code title=attr-option-selected><a href=#attr-option-selected>option</a></code>
   82723      <td> Whether the option is selected by default
   82724      <td> <a href=#boolean-attribute>Boolean attribute</a>
   82725     <tr><th> <code title="">shape</code>
   82726      <td> <code title=attr-area-shape><a href=#attr-area-shape>area</a></code>
   82727      <td> The kind of shape to be created in an <a href=#image-map>image map</a>
   82728      <td> "<code title=attr-area-shape-keyword-circle><a href=#attr-area-shape-keyword-circle>circle</a></code>";
   82729           "<code title=attr-area-shape-keyword-default><a href=#attr-area-shape-keyword-default>default</a></code>";
   82730           "<code title=attr-area-shape-keyword-poly><a href=#attr-area-shape-keyword-poly>poly</a></code>";
   82731           "<code title=attr-area-shape-keyword-rect><a href=#attr-area-shape-keyword-rect>rect</a></code>"
   82732     <tr><th> <code title="">size</code>
   82733      <td> <code title=attr-input-size><a href=#attr-input-size>input</a></code>;
   82734           <code title=attr-select-size><a href=#attr-select-size>select</a></code>
   82735      <td> Size of the control
   82736      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
   82737     <tr><th> <code title="">sizes</code>
   82738      <td> <code title=attr-link-sizes><a href=#attr-link-sizes>link</a></code>
   82739      <td> Sizes of the icons (for <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>="<code title=rel-icon><a href=#rel-icon>icon</a></code>")
   82740      <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a> consisting of sizes*
   82741     <tr><th> <code title="">span</code>
   82742      <td> <code title=attr-col-span><a href=#attr-col-span>col</a></code>;
   82743           <code title=attr-colgroup-span><a href=#attr-colgroup-span>colgroup</a></code>
   82744      <td> Number of columns spanned by the element
   82745      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
   82746     <tr><th> <code title="">src</code>
   82747      <td> <code title=attr-media-src><a href=#attr-media-src>audio</a></code>;
   82748           <code title=attr-embed-src><a href=#attr-embed-src>embed</a></code>;
   82749           <code title=attr-iframe-src><a href=#attr-iframe-src>iframe</a></code>;
   82750           <code title=attr-img-src><a href=#attr-img-src>img</a></code>;
   82751           <code title=attr-input-src><a href=#attr-input-src>input</a></code>;
   82752           <code title=attr-script-src><a href=#attr-script-src>script</a></code>;
   82753           <code title=attr-source-src><a href=#attr-source-src>source</a></code>;
   82754 <!--TT-->
   82755           <code title=attr-track-src><a href=#attr-track-src>track</a></code>;
   82756 <!--TT-->
   82757           <code title=attr-media-src><a href=#attr-media-src>video</a></code>
   82758      <td> Address of the resource
   82759      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
   82760     <tr><th> <code title="">srcdoc</code>
   82761      <td> <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>iframe</a></code>
   82762      <td> A document to render in the <code><a href=#the-iframe-element>iframe</a></code>
   82763      <td> The source of <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>*
   82764 <!--TT-->
   82765     <tr><th> <code title="">srclang</code>
   82766      <td> <code title=attr-track-srclang><a href=#attr-track-srclang>track</a></code>
   82767      <td> Language of the timed track
   82768      <td> Valid BCP 47 language tag
   82769 <!--TT-->
   82770     <tr><th> <code title="">start</code>
   82771      <td> <code title=attr-ol-start><a href=#attr-ol-start>ol</a></code>
   82772      <td> Ordinal value of the first item
   82773      <td> <a href=#valid-integer>Valid integer</a>
   82774     <tr><th> <code title="">step</code>
   82775      <td> <code title=attr-input-step><a href=#attr-input-step>input</a></code>
   82776      <td> Granularity to be matched by the form control's value
   82777      <td> <a href=#valid-floating-point-number>Valid floating point number</a> greater than zero, or "<code title="">any</code>"
   82778     <tr><th> <code title="">style</code>
   82779      <td> <a href=#the-style-attribute title=attr-style>HTML elements</a>
   82780      <td> Presentational and formatting instructions
   82781      <td> CSS declarations*
   82782     <tr><th> <code title="">summary</code>
   82783      <td> <code title=attr-table-summary><a href=#attr-table-summary>table</a></code>
   82784      <td> Explanatory text for complex tables for users of screen readers
   82785      <td> <a href=#attribute-text>Text</a>*
   82786     <tr><th> <code title="">tabindex</code>
   82787      <td> <a href=#attr-tabindex title=attr-tabindex>HTML elements</a>
   82788      <td> Whether the element is focusable, and the relative order of the element for the purposes of sequential focus navigation
   82789      <td> <a href=#valid-integer>Valid integer</a>
   82790     <tr><th> <code title="">target</code>
   82791      <td> <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>a</a></code>;
   82792           <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>area</a></code>
   82793      <td> <a href=#browsing-context>Browsing context</a> for <a href=#hyperlink>hyperlink</a> <a href=#navigate title=navigate>navigation</a>
   82794      <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
   82795     <tr><th> <code title="">target</code>
   82796      <td> <code title=attr-base-target><a href=#attr-base-target>base</a></code>
   82797      <td> Default <a href=#browsing-context>browsing context</a> for <a href=#hyperlink>hyperlink</a> <a href=#navigate title=navigate>navigation</a> and <a href=#form-submission>form submission</a>
   82798      <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
   82799     <tr><th> <code title="">target</code>
   82800      <td> <code title=attr-fs-target><a href=#attr-fs-target>form</a></code>
   82801      <td> <a href=#browsing-context>Browsing context</a> for <a href=#form-submission>form submission</a>
   82802      <td> <a href=#valid-browsing-context-name-or-keyword>Valid browsing context name or keyword</a>
   82803     <tr><th> <code title="">title</code>
   82804      <td> <a href=#the-title-attribute title=attr-title>HTML elements</a>
   82805      <td> Advisory information for the element
   82806      <td> <a href=#attribute-text>Text</a>
   82807     <tr><th> <code title="">title</code>
   82808      <td> <code title=attr-abbr-title><a href=#attr-abbr-title>abbr</a></code>;
   82809           <code title=attr-dfn-title><a href=#attr-dfn-title>dfn</a></code>
   82810      <td> Full term or expansion of abbreviation
   82811      <td> <a href=#attribute-text>Text</a>
   82812     <tr><th> <code title="">title</code>
   82813      <td> <code title=attr-command-title><a href=#attr-command-title>command</a></code>
   82814      <td> Hint describing the command
   82815      <td> <a href=#attribute-text>Text</a>
   82816     <tr><th> <code title="">title</code>
   82817      <td> <code title=attr-link-title><a href=#attr-link-title>link</a></code>
   82818      <td> Title of the link
   82819      <td> <a href=#attribute-text>Text</a>
   82820     <tr><th> <code title="">title</code>
   82821      <td> <code title=attr-link-title><a href=#attr-link-title>link</a></code>;
   82822           <code title=attr-style-title><a href=#attr-style-title>style</a></code>
   82823      <td> Alternative style sheet set name
   82824      <td> <a href=#attribute-text>Text</a>
   82825     <tr><th> <code title="">type</code>
   82826      <td> <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>a</a></code>;
   82827           <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>area</a></code>;
   82828           <code title=attr-link-type><a href=#attr-link-type>link</a></code>
   82829      <td> Hint for the type of the referenced resource
   82830      <td> <a href=#valid-mime-type>Valid MIME type</a>
   82831     <tr><th> <code title="">type</code>
   82832      <td> <code title=attr-button-type><a href=#attr-button-type>button</a></code>
   82833      <td> Type of button
   82834      <td> "<code title=attr-button-type-submit><a href=#attr-button-type-submit>submit</a></code>";
   82835           "<code title=attr-button-type-reset><a href=#attr-button-type-reset>reset</a></code>";
   82836           "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>"
   82837     <tr><th> <code title="">type</code>
   82838      <td> <code title=attr-button-type><a href=#attr-button-type>button</a></code>;
   82839           <code title=attr-input-type><a href=#attr-input-type>input</a></code>
   82840      <td> Type of form control
   82841      <td> <a href=#attr-input-type title=attr-input-type><code>input</code> type keyword</a>
   82842     <tr><th> <code title="">type</code>
   82843      <td> <code title=attr-command-type><a href=#attr-command-type>command</a></code>
   82844      <td> Type of command
   82845      <td> "<code title=attr-command-type-keyword-command><a href=#attr-command-type-keyword-command>command</a></code>";
   82846           "<code title=attr-command-type-keyword-checkbox><a href=#attr-command-type-keyword-checkbox>checkbox</a></code>";
   82847           "<code title=attr-command-type-keyword-radio><a href=#attr-command-type-keyword-radio>radio</a></code>"
   82848     <tr><th> <code title="">type</code>
   82849      <td> <code title=attr-embed-type><a href=#attr-embed-type>embed</a></code>;
   82850           <code title=attr-object-type><a href=#attr-object-type>object</a></code>;
   82851           <code title=attr-script-type><a href=#attr-script-type>script</a></code>;
   82852           <code title=attr-source-type><a href=#attr-source-type>source</a></code>;
   82853           <code title=attr-style-type><a href=#attr-style-type>style</a></code>
   82854      <td> Type of embedded resource
   82855      <td> <a href=#valid-mime-type>Valid MIME type</a>
   82856     <tr><th> <code title="">type</code>
   82857      <td> <code title=attr-menu-type><a href=#attr-menu-type>menu</a></code>
   82858      <td> Type of menu
   82859      <td> "<code title="context menu state"><a href=#context-menu-state>context</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
   82860     <tr><th> <code title="">usemap</code>
   82861      <td> <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>img</a></code>;
   82862           <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>object</a></code>
   82863      <td> Name of <a href=#image-map>image map</a> to use
   82864      <td> <a href=#valid-hash-name-reference>Valid hash-name reference</a>*
   82865     <tr><th> <code title="">value</code>
   82866      <td> <code title=attr-button-value><a href=#attr-button-value>button</a></code>;
   82867           <code title=attr-option-value><a href=#attr-option-value>option</a></code>
   82868      <td> Value to be used for <a href=#form-submission>form submission</a>
   82869      <td> <a href=#attribute-text>Text</a>
   82870     <tr><th> <code title="">value</code>
   82871      <td> <code title=attr-input-value><a href=#attr-input-value>input</a></code>
   82872      <td> Value of the form control
   82873      <td> varies*
   82874     <tr><th> <code title="">value</code>
   82875      <td> <code title=attr-li-value><a href=#attr-li-value>li</a></code>
   82876      <td> Ordinal value of the list item
   82877      <td> <a href=#valid-integer>Valid integer</a>
   82878     <tr><th> <code title="">value</code>
   82879      <td> <code title=attr-meter-value><a href=#attr-meter-value>meter</a></code>;
   82880           <code title=attr-progress-value><a href=#attr-progress-value>progress</a></code>
   82881      <td> Current value of the element
   82882      <td> <a href=#valid-floating-point-number>Valid floating point number</a>
   82883     <tr><th> <code title="">value</code>
   82884      <td> <code title=attr-param-value><a href=#attr-param-value>param</a></code>
   82885      <td> Value of parameter
   82886      <td> <a href=#attribute-text>Text</a>
   82887     <tr><th> <code title="">width</code>
   82888      <td> <code title=attr-canvas-width><a href=#attr-canvas-width>canvas</a></code>;
   82889           <code title=attr-dim-width><a href=#attr-dim-width>embed</a></code>;
   82890           <code title=attr-dim-width><a href=#attr-dim-width>iframe</a></code>;
   82891           <code title=attr-dim-width><a href=#attr-dim-width>img</a></code>;
   82892           <code title=attr-dim-width><a href=#attr-dim-width>input</a></code>;
   82893           <code title=attr-dim-width><a href=#attr-dim-width>object</a></code>;
   82894           <code title=attr-dim-width><a href=#attr-dim-width>video</a></code>
   82895      <td> Horizontal dimension
   82896      <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
   82897     <tr><th> <code title="">wrap</code>
   82898      <td> <code title=attr-textarea-wrap><a href=#attr-textarea-wrap>textarea</a></code>
   82899      <td> How the value of the form control is to be wrapped for <a href=#form-submission>form submission</a>
   82900      <td> "<code title=attr-textarea-wrap-soft><a href=#attr-textarea-wrap-soft>soft</a></code>";
   82901           "<code title=attr-textarea-wrap-hard><a href=#attr-textarea-wrap-hard>hard</a></code>"
   82902   </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
   82903 
   82904   <hr><table><caption>List of event handler content attributes</caption>
   82905    <thead><tr><th> Attribute
   82906      <th> Element(s)
   82907      <th> Description
   82908      <th> Value
   82909    <tbody><tr><th> <code title="">onabort</code>
   82910      <td> <a href=#handler-onabort title=handler-onabort>HTML elements</a>
   82911      <td> <code title=event-abort>abort</code> event handler
   82912      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82913 
   82914     <tr><th> <code title="">onafterprint</code>
   82915      <td> <code title=handler-window-onafterprint><a href=#handler-window-onafterprint>body</a></code>
   82916      <td> <code title=event-afterprint>afterprint</code> event handler for <code><a href=#window>Window</a></code> object
   82917      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82918 
   82919     <tr><th> <code title="">onbeforeprint</code>
   82920      <td> <code title=handler-window-onbeforeprint><a href=#handler-window-onbeforeprint>body</a></code>
   82921      <td> <code title=event-beforeprint>beforeprint</code> event handler for <code><a href=#window>Window</a></code> object
   82922      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82923 
   82924     <tr><th> <code title="">onbeforeunload</code>
   82925      <td> <code title=handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>body</a></code>
   82926      <td> <code title=event-beforeunload>beforeunload</code> event handler for <code><a href=#window>Window</a></code> object
   82927      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82928 
   82929     <tr><th> <code title="">onblur</code>
   82930      <td> <code title=handler-window-onblur><a href=#handler-window-onblur>body</a></code>
   82931      <td> <code title=event-blur>blur</code> event handler for <code><a href=#window>Window</a></code> object
   82932      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82933 
   82934     <tr><th> <code title="">onblur</code>
   82935      <td> <a href=#handler-onblur title=handler-onblur>HTML elements</a>
   82936      <td> <code title=event-blur>blur</code> event handler
   82937      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82938 
   82939     <tr><th> <code title="">oncanplay</code>
   82940      <td> <a href=#handler-oncanplay title=handler-oncanplay>HTML elements</a>
   82941      <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code> event handler
   82942      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82943 
   82944     <tr><th> <code title="">oncanplaythrough</code>
   82945      <td> <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>HTML elements</a>
   82946      <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code> event handler
   82947      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82948 
   82949     <tr><th> <code title="">onchange</code>
   82950      <td> <a href=#handler-onchange title=handler-onchange>HTML elements</a>
   82951      <td> <code title=event-change>change</code> event handler
   82952      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82953 
   82954     <tr><th> <code title="">onclick</code>
   82955      <td> <a href=#handler-onclick title=handler-onclick>HTML elements</a>
   82956      <td> <code title=event-click><a href=#event-click>click</a></code> event handler
   82957      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82958 
   82959     <tr><th> <code title="">oncontextmenu</code>
   82960      <td> <a href=#handler-oncontextmenu title=handler-oncontextmenu>HTML elements</a>
   82961      <td> <code title=event-contextmenu>contextmenu</code> event handler
   82962      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82963 
   82964     <tr><th> <code title="">ondblclick</code>
   82965      <td> <a href=#handler-ondblclick title=handler-ondblclick>HTML elements</a>
   82966      <td> <code title=event-dblclick>dblclick</code> event handler
   82967      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82968 
   82969     <tr><th> <code title="">ondrag</code>
   82970      <td> <a href=#handler-ondrag title=handler-ondrag>HTML elements</a>
   82971      <td> <code title=event-drag><a href=#event-drag>drag</a></code> event handler
   82972      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82973 
   82974     <tr><th> <code title="">ondragend</code>
   82975      <td> <a href=#handler-ondragend title=handler-ondragend>HTML elements</a>
   82976      <td> <code title=event-dragend><a href=#event-dragend>dragend</a></code> event handler
   82977      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82978 
   82979     <tr><th> <code title="">ondragenter</code>
   82980      <td> <a href=#handler-ondragenter title=handler-ondragenter>HTML elements</a>
   82981      <td> <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event handler
   82982      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82983 
   82984     <tr><th> <code title="">ondragleave</code>
   82985      <td> <a href=#handler-ondragleave title=handler-ondragleave>HTML elements</a>
   82986      <td> <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event handler
   82987      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82988 
   82989     <tr><th> <code title="">ondragover</code>
   82990      <td> <a href=#handler-ondragover title=handler-ondragover>HTML elements</a>
   82991      <td> <code title=event-dragover><a href=#event-dragover>dragover</a></code> event handler
   82992      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82993 
   82994     <tr><th> <code title="">ondragstart</code>
   82995      <td> <a href=#handler-ondragstart title=handler-ondragstart>HTML elements</a>
   82996      <td> <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event handler
   82997      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   82998 
   82999     <tr><th> <code title="">ondrop</code>
   83000      <td> <a href=#handler-ondrop title=handler-ondrop>HTML elements</a>
   83001      <td> <code title=event-drop><a href=#event-drop>drop</a></code> event handler
   83002      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83003 
   83004     <tr><th> <code title="">ondurationchange</code>
   83005      <td> <a href=#handler-ondurationchange title=handler-ondurationchange>HTML elements</a>
   83006      <td> <code title=event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event handler
   83007      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83008 
   83009     <tr><th> <code title="">onemptied</code>
   83010      <td> <a href=#handler-onemptied title=handler-onemptied>HTML elements</a>
   83011      <td> <code title=event-media-emptied><a href=#event-media-emptied>emptied</a></code> event handler
   83012      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83013 
   83014     <tr><th> <code title="">onended</code>
   83015      <td> <a href=#handler-onended title=handler-onended>HTML elements</a>
   83016      <td> <code title=event-media-ended><a href=#event-media-ended>ended</a></code> event handler
   83017      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83018 
   83019     <tr><th> <code title="">onerror</code>
   83020      <td> <code title=handler-window-onerror><a href=#handler-window-onerror>body</a></code>
   83021      <td> <code title=event-error>error</code> event handler for <code><a href=#window>Window</a></code> object, and handler for <a href=#runtime-script-errors>script error notifications</a>
   83022      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83023 
   83024     <tr><th> <code title="">onerror</code>
   83025      <td> <a href=#handler-onerror title=handler-onerror>HTML elements</a>
   83026      <td> <code title=event-error>error</code> event handler
   83027      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83028 
   83029     <tr><th> <code title="">onfocus</code>
   83030      <td> <code title=handler-window-onfocus><a href=#handler-window-onfocus>body</a></code>
   83031      <td> <code title=event-focus>focus</code> event handler for <code><a href=#window>Window</a></code> object
   83032      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83033 
   83034     <tr><th> <code title="">onfocus</code>
   83035      <td> <a href=#handler-onfocus title=handler-onfocus>HTML elements</a>
   83036      <td> <code title=event-focus>focus</code> event handler
   83037      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83038 
   83039     <tr><th> <code title="">onformchange</code>
   83040      <td> <a href=#handler-onformchange title=handler-onformchange>HTML elements</a>
   83041      <td> <code title=event-formchange>formchange</code> event handler
   83042      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83043 
   83044     <tr><th> <code title="">onforminput</code>
   83045      <td> <a href=#handler-onforminput title=handler-onforminput>HTML elements</a>
   83046      <td> <code title=event-forminput>forminput</code> event handler
   83047      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83048 
   83049     <tr><th> <code title="">onhashchange</code>
   83050      <td> <code title=handler-window-onhashchange><a href=#handler-window-onhashchange>body</a></code>
   83051      <td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code> event handler for <code><a href=#window>Window</a></code> object
   83052      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83053 
   83054     <tr><th> <code title="">oninput</code>
   83055      <td> <a href=#handler-oninput title=handler-oninput>HTML elements</a>
   83056      <td> <code title=event-input>input</code> event handler
   83057      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83058 
   83059     <tr><th> <code title="">oninvalid</code>
   83060      <td> <a href=#handler-oninvalid title=handler-oninvalid>HTML elements</a>
   83061      <td> <code title=event-invalid>invalid</code> event handler
   83062      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83063 
   83064     <tr><th> <code title="">onkeydown</code>
   83065      <td> <a href=#handler-onkeydown title=handler-onkeydown>HTML elements</a>
   83066      <td> <code title=event-keydown>keydown</code> event handler
   83067      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83068 
   83069     <tr><th> <code title="">onkeypress</code>
   83070      <td> <a href=#handler-onkeypress title=handler-onkeypress>HTML elements</a>
   83071      <td> <code title=event-keypress>keypress</code> event handler
   83072      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83073 
   83074     <tr><th> <code title="">onkeyup</code>
   83075      <td> <a href=#handler-onkeyup title=handler-onkeyup>HTML elements</a>
   83076      <td> <code title=event-keyup>keyup</code> event handler
   83077      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83078 
   83079     <tr><th> <code title="">onload</code>
   83080      <td> <code title=handler-window-onload><a href=#handler-window-onload>body</a></code>
   83081      <td> <code title=event-load>load</code> event handler for <code><a href=#window>Window</a></code> object
   83082      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83083 
   83084     <tr><th> <code title="">onload</code>
   83085      <td> <a href=#handler-onload title=handler-onload>HTML elements</a>
   83086      <td> <code title=event-load>load</code> event handler
   83087      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83088 
   83089     <tr><th> <code title="">onloadeddata</code>
   83090      <td> <a href=#handler-onloadeddata title=handler-onloadeddata>HTML elements</a>
   83091      <td> <code title=event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code> event handler
   83092      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83093 
   83094     <tr><th> <code title="">onloadedmetadata</code>
   83095      <td> <a href=#handler-onloadedmetadata title=handler-onloadedmetadata>HTML elements</a>
   83096      <td> <code title=event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> event handler
   83097      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83098 
   83099     <tr><th> <code title="">onloadstart</code>
   83100      <td> <a href=#handler-onloadstart title=handler-onloadstart>HTML elements</a>
   83101      <td> <code title=event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code> event handler
   83102      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83103 
   83104     <tr><th> <code title="">onmessage</code>
   83105      <td> <code title=handler-window-onmessage><a href=#handler-window-onmessage>body</a></code>
   83106      <td> <code title=event-message><a href=#event-message>message</a></code> event handler for <code><a href=#window>Window</a></code> object
   83107      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83108 
   83109     <tr><th> <code title="">onmousedown</code>
   83110      <td> <a href=#handler-onmousedown title=handler-onmousedown>HTML elements</a>
   83111      <td> <code title=event-mousedown>mousedown</code> event handler
   83112      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83113 
   83114     <tr><th> <code title="">onmousemove</code>
   83115      <td> <a href=#handler-onmousemove title=handler-onmousemove>HTML elements</a>
   83116      <td> <code title=event-mousemove>mousemove</code> event handler
   83117      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83118 
   83119     <tr><th> <code title="">onmouseout</code>
   83120      <td> <a href=#handler-onmouseout title=handler-onmouseout>HTML elements</a>
   83121      <td> <code title=event-mouseout>mouseout</code> event handler
   83122      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83123 
   83124     <tr><th> <code title="">onmouseover</code>
   83125      <td> <a href=#handler-onmouseover title=handler-onmouseover>HTML elements</a>
   83126      <td> <code title=event-mouseover>mouseover</code> event handler
   83127      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83128 
   83129     <tr><th> <code title="">onmouseup</code>
   83130      <td> <a href=#handler-onmouseup title=handler-onmouseup>HTML elements</a>
   83131      <td> <code title=event-mouseup>mouseup</code> event handler
   83132      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83133 
   83134     <tr><th> <code title="">onmousewheel</code>
   83135      <td> <a href=#handler-onmousewheel title=handler-onmousewheel>HTML elements</a>
   83136      <td> <code title=event-mousewheel>mousewheel</code> event handler
   83137      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83138 
   83139     <tr><th> <code title="">onoffline</code>
   83140      <td> <code title=handler-window-onoffline><a href=#handler-window-onoffline>body</a></code>
   83141      <td> <code title=event-offline><a href=#event-offline>offline</a></code> event handler for <code><a href=#window>Window</a></code> object
   83142      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83143 
   83144     <tr><th> <code title="">ononline</code>
   83145      <td> <code title=handler-window-ononline><a href=#handler-window-ononline>body</a></code>
   83146      <td> <code title=event-online><a href=#event-online>online</a></code> event handler for <code><a href=#window>Window</a></code> object
   83147      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83148 
   83149     <tr><th> <code title="">onpause</code>
   83150      <td> <a href=#handler-onpause title=handler-onpause>HTML elements</a>
   83151      <td> <code title=event-media-pause><a href=#event-media-pause>pause</a></code> event handler
   83152      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83153 
   83154     <tr><th> <code title="">onplay</code>
   83155      <td> <a href=#handler-onplay title=handler-onplay>HTML elements</a>
   83156      <td> <code title=event-media-play><a href=#event-media-play>play</a></code> event handler
   83157      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83158 
   83159     <tr><th> <code title="">onplaying</code>
   83160      <td> <a href=#handler-onplaying title=handler-onplaying>HTML elements</a>
   83161      <td> <code title=event-media-playing><a href=#event-media-playing>playing</a></code> event handler
   83162      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83163 
   83164     <tr><th> <code title="">onpagehide</code>
   83165      <td> <code title=handler-window-onpagehide><a href=#handler-window-onpagehide>body</a></code>
   83166      <td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code> event handler for <code><a href=#window>Window</a></code> object
   83167      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83168 
   83169     <tr><th> <code title="">onpageshow</code>
   83170      <td> <code title=handler-window-onpageshow><a href=#handler-window-onpageshow>body</a></code>
   83171      <td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code> event handler for <code><a href=#window>Window</a></code> object
   83172      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83173 
   83174     <tr><th> <code title="">onpopstate</code>
   83175      <td> <code title=handler-window-onpopstate><a href=#handler-window-onpopstate>body</a></code>
   83176      <td> <code title=event-popstate><a href=#event-popstate>popstate</a></code> event handler for <code><a href=#window>Window</a></code> object
   83177      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83178 
   83179     <tr><th> <code title="">onprogress</code>
   83180      <td> <a href=#handler-onprogress title=handler-onprogress>HTML elements</a>
   83181      <td> <code title=event-media-progress><a href=#event-media-progress>progress</a></code> event handler
   83182      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83183 
   83184     <tr><th> <code title="">onratechange</code>
   83185      <td> <a href=#handler-onratechange title=handler-onratechange>HTML elements</a>
   83186      <td> <code title=event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code> event handler
   83187      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83188 
   83189     <tr><th> <code title="">onreadystatechange</code>
   83190      <td> <a href=#handler-onreadystatechange title=handler-onreadystatechange>HTML elements</a>
   83191      <td> <code title=event-readystatechange>readystatechange</code> event handler
   83192      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83193 
   83194     <tr><th> <code title="">onredo</code>
   83195      <td> <code title=handler-window-onredo><a href=#handler-window-onredo>body</a></code>
   83196      <td> <code title=event-redo><a href=#event-redo>redo</a></code> event handler for <code><a href=#window>Window</a></code> object
   83197      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83198 
   83199     <tr><th> <code title="">onresize</code>
   83200      <td> <code title=handler-window-onresize><a href=#handler-window-onresize>body</a></code>
   83201      <td> <code title=event-resize>resize</code> event handler for <code><a href=#window>Window</a></code> object
   83202      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83203 
   83204     <tr><th> <code title="">onscroll</code>
   83205      <td> <a href=#handler-onscroll title=handler-onscroll>HTML elements</a>
   83206      <td> <code title=event-scroll>scroll</code> event handler
   83207      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83208 
   83209     <tr><th> <code title="">onseeked</code>
   83210      <td> <a href=#handler-onseeked title=handler-onseeked>HTML elements</a>
   83211      <td> <code title=event-media-seeked><a href=#event-media-seeked>seeked</a></code> event handler
   83212      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83213 
   83214     <tr><th> <code title="">onseeking</code>
   83215      <td> <a href=#handler-onseeking title=handler-onseeking>HTML elements</a>
   83216      <td> <code title=event-media-seeking><a href=#event-media-seeking>seeking</a></code> event handler
   83217      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83218 
   83219     <tr><th> <code title="">onselect</code>
   83220      <td> <a href=#handler-onselect title=handler-onselect>HTML elements</a>
   83221      <td> <code title=event-select>select</code> event handler
   83222      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83223 
   83224     <tr><th> <code title="">onshow</code>
   83225      <td> <a href=#handler-onshow title=handler-onshow>HTML elements</a>
   83226      <td> <code title=event-show>show</code> event handler
   83227      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83228 
   83229     <tr><th> <code title="">onstalled</code>
   83230      <td> <a href=#handler-onstalled title=handler-onstalled>HTML elements</a>
   83231      <td> <code title=event-media-stalled><a href=#event-media-stalled>stalled</a></code> event handler
   83232      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83233 
   83234     <tr><th> <code title="">onstorage</code>
   83235      <td> <code title=handler-window-onstorage><a href=#handler-window-onstorage>body</a></code>
   83236      <td> <code title=event-storage>storage</code> event handler for <code><a href=#window>Window</a></code> object
   83237      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83238 
   83239     <tr><th> <code title="">onsubmit</code>
   83240      <td> <a href=#handler-onsubmit title=handler-onsubmit>HTML elements</a>
   83241      <td> <code title=event-submit>submit</code> event handler
   83242      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83243 
   83244     <tr><th> <code title="">onsuspend</code>
   83245      <td> <a href=#handler-onsuspend title=handler-onsuspend>HTML elements</a>
   83246      <td> <code title=event-media-suspend><a href=#event-media-suspend>suspend</a></code> event handler
   83247      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83248 
   83249     <tr><th> <code title="">ontimeupdate</code>
   83250      <td> <a href=#handler-ontimeupdate title=handler-ontimeupdate>HTML elements</a>
   83251      <td> <code title=event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event handler
   83252      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83253 
   83254     <tr><th> <code title="">onundo</code>
   83255      <td> <code title=handler-window-onundo><a href=#handler-window-onundo>body</a></code>
   83256      <td> <code title=event-undo><a href=#event-undo>undo</a></code> event handler for <code><a href=#window>Window</a></code> object
   83257      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83258 
   83259     <tr><th> <code title="">onunload</code>
   83260      <td> <code title=handler-window-onunload><a href=#handler-window-onunload>body</a></code>
   83261      <td> <code title=event-unload>unload</code> event handler for <code><a href=#window>Window</a></code> object
   83262      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83263 
   83264     <tr><th> <code title="">onvolumechange</code>
   83265      <td> <a href=#handler-onvolumechange title=handler-onvolumechange>HTML elements</a>
   83266      <td> <code title=event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> event handler
   83267      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83268 
   83269     <tr><th> <code title="">onwaiting</code>
   83270      <td> <a href=#handler-onwaiting title=handler-onwaiting>HTML elements</a>
   83271      <td> <code title=event-media-waiting><a href=#event-media-waiting>waiting</a></code> event handler
   83272      <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
   83273 
   83274   </table><!-- v2 for completeness: (also search for REFLECTIDL)
   83275   <h3 class="no-num">Reflecting IDL attributes</h3>
   83276 
   83277   <p><i>This section is non-normative.</i></p>
   83278 
   83279   <table>
   83280    <caption>List of <dfn>reflecting IDL attributes</dfn></caption>
   83281    <thead>
   83282     <tr>
   83283      <th> Interface
   83284      <th> Element(s)
   83285      <th> IDL attribute
   83286      <th> Reflects...
   83287    <tbody>
   83288     ...
   83289     <tr>
   83290      <td> <code>HTMLElement</code>
   83291      <td> <span>HTML elements</span>
   83292      <td> <code title="dom-contextMenu">contextMenu</code>
   83293      <td> <code title="attr-contextmenu">contextmenu</code>
   83294     <tr>
   83295      <td> <code>HTMLOptionElement</code>
   83296      <td> <code>option</code>
   83297      <td> <code title="dom-option-text">text</code>
   83298      <td> <code>textContent</code>
   83299   </table>
   83300   ( include option.text; textarea.defaultValue, and other attributes that "reflect" the element's textContent )
   83301 --><h3 class=no-num id=interfaces>Interfaces</h3>
   83302 
   83303   <p><i>This section is non-normative.</i></p>
   83304 
   83305   <table><caption>List of interfaces for elements</caption>
   83306    <thead><tr><th> Element(s)
   83307      <th> Interface(s)
   83308    <tbody><tr><td> <code><a href=#the-a-element>a</a></code>
   83309      <td> <code><a href=#htmlanchorelement>HTMLAnchorElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83310 
   83311     <tr><td> <code><a href=#the-abbr-element>abbr</a></code>
   83312      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83313 
   83314     <tr><td> <code><a href=#the-address-element>address</a></code>
   83315      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83316 
   83317     <tr><td> <code><a href=#the-area-element>area</a></code>
   83318      <td> <code><a href=#htmlareaelement>HTMLAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83319 
   83320     <tr><td> <code><a href=#the-article-element>article</a></code>
   83321      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83322 
   83323     <tr><td> <code><a href=#the-aside-element>aside</a></code>
   83324      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83325 
   83326     <tr><td> <code><a href=#audio>audio</a></code>
   83327      <td> <code><a href=#htmlaudioelement>HTMLAudioElement</a></code> : <code><a href=#htmlmediaelement>HTMLMediaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83328 
   83329     <tr><td> <code><a href=#the-b-element>b</a></code>
   83330      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83331 
   83332     <tr><td> <code><a href=#the-base-element>base</a></code>
   83333      <td> <code><a href=#htmlbaseelement>HTMLBaseElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83334 
   83335     <tr><td> <code><a href=#the-bdo-element>bdo</a></code>
   83336      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83337 
   83338     <tr><td> <code><a href=#the-blockquote-element>blockquote</a></code>
   83339      <td> <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83340 
   83341     <tr><td> <code><a href=#the-body-element-0>body</a></code>
   83342      <td> <code><a href=#htmlbodyelement>HTMLBodyElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83343 
   83344     <tr><td> <code><a href=#the-br-element>br</a></code>
   83345      <td> <code><a href=#htmlbrelement>HTMLBRElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83346 
   83347     <tr><td> <code><a href=#the-button-element>button</a></code>
   83348      <td> <code><a href=#htmlbuttonelement>HTMLButtonElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83349 
   83350     <tr><td> <code><a href=#the-canvas-element>canvas</a></code>
   83351      <td> <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83352 
   83353     <tr><td> <code><a href=#the-caption-element>caption</a></code>
   83354      <td> <code><a href=#htmltablecaptionelement>HTMLTableCaptionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83355 
   83356     <tr><td> <code><a href=#the-cite-element>cite</a></code>
   83357      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83358 
   83359     <tr><td> <code><a href=#the-code-element>code</a></code>
   83360      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83361 
   83362     <tr><td> <code><a href=#the-col-element>col</a></code>
   83363      <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83364 
   83365     <tr><td> <code><a href=#the-colgroup-element>colgroup</a></code>
   83366      <td> <code><a href=#htmltablecolelement>HTMLTableColElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83367 
   83368     <tr><td> <code><a href=#the-command>command</a></code>
   83369      <td> <code><a href=#htmlcommandelement>HTMLCommandElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83370 
   83371     <tr><td> <code><a href=#the-datalist-element>datalist</a></code>
   83372      <td> <code><a href=#htmldatalistelement>HTMLDataListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83373 
   83374     <tr><td> <code><a href=#the-dd-element>dd</a></code>
   83375      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83376 
   83377     <tr><td> <code><a href=#the-del-element>del</a></code>
   83378      <td> <code><a href=#htmlmodelement>HTMLModElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83379 
   83380     <tr><td> <code><a href=#the-details-element>details</a></code>
   83381      <td> <code><a href=#htmldetailselement>HTMLDetailsElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83382 
   83383     <tr><td> <code><a href=#the-div-element>div</a></code>
   83384      <td> <code><a href=#htmldivelement>HTMLDivElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83385 
   83386     <tr><td> <code><a href=#the-dl-element>dl</a></code>
   83387      <td> <code><a href=#htmldlistelement>HTMLDListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83388 
   83389     <tr><td> <code><a href=#the-dt-element>dt</a></code>
   83390      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83391 
   83392     <tr><td> <code><a href=#the-em-element>em</a></code>
   83393      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83394 
   83395     <tr><td> <code><a href=#the-embed-element>embed</a></code>
   83396      <td> <code><a href=#htmlembedelement>HTMLEmbedElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83397 
   83398     <tr><td> <code><a href=#the-fieldset-element>fieldset</a></code>
   83399      <td> <code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83400 
   83401     <tr><td> <code><a href=#the-figcaption-element>figcaption</a></code>
   83402      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83403 
   83404     <tr><td> <code><a href=#the-figure-element>figure</a></code>
   83405      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83406 
   83407     <tr><td> <code><a href=#the-footer-element>footer</a></code>
   83408      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83409 
   83410     <tr><td> <code><a href=#the-form-element>form</a></code>
   83411      <td> <code><a href=#htmlformelement>HTMLFormElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83412 
   83413     <tr><td> <code><a href=#the-head-element-0>head</a></code>
   83414      <td> <code><a href=#htmlheadelement>HTMLHeadElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83415 
   83416     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
   83417      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83418 
   83419     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>
   83420      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83421 
   83422     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>
   83423      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83424 
   83425     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>
   83426      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83427 
   83428     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>
   83429      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83430 
   83431     <tr><td> <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>
   83432      <td> <code><a href=#htmlheadingelement>HTMLHeadingElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83433 
   83434     <tr><td> <code><a href=#the-header-element>header</a></code>
   83435      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83436 
   83437     <tr><td> <code><a href=#the-hgroup-element>hgroup</a></code>
   83438      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83439 
   83440     <tr><td> <code><a href=#the-hr-element>hr</a></code>
   83441      <td> <code><a href=#htmlhrelement>HTMLHRElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83442 
   83443     <tr><td> <code><a href=#the-html-element-0>html</a></code>
   83444      <td> <code><a href=#htmlhtmlelement>HTMLHtmlElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83445 
   83446     <tr><td> <code><a href=#the-i-element>i</a></code>
   83447      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83448 
   83449     <tr><td> <code><a href=#the-iframe-element>iframe</a></code>
   83450      <td> <code><a href=#htmliframeelement>HTMLIFrameElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83451 
   83452     <tr><td> <code><a href=#the-img-element>img</a></code>
   83453      <td> <code><a href=#htmlimageelement>HTMLImageElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83454 
   83455     <tr><td> <code><a href=#the-input-element>input</a></code>
   83456      <td> <code><a href=#htmlinputelement>HTMLInputElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83457 
   83458     <tr><td> <code><a href=#the-ins-element>ins</a></code>
   83459      <td> <code><a href=#htmlmodelement>HTMLModElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83460 
   83461     <tr><td> <code><a href=#the-kbd-element>kbd</a></code>
   83462      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83463 
   83464     <tr><td> <code><a href=#the-keygen-element>keygen</a></code>
   83465      <td> <code><a href=#htmlkeygenelement>HTMLKeygenElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83466 
   83467     <tr><td> <code><a href=#the-label-element>label</a></code>
   83468      <td> <code><a href=#htmllabelelement>HTMLLabelElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83469 
   83470     <tr><td> <code><a href=#the-legend-element>legend</a></code>
   83471      <td> <code><a href=#htmllegendelement>HTMLLegendElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83472 
   83473     <tr><td> <code><a href=#the-li-element>li</a></code>
   83474      <td> <code><a href=#htmllielement>HTMLLIElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83475 
   83476     <tr><td> <code><a href=#the-link-element>link</a></code>
   83477      <td> <code><a href=#htmllinkelement>HTMLLinkElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83478 
   83479     <tr><td> <code><a href=#the-map-element>map</a></code>
   83480      <td> <code><a href=#htmlmapelement>HTMLMapElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83481 
   83482     <tr><td> <code><a href=#the-mark-element>mark</a></code>
   83483      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83484 
   83485     <tr><td> <code><a href=#the-meter-element>meter</a></code>
   83486      <td> <code><a href=#htmlmeterelement>HTMLMeterElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83487 
   83488     <tr><td> <code><a href=#the-nav-element>nav</a></code>
   83489      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83490 
   83491     <tr><td> <code><a href=#the-noscript-element>noscript</a></code>
   83492      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83493 
   83494     <tr><td> <code><a href=#the-object-element>object</a></code>
   83495      <td> <code><a href=#htmlobjectelement>HTMLObjectElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83496 
   83497     <tr><td> <code><a href=#the-ol-element>ol</a></code>
   83498      <td> <code><a href=#htmlolistelement>HTMLOListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83499 
   83500     <tr><td> <code><a href=#the-optgroup-element>optgroup</a></code>
   83501      <td> <code><a href=#htmloptgroupelement>HTMLOptGroupElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83502 
   83503     <tr><td> <code><a href=#the-option-element>option</a></code>
   83504      <td> <code><a href=#htmloptionelement>HTMLOptionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83505 
   83506     <tr><td> <code><a href=#the-output-element>output</a></code>
   83507      <td> <code><a href=#htmloutputelement>HTMLOutputElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83508 
   83509     <tr><td> <code><a href=#the-p-element>p</a></code>
   83510      <td> <code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83511 
   83512     <tr><td> <code><a href=#the-param-element>param</a></code>
   83513      <td> <code><a href=#htmlparamelement>HTMLParamElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83514 
   83515     <tr><td> <code><a href=#the-pre-element>pre</a></code>
   83516      <td> <code><a href=#htmlpreelement>HTMLPreElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83517 
   83518     <tr><td> <code><a href=#the-progress-element>progress</a></code>
   83519      <td> <code><a href=#htmlprogresselement>HTMLProgressElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83520 
   83521     <tr><td> <code><a href=#the-q-element>q</a></code>
   83522      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83523 
   83524     <tr><td> <code><a href=#the-rp-element>rp</a></code>
   83525      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83526 
   83527     <tr><td> <code><a href=#the-rt-element>rt</a></code>
   83528      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83529 
   83530     <tr><td> <code><a href=#the-ruby-element>ruby</a></code>
   83531      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83532 
   83533     <tr><td> <code><a href=#the-samp-element>samp</a></code>
   83534      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83535 
   83536     <tr><td> <code><a href=#the-section-element>section</a></code>
   83537      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83538 
   83539     <tr><td> <code><a href=#the-select-element>select</a></code>
   83540      <td> <code><a href=#htmlselectelement>HTMLSelectElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83541 
   83542     <tr><td> <code><a href=#the-small-element>small</a></code>
   83543      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83544 
   83545     <tr><td> <code><a href=#the-source-element>source</a></code>
   83546      <td> <code><a href=#htmlsourceelement>HTMLSourceElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83547 
   83548     <tr><td> <code><a href=#the-span-element>span</a></code>
   83549      <td> <code><a href=#htmlspanelement>HTMLSpanElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83550 
   83551     <tr><td> <code><a href=#the-strong-element>strong</a></code>
   83552      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83553 
   83554     <tr><td> <code><a href=#the-style-element>style</a></code>
   83555      <td> <code><a href=#htmlstyleelement>HTMLStyleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83556 
   83557     <tr><td> <code><a href=#the-sub-and-sup-elements>sub</a></code>
   83558      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83559 
   83560     <tr><td> <code><a href=#the-summary-element>summary</a></code>
   83561      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83562 
   83563     <tr><td> <code><a href=#the-sub-and-sup-elements>sup</a></code>
   83564      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83565 
   83566     <tr><td> <code><a href=#the-table-element>table</a></code>
   83567      <td> <code><a href=#htmltableelement>HTMLTableElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83568 
   83569     <tr><td> <code><a href=#the-tbody-element>tbody</a></code>
   83570      <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83571 
   83572     <tr><td> <code><a href=#the-td-element>td</a></code>
   83573      <td> <code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83574 
   83575     <tr><td> <code><a href=#the-textarea-element>textarea</a></code>
   83576      <td> <code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83577 
   83578     <tr><td> <code><a href=#the-tfoot-element>tfoot</a></code>
   83579      <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83580 
   83581     <tr><td> <code><a href=#the-th-element>th</a></code>
   83582      <td> <code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83583 
   83584     <tr><td> <code><a href=#the-thead-element>thead</a></code>
   83585      <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83586 
   83587     <tr><td> <code><a href=#the-time-element>time</a></code>
   83588      <td> <code><a href=#htmltimeelement>HTMLTimeElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83589 
   83590     <tr><td> <code><a href=#the-title-element-0>title</a></code>
   83591      <td> <code><a href=#htmltitleelement>HTMLTitleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83592 
   83593     <tr><td> <code><a href=#the-tr-element>tr</a></code>
   83594      <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83595 
   83596 <!--TT-->
   83597     <tr><td> <code><a href=#the-track-element>track</a></code>
   83598      <td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83599 <!--TT-->
   83600 
   83601     <tr><td> <code><a href=#the-ul-element>ul</a></code>
   83602      <td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83603 
   83604     <tr><td> <code><a href=#the-var-element>var</a></code>
   83605      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83606 
   83607     <tr><td> <code><a href=#video>video</a></code>
   83608      <td> <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> : <code><a href=#htmlmediaelement>HTMLMediaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
   83609 
   83610     <tr><td> <code><a href=#the-wbr-element>wbr</a></code>
   83611      <td> <code><a href=#htmlelement>HTMLElement</a></code>
   83612 
   83613   </table><!-- (only has events from HTML5) --><h3 class=no-num id=events-0>Events</h3>
   83614 
   83615   <p><i>This section is non-normative.</i></p>
   83616 
   83617   <table><caption>List of events</caption>
   83618    <thead><tr><th> Event
   83619      <th> Interface
   83620      <th> Description
   83621    <tbody><tr><td> <code title=event-DOMActivate><a href=#event-domactivate>DOMActivate</a></code>
   83622      <td> <code><a href=#event>Event</a></code>
   83623      <td> Fired at an element before its <a href=#activation-behavior>activation behavior</a> is run
   83624 
   83625     <tr><td> <code title=event-DOMContentLoaded>DOMContentLoaded</code>
   83626      <td> <code><a href=#event>Event</a></code>
   83627      <td> Fired at the <code><a href=#document>Document</a></code> once it and its scripts have loaded, without waiting for other subresources
   83628 
   83629     <tr><td> <code title=event-abort>abort</code>
   83630      <td> <code><a href=#event>Event</a></code>
   83631      <td> Fired at the <code><a href=#window>Window</a></code> when the download was aborted by the user
   83632 
   83633     <tr><td> <code title=event-afterprint>afterprint</code>
   83634      <td> <code><a href=#event>Event</a></code>
   83635      <td> Fired at the <code><a href=#window>Window</a></code> after printing
   83636 
   83637     <tr><td> <code title=event-beforeprint>beforeprint</code>
   83638      <td> <code><a href=#event>Event</a></code>
   83639      <td> Fired at the <code><a href=#window>Window</a></code> before printing
   83640 
   83641     <tr><td> <code title=event-beforeunload>beforeunload</code>
   83642      <td> <code><a href=#beforeunloadevent>BeforeUnloadEvent</a></code>
   83643      <td> Fired at the <code><a href=#window>Window</a></code> when the page is about to be unloaded, in case the page would like to show a warning prompt
   83644 
   83645     <tr><td> <code title=event-blur>blur</code>
   83646      <td> <code><a href=#event>Event</a></code>
   83647      <td> Fired at nodes losing focus
   83648 
   83649     <tr><td> <code title=event-change>change</code>
   83650      <td> <code><a href=#event>Event</a></code>
   83651      <td> Fired at controls when the user commits a value change
   83652 
   83653     <tr><td> <code title=event-contextmenu>contextmenu</code>
   83654      <td> <code><a href=#event>Event</a></code>
   83655      <td> Fired at elements when the user requests their context menu
   83656 
   83657     <tr><td> <code title=event-error>error</code>
   83658      <td> <code><a href=#event>Event</a></code>
   83659      <td> Fired at elements when network and script errors occur
   83660 
   83661     <tr><td> <code title=event-focus>focus</code>
   83662      <td> <code><a href=#event>Event</a></code>
   83663      <td> Fired at nodes gaining focus
   83664 
   83665     <tr><td> <code title=event-formchange>formchange</code>
   83666      <td> <code><a href=#event>Event</a></code>
   83667      <td> Fired at form controls when the user commits a value change to a control on the form
   83668 
   83669     <tr><td> <code title=event-forminput>forminput</code>
   83670      <td> <code><a href=#event>Event</a></code>
   83671      <td> Fired at form controls when the user changes the value of a control on the form
   83672 
   83673     <tr><td> <code title=event-hashchange><a href=#event-hashchange>hashchange</a></code>
   83674      <td> <code><a href=#hashchangeevent>HashChangeEvent</a></code>
   83675      <td> Fired at the <code><a href=#window>Window</a></code> when the fragment identifier part of <a href="#the-document's-current-address">the document's current address</a> changes
   83676 
   83677     <tr><td> <code title=event-input>input</code>
   83678      <td> <code><a href=#event>Event</a></code>
   83679      <td> Fired at controls when the user changes the value
   83680 
   83681     <tr><td> <code title=event-invalid>invalid</code>
   83682      <td> <code><a href=#event>Event</a></code>
   83683      <td> Fired at controls during form validation if they do not satisfy their constraints
   83684 
   83685     <tr><td> <code title=event-load>load</code>
   83686      <td> <code><a href=#event>Event</a></code>
   83687      <td> Fired at the <code><a href=#window>Window</a></code> when the document has finished loading; fired at an element containing a resource (e.g. <code><a href=#the-img-element>img</a></code>, <code><a href=#the-embed-element>embed</a></code>) when its resource has finished loading
   83688 
   83689     <tr><td> <code title=event-message><a href=#event-message>message</a></code>
   83690      <td> <code><a href=#messageevent>MessageEvent</a></code>
   83691      <td> Fired at an object when the object receives a message
   83692 
   83693     <tr><td> <code title=event-offline><a href=#event-offline>offline</a></code>
   83694      <td> <code><a href=#event>Event</a></code>
   83695      <td> Fired at the <code><a href=#window>Window</a></code> when the network connections fails
   83696 
   83697     <tr><td> <code title=event-online><a href=#event-online>online</a></code>
   83698      <td> <code><a href=#event>Event</a></code>
   83699      <td> Fired at the <code><a href=#window>Window</a></code> when the network connections returns
   83700 
   83701     <tr><td> <code title=event-pagehide><a href=#event-pagehide>pagehide</a></code>
   83702      <td> <code><a href=#pagetransitionevent>PageTransitionEvent</a></code>
   83703      <td> Fired at the <code><a href=#window>Window</a></code> when the page's entry in the <a href=#session-history>session history</a> stops being the <a href=#current-entry>current entry</a>
   83704 
   83705     <tr><td> <code title=event-pageshow><a href=#event-pageshow>pageshow</a></code>
   83706      <td> <code><a href=#pagetransitionevent>PageTransitionEvent</a></code>
   83707      <td> Fired at the <code><a href=#window>Window</a></code> when the page's entry in the <a href=#session-history>session history</a> becomes the <a href=#current-entry>current entry</a>
   83708 
   83709     <tr><td> <code title=event-popstate><a href=#event-popstate>popstate</a></code>
   83710      <td> <code><a href=#popstateevent>PopStateEvent</a></code>
   83711      <td> Fired at the <code><a href=#window>Window</a></code> when the user navigates the <a href=#session-history>session history</a>
   83712 
   83713     <tr><td> <code title=event-readystatechange>readystatechange</code>
   83714      <td> <code><a href=#event>Event</a></code>
   83715      <td> Fired at the <code><a href=#document>Document</a></code> when it finishes parsing and again when all its subresources have finished loading
   83716 
   83717     <tr><td> <code title=event-redo><a href=#event-redo>redo</a></code>
   83718      <td> <code><a href=#undomanagerevent>UndoManagerEvent</a></code>
   83719      <td> Fired at the <code><a href=#window>Window</a></code> object when the user <a href=#redo:-moving-forward-in-the-undo-transaction-history title=do-redo>goes forward in the undo transaction history</a>
   83720 
   83721     <tr><td> <code title=event-reset>reset</code>
   83722      <td> <code><a href=#event>Event</a></code>
   83723      <td> Fired at a <code><a href=#the-form-element>form</a></code> element when it is <a href=#concept-form-reset title=concept-form-reset>reset</a>
   83724 
   83725     <tr><td> <code title=event-show>show</code>
   83726      <td> <code><a href=#event>Event</a></code>
   83727      <td> Fired at a <code><a href=#menus>menu</a></code> element when it is shown as a context menu
   83728 
   83729     <tr><td> <code title=event-submit>submit</code>
   83730      <td> <code><a href=#event>Event</a></code>
   83731      <td> Fired at a <code><a href=#the-form-element>form</a></code> element when it is <a href=#concept-form-submit title=concept-form-submit>submitted</a>
   83732 
   83733     <tr><td> <code title=event-undo><a href=#event-undo>undo</a></code>
   83734      <td> <code><a href=#undomanagerevent>UndoManagerEvent</a></code>
   83735      <td> Fired at the <code><a href=#window>Window</a></code> object when the user <a href=#undo:-moving-back-in-the-undo-transaction-history title=do-undo>goes backward in the undo transaction history</a>
   83736 
   83737     <tr><td> <code title=event-unload>unload</code>
   83738      <td> <code><a href=#event>Event</a></code>
   83739      <td> Fired at the <code><a href=#window>Window</a></code> object when the page is going away
   83740 
   83741   </table><p class=note>See also <a href=#mediaevents>media element
   83742   events</a>, <a href=#appcacheevents>application cache events</a>,
   83743   and <a href=#dndevents>drag-and-drop events</a>.</p>
   83744 
   83745 
   83746 
   83747 
   83748 
   83749 
   83750 
   83751 
   83752 
   83753 
   83754   <h2 class=no-num id=references>References</h2><!--REFS-->
   83755 
   83756   <p>All references are normative unless marked "Non-normative".</p>
   83757 
   83758   <!-- Dates are only included for standards older than the Web, because the newer ones keep changing. -->
   83759 
   83760   <dl><dt id=refsABNF>[ABNF]</dt>
   83761    <dd><cite><a href=http://www.ietf.org/rfc/std/std68.txt>Augmented
   83762    BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker,
   83763    P. Overell. IETF.</dd>
   83764 
   83765    <dt id=refsABOUT>[ABOUT]</dt>
   83766    <dd><cite><a href=http://tools.ietf.org/html/draft-holsten-about-uri-scheme>The
   83767    'about' URI scheme</a></cite>, J. Holsten, L. Hunt. IETF.</dd>
   83768 
   83769    <dt id=refsARIA>[ARIA]</dt>
   83770    <dd><cite><a href=http://www.w3.org/WAI/PF/aria/>Accessible Rich
   83771    Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
   83772    R. Schwerdtfeger, L. Seeman. W3C.</dd>
   83773 
   83774    <dt id=refsARIAIMPL>[ARIAIMPL]</dt>
   83775    <dd><cite><a href=http://www.w3.org/WAI/PF/aria-implementation/>WAI-ARIA 1.0
   83776    User Agent Implementation Guide</a></cite>, A. Snow-Weaver,
   83777    M. Cooper. W3C.</dd>
   83778 
   83779    <dt id=refsATAG>[ATAG]</dt>
   83780    <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/ATAG20/>Authoring Tool Accessibility
   83781    Guidelines (ATAG) 2.0</a></cite>, J. Richards, J. Spellman,
   83782    J. Treviranus. W3C.</dd>
   83783 
   83784    <dt id=refsATOM>[ATOM]</dt>
   83785    <dd>(Non-normative) <cite><a href=http://www.ietf.org/rfc/rfc4287.txt>The Atom Syndication
   83786    Format</a></cite>, M. Nottingham, R. Sayre. IETF.</dd>
   83787 
   83788    <dt id=refsBCP47>[BCP47]</dt>
   83789    <dd><cite><a href=http://www.ietf.org/rfc/bcp/bcp47.txt>Tags for
   83790    Identifying Languages; Matching of Language Tags</a></cite>,
   83791    A. Phillips, M. Davis. IETF.</dd>
   83792 
   83793    <dt id=refsBECSS>[BECSS]</dt>
   83794    <dd><cite><a href=http://www.w3.org/TR/becss/>Behavioral
   83795    Extensions to CSS</a></cite>, I. Hickson. W3C.</dd>
   83796 
   83797    <dt id=refsBEZIER>[BEZIER]</dt>
   83798    <dd><cite>Courbes &agrave; poles</cite>, P. de Casteljau. INPI, 1959.</dd>
   83799 
   83800    <dt id=refsBIDI>[BIDI]</dt>
   83801    <dd><cite><a href=http://www.unicode.org/reports/tr9/>UAX #9: Unicode
   83802    Bidirectional Algorithm</a></cite>, M. Davis. Unicode Consortium.</dd>
   83803 
   83804    <dt id=refsBOCU1>[BOCU1]</dt>
   83805    <dd>(Non-normative) <cite><a href=http://www.unicode.org/notes/tn6/>UTN #6: BOCU-1:
   83806    MIME-Compatible Unicode Compression</a></cite>, M. Scherer,
   83807    M. Davis. Unicode Consortium.</dd>
   83808 
   83809    <dt id=refsCESU8>[CESU8]</dt>
   83810    <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr26/>UTR #26: Compatibility
   83811    Encoding Scheme For UTF-16: 8-BIT (CESU-8)</a></cite>,
   83812    T. Phipps. Unicode Consortium.</dd>
   83813 
   83814    <dt id=refsCHARMOD>[CHARMOD]</dt>
   83815    <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/charmod/>Character Model for the World
   83816    Wide Web 1.0: Fundamentals</a></cite>, M. D&uuml;rst, F. Yergeau,
   83817    R. Ishida, M. Wolf, T. Texin. W3C.</dd>
   83818 
   83819    <dt id=refsCOMPUTABLE>[COMPUTABLE]</dt>
   83820    <dd>(Non-normative) <cite><a href=http://www.turingarchive.org/browse.php/B/12>On computable
   83821    numbers, with an application to the
   83822    Entscheidungsproblem</a></cite>, A. Turing. In <cite>Proceedings of
   83823    the London Mathematical Society</cite>, series 2, volume 42, pages
   83824    230-265. London Mathematical Society, 1937.</dd>
   83825 
   83826    <dt id=refsCOOKIES>[COOKIES]</dt>
   83827    <!--
   83828    <dd><cite><a href="http://www.ietf.org/rfc/rfc2109.txt">HTTP State
   83829    Management Mechanism</a></cite>, D. Kristol, L. Montulli. IETF.</dd>
   83830    <dd><cite><a href="http://www.ietf.org/rfc/rfc2965.txt">HTTP State Management
   83831    Mechanism</a></cite>, D. Kristol, L. Montulli. IETF.</dd>
   83832    -->
   83833    <dd><cite><a href=http://tools.ietf.org/html/draft-ietf-httpstate-cookie>HTTP State
   83834    Management Mechanism</a></cite>, A. Barth. IETF.</dd>
   83835 
   83836    <dt id=refsCORS>[CORS]</dt>
   83837    <!--
   83838    <dd><cite><a href="http://www.w3.org/TR/cors/">Cross-Origin
   83839    Resource Sharing</a></cite>, A. van Kesteren. W3C.</dd>
   83840    -->
   83841    <dd><cite><a href=http://dev.w3.org/2006/waf/access-control/>Cross-Origin
   83842    Resource Sharing</a></cite>, A. van Kesteren.  W3C.</dd>
   83843 
   83844    <dt id=refsCSS>[CSS]</dt>
   83845    <dd><cite><a href=http://www.w3.org/TR/CSS/>Cascading Style Sheets Level 2
   83846    Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I.
   83847    Hickson, H. Lie. W3C.</dd>
   83848 
   83849    <dt id=refsCSSATTR>[CSSATTR]</dt>
   83850    <dd><cite><a href=http://dev.w3.org/csswg/css-style-attr/>CSS
   83851    Styling Attribute Syntax</a></cite>, E. Etemad. W3C.</dd>
   83852 
   83853    <dt id=refsCSSCOLOR>[CSSCOLOR]</dt>
   83854    <!--
   83855    <dd><cite><a href="http://www.w3.org/TR/css3-color/">CSS Color
   83856    Module Level 3</a></cite>, T. &Ccedil;elik, C. Lilley, L.
   83857    Baron. W3C.</dd>
   83858    -->
   83859    <dd><cite><a href=http://dev.w3.org/csswg/css3-color/>CSS Color
   83860    Module Level 3</a></cite>, T. &Ccedil;elik, C. Lilley, L.
   83861    Baron. W3C.</dd>
   83862 
   83863    <dt id=refsCSSFONTS>[CSSFONTS]</dt>
   83864    <dd><cite><a href=http://www.w3.org/TR/css3-fonts/>CSS Fonts
   83865    Module Level 3</a></cite>, J. Daggett. W3C.</dd>
   83866 
   83867    <dt id=refsCSSOM>[CSSOM]</dt>
   83868    <dd><cite><a href=http://dev.w3.org/csswg/cssom/>Cascading Style Sheets
   83869    Object Model (CSSOM)</a></cite>, A. van Kesteren. W3C.</dd>
   83870 
   83871    <dt id=refsCSSUI>[CSSUI]</dt>
   83872    <dd><cite><a href=http://www.w3.org/TR/css3-ui/>CSS3 Basic User
   83873    Interface Module</a></cite>, T. &Ccedil;elik. W3C.</dd>
   83874 
   83875    <dt id=refsDOMCORE>[DOMCORE]</dt>
   83876    <dd><cite><a href=http://www.w3.org/TR/DOM-Level-3-Core/>Document
   83877    Object Model (DOM) Level 3 Core Specification</a></cite>, A. Le
   83878    Hors, P. Le Hegaret, L. Wood, G. Nicol, J. Robie, M. Champion,
   83879    S. Byrnes. W3C.</dd>
   83880    <!--
   83881    <dd><cite><a href="http://simon.html5.org/specs/web-dom-core">Web
   83882    DOM Core</a></cite>, S. Pieters. W3C.</dd>
   83883    -->
   83884 
   83885    <dt id=refsDOMEVENTS>[DOMEVENTS]</dt>
   83886    <!--
   83887    <dd><cite><a
   83888    href="http://www.w3.org/TR/DOM-Level-3-Events/">Document Object
   83889    Model (DOM) Level 3 Events Specification</a></cite>,
   83890    B. H&ouml;hrmann, P. Le Hegaret, T. Pixley. W3C.</dd>
   83891    -->
   83892    <dd><cite><a href=http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html>Document
   83893    Object Model (DOM) Level 3 Events Specification</a></cite>,
   83894    D. Schepers. W3C.</dd>
   83895 
   83896    <dt id=refsDOMRANGE>[DOMRANGE]</dt>
   83897    <dd><cite><a href=http://www.w3.org/TR/DOM-Level-2-Traversal-Range/>Document
   83898    Object Model (DOM) Level 2 Traversal and Range
   83899    Specification</a></cite>, J.  Kesselman, J. Robie, M. Champion,
   83900    P. Sharpe, V. Apparao, L.  Wood. W3C.</dd>
   83901 
   83902    <dt id=refsE163>[E163]</dt>
   83903    <dd><cite>Recommendation E.163 &mdash; Numbering Plan for The International
   83904    Telephone Service</cite>, CCITT Blue Book, Fascicle II.2, pp. 128-134, November
   83905    1988.</dd>
   83906 
   83907    <dt id=refsECMA262>[ECMA262]</dt>
   83908    <dd><cite><a href=http://www.ecma-international.org/publications/standards/Ecma-262.htm>ECMAScript
   83909    Language Specification</a></cite>. ECMA.</dd>
   83910 
   83911    <dt id=refsECMA357>[ECMA357]</dt>
   83912    <dd>(Non-normative) <cite><a href=http://www.ecma-international.org/publications/standards/Ecma-357.htm>ECMAScript
   83913    for XML (E4X) Specification</a></cite>. ECMA.</dd>
   83914 
   83915    <dt id=refsEUCKR>[EUCKR]</dt>
   83916    <dd><cite>Hangul Unix Environment</cite>. Korea Industrial
   83917    Standards Association. Ref. No. KS C 5861-1992.</dd>
   83918 
   83919    <dt id=refsEVENTSOURCE>[EVENTSOURCE]</dt>
   83920    <!--
   83921    <dd><cite><a href="http://www.w3.org/TR/eventsource/">Server-Sent
   83922    Events</a></cite>, I. Hickson. W3C.</dd>
   83923    -->
   83924    <dd><cite><a href=http://dev.w3.org/html5/eventsource/>Server-Sent
   83925    Events</a></cite>, I. Hickson. W3C.</dd>
   83926 
   83927    <dt id=refsFILEAPI>[FILEAPI]</dt>
   83928    <dd><cite><a href=http://dev.w3.org/2006/webapi/FileUpload/publish/FileAPI.html>File
   83929    API</a></cite>, A. Ranganathan. W3C.</dd>
   83930 
   83931    <dt id=refsGBK>[GBK]</dt>
   83932    <dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
   83933    Standardization Technical Committee.</dd>
   83934    <!-- http://www.iana.org/assignments/charset-reg/GBK -->
   83935 
   83936    <dt id=refsGRAPHICS>[GRAPHICS]</dt>
   83937    <dd>(Non-normative) <cite>Computer Graphics: Principles and
   83938    Practice in C</cite>, Second Edition, J. Foley, A. van Dam,
   83939    S. Feiner, J. Hughes. Addison-Wesley. ISBN
   83940    0-201-84840-6.</dd>
   83941    <!--
   83942    This book ("Computer Graphics: Principles and Practice in C")
   83943    apparently does not make any references to literature in the
   83944    bibliographic section to define the "even-odd" rule for polygon
   83945    filling and hit testing. In the absence of such a reference, I
   83946    guess that this book is the most authoritative reference.
   83947    -->
   83948 
   83949    <dt id=refsGREGORIAN>[GREGORIAN]</dt>
   83950    <dd>(Non-normative) <cite>Inter Gravissimas</cite>, A. Lilius,
   83951    C. Clavius. Gregory XIII Papal Bulls, February 1582.</dd>
   83952 
   83953    <dt id=refsHATOM>[HATOM]</dt>
   83954    <dd>(Non-normative) <cite><a href=http://microformats.org/wiki/hatom>hAtom</a></cite>, D
   83955    Janes. Microformats.</dd>
   83956 
   83957    <dt id=refsHTMLDIFF>[HTMLDIFF]</dt>
   83958    <!--
   83959    <dd>(Non-normative) <cite><a
   83960    href="http://www.w3.org/TR/html5-diff/">HTML5 differences from
   83961    HTML4</a></cite>, A. van Kesteren. W3C.</dd>
   83962    -->
   83963    <dd>(Non-normative) <cite><a href=http://dev.w3.org/html5/html4-differences/>HTML5
   83964    differences from HTML4</a></cite>, A. van Kesteren.  W3C.</dd>
   83965 
   83966    <dt id=refsHTTP>[HTTP]</dt>
   83967    <dd><cite><a href=http://www.ietf.org/rfc/rfc2616.txt>Hypertext
   83968    Transfer Protocol &mdash; HTTP/1.1</a></cite>, R. Fielding, J. Gettys,
   83969    J. Mogul, H.  Frystyk, L. Masinter, P. Leach, T. Berners-Lee. IETF.</dd>
   83970 
   83971    <dt id=refsIANACHARSET>[IANACHARSET]</dt>
   83972    <dd><cite><a href=http://www.iana.org/assignments/character-sets>Character
   83973    Sets</a></cite>. IANA.</dd>
   83974 
   83975    <dt id=refsIANAPERMHEADERS>[IANAPERMHEADERS]</dt>
   83976    <dd><cite><a href=http://www.iana.org/assignments/message-headers/perm-headers.html>Permanent
   83977    Message Header Field Names</a></cite>. IANA.</dd>
   83978 
   83979    <dt id=refsISO8601>[ISO8601]</dt>
   83980    <dd><cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>
   83981 
   83982    <dt id=refsISO885911>[ISO885911]</dt>
   83983    <dd><cite><a href=http://anubis.dkuug.dk/jtc1/sc2/open/02n3333.pdf>ISO-8859-11:
   83984    Information technology &mdash; 8-bit single-byte coded graphic
   83985    character sets &mdash; Part 11: Latin/Thai
   83986    alphabet</a></cite>. ISO.</dd>
   83987 
   83988    <dt id=refsJSON>[JSON]</dt>
   83989    <dd><cite><a href=http://www.ietf.org/rfc/rfc4627.txt>The
   83990    application/json Media Type for JavaScript Object Notation
   83991    (JSON)</a></cite>, D. Crockford. IETF.</dd>
   83992 
   83993    <dt id=refsJSURL>[JSURL]</dt>
   83994    <dd><cite><a href=http://tools.ietf.org/html/draft-hoehrmann-javascript-scheme>The
   83995    'javascript' resource identifier scheme</a></cite>,
   83996    B. H&ouml;hrmann. IETF.</dd>
   83997 
   83998    <dt id=refsMAILTO>[MAILTO]</dt>
   83999    <dd><cite><a href=http://www.ietf.org/rfc/rfc2368.txt>The mailto URL
   84000    scheme</a></cite>, P. Hoffman, L. Masinter, J. Zawinski.
   84001    IETF.</dd>
   84002 
   84003    <dt id=refsMATHML>[MATHML]</dt>
   84004    <dd><cite><a href=http://www.w3.org/TR/MathML/>Mathematical
   84005    Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
   84006    N. Poppelier. W3C.</dd>
   84007 
   84008    <dt id=refsMIMESNIFF>[MIMESNIFF]</dt>
   84009    <dd><cite><a href=http://tools.ietf.org/html/draft-abarth-mime-sniff>Content-Type
   84010    Processing Model</a></cite>, A. Barth, I. Hickson. IETF.</dd>
   84011 
   84012    <dt id=refsMQ>[MQ]</dt>
   84013    <!--
   84014    <dd><cite><a href="http://www.w3.org/TR/css3-mediaqueries/">Media
   84015    Queries</a></cite>, H. Lie, T.  &Ccedil;elik, D. Glazman, A. van
   84016    Kesteren. W3C.</dd>
   84017    -->
   84018    <dd><cite><a href=http://dev.w3.org/csswg/css3-mediaqueries/>Media
   84019    Queries</a></cite>, H. Lie, T.  &Ccedil;elik, D. Glazman, A. van
   84020    Kesteren. W3C.</dd>
   84021 
   84022    <dt id=refsNPAPI>[NPAPI]</dt>
   84023    <dd>(Non-normative) <cite><a href=https://developer.mozilla.org/en/Gecko_Plugin_API_Reference>Gecko
   84024    Plugin API Reference</a></cite>. Mozilla.</dd>
   84025 
   84026    <dt id=refsOPENSEARCH>[OPENSEARCH]</dt>
   84027    <dd><cite><a href=http://www.opensearch.org/Specifications/OpenSearch/1.1#Autodiscovery_in_HTML.2FXHTML>Autodiscovery
   84028    in HTML/XHTML</a></cite>. In <cite>OpenSearch 1.1 Draft 4</cite>,
   84029    Section 4.6.2. OpenSearch.org.</dd>
   84030 
   84031    <dt id=refsORIGIN>[ORIGIN]</dt>
   84032    <dd><cite><a href=http://tools.ietf.org/html/draft-abarth-origin>The HTTP
   84033    Origin Header</a></cite>, A. Barth, C. Jackson, I. Hickson. IETF.</dd>
   84034 
   84035    <dt id=refsPINGBACK>[PINGBACK]</dt>
   84036    <dd><cite><a href=http://www.hixie.ch/specs/pingback/pingback>Pingback
   84037    1.0</a></cite>, S. Langridge, I. Hickson.</dd>
   84038 
   84039    <dt id=refsPNG>[PNG]</dt>
   84040    <dd><cite><a href=http://www.w3.org/TR/PNG/>Portable Network
   84041    Graphics (PNG) Specification</a></cite>, D. Duce. W3C.</dd>
   84042 
   84043    <dt id=refsPORTERDUFF>[PORTERDUFF]</dt>
   84044    <dd><cite><a href=http://keithp.com/~keithp/porterduff/p253-porter.pdf>Compositing
   84045    Digital Images</a></cite>, T. Porter, T. Duff. In <cite>Computer
   84046    graphics</cite>, volume 18, number 3, pp. 253-259. ACM Press, July
   84047    1984.</dd>
   84048 
   84049    <dt id=refsPPUTF8>[PPUTF8]</dt>
   84050    <dd>(Non-normative) <cite><a href=http://www.ifi.uzh.ch/mml/mduerst/papers/PDF/IUC11-UTF-8.pdf>The
   84051    Properties and Promises <!-- Promizes (sic) --> of
   84052    UTF-8</a></cite>, M. D&uuml;rst. University of Z&uuml;rich. In <cite>Proceedings of the 11th International
   84053    Unicode Conference</cite>.</dd>
   84054 
   84055    <dt id=refsPROGRESS>[PROGRESS]</dt>
   84056    <!--
   84057    <dd><cite><a href="http://www.w3.org/TR/progress-events/">Progress
   84058    Events</a></cite>, C. McCathieNevile. W3C.</dd>
   84059    -->
   84060    <dd><cite><a href=http://dev.w3.org/2006/webapi/progress/Progress.html>Progress
   84061    Events</a></cite>, C. McCathieNevile. W3C.</dd>
   84062 
   84063    <dt id=refsPSL>[PSL]</dt>
   84064    <dd><cite><a href=http://publicsuffix.org/>Public Suffix List</a></cite>.
   84065    Mozilla Foundation.</dd>
   84066 
   84067    <dt id=refsRFC1034>[RFC1034]</dt>
   84068    <dd><cite><a href=http://www.ietf.org/rfc/rfc1034.txt>Domain
   84069    Names - Concepts and Facilities</a></cite>, P. Mockapetris. IETF,
   84070    November 1987.</dd>
   84071 
   84072    <dt id=refsRFC1345>[RFC1345]</dt>
   84073    <dd><cite><a href=http://www.ietf.org/rfc/rfc1345.txt>Character Mnemonics
   84074    and Character Sets</a></cite>, K. Simonsen. IETF.</dd>
   84075 
   84076    <dt id=refsRFC1468>[RFC1468]</dt>
   84077    <dd><cite><a href=http://www.ietf.org/rfc/rfc1468.txt>Japanese Character
   84078    Encoding for Internet Messages</a></cite>, J. Murai, M. Crispin, E. van der
   84079    Poel. IETF.</dd>
   84080 
   84081    <dt id=refsRFC1554>[RFC1554]</dt>
   84082    <dd><cite><a href=http://www.ietf.org/rfc/rfc1554.txt>ISO-2022-JP-2:
   84083    Multilingual Extension of ISO-2022-JP</a></cite>, M. Ohta, K. Handa. IETF.</dd>
   84084 
   84085    <dt id=refsRFC1557>[RFC1557]</dt>
   84086    <dd><cite><a href=http://www.ietf.org/rfc/rfc1557.txt>Korean Character
   84087    Encoding for Internet Messages</a></cite>, U. Choi, K. Chon, H. Park. IETF.</dd>
   84088 
   84089    <dt id=refsRFC1842>[RFC1842]</dt>
   84090 
   84091    <dd><cite><a href=http://www.ietf.org/rfc/rfc1842.txt>ASCII
   84092    Printable Characters-Based Chinese Character Encoding for Internet
   84093    Messages</a></cite>, Y. Wei, Y. Zhang, J. Li, J. Ding, Y. Jiang.
   84094    IETF.</dd>
   84095 
   84096    <dt id=refsRFC1922>[RFC1922]</dt>
   84097    <dd><cite><a href=http://www.ietf.org/rfc/rfc1922.txt>Chinese Character
   84098    Encoding for Internet Messages</a></cite>, HF. Zhu, DY. Hu, ZG. Wang, TC. Kao,
   84099    WCH. Chang, M. Crispin. IETF.</dd>
   84100 
   84101    <dt id=refsRFC2045>[RFC2045]</dt>
   84102    <dd><cite><a href=http://www.ietf.org/rfc/rfc2045.txt>Multipurpose Internet
   84103    Mail Extensions (MIME) Part One: Format of Internet Message Bodies</a></cite>,
   84104    N. Freed, N. Borenstein. IETF.</dd>
   84105 
   84106    <dt id=refsRFC2046>[RFC2046]</dt>
   84107    <dd><cite><a href=http://www.ietf.org/rfc/rfc2046.txt>Multipurpose Internet
   84108    Mail Extensions (MIME) Part Two: Media Types</a></cite>, N. Freed,
   84109    N.  Borenstein. IETF.</dd> <!-- for text/plain and
   84110    "Internet Media type"; not for definition of "valid MIME type". -->
   84111 
   84112    <dt id=refsRFC2119>[RFC2119]</dt>
   84113    <dd><cite><a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in
   84114    RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.</dd>
   84115 
   84116    <dt id=refsRFC2237>[RFC2237]</dt>
   84117    <dd><cite><a href=http://www.ietf.org/rfc/rfc2237.txt>Japanese Character
   84118    Encoding for Internet Messages</a></cite>, K. Tamaru. IETF.</dd>
   84119 
   84120    <dt id=refsRFC2313>[RFC2313]</dt>
   84121    <dd><cite><a href=http://www.ietf.org/rfc/rfc2313.txt>PKCS #1:
   84122    RSA Encryption</a></cite>, B. Kaliski. IETF.</dd>
   84123 
   84124    <dt id=refsRFC2318>[RFC2318]</dt>
   84125    <dd><cite><a href=http://www.ietf.org/rfc/rfc2318.txt>The
   84126    text/css Media Type</a></cite>, H. Lie, B. Bos, C. Lilley. IETF.</dd>
   84127 
   84128    <dt id=refsRFC2388>[RFC2388]</dt>
   84129    <dd><cite><a href=http://www.ietf.org/rfc/rfc2388.txt>Returning Values from
   84130    Forms: multipart/form-data</a></cite>, L. Masinter. IETF.</dd>
   84131 
   84132    <dt id=refsRFC2425>[RFC2425]</dt>
   84133    <dd><cite><a href=http://www.ietf.org/rfc/rfc2425.txt>A MIME
   84134    Content-Type for Directory Information</a></cite>, T. Howes,
   84135    M. Smith, F. Dawson. IETF.</dd>
   84136 
   84137    <dt id=refsRFC2426>[RFC2426]</dt>
   84138    <dd><cite><a href=http://www.ietf.org/rfc/rfc2426.txt>vCard MIME Directory
   84139    Profile</a></cite>, F. Dawson, T. Howes. IETF.</dd>
   84140 
   84141    <dt id=refsRFC2445>[RFC2445]</dt>
   84142    <dd><cite><a href=http://www.ietf.org/rfc/rfc2445.txt>Internet Calendaring
   84143    and Scheduling Core Object Specification (iCalendar)</a></cite>, F. Dawson, D.
   84144    Stenerson. IETF.</dd>
   84145 
   84146    <dt id=refsRFC2483>[RFC2483]</dt>
   84147    <dd><cite><a href=http://www.ietf.org/rfc/rfc2483.txt>URI Resolution
   84148    Services Necessary for URN Resolution</a></cite>, M. Mealling, R. Daniel.
   84149    IETF.</dd>
   84150 
   84151    <dt id=refsRFC2781>[RFC2781]</dt>
   84152    <dd><cite><a href=http://www.ietf.org/rfc/rfc2781.txt>UTF-16, an
   84153    encoding of ISO 10646</a></cite>, P. Hoffman, F. Yergeau. IETF.</dd>
   84154 
   84155    <dt id=refsRFC2646>[RFC2646]</dt>
   84156    <dd><cite><a href=http://www.ietf.org/rfc/rfc2646.txt>The Text/Plain Format
   84157    Parameter</a></cite>, R. Gellens. IETF.</dd>
   84158 
   84159    <dt id=refsRFC3023>[RFC3023]</dt>
   84160    <dd><cite><a href=http://www.ietf.org/rfc/rfc3023.txt>XML Media
   84161    Types</a></cite>, M. Murata, S. St. Laurent, D. Kohn. IETF.</dd>
   84162 
   84163    <dt id=refsRFC3279>[RFC3279]</dt>
   84164    <dd><cite><a href=http://www.ietf.org/rfc/rfc3279.txt>Algorithms
   84165    and Identifiers for the Internet X.509 Public Key Infrastructure
   84166    Certificate and Certificate Revocation List (CRL)
   84167    Profile</a></cite>, W. Polk, R. Housley, L. Bassham. IETF.</dd>
   84168 
   84169    <dt id=refsRFC3490>[RFC3490]</dt>
   84170    <dd><cite><a href=http://www.ietf.org/rfc/rfc3490.txt>Internationalizing
   84171    Domain Names in Applications (IDNA)</a></cite>, P. Faltstrom, P. Hoffman, A.
   84172    Costello. IETF.</dd>
   84173 
   84174    <dt id=refsRFC3548>[RFC3548]</dt>
   84175    <dd><cite><a href=http://www.ietf.org/rfc/rfc3548.txt>The Base16, Base32,
   84176    and Base64 Data Encodings</a></cite>, S. Josefsson. IETF.</dd>
   84177 
   84178    <dt id=refsRFC3864>[RFC3864]</dt>
   84179    <dd><cite><a href=http://www.ietf.org/rfc/rfc3864.txt>Registration Procedures
   84180    for Message Header Fields</a></cite>, G. Klyne, M. Nottingham,
   84181    J. Mogul. IETF.</dd>
   84182 
   84183    <dt id=refsRFC3986>[RFC3986]</dt>
   84184    <dd><cite><a href=http://www.ietf.org/rfc/rfc3986.txt>Uniform Resource
   84185    Identifier (URI): Generic Syntax</a></cite>, T. Berners-Lee, R. Fielding, L.
   84186    Masinter. IETF.</dd>
   84187 
   84188    <dt id=refsRFC3987>[RFC3987]</dt>
   84189    <dd><cite><a href=http://www.ietf.org/rfc/rfc3987.txt>Internationalized
   84190    Resource Identifiers (IRIs)</a></cite>, M. D&uuml;rst, M. Suignard. IETF.</dd>
   84191 
   84192    <dt id=refsRFC4281>[RFC4281]</dt>
   84193    <dd><cite><a href=http://www.ietf.org/rfc/rfc4281.txt>The Codecs Parameter
   84194    for "Bucket" Media Types</a></cite>, R. Gellens, D. Singer, P. Frojdh. IETF.</dd>
   84195 
   84196    <dt id=refsRFC4329>[RFC4329]</dt>
   84197    <dd>(Non-normative) <cite><a href=http://www.ietf.org/rfc/rfc4329.txt>Scripting Media
   84198    Types</a></cite>, B. H&ouml;hrmann. IETF.</dd>
   84199 
   84200    <dt id=refsRFC4770>[RFC4770]</dt>
   84201    <dd><cite><a href=http://www.ietf.org/rfc/rfc4770.txt>vCard Extensions for
   84202    Instant Messaging (IM)</a></cite>, C. Jennings, J. Reschke. IETF.</dd>
   84203 
   84204    <dt id=refsRFC5280>[RFC5280]</dt>
   84205    <dd><cite><a href=http://www.ietf.org/rfc/rfc5280.txt>Internet
   84206    X.509 Public Key Infrastructure Certificate and Certificate
   84207    Revocation List (CRL) Profile</a></cite>, D. Cooper, S. Santesson,
   84208    S. Farrell, S. Boeyen, R. Housley, W. Polk. IETF.</dd>
   84209 
   84210    <dt id=refsRFC5322>[RFC5322]</dt>
   84211    <dd><cite><a href=http://www.ietf.org/rfc/rfc5322.txt>Internet Message
   84212    Format</a></cite>, P. Resnick. IETF.</dd>
   84213 
   84214    <dt id=refsRFC5724>[RFC5724]</dt>
   84215    <dd><cite><a href=http://www.ietf.org/rfc/rfc5724.txt>URI Scheme
   84216    for Global System for Mobile Communications (GSM) Short Message
   84217    Service (SMS)</a></cite>, E. Wilde, A. Vaha-Sipila. IETF.</dd>
   84218 
   84219    <dt id=refsSCSU>[SCSU]</dt>
   84220    <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr6/>UTR #6: A Standard
   84221    Compression Scheme For Unicode</a></cite>, M. Wolf, K. Whistler,
   84222    C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.</dd>
   84223 
   84224    <dt id=refsSELECTORS>[SELECTORS]</dt>
   84225    <dd><cite><a href=http://www.w3.org/TR/css3-selectors>Selectors</a></cite>,
   84226    T. &Ccedil;elik, E. Etemad, D.  Glazman, I. Hickson, P. Linss,
   84227    J. Williams. W3C.</dd>
   84228 
   84229    <dt id=refsSHIFTJIS>[SHIFTJIS]</dt>
   84230    <dd><cite>JIS X0208: 7-bit and 8-bit double byte coded KANJI sets
   84231    for information interchange</cite>. Japanese Standards Association.</dd>
   84232 
   84233    <dt id=refsSRGB>[SRGB]</dt>
   84234    <dd><cite lang=en-GB><a href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408!OpenDocument&Click=">IEC
   84235    61966-2-1: Multimedia systems and equipment &mdash; Colour measurement
   84236    and management &mdash; Part 2-1: Colour management &mdash; Default RGB colour
   84237    space &mdash; sRGB</a></cite>. IEC.</dd>
   84238 
   84239    <dt id=refsSVG>[SVG]</dt>
   84240    <dd><cite><a href=http://www.w3.org/TR/SVGTiny12/>Scalable Vector
   84241    Graphics (SVG) Tiny 1.2 Specification</a></cite>, O. Andersson,
   84242    R. Berjon, E. Dahlstr&ouml;m, A. Emmons, J. Ferraiolo, A. Grasso,
   84243    V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack,
   84244    A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers,
   84245    A. Shellshear. W3C.</dd>
   84246 
   84247    <dt id=refsTIS620>[TIS620]</dt>
   84248    <dd><cite><a href=http://www.nectec.or.th/it-standards/std620/std620.htm>UDC
   84249    681.3.04:003.62</a></cite>. Thai Industrial Standards Institute,
   84250    Ministry of Industry, Royal Thai Government. ISBN
   84251    974-606-153-4.</dd>
   84252 
   84253    <dt id=refsUAAG>[UAAG]</dt>
   84254    <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/UAAG20/>Web Content Accessibility
   84255    Guidelines (UAAG) 2.0</a></cite>, J. Allan, K. Ford, J. Richards,
   84256    J. Spellman. W3C.</dd>
   84257 
   84258    <dt id=refsUNICODE>[UNICODE]</dt>
   84259    <dd><cite><a href=http://www.unicode.org/versions/>The Unicode Standard</a></cite>. Unicode Consortium.</dd>
   84260 
   84261    <dt id=refsUNIVCHARDET>[UNIVCHARDET]</dt>
   84262    <dd>(Non-normative) <cite><a href=http://www.mozilla.org/projects/intl/UniversalCharsetDetection.html>A
   84263    composite approach to language/encoding
   84264    detection</a></cite>, S. Li, K. Momoi. Netscape. In
   84265    <cite>Proceedings of the 19th International Unicode
   84266    Conference</cite>.</dd>
   84267 
   84268    <dt id=refsUTF7>[UTF7]</dt>
   84269    <dd><cite><a href=http://www.ietf.org/rfc/rfc2152.txt>UTF-7: A
   84270    Mail-Safe Transformation Format of Unicode</a></cite>,
   84271    D. Goldsmith, M. Davis. IETF.</dd>
   84272 
   84273    <dt id=refsUTF8DET>[UTF8DET]</dt>
   84274    <dd>(Non-normative) <cite><a href=http://www.w3.org/International/questions/qa-forms-utf-8>Multilingual
   84275    form encoding</a></cite>, M. D&uuml;rst. W3C.</dd>
   84276 
   84277    <dt id=refsUTR36>[UTR36]</dt>
   84278    <dd>(Non-normative) <cite><a href=http://www.unicode.org/reports/tr36/>UTR #36: Unicode
   84279    Security Considerations</a></cite>, M. Davis, M. Suignard. Unicode
   84280    Consortium.</dd>
   84281 
   84282    <dt id=refsWCAG>[WCAG]</dt>
   84283    <dd>(Non-normative) <cite><a href=http://www.w3.org/TR/WCAG20/>Web Content Accessibility
   84284    Guidelines (WCAG) 2.0</a></cite>, B. Caldwell, M. Cooper, L. Reid,
   84285    G. Vanderheiden. W3C.</dd>
   84286 
   84287    <dt id=refsWEBIDL>[WEBIDL]</dt>
   84288    <!--
   84289    <dd><cite><a href="http://www.w3.org/TR/WebIDL/">Web
   84290    IDL</a></cite>, C. McCormack. W3C.</dd>
   84291    -->
   84292    <dd><cite><a href=http://dev.w3.org/2006/webapi/WebIDL/>Web
   84293    IDL</a></cite>, C. McCormack. W3C.</dd>
   84294 
   84295    <dt id=refsWEBLINK>[WEBLINK]</dt>
   84296    <dd><cite><a href=http://tools.ietf.org/html/draft-nottingham-http-link-header>Web
   84297    Linking</a></cite>, M. Nottingham. IETF.</dd>
   84298 
   84299    <dt id=refsWEBSOCKET>[WEBSOCKET]</dt>
   84300    <!--
   84301    <dd><cite><a href="http://www.w3.org/TR/websockets/">The WebSocket
   84302    API</a></cite>, I. Hickson. W3C.</dd>
   84303    -->
   84304    <dd><cite><a href=http://dev.w3.org/html5/websockets/>The WebSocket
   84305    API</a></cite>, I. Hickson. W3C.</dd>
   84306 
   84307    <dt id=refsWEBSQL>[WEBSQL]</dt>
   84308    <dd><cite><a href=http://dev.w3.org/html5/webdatabase/>Web SQL
   84309    Database</a></cite>, I. Hickson. W3C.</dd>
   84310 
   84311    <dt id=refsWEBSTORAGE>[WEBSTORAGE]</dt>
   84312    <dd><cite><a href=http://dev.w3.org/html5/webstorage/>Web
   84313    Storage</a></cite>, I. Hickson. W3C.</dd>
   84314 
   84315    <dt id=refsWEBWORKERS>[WEBWORKERS]</dt>
   84316    <!--
   84317    <dd><cite><a
   84318    href="http://www.w3.org/TR/webworkers/">Workers</a></cite>,
   84319    I. Hickson. W3C.</dd>
   84320    -->
   84321    <dd><cite><a href=http://dev.w3.org/html5/workers/>Web
   84322    Workers</a></cite>, I. Hickson. W3C.</dd>
   84323 
   84324    <dt id=refsWHATWGWIKI>[WHATWGWIKI]</dt>
   84325    <dd><cite><a href=http://wiki.whatwg.org/>The WHATWG Wiki</a></cite>. WHATWG.</dd>
   84326 
   84327    <dt id=refsWIN1252>[WIN1252]</dt>
   84328    <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/1252.htm>Windows 1252</a></cite>. Microsoft.</dd>
   84329 
   84330    <dt id=refsWIN1254>[WIN1254]</dt>
   84331    <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/1254.htm>Windows 1254</a></cite>. Microsoft.</dd>
   84332 
   84333    <dt id=refsWIN31J>[WIN31J]</dt>
   84334    <dd><cite><a href=http://www.microsoft.com/globaldev/reference/dbcs/932.mspx>Windows Codepage 932</a></cite>. Microsoft.</dd>
   84335 
   84336    <dt id=refsWIN874>[WIN874]</dt>
   84337    <dd><cite><a href=http://www.microsoft.com/globaldev/reference/sbcs/874.mspx>Windows 874</a></cite>. Microsoft.</dd>
   84338 
   84339    <dt id=refsWIN949>[WIN949]</dt>
   84340    <dd><cite><a href=http://www.microsoft.com/globaldev/reference/dbcs/949.mspx>Windows Codepage 949</a></cite>. Microsoft.</dd>
   84341 
   84342    <dt id=refsX121>[X121]</dt>
   84343    <dd><cite>Recommendation X.121 &mdash; International Numbering Plan for
   84344    Public Data Networks</cite>, CCITT Blue Book, Fascicle VIII.3,
   84345    pp. 317-332.</dd>
   84346 
   84347    <dt id=refsX690>[X690]</dt>
   84348    <dd><cite><a href=http://www.itu.int/ITU-T/studygroups/com17/languages/X.690-0207.pdf>Recommendation
   84349    X.690 &mdash; Information Technology &mdash; ASN.1 Encoding Rules &mdash;
   84350    Specification of Basic Encoding Rules (BER), Canonical Encoding
   84351    Rules (CER), and Distinguished Encoding Rules
   84352    (DER)</a></cite>. International Telecommunication Union.</dd>
   84353 
   84354    <dt id=refsXHR>[XHR]</dt>
   84355    <!--
   84356    <dd><cite><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest
   84357    Object</a></cite>, A. van Kesteren. W3C.</dd>
   84358    -->
   84359    <dd><cite><a href=http://dev.w3.org/2006/webapi/XMLHttpRequest-2/><code>XMLHttpRequest</code></a></cite>,
   84360    A. van Kesteren. W3C.</dd>
   84361 
   84362    <dt id=refsXML>[XML]</dt>
   84363    <dd><cite><a href=http://www.w3.org/TR/xml/>Extensible Markup
   84364    Language</a></cite>, T. Bray, J. Paoli, C. Sperberg-McQueen,
   84365    E. Maler, F. Yergeau. W3C.</dd>
   84366 
   84367    <dt id=refsXMLBASE>[XMLBASE]</dt>
   84368    <dd><cite><a href=http://www.w3.org/TR/xmlbase/>XML
   84369    Base</a></cite>, J. Marsh, R. Tobin. W3C.</dd>
   84370 
   84371    <dt id=refsXMLNS>[XMLNS]</dt>
   84372    <dd><cite><a href=http://www.w3.org/TR/xml-names/>Namespaces in
   84373    XML</a></cite>, T. Bray, D. Hollander, A. Layman, R. Tobin. W3C.</dd>
   84374 
   84375    <dt id=refsXPATH10>[XPATH10]</dt>
   84376    <dd><cite><a href=http://www.w3.org/TR/1999/REC-xpath-19991116>XML Path
   84377    Language (XPath) Version 1.0</a></cite>, J. Clark, S. DeRose. W3C.</dd>
   84378 
   84379    <dt id=refsXSLT10>[XSLT10]</dt>
   84380    <dd><cite><a href=http://www.w3.org/TR/1999/REC-xslt-19991116>XSL
   84381    Transformations (XSLT) Version 1.0</a></cite>, J. Clark. W3C.</dd>
   84382 
   84383 
   84384 
   84385   </dl><h2 class=no-num id=acknowledgements>Acknowledgements</h2> <!-- ACKS -->
   84386 
   84387   <p>Thanks to
   84388 
   84389   Aankhen,
   84390   Aaron Boodman,
   84391   Aaron Leventhal,
   84392   Adam Barth,
   84393   Adam de Boor,
   84394   Adam Hepton,
   84395   Adam Roben,
   84396   Addison Phillips,
   84397   Adele Peterson,
   84398   Adrian Bateman,
   84399   Adrian Sutton,
   84400   Agust&iacute;n Fern&aacute;ndez,
   84401   Ajai Tirumali,
   84402   Akatsuki Kitamura,
   84403   Alan Plum,
   84404   Alastair Campbell,
   84405   Alex Bishop,
   84406   Alex Nicolaou,
   84407   Alex Rousskov,
   84408   Alexander J. Vincent,
   84409   Alexey Feldgendler,
   84410   &#1040;&#1083;&#1077;&#1082;&#1089;&#1077;&#1081; &#1055;&#1088;&#1086;&#1089;&#1082;&#1091;&#1088;&#1103;&#1082;&#1086;&#1074; (Alexey Proskuryakov),
   84411   Alexis Deveria,
   84412   Allan Clements,
   84413   Amos Jeffries,
   84414   Anders Carlsson,
   84415   Andreas<!-- mqmq87 -->,
   84416   Andrei Popescu,
   84417   Andr&eacute; E. Veltstra,
   84418   Andrew Clover,
   84419   Andrew Gove,
   84420   Andrew Grieve,
   84421   Andrew Oakley,
   84422   Andrew Sidwell,
   84423   Andrew Smith,
   84424   Andrew W. Hagen,
   84425   Andrey V. Lukyanov,
   84426   Andy Heydon,
   84427   Andy Palay,
   84428   Anne van Kesteren,
   84429   Anthony Boyd,
   84430   Anthony Bryan,
   84431   Anthony Hickson,
   84432   Anthony Ricaud,
   84433   Antti Koivisto,
   84434   Aron Spohr,
   84435   Arphen Lin,
   84436   Aryeh Gregor,
   84437   Asbj&oslash;rn Ulsberg,
   84438   Ashley Sheridan,
   84439   Atsushi Takayama,
   84440   Aurelien Levy,
   84441   Ave Wrigley,
   84442   Ben Boyle,
   84443   Ben Godfrey,
   84444   Ben Lerner,
   84445   Ben Leslie,
   84446   Ben Meadowcroft,
   84447   Ben Millard,
   84448   Benjamin Carl Wiley Sittler,
   84449   Benjamin Hawkes-Lewis,
   84450   Bert Bos,
   84451   Bijan Parsia,
   84452   Bil Corry,
   84453   Bill Mason,
   84454   Bill McCoy,
   84455   Billy Wong,
   84456   Bjartur Thorlacius,
   84457   Bj&ouml;rn H&ouml;hrmann,
   84458   Blake Frantz,
   84459   Boris Zbarsky,
   84460   Brad Fults,
   84461   Brad Neuberg,
   84462   Brady Eidson,
   84463   Brendan Eich,
   84464   Brenton Simpson,
   84465   Brett Wilson,
   84466   Brett Zamir,
   84467   Brian Campbell,
   84468   Brian Korver,
   84469   Brian Kuhn,
   84470   Brian Ryner,
   84471   Brian Smith,
   84472   Brian Wilson,
   84473   Bryan Sullivan,
   84474   Bruce D'Arcus,
   84475   Bruce Lawson,
   84476   Bruce Miller,
   84477   C. Williams,
   84478   Cameron McCormack,
   84479   Cao Yipeng,
   84480   Carlos Gabriel Cardona,
   84481   Carlos Perell&oacute; Mar&iacute;n,
   84482   Chao Cai,
   84483   &#50980;&#49437;&#52268; (Channy Yun),
   84484   Charl van Niekerk,
   84485   Charles Iliya Krempeaux,
   84486   Charles McCathieNevile,
   84487   Chris Apers,
   84488   Chris Cressman,
   84489   Chris Evans,
   84490   Chris Morris,
   84491   Chris Pearce,
   84492   Christian Biesinger,
   84493   Christian Johansen,
   84494   Christian Schmidt,
   84495   Christopher Aillon,
   84496   Chriswa,
   84497   Cole Robison,
   84498   Colin Fine,
   84499   Collin Jackson,
   84500   Corprew Reed,
   84501   Craig Cockburn,
   84502   Csaba Gabor,
   84503   Csaba Marton,
   84504   Daniel Barclay,
   84505   Daniel Bratell,
   84506   Daniel Brooks,
   84507   Daniel Brumbaugh Keeney,
   84508   Daniel Cheng,
   84509   Daniel Davis,
   84510   Daniel Glazman,
   84511   Daniel Peng,
   84512   Daniel Schattenkirchner,
   84513   Daniel Sp&aring;ng,
   84514   Daniel Steinberg,
   84515   Danny Sullivan,
   84516   Darin Adler,
   84517   Darin Fisher,
   84518   Darxus,
   84519   Dave Camp,
   84520   Dave Hodder,
   84521   Dave Lampton,
   84522   Dave Singer,
   84523   Dave Townsend<!-- Mossop on moz irc -->,
   84524   David Baron,
   84525   David Bloom,
   84526   David Bruant,
   84527   David Carlisle,
   84528   David E. Cleary,
   84529   David Egan Evans,
   84530   David Flanagan,
   84531   David Gerard,
   84532   David H&aring;s&auml;ther,
   84533   David Hyatt,
   84534   David I. Lehn,
   84535   David Matja,
   84536   David Remahl,
   84537   David Smith,
   84538   David Woolley,
   84539   DeWitt Clinton,
   84540   Dean Edridge,
   84541   Dean Edwards,
   84542   Debi Orton,
   84543   Derek Featherstone,
   84544   Devdatta,
   84545   Dimitri Glazkov,
   84546   Dimitry Golubovsky,
   84547   Divya Manian,
   84548   dolphinling,
   84549   Dominique Haza&euml;l-Massieux,
   84550   Don Brutzman,
   84551   Doron Rosenberg,
   84552   Doug Kramer,
   84553   Drew Wilson,
   84554   Edmund Lai,
   84555   Eduard Pascual,
   84556   Eduardo Vela,
   84557   Edward O'Connor,
   84558   Edward Welbourne,
   84559   Edward Z. Yang,
   84560   Eira Monstad,
   84561   Eitan Adler,
   84562   Eliot Graff,
   84563   Elizabeth Castro,
   84564   Elliott Sprehn,
   84565   Elliotte Harold,
   84566   Eric Carlson,
   84567   Eric Law,
   84568   Eric Rescorla,
   84569   Erik Arvidsson,
   84570   Evan Martin,
   84571   Evan Prodromou,
   84572   Evert,
   84573   fantasai,
   84574   Felix Sasaki,
   84575   Francesco Schwarz,
   84576   Francis Brosnan Blazquez,
   84577   Franck 'Shift' Qu&eacute;lain,
   84578   Frank Barchard,
   84579   &#40284;&#39164;&#25991;&#25935; (Fumitoshi Ukai),
   84580   Futomi Hatano,
   84581   Gavin Carothers,
   84582   Gareth Rees,
   84583   Garrett Smith,
   84584   Geoffrey Garen,
   84585   Geoffrey Sneddon,
   84586   George Lund,
   84587   Gianmarco Armellin,
   84588   Giovanni Campagna,
   84589   Graham Klyne,
   84590   Greg Botten,
   84591   Greg Houston,
   84592   Greg Wilkins,
   84593   Gregg Tavares,
   84594   Grey,
   84595   Gytis Jakutonis,
   84596   H&aring;kon Wium Lie,
   84597   Hallvord Reiar Michaelsen Steen,
   84598   Hans S. T&oslash;mmerhalt,
   84599   Henri Sivonen,
   84600   Henrik Lied,
   84601   Henry Mason,
   84602   Hugh Winkler,
   84603   Ian Bicking,
   84604   Ian Davis,
   84605   Ignacio Javier,
   84606   Ivan Enderlin,
   84607   Ivo Emanuel Gon&ccedil;alves,
   84608   J. King,
   84609   Jacques Distler,
   84610   James Craig,
   84611   James Graham,
   84612   James Justin Harrell,
   84613   James M Snell,
   84614   James Perrett,
   84615   James Robinson,
   84616   Jan-Klaas Kollhof,
   84617   Jason Kersey,
   84618   Jason Lustig,
   84619   Jason White,
   84620   Jasper Bryant-Greene,
   84621   Jatinder Mann,
   84622   Jed Hartman,
   84623   Jeff Balogh,
   84624   Jeff Cutsinger,
   84625   Jeff Schiller,
   84626   Jeff Walden,
   84627   Jeffrey Zeldman,
   84628   &#32993;&#24935;&#37586; (Jennifer Braithwaite),
   84629   Jens Bannmann,
   84630   Jens Fendler,
   84631   Jens Lindstr&ouml;m,
   84632   Jens Meiert,
   84633   Jeremy Keith,
   84634   Jeremy Orlow,
   84635   Jeroen van der Meer,
   84636   Jian Li,
   84637   Jim Jewett,
   84638   Jim Ley,
   84639   Jim Meehan,
   84640   Jjgod Jiang,
   84641   Jo&atilde;o Eiras,
   84642   Joe Clark,
   84643   Joe Gregorio,
   84644   Joel Spolsky,
   84645   Johan Herland,
   84646   John Boyer,
   84647   John Bussjaeger,
   84648   John Carpenter,
   84649   John Fallows,
   84650   John Foliot,
   84651   John Harding,
   84652   John Keiser,
   84653   John Snyders,
   84654   John-Mark Bell,
   84655   Johnny Stenback,
   84656   Jon Ferraiolo,
   84657   Jon Gibbins,
   84658   Jon Perlow,
   84659   Jonas Sicking,
   84660   Jonathan Cook,
   84661   Jonathan Rees,
   84662   Jonathan Worent,
   84663   Jonny Axelsson,
   84664   Jorgen Horstink,
   84665   Jorunn Danielsen Newth,
   84666   Joseph Kesselman,
   84667   Joseph Pecoraro,
   84668   Josh Aas,
   84669   Josh Levenberg,
   84670   Joshua Randall,
   84671   Jukka K. Korpela,
   84672   Jules Cl&eacute;ment-Ripoche,
   84673   Julian Reschke,
   84674   Justin Lebar,
   84675   Justin Sinclair,
   84676   Kai Hendry,
   84677   Kartikaya Gupta,
   84678   Kathy Walton,
   84679   Kelly Norton,
   84680   Kevin Benson,
   84681   Korn&eacute;l P&aacute;l,
   84682   Kornel Lesinski,
   84683   Kristof Zelechovski,
   84684   &#40658;&#28580;&#21083;&#24535; (Kurosawa Takeshi),
   84685   Kyle Hofmann<!-- Ozob -->,
   84686   L&eacute;onard Bouchet,
   84687   Lachlan Hunt,
   84688   Larry Masinter,
   84689   Larry Page,
   84690   Lars Gunther<!-- Keryx Web -->,
   84691   Lars Solberg,
   84692   Laura Granka,
   84693   Laura L. Carlson,
   84694   Laura Wisewell,
   84695   Laurens Holst,
   84696   Lee Kowalkowski,
   84697   Leif Halvard Silli,
   84698   Lenny Domnitser,
   84699   Leons Petrazickis,
   84700   Lobotom Dysmon,
   84701   Logan<!-- on moz irc -->,
   84702   Loune,
   84703   Luke Kenneth Casson Leighton,
   84704   Maciej Stachowiak,
   84705   Magnus Kristiansen<!-- Dashiva -->,
   84706   Maik Merten,
   84707   Malcolm Rowe,
   84708   Mark Birbeck,
   84709   Mark Miller,
   84710   Mark Nottingham,
   84711   Mark Pilgrim,
   84712   Mark Rowe<!--bdash-->,
   84713   Mark Schenk,
   84714   Mark Wilton-Jones,
   84715   Martijn Wargers,
   84716   Martin Atkins,
   84717   Martin D&uuml;rst,
   84718   Martin Honnen,
   84719   Martin Kutschker,
   84720   Martin Thomson,
   84721   Masataka Yakura,
   84722   Mathieu Henri,
   84723   Matt Schmidt,
   84724   Matt Wright,
   84725   Matthew Gregan,
   84726   Matthew Mastracci,
   84727   Matthew Raymond,
   84728   Matthew Thomas,
   84729   Mattias Waldau,
   84730   Max Romantschuk,
   84731   Menno van Slooten,
   84732   Micah Dubinko,
   84733   Michael 'Ratt' Iannarelli,
   84734   Michael A. Nachbaur,
   84735   Michael A. Puls II<!--Shadow2531-->,
   84736   Michael Carter,
   84737   Michael Daskalov,
   84738   Michael Enright,
   84739   Michael Gratton,
   84740   Michael Nordman,
   84741   Michael Powers,
   84742   Michael(tm) Smith,
   84743   Michal Zalewski,
   84744   Michel Fortin,
   84745   Michelangelo De Simone,
   84746   Michiel van der Blonk,
   84747   Mihai &#350;ucan<!-- from ROBO Design -->,
   84748   Mike Brown,
   84749   Mike Dierken<!-- S. Mike Dierken -->,
   84750   Mike Dixon,
   84751   Mike Schinkel,
   84752   Mike Shaver,
   84753   Mikko Rantalainen,
   84754   Mohamed Zergaoui<!-- Innovimax SARL -->,
   84755   Mounir Lamouri,
   84756   Ms2ger,
   84757   NARUSE Yui,
   84758   Neil Deakin,
   84759   Neil Rashbrook,
   84760   Neil Soiffer,
   84761   Nicholas Shanks,
   84762   Nicholas Stimpson,
   84763   Nicholas Zakas,
   84764   Nicolas Gallagher,
   84765   Noah Mendelsohn,
   84766   Noah Slater,
   84767   Ojan Vafai,
   84768   Olaf Hoffmann,
   84769   Olav Junker Kj&aelig;r,
   84770   Old&#345;ich Vete&scaron;n&iacute;k,
   84771   Oliver Hunt,
   84772   Oliver Rigby,
   84773   Olivier Gendrin,
   84774   Olli Pettay,
   84775   Patrick H. Lauke,
   84776   Paul Norman,
   84777   Per-Erik Brodin,
   84778   Perry Smith,
   84779   Peter Karlsson,
   84780   Peter Kasting,
   84781   Peter Stark,
   84782   Peter-Paul Koch,
   84783   Phil Pickering,
   84784   Philip J&auml;genstedt,
   84785   Philip Taylor,
   84786   Philip TAYLOR<!-- a different one -->,
   84787   Prateek Rungta,
   84788   Pravir Gupta,
   84789   Rachid Finge,
   84790   Rajas Moonka,
   84791   Ralf Stoltze,
   84792   Ralph Giles,
   84793   Raphael Champeimont,
   84794   Remco,
   84795   Remy Sharp,
   84796   Rene Saarsoo,
   84797   Rene Stach,
   84798   Ric Hardacre,
   84799   Rich Doughty,
   84800   Richard Ishida,
   84801   Rigo Wenning,
   84802   Rikkert Koppes,
   84803   Rimantas Liubertas,
   84804   Riona Macnamara,
   84805   Rob Ennals,
   84806   Rob Jellinghaus,
   84807   Robert Blaut,
   84808   Robert Collins,
   84809   Robert O'Callahan,
   84810   Robert Sayre,
   84811   Robin Berjon,
   84812   Roland Steiner,
   84813   Roman Ivanov,
   84814   Roy Fielding,
   84815   Ryan King,
   84816   S. Mike Dierken,
   84817   Salvatore Loreto,
   84818   Sam Dutton,
   84819   Sam Kuper,
   84820   Sam Ruby,
   84821   Sam Weinig,
   84822   Sander van Lambalgen,
   84823   Sarven Capadisli,
   84824   Scott Gonz&aacute;lez,
   84825   Scott Hess,
   84826   Sean Fraser,
   84827   Sean Hogan,
   84828   Sean Knapp,
   84829   Sebastian Markb&aring;ge,
   84830   Sebastian Schnitzenbaumer,
   84831   Seth Call,
   84832   Shanti Rao,
   84833   Shaun Inman,
   84834   Shiki Okasaka,
   84835   Sierk Bornemann,
   84836   Sigbj&oslash;rn Vik,
   84837   Silvia Pfeiffer,
   84838   Simon Montagu,
   84839   Simon Pieters,
   84840   Simon Spiegel,
   84841   skeww, <!-- on reddit -->
   84842   Stefan Haustein,
   84843   Stefan Santesson,
   84844   Steffen Meschkat,
   84845   Stephen Ma,
   84846   Steve Faulkner,
   84847   Steve Runyon,
   84848   Steven Bennett,
   84849   Steven Garrity,
   84850   Steven Tate,
   84851   Stewart Brodie,
   84852   Stuart Ballard,
   84853   Stuart Parmenter,
   84854   Subramanian Peruvemba,
   84855   Sunava Dutta,
   84856   Susan Borgrink,
   84857   Susan <!--G.--> Lesch,
   84858   Sylvain Pasche,
   84859   T. J. Crowder,
   84860   <span lang=tr title="">Tantek &Ccedil;elik</span>,
   84861   &#30000;&#26449;&#20581;&#20154; (TAMURA Kent),
   84862   Ted Mielczarek,
   84863   Terrence Wood,
   84864   Thomas Broyer,
   84865   Thomas O'Connor,
   84866   Tim Altman,
   84867   Tim Johansson,
   84868   Toby Inkster,
   84869   Todd Moody,
   84870   Tom Pike,
   84871   Tommy Thorsen,
   84872   Travis Leithead,
   84873   Tyler Close,
   84874   Vladimir Katardjiev,
   84875   Vladimir Vuki&#263;evi&#263;,
   84876   voracity,
   84877   Wakaba,
   84878   Wayne Pollock,
   84879   Wellington Fernando de Macedo,
   84880   Will Levine,
   84881   William Swanson,
   84882   Wladimir Palant,
   84883   Wojciech Mach,
   84884   Wolfram Kriesing,
   84885   Yang Chen,
   84886   Yehuda Katz,
   84887   Yi-An Huang,
   84888   Yngve Nysaeter Pettersen,
   84889   Yuzo Fujishima,
   84890   Zhenbin Xu,
   84891   Zoltan Herczeg,
   84892   and
   84893   &Oslash;istein E. Andersen,
   84894 
   84895   for their useful comments, both large and small, that have led to
   84896   changes to this specification over the years.</p>
   84897 
   84898   <p>Thanks also to everyone who has ever posted about HTML to their
   84899   blogs, public mailing lists, or forums, including all the
   84900   contributors to the <a href=http://www.w3.org/html/wg/lists/>various W3C HTML WG
   84901   lists</a> and the <a href=http://www.whatwg.org/mailing-list>various WHATWG lists</a>.
   84902 
   84903   <p>Special thanks to Richard Williamson for creating the first
   84904   implementation of <code><a href=#the-canvas-element>canvas</a></code> in Safari, from which the
   84905   canvas feature was designed.</p>
   84906 
   84907   <p>Special thanks also to the Microsoft employees who first
   84908   implemented the event-based drag-and-drop mechanism, <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code>, and other
   84909   features first widely deployed by the Windows Internet Explorer
   84910   browser.</p>
   84911 
   84912   <p>Thanks to the participants of the microdata usability study for
   84913   allowing us to use their mistakes as a guide for designing the
   84914   microdata feature.</p>
   84915 
   84916 <!--TT-->
   84917   <p>Thanks to the SubRip community, including in particular Zuggy and
   84918   ai4spam, for their work on the SubRip software program whose SRT
   84919   file format was used as the basis for the WebSRT timed track file
   84920   format.</p>
   84921 <!--TT-->
   84922 
   84923   <div class=impl>
   84924 
   84925   <p>Special thanks and $10,000 to David Hyatt who came up with a
   84926   broken implementation of the <a href=#adoptionAgency>adoption
   84927   agency algorithm</a> that the editor had to reverse engineer and fix
   84928   before using it in the parsing section.</p>
   84929 
   84930   </div>
   84931 
   84932   <p>Thanks to the many sources that provided inspiration for the
   84933   examples used in the specification.</p>
   84934 
   84935 
   84936   <p>Thanks also to the Microsoft blogging community for some ideas,
   84937   to the attendees of the W3C Workshop on Web Applications and
   84938   Compound Documents for inspiration, to the #mrt crew, the #mrt.no
   84939   crew, and the #whatwg crew, and to Pillar and Hedral for their ideas
   84940   and support.</p>
   84941 
   84942   <!-- Hopefully Kam won't notice he's covered by these
   84943   acknowledgements three times! -->
   84944 
   84945 <!--
   84946  v2  * library of resources:
   84947         var library = new ZipFile("data.zip");
   84948         library.onload = function() {
   84949           var sound1 = library.getAudio("sound1.wav"); // returns an Audio object
   84950           var image1 = library.getImage("image1.png"); // returns an HTMLImageElement
   84951           var doc1 = library.getXMLDocument("doc1.xml"); // returns a Document
   84952           var doc2 = library.getHTMLDocument("doc1.html"); // returns an HTMLDocument
   84953         }
   84954        or:
   84955         var library = new ResourceLoader("data.zip");
   84956         library.add("moredata.zip");
   84957         library.onload = function() { ... }
   84958         library.onloading = function() {
   84959           reportLoadProgress(library.progress); // 0.0 .. 1.0
   84960         }
   84961        or:
   84962         var library = new AudioZip("sounds.zip");
   84963         library.onload = function() {
   84964           var sound1 = library["sound1.wav"];
   84965           sound.play();
   84966         }
   84967  v2  * [onclick] should make element focusable; enter should send onclick ?
   84968  v2  * a fairly common situation for web authors is to have two lists, where
   84969        the contents of the second depends on the value of the first. Is there
   84970        any way we could extend the current model to include this functionality?
   84971        (e.g. bugzilla product/component ui)
   84972  v2  * quick-searchable select
   84973  v2  * include/exclude selectors (two multi-select columns with arrows to
   84974        move selected items) and that sort of thing.
   84975        http://slashdot.org/comments.pl?sid=110240&cid=9357022
   84976  v2  * Oh, and forms need a standardized Help widget/icon. I know I can
   84977        turn my cursor into a question mark, but I'm looking for something
   84978        simple and pervasive. Maybe you can wrap fields in a help tag, just
   84979        as you do for fieldsets. And in that help tag, attributes are
   84980        available that allow for a nice, formatted, clean, full help text
   84981        popup/area/thing.
   84982        http://slashdot.org/comments.pl?sid=110240&cid=9359006
   84983  v2  * Validating only part of a form. - Anja Lehmann
   84984  v2  * Reminder to add a way to expose access keys in buttons, i.e.
   84985        Sub&mit where & signifies the m is the access key to use. Possibly
   84986        automatic? <input accesskey="m" value="Submit"> browser would be
   84987        smart enough to underline the first instance of the access key if
   84988        it exists (case insensitive)? - kerz
   84989        [or deprecate the lot (->web apps)]
   84990  v2  * need an attribute that says "the children of this element are in
   84991        their own tabbing universe, tabindex should be relative to each
   84992        other, not to the document"
   84993        -> web apps?
   84994  v2  * make select widgets have multiple columns
   84995        or ->web apps with list view
   84996  v2  * required as a group (one of the following must be available):
   84997        + i propose something like the following:
   84998            <input type="text" group="contact" name="voicephone"> Voice phone
   84999            <input type="text" group="contact" name="fax"> Fax
   85000            <input type="text" group="contact" name="mobile"> Mobile phone
   85001            <input type="text" group="contact" name="email"> E-mail
   85002          if the user fills out none of the form fields in the "contact"
   85003          group, an error message is shown and the form is not submitted.
   85004          - Peter-Paul Koch
   85005  v2  * formatting of number fields, text fields, etc, so that when the
   85006        field is not focused, the value is displayed differently. Seems
   85007        like this would also be useful e.g. for <output> or something so
   85008        you can display localised dates, etc.
   85009  v2  * being able to select date range (from day x to day y)
   85010  v2  * ways of visualizing a linefeed in a <textarea> so it looks different
   85011        from wrapping text
   85012  v2  * all login systems have
   85013          1. enter username and password
   85014          2. create new account
   85015          3. lost password
   85016        some way of integrating this into one system, since it's so common
   85017  v2  * way of identifying different sorts of mailadresses
   85018          a) mailing-list
   85019          b) person
   85020          c) department in a company ("support", "marketing" and such)
   85021          d) general mail (like "info", "mail", "contact" and such)
   85022          e) other sorts of groupings
   85023        (or ->web apps; this is talking about in mailto: links, I think)
   85024  v2  * hotswapping login identities like in windows xp
   85025          you are logged in on operamail.com, and you want to check the mail
   85026          of another user. somehow, combined with the wand or whatever,
   85027          the browser will remember the login page, and it can re-submit it
   85028          without having to load the initial page (saving time)
   85029  v2  * provide different measuring systems, like having the html indicate
   85030        fluid in both fluid ounces and liters, and the browser can display
   85031        one or the other based on regional settings in the browser or ui,
   85032        display conversions in a tooltip, or let the user decide which
   85033        format to display.
   85034  v2  * indicate "x days ago" or "y days into the future" rather than date
   85035  v2  * input control for anniversaries
   85036  v2  * only submit fields that have changed, or a way to include in the
   85037        submission a list of which form controls were changed from their
   85038        default value
   85039  v2  * have a way of marking the first option of a <select> as the default
   85040        but have it not satisfy a new required="" attribute on <select> so
   85041        that you can have selects that require a valid value.
   85042  v2  * type="time" value="now"
   85043  v2  * add something to type="number" to support basic currency and unit
   85044        formatting of input
   85045  v2  * <fieldset enabled-if-checked="myCheckboxOrRadioButton">
   85046        ...to allow sections to only be enabled if a radio button makes it
   85047        relevant, for instance.
   85048  v2  * Yan Morin proposed a multi-column dropdown <select> or <datalist>:
   85049          _________________
   85050         |_New_York______|V|_________________  <- input  with a table link and a down arrow
   85051         |_City__________|_State_|_Country_|_| <- header of the table
   85052         | Montreal      |  QC   | Canada  |A| <- top arrow of the scroll
   85053         |>New York     <|  NY   | US      | | <- selected row
   85054         | Washington    |  DC   | US      |X| <- cursor scroll
   85055         | San Francisco |  CA   | US      | |
   85056         |_Toronto_______|__ON___|_Canada__|V| <- bottom arrow of the scroll
   85057 
   85058  v2  * add for="" attribute to <input type="password"> so that you can
   85059        link usernames and passwords. (Jonas Sicking)
   85060  v2  * value for unchecked checkbox?
   85061  v2  * A way to specify the default button - Michael Gratton
   85062  v2  * <fieldset readonly>?
   85063  v2  * dolphinling suggests having a way to mark certain parts of a
   85064        form as being dependent on another (mutually exclusive parts of
   85065        a form)
   85066  v2  * expose the form data set, either as an object (on which one can
   85067        invoke the JSON serialiser), or in the form of a method on
   85068        HTMLFormElement that returns the form data set serialised
   85069        according to a particular encoding (defaulting to the form's
   85070        enctype="" one, probably). This would allow forms to be used
   85071        with XHR-like systems without having to manually construct the
   85072        form data set the way that is done today.
   85073 
   85074 Consistency in editorial style:
   85075  v2  * need to become consistent about whether or not to quote keyword
   85076        ("<code title="">foo</code>" vs <code>foo</code>)
   85077  v2  * make the spec consistent about whether the word "algorithm" is part of
   85078        an algorithm's name or not ("</dfn> algorithm", "</span> algorithm")
   85079  v2  * make the spec more consistent about its use of "hexadecimal"
   85080        and "base-sixteen", the order that 0-9 A-Z a-z is mentioned,
   85081        and the detail to which the spec explains how to interpret a
   85082        string as a hexadecimal number.
   85083  v2  * become more consistent about what markup we use to mark up
   85084        productions (nothing? <i>? <code>?)
   85085  v2  * use <code>Document</code> consistently instead of 'document'.
   85086  v2  * s/raise/throw/g
   85087  v2  * be clearer about arrays/lists/collections being zero-based
   85088        despite using the term "/index/th".
   85089  v2  * use the sample widgets:
   85090           <li><img alt="A text field with editable sections for each
   85091           value, with a button to pop up a dialog showing a calendar or
   85092           clock." src="sample-datetime-ui-2"></li>
   85093           <li><img alt="A calendar grid with a clock in the upper right
   85094           hand corner." src="sample-datetime-ui-3"></li>
   85095 -->
   85096  
   85097